claudeup 3.17.0 → 4.0.0

package/src/ui/screens/ProfilesScreen.tsx

@@ -21,31 +21,16 @@ import {
 	readClipboard,
 	ClipboardUnavailableError,
 } from "../../utils/clipboard.js";
-import type { ProfileEntry } from "../../types/index.js";
 import {
 	PREDEFINED_PROFILES,
 	type PredefinedProfile,
 } from "../../data/predefined-profiles.js";
-
-// ─── List item discriminated union ───────────────────────────────────────────
-
-type ListItem =
-	| { kind: "predefined"; profile: PredefinedProfile }
-	| { kind: "saved"; entry: ProfileEntry };
-
-function buildListItems(profileList: ProfileEntry[]): ListItem[] {
-	const predefined: ListItem[] = PREDEFINED_PROFILES.map((p) => ({
-		kind: "predefined" as const,
-		profile: p,
-	}));
-	const saved: ListItem[] = profileList.map((e) => ({
-		kind: "saved" as const,
-		entry: e,
-	}));
-	return [...predefined, ...saved];
-}
-
-// ─── Component ────────────────────────────────────────────────────────────────
+import {
+	buildProfileListItems,
+	renderProfileRow,
+	renderProfileDetail,
+	type ProfileListItem,
+} from "../renderers/profileRenderers.js";
 
 export function ProfilesScreen() {
 	const { state, dispatch } = useApp();
@@ -53,7 +38,6 @@ export function ProfilesScreen() {
 	const modal = useModal();
 	const dimensions = useDimensions();
 
-	// Fetch data
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "PROFILES_DATA_LOADING" });
 		try {
@@ -76,26 +60,38 @@ export function ProfilesScreen() {
 			? profilesState.profiles.data
 			: [];
 
-	const allItems = buildListItems(profileList);
-	const selectedItem: ListItem | undefined = allItems[profilesState.selectedIndex];
+	const allItems = buildProfileListItems(profileList, PREDEFINED_PROFILES);
+	const selectedItem: ProfileListItem | undefined =
+		allItems[profilesState.selectedIndex];
+
+	const isNavigable = (item: ProfileListItem) => item.kind !== "header";
 
-	// Keyboard handling
 	useKeyboard((event) => {
 		if (state.isSearching || state.modal) return;
 
 		if (event.name === "up" || event.name === "k") {
-			const newIndex = Math.max(0, profilesState.selectedIndex - 1);
-			dispatch({ type: "PROFILES_SELECT", index: newIndex });
+			let newIndex = profilesState.selectedIndex - 1;
+			while (newIndex > 0 && !isNavigable(allItems[newIndex]!)) {
+				newIndex--;
+			}
+			if (newIndex >= 0 && isNavigable(allItems[newIndex]!)) {
+				dispatch({ type: "PROFILES_SELECT", index: newIndex });
+			}
 		} else if (event.name === "down" || event.name === "j") {
-			const newIndex = Math.min(
-				Math.max(0, allItems.length - 1),
-				profilesState.selectedIndex + 1,
-			);
-			dispatch({ type: "PROFILES_SELECT", index: newIndex });
+			let newIndex = profilesState.selectedIndex + 1;
+			while (
+				newIndex < allItems.length - 1 &&
+				!isNavigable(allItems[newIndex]!)
+			) {
+				newIndex++;
+			}
+			if (newIndex < allItems.length && isNavigable(allItems[newIndex]!)) {
+				dispatch({ type: "PROFILES_SELECT", index: newIndex });
+			}
 		} else if (event.name === "enter" || event.name === "a") {
 			if (selectedItem?.kind === "predefined") {
 				void handleApplyPredefined(selectedItem.profile);
-			} else {
+			} else if (selectedItem?.kind === "saved") {
 				void handleApply();
 			}
 		} else if (event.name === "r") {
@@ -109,7 +105,7 @@ export function ProfilesScreen() {
 		}
 	});
 
-	// ─── Predefined profile apply ─────────────────────────────────────────────
+	// ─── Actions ──────────────────────────────────────────────────────────────
 
 	const handleApplyPredefined = async (profile: PredefinedProfile) => {
 		const allPlugins = [
@@ -129,16 +125,12 @@ export function ProfilesScreen() {
 		modal.loading(`Applying "${profile.name}"...`);
 		try {
 			const settings = await readSettings(state.projectPath);
-
-			// Merge plugins (additive only)
 			settings.enabledPlugins = settings.enabledPlugins ?? {};
 			for (const plugin of allPlugins) {
 				if (!settings.enabledPlugins[plugin]) {
 					settings.enabledPlugins[plugin] = true;
 				}
 			}
-
-			// Merge top-level settings (additive — only set if not already set)
 			for (const [key, value] of Object.entries(profile.settings)) {
 				if (key === "env") {
 					const envMap = value as Record<string, string>;
@@ -158,7 +150,6 @@ export function ProfilesScreen() {
 					}
 				}
 			}
-
 			await writeSettings(settings, state.projectPath);
 			modal.hideModal();
 			dispatch({ type: "DATA_REFRESH_COMPLETE" });
@@ -169,16 +160,10 @@ export function ProfilesScreen() {
 			);
 		} catch (error) {
 			modal.hideModal();
-			await modal.message(
-				"Error",
-				`Failed to apply profile: ${error}`,
-				"error",
-			);
+			await modal.message("Error", `Failed to apply profile: ${error}`, "error");
 		}
 	};
 
-	// ─── Saved profile actions ────────────────────────────────────────────────
-
 	const handleApply = async () => {
 		if (selectedItem?.kind !== "saved") return;
 		const selectedProfile = selectedItem.entry;
@@ -223,7 +208,6 @@ export function ProfilesScreen() {
 				state.projectPath,
 			);
 			modal.hideModal();
-			// Trigger PluginsScreen to refetch
 			dispatch({ type: "DATA_REFRESH_COMPLETE" });
 			await modal.message(
 				"Applied",
@@ -232,11 +216,7 @@ export function ProfilesScreen() {
 			);
 		} catch (error) {
 			modal.hideModal();
-			await modal.message(
-				"Error",
-				`Failed to apply profile: ${error}`,
-				"error",
-			);
+			await modal.message("Error", `Failed to apply profile: ${error}`, "error");
 		}
 	};
 
@@ -261,11 +241,7 @@ export function ProfilesScreen() {
 			);
 			modal.hideModal();
 			await fetchData();
-			await modal.message(
-				"Renamed",
-				`Profile renamed to "${newName.trim()}".`,
-				"success",
-			);
+			await modal.message("Renamed", `Profile renamed to "${newName.trim()}".`, "success");
 		} catch (error) {
 			modal.hideModal();
 			await modal.message("Error", `Failed to rename: ${error}`, "error");
@@ -290,7 +266,6 @@ export function ProfilesScreen() {
 				state.projectPath,
 			);
 			modal.hideModal();
-			// Adjust selection if we deleted the last item
 			const newIndex = Math.max(
 				0,
 				Math.min(profilesState.selectedIndex, allItems.length - 2),
@@ -325,7 +300,6 @@ export function ProfilesScreen() {
 				);
 			} catch (err) {
 				if (err instanceof ClipboardUnavailableError) {
-					// Fallback: show JSON in modal for manual copy
 					await modal.message("Profile JSON (copy manually)", json, "info");
 				} else {
 					throw err;
@@ -340,12 +314,10 @@ export function ProfilesScreen() {
 	const handleImport = async () => {
 		let json: string | null = null;
 
-		// Try to read from clipboard first
 		try {
 			json = await readClipboard();
 		} catch (err) {
 			if (err instanceof ClipboardUnavailableError) {
-				// Fallback: ask user to paste JSON manually
 				json = await modal.input("Import Profile", "Paste profile JSON:");
 			} else {
 				await modal.message("Error", `Clipboard error: ${err}`, "error");
@@ -372,278 +344,17 @@ export function ProfilesScreen() {
 
 		modal.loading("Importing...");
 		try {
-			const id = await importProfileFromJson(
-				json,
-				targetScope,
-				state.projectPath,
-			);
+			const id = await importProfileFromJson(json, targetScope, state.projectPath);
 			modal.hideModal();
 			await fetchData();
-			await modal.message(
-				"Imported",
-				`Profile imported successfully (id: ${id}).`,
-				"success",
-			);
+			await modal.message("Imported", `Profile imported successfully (id: ${id}).`, "success");
 		} catch (error) {
 			modal.hideModal();
 			await modal.message("Error", `Failed to import: ${error}`, "error");
 		}
 	};
 
-	// ─── Rendering helpers ────────────────────────────────────────────────────
-
-	const formatDate = (iso: string): string => {
-		try {
-			const d = new Date(iso);
-			return d.toLocaleDateString("en-US", {
-				month: "short",
-				day: "numeric",
-				year: "numeric",
-			});
-		} catch {
-			return iso;
-		}
-	};
-
-	const renderListItem = (item: ListItem, _idx: number, isSelected: boolean) => {
-		if (item.kind === "predefined") {
-			const { profile } = item;
-			const pluginCount =
-				profile.magusPlugins.length + profile.anthropicPlugins.length;
-			const skillCount = profile.skills.length;
-
-			if (isSelected) {
-				return (
-					<text bg="blue" fg="white">
-						{" "}
-						{profile.icon} {profile.name} — {pluginCount} plugins · {skillCount}{" "}
-						skill{skillCount !== 1 ? "s" : ""}{" "}
-					</text>
-				);
-			}
-
-			return (
-				<text>
-					<span fg="blue">[preset]</span>
-					<span> </span>
-					<span fg="white">
-						{profile.icon} {profile.name}
-					</span>
-					<span fg="gray">
-						{" "}
-						— {pluginCount} plugins · {skillCount} skill
-						{skillCount !== 1 ? "s" : ""}
-					</span>
-				</text>
-			);
-		}
-
-		// Saved profile
-		const { entry } = item;
-		const pluginCount = Object.keys(entry.plugins).length;
-		const dateStr = formatDate(entry.updatedAt);
-		const scopeColor = entry.scope === "user" ? "cyan" : "green";
-		const scopeLabel = entry.scope === "user" ? "[user]" : "[proj]";
-
-		if (isSelected) {
-			return (
-				<text bg="magenta" fg="white">
-					{" "}
-					{scopeLabel} {entry.name} — {pluginCount} plugin
-					{pluginCount !== 1 ? "s" : ""} · {dateStr}{" "}
-				</text>
-			);
-		}
-
-		return (
-			<text>
-				<span fg={scopeColor}>{scopeLabel}</span>
-				<span> </span>
-				<span fg="white">{entry.name}</span>
-				<span fg="gray">
-					{" "}
-					— {pluginCount} plugin{pluginCount !== 1 ? "s" : ""} · {dateStr}
-				</span>
-			</text>
-		);
-	};
-
-	const renderDetail = () => {
-		if (profilesState.profiles.status === "loading") {
-			return <text fg="gray">Loading profiles...</text>;
-		}
-
-		if (profilesState.profiles.status === "error") {
-			return (
-				<text fg="red">Error: {profilesState.profiles.error.message}</text>
-			);
-		}
-
-		if (!selectedItem) {
-			return <text fg="gray">Select a profile to see details</text>;
-		}
-
-		if (selectedItem.kind === "predefined") {
-			return renderPredefinedDetail(selectedItem.profile);
-		}
-
-		return renderSavedDetail(selectedItem.entry);
-	};
-
-	const renderPredefinedDetail = (profile: PredefinedProfile) => {
-		const allPlugins = [
-			...profile.magusPlugins.map((p) => `${p}@magus`),
-			...profile.anthropicPlugins.map((p) => `${p}@claude-plugins-official`),
-		];
-
-		return (
-			<box flexDirection="column">
-				<text fg="blue">
-					<strong>
-						{profile.icon} {profile.name}
-					</strong>
-				</text>
-				<box marginTop={1}>
-					<text fg="gray">{profile.description}</text>
-				</box>
-				<box marginTop={1} flexDirection="column">
-					<text fg="gray">
-						Magus plugins ({profile.magusPlugins.length}):
-					</text>
-					{profile.magusPlugins.map((p) => (
-						<box key={p}>
-							<text fg="cyan"> {p}@magus</text>
-						</box>
-					))}
-				</box>
-				<box marginTop={1} flexDirection="column">
-					<text fg="gray">
-						Anthropic plugins ({profile.anthropicPlugins.length}):
-					</text>
-					{profile.anthropicPlugins.map((p) => (
-						<box key={p}>
-							<text fg="yellow"> {p}@claude-plugins-official</text>
-						</box>
-					))}
-				</box>
-				<box marginTop={1} flexDirection="column">
-					<text fg="gray">Skills ({profile.skills.length}):</text>
-					{profile.skills.map((s) => (
-						<box key={s}>
-							<text fg="white"> {s}</text>
-						</box>
-					))}
-				</box>
-				<box marginTop={1} flexDirection="column">
-					<text fg="gray">
-						Settings ({Object.keys(profile.settings).length}):
-					</text>
-					{Object.entries(profile.settings)
-						.filter(([k]) => k !== "env")
-						.map(([k, v]) => (
-							<box key={k}>
-								<text fg="white">
-									{" "}
-									{k}: {String(v)}
-								</text>
-							</box>
-						))}
-				</box>
-				<box marginTop={2} flexDirection="column">
-					<box>
-						<text bg="blue" fg="white">
-							{" "}
-							Enter/a{" "}
-						</text>
-						<text fg="gray">
-							{" "}
-							Apply (merges {allPlugins.length} plugins into project settings)
-						</text>
-					</box>
-				</box>
-			</box>
-		);
-	};
-
-	const renderSavedDetail = (selectedProfile: ProfileEntry) => {
-		const plugins = Object.keys(selectedProfile.plugins);
-		const scopeColor = selectedProfile.scope === "user" ? "cyan" : "green";
-		const scopeLabel =
-			selectedProfile.scope === "user"
-				? "User (~/.claude/profiles.json)"
-				: "Project (.claude/profiles.json — committed to git)";
-
-		return (
-			<box flexDirection="column">
-				<text fg="cyan">
-					<strong>{selectedProfile.name}</strong>
-				</text>
-				<box marginTop={1}>
-					<text fg="gray">Scope: </text>
-					<text fg={scopeColor}>{scopeLabel}</text>
-				</box>
-				<box marginTop={1}>
-					<text fg="gray">
-						Created: {formatDate(selectedProfile.createdAt)} · Updated:{" "}
-						{formatDate(selectedProfile.updatedAt)}
-					</text>
-				</box>
-				<box marginTop={1} flexDirection="column">
-					<text fg="gray">
-						Plugins ({plugins.length}
-						{plugins.length === 0 ? " — applying will disable all plugins" : ""}
-						):
-					</text>
-					{plugins.length === 0 ? (
-						<text fg="yellow"> (none)</text>
-					) : (
-						plugins.map((p) => (
-							<box key={p}>
-								<text fg="white"> {p}</text>
-							</box>
-						))
-					)}
-				</box>
-				<box marginTop={2} flexDirection="column">
-					<box>
-						<text bg="magenta" fg="white">
-							{" "}
-							Enter/a{" "}
-						</text>
-						<text fg="gray"> Apply profile</text>
-					</box>
-					<box marginTop={1}>
-						<text bg="#333333" fg="white">
-							{" "}
-							r{" "}
-						</text>
-						<text fg="gray"> Rename</text>
-					</box>
-					<box marginTop={1}>
-						<text bg="red" fg="white">
-							{" "}
-							d{" "}
-						</text>
-						<text fg="gray"> Delete</text>
-					</box>
-					<box marginTop={1}>
-						<text bg="blue" fg="white">
-							{" "}
-							c{" "}
-						</text>
-						<text fg="gray"> Copy JSON to clipboard</text>
-					</box>
-					<box marginTop={1}>
-						<text bg="green" fg="white">
-							{" "}
-							i{" "}
-						</text>
-						<text fg="gray"> Import from clipboard</text>
-					</box>
-				</box>
-			</box>
-		);
-	};
+	// ─── Render ───────────────────────────────────────────────────────────────
 
 	const profileCount = profileList.length;
 	const userCount = profileList.filter((p) => p.scope === "user").length;
@@ -661,6 +372,21 @@ export function ProfilesScreen() {
 		</text>
 	);
 
+	const firstNavigableIndex = allItems.findIndex(isNavigable);
+	const effectiveIndex =
+		profilesState.selectedIndex === 0 && selectedItem?.kind === "header"
+			? firstNavigableIndex
+			: profilesState.selectedIndex;
+
+	const loadingStatus =
+		profilesState.profiles.status === "loading"
+			? true
+			: false;
+	const errorMessage =
+		profilesState.profiles.status === "error"
+			? profilesState.profiles.error.message
+			: undefined;
+
 	return (
 		<ScreenLayout
 			title="claudeup Plugin Profiles"
@@ -670,12 +396,16 @@ export function ProfilesScreen() {
 			listPanel={
 				<ScrollableList
 					items={allItems}
-					selectedIndex={profilesState.selectedIndex}
-					renderItem={renderListItem}
+					selectedIndex={effectiveIndex}
+					renderItem={renderProfileRow}
 					maxHeight={dimensions.listPanelHeight}
 				/>
 			}
-			detailPanel={renderDetail()}
+			detailPanel={renderProfileDetail(
+				allItems[effectiveIndex],
+				loadingStatus,
+				errorMessage,
+			)}
 		/>
 	);
 }

package/src/ui/screens/SkillsScreen.js

@@ -218,42 +218,42 @@ export function SkillsScreen() {
         }).catch(() => { });
     }, [selectedSkill?.id, dispatch]);
     // ── Action handlers ───────────────────────────────────────────────────────
+    // Status bar message (auto-clears)
+    const [statusMsg, setStatusMsg] = useState(null);
+    const statusTimerRef = useRef(null);
+    const showStatus = useCallback((text, tone = "success") => {
+        setStatusMsg({ text, tone });
+        if (statusTimerRef.current)
+            clearTimeout(statusTimerRef.current);
+        statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
+    }, []);
     const handleInstall = useCallback(async (scope) => {
         if (!selectedSkill)
             return;
-        modal.loading(`Installing ${selectedSkill.name}...`);
         try {
             await installSkill(selectedSkill, scope, state.projectPath);
-            modal.hideModal();
             await fetchData();
-            await modal.message("Installed", `${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`, "success");
+            showStatus(`Installed ${selectedSkill.name} to ${scope}`);
         }
         catch (error) {
-            modal.hideModal();
-            await modal.message("Error", `Failed to install: ${error}`, "error");
+            showStatus(`Failed: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
+    }, [selectedSkill, state.projectPath, fetchData, showStatus]);
     const handleUninstall = useCallback(async () => {
         if (!selectedSkill || !selectedSkill.installed)
             return;
         const scope = selectedSkill.installedScope;
         if (!scope)
             return;
-        const confirmed = await modal.confirm(`Uninstall "${selectedSkill.name}"?`, `This will remove it from the ${scope} scope.`);
-        if (!confirmed)
-            return;
-        modal.loading(`Uninstalling ${selectedSkill.name}...`);
         try {
             await uninstallSkill(selectedSkill.name, scope, state.projectPath);
-            modal.hideModal();
             await fetchData();
-            await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
+            showStatus(`Removed ${selectedSkill.name} from ${scope}`);
         }
         catch (error) {
-            modal.hideModal();
-            await modal.message("Error", `Failed to uninstall: ${error}`, "error");
+            showStatus(`Failed: ${error}`, "error");
         }
-    }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
+    }, [selectedSkill, state.projectPath, fetchData, showStatus]);
     // ── Keyboard handling ─────────────────────────────────────────────────────
     useKeyboard((event) => {
         if (state.modal)
@@ -350,7 +350,7 @@ export function SkillsScreen() {
     const skills = skillsState.skills.status === "success" ? skillsState.skills.data : [];
     const installedCount = skills.filter((s) => s.installed).length;
     const query = skillsState.searchQuery.trim();
-    const statusContent = (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), query.length >= 2 && isSearchLoading && (_jsx("span", { fg: "yellow", children: " \u2502 searching..." })), query.length >= 2 && !isSearchLoading && searchResults.length > 0 && (_jsxs("span", { fg: "green", children: [" \u2502 ", searchResults.length, " found"] })), !query && _jsx("span", { fg: "gray", children: " \u2502 89K+ searchable" })] }));
+    const statusContent = statusMsg ? (_jsx("text", { children: _jsx("span", { fg: statusMsg.tone === "success" ? "green" : "red", children: statusMsg.text }) })) : (_jsxs("text", { children: [_jsx("span", { fg: "gray", children: "Skills: " }), _jsxs("span", { fg: "cyan", children: [installedCount, " installed"] }), query.length >= 2 && isSearchLoading && (_jsx("span", { fg: "yellow", children: " \u2502 searching..." })), query.length >= 2 && !isSearchLoading && searchResults.length > 0 && (_jsxs("span", { fg: "green", children: [" \u2502 ", searchResults.length, " found"] })), !query && _jsx("span", { fg: "gray", children: " \u2502 89K+ searchable" })] }));
     // ── Render ────────────────────────────────────────────────────────────────
     return (_jsx(ScreenLayout, { title: "claudeup Skills", currentScreen: "skills", statusLine: statusContent, search: skillsState.searchQuery || isSearchActive
             ? {

package/src/ui/screens/SkillsScreen.tsx

@@ -253,46 +253,39 @@ export function SkillsScreen() {
 
   // ── Action handlers ───────────────────────────────────────────────────────
 
+  // Status bar message (auto-clears)
+  const [statusMsg, setStatusMsg] = useState<{ text: string; tone: "success" | "error" } | null>(null);
+  const statusTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const showStatus = useCallback((text: string, tone: "success" | "error" = "success") => {
+    setStatusMsg({ text, tone });
+    if (statusTimerRef.current) clearTimeout(statusTimerRef.current);
+    statusTimerRef.current = setTimeout(() => setStatusMsg(null), 3000);
+  }, []);
+
   const handleInstall = useCallback(async (scope: "user" | "project") => {
     if (!selectedSkill) return;
-    modal.loading(`Installing ${selectedSkill.name}...`);
     try {
       await installSkill(selectedSkill, scope, state.projectPath);
-      modal.hideModal();
       await fetchData();
-      await modal.message(
-        "Installed",
-        `${selectedSkill.name} installed to ${scope === "user" ? "~/.claude/skills/" : ".claude/skills/"}`,
-        "success",
-      );
+      showStatus(`Installed ${selectedSkill.name} to ${scope}`);
     } catch (error) {
-      modal.hideModal();
-      await modal.message("Error", `Failed to install: ${error}`, "error");
+      showStatus(`Failed: ${error}`, "error");
     }
-  }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
+  }, [selectedSkill, state.projectPath, fetchData, showStatus]);
 
   const handleUninstall = useCallback(async () => {
     if (!selectedSkill || !selectedSkill.installed) return;
     const scope = selectedSkill.installedScope;
     if (!scope) return;
 
-    const confirmed = await modal.confirm(
-      `Uninstall "${selectedSkill.name}"?`,
-      `This will remove it from the ${scope} scope.`,
-    );
-    if (!confirmed) return;
-
-    modal.loading(`Uninstalling ${selectedSkill.name}...`);
     try {
       await uninstallSkill(selectedSkill.name, scope, state.projectPath);
-      modal.hideModal();
       await fetchData();
-      await modal.message("Uninstalled", `${selectedSkill.name} removed.`, "success");
+      showStatus(`Removed ${selectedSkill.name} from ${scope}`);
     } catch (error) {
-      modal.hideModal();
-      await modal.message("Error", `Failed to uninstall: ${error}`, "error");
+      showStatus(`Failed: ${error}`, "error");
     }
-  }, [selectedSkill, state.projectPath, dispatch, modal, fetchData]);
+  }, [selectedSkill, state.projectPath, fetchData, showStatus]);
 
   // ── Keyboard handling ─────────────────────────────────────────────────────
 
@@ -390,7 +383,11 @@ export function SkillsScreen() {
   const installedCount = skills.filter((s) => s.installed).length;
   const query = skillsState.searchQuery.trim();
 
-  const statusContent = (
+  const statusContent = statusMsg ? (
+    <text>
+      <span fg={statusMsg.tone === "success" ? "green" : "red"}>{statusMsg.text}</span>
+    </text>
+  ) : (
     <text>
       <span fg="gray">Skills: </span>
       <span fg="cyan">{installedCount} installed</span>