claudeup 4.6.1 → 4.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claudeup",
-  "version": "4.6.1",
+  "version": "4.7.0",
   "description": "TUI tool for managing Claude Code plugins, MCPs, and configuration",
   "type": "module",
   "main": "src/main.tsx",

package/src/data/settings-catalog.js

@@ -186,13 +186,8 @@ export const SETTINGS_CATALOG = [
         description: "Adjust Claude's response style",
         category: "workflow",
         type: "select",
-        options: [
-            { label: "Default", value: "" },
-            { label: "Concise", value: "concise" },
-            { label: "Explanatory", value: "explanatory" },
-            { label: "Formal", value: "formal" },
-            { label: "Minimal", value: "minimal" },
-        ],
+        // Options populated dynamically from installed output-style plugins
+        options: [],
         storage: { type: "setting", key: "outputStyle" },
     },
     {

package/src/data/settings-catalog.ts

@@ -233,13 +233,8 @@ export const SETTINGS_CATALOG: SettingDefinition[] = [
 		description: "Adjust Claude's response style",
 		category: "workflow",
 		type: "select",
-		options: [
-			{ label: "Default", value: "" },
-			{ label: "Concise", value: "concise" },
-			{ label: "Explanatory", value: "explanatory" },
-			{ label: "Formal", value: "formal" },
-			{ label: "Minimal", value: "minimal" },
-		],
+		// Options populated dynamically from installed output-style plugins
+		options: [],
 		storage: { type: "setting", key: "outputStyle" },
 	},
 	{

package/src/opentui.d.ts

@@ -101,8 +101,10 @@ interface TextProps {
 }
 
 interface InputProps {
-	value: string;
-	onChange: (value: string) => void;
+	value?: string;
+	onChange?: (value: string) => void;
+	onInput?: (value: string) => void;
+	onSubmit?: ((value: string) => void) | undefined;
 	placeholder?: string;
 	focused?: boolean;
 	width?: number;
@@ -137,6 +139,9 @@ interface TabSelectProps {
 
 interface ScrollboxProps {
 	focused?: boolean;
+	height?: number | `${number}%` | "auto";
+	scrollY?: boolean;
+	scrollX?: boolean;
 	style?: {
 		rootOptions?: Record<string, unknown>;
 		wrapperOptions?: Record<string, unknown>;

package/src/services/settings-manager.js

@@ -1,3 +1,5 @@
+import * as fs from "fs";
+import * as path from "path";
 import { readSettings, writeSettings, readGlobalSettings, writeGlobalSettings, } from "./claude-settings.js";
 /** Read the current value of a setting from the given scope */
 export async function readSettingValue(setting, scope, projectPath) {
@@ -62,11 +64,6 @@ export async function writeSettingValue(setting, value, scope, projectPath) {
         }
     }
     else if (setting.storage.type === "attribution-text") {
-        const attr = settings.attribution;
-        // If attribution is explicitly disabled ({ commit: "", pr: "" }), do not overwrite it
-        if (attr && attr.commit === "" && attr.pr === "") {
-            return;
-        }
         if (value && value.trim().length > 0) {
             // Write custom text: commit gets a Co-Authored-By trailer + the text; pr gets the text
             settings.attribution = {
@@ -162,3 +159,85 @@ export async function readAllSettingsBothScopes(catalog, projectPath) {
     }
     return result;
 }
+/**
+ * Discover available output styles from installed plugins.
+ * Scans enabled plugins for outputStyles entries and *-output-style plugin names.
+ * Returns options suitable for a select setting.
+ */
+export async function discoverOutputStyles(projectPath) {
+    const styles = [
+        { label: "Default", value: "" },
+    ];
+    const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+    const cacheDir = path.join(homeDir, ".claude", "plugins", "cache");
+    // Collect enabled plugins from both scopes
+    const enabledPlugins = new Set();
+    try {
+        const userSettings = await readGlobalSettings();
+        for (const [k, v] of Object.entries(userSettings.enabledPlugins || {})) {
+            if (v)
+                enabledPlugins.add(k);
+        }
+    }
+    catch { }
+    try {
+        const projSettings = await readSettings(projectPath);
+        for (const [k, v] of Object.entries(projSettings.enabledPlugins || {})) {
+            if (v)
+                enabledPlugins.add(k);
+        }
+    }
+    catch { }
+    const seen = new Set();
+    for (const pluginId of enabledPlugins) {
+        const [pluginName, marketplace] = pluginId.split("@");
+        // Check if this is a dedicated output-style plugin (e.g. "explanatory-output-style")
+        if (pluginName.endsWith("-output-style")) {
+            const styleName = pluginName
+                .replace(/-output-style$/, "")
+                .split("-")
+                .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+                .join(" ");
+            if (!seen.has(styleName)) {
+                seen.add(styleName);
+                styles.push({ label: styleName, value: styleName });
+            }
+            continue;
+        }
+        // Check plugin.json for outputStyles entries
+        if (!marketplace)
+            continue;
+        const pluginDir = path.join(cacheDir, marketplace, pluginName);
+        try {
+            const versions = fs.readdirSync(pluginDir).sort();
+            const latest = versions[versions.length - 1];
+            if (!latest)
+                continue;
+            const manifestPath = path.join(pluginDir, latest, "plugin.json");
+            const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+            const outputStyles = manifest.outputStyles;
+            if (!outputStyles?.length)
+                continue;
+            for (const stylePath of outputStyles) {
+                const fullPath = path.join(pluginDir, latest, stylePath);
+                try {
+                    const content = fs.readFileSync(fullPath, "utf-8");
+                    const fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
+                    if (fmMatch) {
+                        const nameMatch = fmMatch[1].match(/^name:\s*(.+)$/m);
+                        if (nameMatch) {
+                            const name = nameMatch[1].trim();
+                            if (!seen.has(name)) {
+                                seen.add(name);
+                                styles.push({ label: name, value: name });
+                            }
+                        }
+                    }
+                }
+                catch { }
+            }
+        }
+        catch { }
+    }
+    return styles;
+}

package/src/services/settings-manager.ts

@@ -1,3 +1,5 @@
+import * as fs from "fs";
+import * as path from "path";
 import {
 	readSettings,
 	writeSettings,
@@ -80,11 +82,6 @@ export async function writeSettingValue(
 			delete (settings as any).attribution;
 		}
 	} else if (setting.storage.type === "attribution-text") {
-		const attr = (settings as any).attribution;
-		// If attribution is explicitly disabled ({ commit: "", pr: "" }), do not overwrite it
-		if (attr && attr.commit === "" && attr.pr === "") {
-			return;
-		}
 		if (value && value.trim().length > 0) {
 			// Write custom text: commit gets a Co-Authored-By trailer + the text; pr gets the text
 			(settings as any).attribution = {
@@ -188,3 +185,87 @@ export async function readAllSettingsBothScopes(
 	}
 	return result;
 }
+
+/**
+ * Discover available output styles from installed plugins.
+ * Scans enabled plugins for outputStyles entries and *-output-style plugin names.
+ * Returns options suitable for a select setting.
+ */
+export async function discoverOutputStyles(
+	projectPath?: string,
+): Promise<Array<{ label: string; value: string }>> {
+	const styles: Array<{ label: string; value: string }> = [
+		{ label: "Default", value: "" },
+	];
+
+	const homeDir = process.env.HOME || process.env.USERPROFILE || "";
+	const cacheDir = path.join(homeDir, ".claude", "plugins", "cache");
+
+	// Collect enabled plugins from both scopes
+	const enabledPlugins = new Set<string>();
+	try {
+		const userSettings = await readGlobalSettings();
+		for (const [k, v] of Object.entries((userSettings as any).enabledPlugins || {})) {
+			if (v) enabledPlugins.add(k);
+		}
+	} catch {}
+	try {
+		const projSettings = await readSettings(projectPath);
+		for (const [k, v] of Object.entries((projSettings as any).enabledPlugins || {})) {
+			if (v) enabledPlugins.add(k);
+		}
+	} catch {}
+
+	const seen = new Set<string>();
+
+	for (const pluginId of enabledPlugins) {
+		const [pluginName, marketplace] = pluginId.split("@");
+
+		// Check if this is a dedicated output-style plugin (e.g. "explanatory-output-style")
+		if (pluginName.endsWith("-output-style")) {
+			const styleName = pluginName
+				.replace(/-output-style$/, "")
+				.split("-")
+				.map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+				.join(" ");
+			if (!seen.has(styleName)) {
+				seen.add(styleName);
+				styles.push({ label: styleName, value: styleName });
+			}
+			continue;
+		}
+
+		// Check plugin.json for outputStyles entries
+		if (!marketplace) continue;
+		const pluginDir = path.join(cacheDir, marketplace, pluginName);
+		try {
+			const versions = fs.readdirSync(pluginDir).sort();
+			const latest = versions[versions.length - 1];
+			if (!latest) continue;
+			const manifestPath = path.join(pluginDir, latest, "plugin.json");
+			const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+			const outputStyles = manifest.outputStyles as string[] | undefined;
+			if (!outputStyles?.length) continue;
+
+			for (const stylePath of outputStyles) {
+				const fullPath = path.join(pluginDir, latest, stylePath);
+				try {
+					const content = fs.readFileSync(fullPath, "utf-8");
+					const fmMatch = content.match(/^---\n([\s\S]*?)\n---/);
+					if (fmMatch) {
+						const nameMatch = fmMatch[1].match(/^name:\s*(.+)$/m);
+						if (nameMatch) {
+							const name = nameMatch[1].trim();
+							if (!seen.has(name)) {
+								seen.add(name);
+								styles.push({ label: name, value: name });
+							}
+						}
+					}
+				} catch {}
+			}
+		} catch {}
+	}
+
+	return styles;
+}

package/src/ui/adapters/settingsAdapter.js

@@ -52,12 +52,12 @@ export function getEffectiveValue(scoped) {
 }
 export function formatValue(setting, value) {
     if (value === undefined || value === "") {
-        if (setting.defaultValue !== undefined) {
-            return setting.type === "boolean"
-                ? setting.defaultValue === "true"
-                    ? "on"
-                    : "off"
-                : setting.defaultValue || "default";
+        if (setting.type === "boolean" && setting.defaultValue !== undefined) {
+            return setting.defaultValue === "true" ? "on" : "off";
+        }
+        if (setting.type === "select" && setting.defaultValue !== undefined) {
+            const opt = setting.options?.find((o) => o.value === setting.defaultValue);
+            return opt ? opt.label : setting.defaultValue;
         }
         return "—";
     }
@@ -68,8 +68,8 @@ export function formatValue(setting, value) {
         const opt = setting.options.find((o) => o.value === value);
         return opt ? opt.label : value;
     }
-    if (value.length > 20) {
-        return value.slice(0, 20) + "...";
+    if (value.length > 12) {
+        return value.slice(0, 12) + "…";
     }
     return value;
 }

package/src/ui/adapters/settingsAdapter.ts

@@ -94,12 +94,12 @@ export function formatValue(
   value: string | undefined,
 ): string {
   if (value === undefined || value === "") {
-    if (setting.defaultValue !== undefined) {
-      return setting.type === "boolean"
-        ? setting.defaultValue === "true"
-          ? "on"
-          : "off"
-        : setting.defaultValue || "default";
+    if (setting.type === "boolean" && setting.defaultValue !== undefined) {
+      return setting.defaultValue === "true" ? "on" : "off";
+    }
+    if (setting.type === "select" && setting.defaultValue !== undefined) {
+      const opt = setting.options?.find((o) => o.value === setting.defaultValue);
+      return opt ? opt.label : setting.defaultValue;
     }
     return "—";
   }
@@ -113,8 +113,8 @@ export function formatValue(
     return opt ? opt.label : value;
   }
 
-  if (value.length > 20) {
-    return value.slice(0, 20) + "...";
+  if (value.length > 12) {
+    return value.slice(0, 12) + "…";
   }
   return value;
 }

package/src/ui/components/TabBar.js

@@ -1,5 +1,4 @@
 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: "Skills", screen: "skills" },
@@ -8,28 +7,7 @@ const TABS = [
     { key: "5", label: "Profiles", screen: "profiles" },
     { key: "6", 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);
-        }
-    });
+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;

package/src/ui/components/TabBar.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useKeyboardHandler } from "../hooks/useKeyboardHandler";
 import type { Screen } from "../state/types.js";
 
 interface Tab {
@@ -19,33 +18,9 @@ const TABS: Tab[] = [
 
 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);
-		}
-	});
-
+export function TabBar({ currentScreen }: TabBarProps) {
 	return (
 		<box flexDirection="row" gap={0}>
 			{TABS.map((tab, index) => {

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

@@ -9,6 +9,6 @@ export function ConfirmModal({ title, message, onConfirm, onCancel, }) {
             onCancel();
         }
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "yellow", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsxs("text", { children: [_jsx("span", { fg: "green", children: "[Y]" }), _jsx("span", { children: "es " }), _jsx("span", { fg: "red", children: "[N]" }), _jsx("span", { children: "o" })] }) })] }));
+    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, 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/ConfirmModal.tsx

@@ -31,28 +31,29 @@ export function ConfirmModal({
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="yellow"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 			width={60}
 		>
-			<text>
-				<strong>{title}</strong>
-			</text>
-			<box marginTop={1} marginBottom={1}>
-				<text>{message}</text>
-			</box>
-			<box>
-				<text>
-					<span fg="green">[Y]</span>
-					<span>es </span>
-					<span fg="red">[N]</span>
-					<span>o</span>
+			<box marginBottom={1}>
+				<text fg="#EDEDED">
+					<strong>{title}</strong>
 				</text>
 			</box>
+			<box marginBottom={1}>
+				<text fg="#A1A1AA">{message}</text>
+			</box>
+			<box marginTop={1}>
+				<text fg="#71717A">Press </text>
+				<text fg="#EDEDED">Y</text>
+				<text fg="#71717A"> to confirm • </text>
+				<text fg="#EDEDED">N</text>
+				<text fg="#71717A"> to cancel</text>
+			</box>
 		</box>
 	);
 }

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

@@ -1,16 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useState } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
-export function InputModal({ title, label, defaultValue = "", onSubmit, onCancel, }) {
-    const [value, setValue] = useState(defaultValue);
-    useKeyboard((key) => {
-        if (key.name === "enter") {
-            onSubmit(value);
-        }
-        else if (key.name === "escape") {
-            onCancel();
-        }
-    });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsx("text", { children: _jsx("strong", { children: title }) }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: label }) }), _jsx("input", { value: value, onChange: setValue, focused: true, width: 54 }), _jsx("box", { marginTop: 1, children: _jsx("text", { fg: "#666666", children: "Enter to confirm \u2022 Escape to cancel" }) })] }));
+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/InputModal.tsx

@@ -1,5 +1,4 @@
-import React, { useState } from "react";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
+import React from "react";
 
 interface InputModalProps {
 	/** Modal title */
@@ -19,43 +18,41 @@ export function InputModal({
 	label,
 	defaultValue = "",
 	onSubmit,
-	onCancel,
 }: InputModalProps) {
-	const [value, setValue] = useState(defaultValue);
-
-	useKeyboard((key) => {
-		if (key.name === "enter") {
-			onSubmit(value);
-		} else if (key.name === "escape") {
-			onCancel();
-		}
-	});
-
 	return (
 		<box
 			flexDirection="column"
 			border
 			borderStyle="rounded"
-			borderColor="cyan"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 			width={60}
 		>
-			<text>
-				<strong>{title}</strong>
-			</text>
+			<box marginBottom={1}>
+				<text fg="#EDEDED">
+					<strong>{title}</strong>
+				</text>
+			</box>
 
-			<box marginTop={1} marginBottom={1}>
-				<text>{label}</text>
+			<box marginBottom={1}>
+				<text fg="#A1A1AA">{label}</text>
 			</box>
 
-			<input value={value} onChange={setValue} focused width={54} />
+			<box border borderStyle="rounded" borderColor="#3F3F46" paddingLeft={1} paddingRight={1} width={54}>
+				<input
+					value={defaultValue}
+					onSubmit={onSubmit as any}
+					focused
+					width={50}
+				/>
+			</box>
 
 			<box marginTop={1}>
-				<text fg="#666666">Enter to confirm • Escape to cancel</text>
+				<text fg="#71717A">↵ to confirm • Esc to cancel</text>
 			</box>
 		</box>
 	);

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

@@ -9,6 +9,6 @@ export function LoadingModal({ message }) {
         }, 80);
         return () => clearInterval(interval);
     }, []);
-    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "cyan", backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "cyan", children: SPINNER_FRAMES[frame] }), _jsxs("text", { children: [" ", message] })] }));
+    return (_jsxs("box", { flexDirection: "row", border: true, borderStyle: "rounded", borderColor: "#525252", backgroundColor: "#1C1C1E", paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, children: [_jsx("text", { fg: "#A1A1AA", children: SPINNER_FRAMES[frame] }), _jsxs("text", { fg: "#EDEDED", children: [" ", message] })] }));
 }
 export default LoadingModal;

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

@@ -23,15 +23,15 @@ export function LoadingModal({ message }: LoadingModalProps) {
 			flexDirection="row"
 			border
 			borderStyle="rounded"
-			borderColor="cyan"
-			backgroundColor="#1a1a2e"
-			paddingLeft={2}
-			paddingRight={2}
+			borderColor="#525252"
+			backgroundColor="#1C1C1E"
+			paddingLeft={3}
+			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
 		>
-			<text fg="cyan">{SPINNER_FRAMES[frame]}</text>
-			<text> {message}</text>
+			<text fg="#A1A1AA">{SPINNER_FRAMES[frame]}</text>
+			<text fg="#EDEDED"> {message}</text>
 		</box>
 	);
 }

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

@@ -1,9 +1,9 @@
 import { jsxs as _jsxs, jsx as _jsx } from "@opentui/react/jsx-runtime";
 import { useKeyboard } from "../../hooks/useKeyboard.js";
 const variantConfig = {
-    info: { icon: "ℹ", color: "cyan" },
-    success: { icon: "✓", color: "green" },
-    error: { icon: "✗", color: "red" },
+    info: { icon: "ℹ", color: "#60A5FA" },
+    success: { icon: "✓", color: "#4ADE80" },
+    error: { icon: "✗", color: "#F87171" },
 };
 export function MessageModal({ title, message, variant, onDismiss, }) {
     const config = variantConfig[variant];
@@ -11,6 +11,6 @@ export function MessageModal({ title, message, variant, onDismiss, }) {
         // Any key dismisses
         onDismiss();
     });
-    return (_jsxs("box", { flexDirection: "column", border: true, borderStyle: "rounded", borderColor: config.color, backgroundColor: "#1a1a2e", paddingLeft: 2, paddingRight: 2, paddingTop: 1, paddingBottom: 1, width: 60, children: [_jsxs("box", { children: [_jsxs("text", { fg: config.color, children: [config.icon, " "] }), _jsx("text", { children: _jsx("strong", { children: title }) })] }), _jsx("box", { marginTop: 1, marginBottom: 1, children: _jsx("text", { children: message }) }), _jsx("box", { children: _jsx("text", { fg: "#666666", children: "Press any key to continue" }) })] }));
+    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;