magus-cli 7.3.1 → 7.4.1

package/src/ui/adapters/pluginsAdapter.ts

@@ -4,6 +4,7 @@ import type { ApplyReporter } from "../../services/update-engine.js";
 import type { PluginUpdateItem } from "../../services/update-plan.js";
 import type { Marketplace } from "../../types/index.js";
 import type { PluginContentsEntry } from "../state/types.js";
+import type { BadgeTone } from "../theme.js";
 
 // Virtual marketplace name for the community sub-section of claude-plugins-official
 export const COMMUNITY_VIRTUAL_MARKETPLACE =
@@ -23,7 +24,7 @@ export interface PluginCategoryItem {
 	isExpanded: boolean;
 	isCommunitySection?: boolean;
 	/** Visual tone for the category row */
-	tone: "yellow" | "gray" | "green" | "red" | "purple" | "teal" | "byline";
+	tone: BadgeTone | "byline";
 	/** Badge text shown on category row (e.g. "★ Official") */
 	badge?: string;
 }
@@ -196,24 +197,26 @@ function categoryStyling(
 	marketplaceEnabled: boolean,
 ): { tone: PluginCategoryItem["tone"]; badge?: string } {
 	if (!marketplaceEnabled) {
-		return { tone: "gray" };
+		return { tone: "neutral" };
 	}
 	if (isCommunitySection) {
-		return { tone: "gray", badge: "3rd Party" };
+		return { tone: "neutral", badge: "3rd Party" };
 	}
+	// `info`, not `warning`: "official" is a fact about the source, and amber
+	// means "needs a look". The ★ carries the distinction.
 	if (mp.name === "claude-plugins-official") {
-		return { tone: "yellow", badge: "★ Official" };
+		return { tone: "info", badge: "★ Official" };
 	}
 	if (mp.name === "claude-code-plugins") {
-		return { tone: "red", badge: "⚠ Deprecated" };
+		return { tone: "danger", badge: "⚠ Deprecated" };
 	}
 	if (mp.official) {
-		return { tone: "yellow", badge: "★ Official" };
+		return { tone: "info", badge: "★ Official" };
 	}
 	if (isMadAppGang(mp)) {
 		return { tone: "byline", badge: "by MadAppGang" };
 	}
-	return { tone: "green", badge: "✓ Added" };
+	return { tone: "success", badge: "✓ Added" };
 }
 
 /**

package/src/ui/adapters/settingsAdapter.ts

@@ -4,7 +4,6 @@ import {
 	type SettingDefinition,
 } from "../../data/settings-catalog.js";
 import type { ScopedSettingValues } from "../../services/settings-manager.js";
-import { type UiColor, theme } from "../theme.js";
 
 // ─── Item types ────────────────────────────────────────────────────────────────
 
@@ -51,26 +50,6 @@ export const CATEGORY_ORDER: SettingCategory[] = [
 	"advanced",
 ];
 
-export const CATEGORY_BG: Record<SettingCategory, UiColor> = {
-	recommended: theme.colors.success,
-	agents: theme.colors.info,
-	models: theme.colors.accent,
-	workflow: theme.colors.link,
-	terminal: theme.colors.warning,
-	performance: theme.colors.accent,
-	advanced: theme.colors.warning,
-};
-
-export const CATEGORY_COLOR: Record<SettingCategory, UiColor> = {
-	recommended: theme.colors.success,
-	agents: theme.colors.info,
-	models: theme.colors.info,
-	workflow: theme.colors.link,
-	terminal: theme.colors.link,
-	performance: "magentaBright",
-	advanced: theme.colors.warning,
-};
-
 export const CATEGORY_DESCRIPTIONS: Record<SettingCategory, string> = {
 	recommended: "Most impactful settings every user should know.",
 	agents: "Agent teams, task lists, and subagent configuration.",

package/src/ui/adapters/skillsAdapter.ts

@@ -1,4 +1,5 @@
 import type { SkillInfo, SkillSetInfo } from "../../types/index.js";
+import type { BadgeTone } from "../theme.js";
 
 // ─── Item types ───────────────────────────────────────────────────────────────
 
@@ -9,7 +10,7 @@ export interface SkillCategoryItem {
 	title: string;
 	categoryKey: string;
 	count?: number;
-	tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+	tone: BadgeTone;
 	badge?: string;
 	star?: string;
 }
@@ -38,6 +39,25 @@ export type SkillBrowserItem =
 
 // ─── Adapter ─────────────────────────────────────────────────────────────────
 
+/**
+ * The skills the Installed group lists: every skill on disk, narrowed by the
+ * search query.
+ *
+ * The ONE selector for "installed" on this screen. The header's "N installed"
+ * used to count a different list — the fetched catalogue's `installed` flags —
+ * so it said "1 installed" above a group headed "Installed (16)". Both now read
+ * this, so they cannot disagree.
+ */
+export function installedGroup(
+	installed: readonly SkillInfo[],
+	query: string,
+): SkillInfo[] {
+	const lowerQuery = query.toLowerCase();
+	return lowerQuery
+		? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+		: [...installed];
+}
+
 export interface BuildSkillBrowserItemsArgs {
 	recommended: SkillInfo[];
 	popular: SkillInfo[];
@@ -67,9 +87,7 @@ export function buildSkillBrowserItems({
 	const items: SkillBrowserItem[] = [];
 
 	// ── INSTALLED: always shown at top (if any) ──
-	const installedFiltered = lowerQuery
-		? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
-		: installed;
+	const installedFiltered = installedGroup(installed, query);
 
 	if (installedFiltered.length > 0) {
 		items.push({
@@ -79,7 +97,8 @@ export function buildSkillBrowserItems({
 			title: "Installed",
 			categoryKey: "installed",
 			count: installedFiltered.length,
-			tone: "purple",
+			// The group's name is a state, so it wears that state's role.
+			tone: "success",
 			star: "\u25CF ",
 		});
 		for (const skill of installedFiltered) {
@@ -123,7 +142,7 @@ export function buildSkillBrowserItems({
 		title: "Recommended",
 		categoryKey: "recommended",
 		count: recommendedCount,
-		tone: "green",
+		tone: "neutral",
 		star: "\u2605 ",
 	});
 
@@ -180,7 +199,7 @@ export function buildSkillBrowserItems({
 					title: "Search",
 					categoryKey: "popular",
 					count: deduped.length,
-					tone: "teal",
+					tone: "neutral",
 				});
 				for (const skill of deduped) {
 					items.push({
@@ -213,7 +232,7 @@ export function buildSkillBrowserItems({
 			title: "Popular",
 			categoryKey: "popular",
 			count: popularDeduped.length,
-			tone: "teal",
+			tone: "neutral",
 		});
 		for (const skill of popularDeduped) {
 			items.push({

package/src/ui/adapters/stylesAdapter.ts

@@ -10,6 +10,7 @@ import type {
 	StylePreset,
 	StyleSource,
 } from "../../services/styles-manager.js";
+import type { BadgeTone } from "../theme.js";
 
 // ─── Item types ───────────────────────────────────────────────────────────────
 
@@ -44,7 +45,7 @@ export interface StyleCategoryItem {
 	title: string;
 	categoryKey: StyleCategoryKey;
 	count: number;
-	tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+	tone: BadgeTone;
 	badge?: string;
 }
 
@@ -326,11 +327,11 @@ export function buildStyleBrowserItems({
 			title: "Community",
 			categoryKey: "community",
 			count: rows.length + orphans.length,
-			// Yellow, shared with Anthropic captures: both sections are text
-			// captured from somewhere else onto this disk, which is the right
-			// pairing. Red is the only unused tone and it means danger here — a
-			// normal, working section must not wear it.
-			tone: "yellow",
+			// `info`, shared with Anthropic captures: both sections are text
+			// captured from somewhere else onto this disk — a fact about where it
+			// came from, which is what `info` means. Never `danger`: a normal,
+			// working section must not wear it.
+			tone: "info",
 			badge: "from GitHub",
 		});
 
@@ -373,17 +374,20 @@ export function buildStyleBrowserItems({
 	// count, and a long badge wraps onto a second line on a narrow pane, which
 	// costs a whole row and breaks the scan down the left column. The full
 	// explanation lives in the detail panel, where there is room for it.
+	//
+	// Sections are groups, not states, so they wear `neutral` — except the two
+	// captured from outside, which share `info` (see pushCommunity).
 	pushImports(
 		"anthropic",
 		"anthropic",
 		"Anthropic official",
-		"yellow",
+		"info",
 		"captured",
 	);
-	pushPresets(verbosity, "verbosity", "Verbosity", "purple", "pick one");
-	pushPresets(modifiers, "modifier", "Modifiers", "teal", "combine freely");
-	pushImports("team", "team", "Team", "green", "in the repo");
-	pushImports("personal", "personal", "Personal", "gray", "this machine");
+	pushPresets(verbosity, "verbosity", "Verbosity", "neutral", "pick one");
+	pushPresets(modifiers, "modifier", "Modifiers", "neutral", "combine freely");
+	pushImports("team", "team", "Team", "neutral", "in the repo");
+	pushImports("personal", "personal", "Personal", "neutral", "this machine");
 	pushCommunity();
 
 	return items;

package/src/ui/components/CategoryHeader.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { type UiColor, theme } from "../theme.js";
+import { rowLead } from "./primitives/SelectableRow.js";
 
 interface CategoryHeaderProps {
 	/** Category title */
@@ -38,7 +39,12 @@ export function CategoryHeader({
 		<box flexDirection="row" width="100%" height={1} overflow="hidden">
 			<box flexShrink={1} minWidth={4} overflow="hidden" height={1}>
 				<text fg={theme.colors.text}>
-					<span fg={theme.colors.muted}>{expandIcon}</span>
+					{/* The lead cell every list row keeps blank, so the arrow sits in
+					    the same column as it does on the selected row. */}
+					<span fg={theme.colors.muted}>
+						{rowLead(false)}
+						{expandIcon}
+					</span>
 					<span fg={theme.colors.text}>
 						<strong> {title}</strong>
 					</span>

package/src/ui/components/EmptyFilterState.tsx

@@ -12,7 +12,7 @@ export function EmptyFilterState({
 }: EmptyFilterStateProps) {
 	return (
 		<box flexDirection="column" marginTop={2} paddingLeft={2} paddingRight={2}>
-			<text fg={theme.colors.warning}>
+			<text fg={theme.colors.text}>
 				No {entityName} found for "{query}"
 			</text>
 			<box marginTop={1}>
@@ -22,7 +22,7 @@ export function EmptyFilterState({
 			</box>
 			<text fg={theme.colors.muted}>this is a bug, report it at:</text>
 			<box marginTop={1}>
-				<text fg={theme.colors.link}>github.com/MadAppGang/magus/issues</text>
+				<text fg={theme.colors.info}>github.com/MadAppGang/magus/issues</text>
 			</box>
 			<box marginTop={1}>
 				<text fg={theme.colors.muted}>Press Esc to clear the filter.</text>

package/src/ui/components/ScreenErrorBoundary.tsx

@@ -0,0 +1,105 @@
+import React from "react";
+import type { Screen } from "../state/types.js";
+import { theme } from "../theme.js";
+import { ScreenLayout } from "./layout/ScreenLayout.js";
+import { ErrorNotice } from "./primitives/index.js";
+
+interface ScreenErrorBoundaryProps {
+	/** The screen being guarded. The fallback keeps its tab highlighted. */
+	screen: Screen;
+	children: React.ReactNode;
+}
+
+interface ScreenErrorBoundaryState {
+	error: Error | null;
+	/** The screen the error belongs to, so leaving it clears the error. */
+	screen: Screen;
+}
+
+/**
+ * Contains a render error to the screen that threw it.
+ *
+ * Without it a throw in any one screen reached OpenTUI's root boundary, which
+ * replaces the WHOLE app with a stack trace: the tab bar went with it, and so
+ * did every key handler mounted under the root, leaving the user nothing to
+ * press but Ctrl+C. Here the failing screen alone is replaced by an error
+ * panel that keeps the tab bar, and the global keys (digits, Tab, q, ?, Esc)
+ * stay live: they are a key layer of their own, and the failed screen's layers
+ * unregistered when it unmounted — a search box it left focused included.
+ *
+ * Switching tab clears the error, which is also how the user retries: coming
+ * back mounts the screen fresh.
+ */
+export class ScreenErrorBoundary extends React.Component<
+	ScreenErrorBoundaryProps,
+	ScreenErrorBoundaryState
+> {
+	constructor(props: ScreenErrorBoundaryProps) {
+		super(props);
+		this.state = { error: null, screen: props.screen };
+	}
+
+	static getDerivedStateFromProps(
+		props: ScreenErrorBoundaryProps,
+		state: ScreenErrorBoundaryState,
+	): Partial<ScreenErrorBoundaryState> | null {
+		// A different screen owes nothing to the previous one's failure.
+		return props.screen === state.screen
+			? null
+			: { error: null, screen: props.screen };
+	}
+
+	static getDerivedStateFromError(
+		error: unknown,
+	): Partial<ScreenErrorBoundaryState> {
+		return {
+			error: error instanceof Error ? error : new Error(String(error)),
+		};
+	}
+
+	render(): React.ReactNode {
+		if (this.state.error) {
+			return (
+				<ScreenErrorPanel screen={this.props.screen} error={this.state.error} />
+			);
+		}
+		return this.props.children;
+	}
+}
+
+/**
+ * The panel drawn in place of a screen that failed to render. Its footer
+ * advertises only what still works — the global and scroll keys — because the
+ * screen's own bindings went with the screen.
+ */
+function ScreenErrorPanel({
+	screen,
+	error,
+}: {
+	screen: Screen;
+	error: Error;
+}) {
+	const stack = (error.stack ?? "").split("\n").slice(1);
+
+	return (
+		<ScreenLayout
+			title="magus — this screen failed"
+			currentScreen={screen}
+			footer={{ owner: "none" }}
+			listPanel={
+				<ErrorNotice
+					title="This screen stopped drawing because of an error."
+					detail={error.message || String(error)}
+					hint="Other tabs still work. Switch away and back to retry."
+				/>
+			}
+			detailPanel={stack.map((line, index) => (
+				// Stack lines have no identity beyond their position.
+				// biome-ignore lint/suspicious/noArrayIndexKey: a static, never-reordered list
+				<text key={index} fg={theme.colors.muted}>
+					{line.trim()}
+				</text>
+			))}
+		/>
+	);
+}

package/src/ui/components/TabBar.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { useDimensions } from "../state/DimensionsContext.js";
 import type { Screen } from "../state/types.js";
+import { displayWidth } from "../text-width.js";
 import { theme } from "../theme.js";
 
 interface Tab {
@@ -26,36 +27,106 @@ export const TABS: Tab[] = [
 	{ key: "0", label: "Models", screen: "models" },
 ];
 
-/** Columns one tab occupies: the text plus its one-space padding each side. */
-function cellWidth(text: string): number {
-	return text.length + 2;
+/** What the bar draws: one text per tab, in TABS order, and whether each cell
+ *  carries its one-space padding either side. */
+export interface TabLayout {
+	texts: string[];
+	padded: boolean;
 }
 
-/** Columns the whole bar occupies: every cell plus the separators between. */
-export function barWidth(texts: string[]): number {
+/** Shortest label prefix an inactive tab may shrink to before it drops to its
+ *  key alone. Three letters still name the tab ("Plu", "Set", "Git"). */
+const MIN_PREFIX = 3;
+
+/**
+ * Columns the whole bar occupies: every cell plus a one-column separator
+ * between cells. A padded cell adds one space each side of its text.
+ */
+export function barWidth(texts: string[], padded = true): number {
 	if (texts.length === 0) return 0;
-	return texts.reduce((n, t) => n + cellWidth(t), 0) + (texts.length - 1);
+	const pad = padded ? 2 : 0;
+	return (
+		texts.reduce((n, t) => n + displayWidth(t) + pad, 0) + (texts.length - 1)
+	);
+}
+
+const fullText = (tab: Tab) => `${tab.key}:${tab.label}`;
+
+/**
+ * Tier 3: the active tab in full, every inactive tab as `key:` plus a label
+ * prefix. Prefixes start at MIN_PREFIX and grow one letter at a time, round
+ * robin in tab order, while the bar still fits — so the spare columns go to
+ * names rather than to blank space. `null` when even the shortest form does not
+ * fit.
+ */
+function prefixLayout(
+	tabs: Tab[],
+	currentScreen: Screen,
+	available: number,
+): string[] | null {
+	const lengths = tabs.map((tab) =>
+		tab.screen === currentScreen
+			? tab.label.length
+			: Math.min(MIN_PREFIX, tab.label.length),
+	);
+	const render = () =>
+		tabs.map((tab, i) =>
+			tab.screen === currentScreen
+				? fullText(tab)
+				: `${tab.key}:${tab.label.slice(0, lengths[i])}`,
+		);
+	let width = barWidth(render(), false);
+	if (width > available) return null;
+
+	let grew = true;
+	while (grew) {
+		grew = false;
+		for (let i = 0; i < tabs.length; i++) {
+			const tab = tabs[i] as Tab;
+			const length = lengths[i] as number;
+			if (length >= tab.label.length || width + 1 > available) continue;
+			lengths[i] = length + 1;
+			width += 1;
+			grew = true;
+		}
+	}
+	return render();
 }
 
 /**
- * Choose what each tab shows for the space available.
+ * Choose what each tab shows for the space available — the first tier that
+ * fits, in this order:
+ *
+ *  1. every tab `key:label`, padded;
+ *  2. every tab `key:label`, unpadded;
+ *  3. the active tab `key:label`, each inactive tab `key:` plus a label prefix
+ *     of at least three letters;
+ *  4. the active tab `key:label`, each inactive tab its key alone.
  *
- * The full bar is ~110 columns at ten tabs, so on a standard 100-column window
- * it overflows and OpenTUI clips each cell — producing a row of truncated stubs
- * ("1:", "4:", "7:Git ") that names nothing. Dropping the inactive labels keeps
- * the bar honest: the number is what you press, and the one tab whose name
- * matters is the one you are on. Compacted, ten tabs need ~46 columns.
+ * The active tab always keeps its whole name and every tab always keeps its
+ * key. The steps exist because the old all-or-nothing rule dropped straight
+ * from the full bar (110 columns) to bare numbers, so a 100-column window
+ * showed "1 2 3 … 9 0" beside one name when a readable bar fitted with room to
+ * spare.
  */
 export function layoutTabs(
 	tabs: Tab[],
 	currentScreen: Screen,
 	available: number,
-): string[] {
-	const full = tabs.map((tab) => `${tab.key}:${tab.label}`);
-	if (barWidth(full) <= available) return full;
-	return tabs.map((tab) =>
-		tab.screen === currentScreen ? `${tab.key}:${tab.label}` : tab.key,
+): TabLayout {
+	const full = tabs.map(fullText);
+	if (barWidth(full, true) <= available) return { texts: full, padded: true };
+	if (barWidth(full, false) <= available) return { texts: full, padded: false };
+
+	const prefixed = prefixLayout(tabs, currentScreen, available);
+	if (prefixed) return { texts: prefixed, padded: false };
+
+	const keys = tabs.map((tab) =>
+		tab.screen === currentScreen ? fullText(tab) : tab.key,
 	);
+	// Tier 4 keeps its padding when that still fits — nothing better can use
+	// the room, and the padding is what makes a bare digit read as a tab.
+	return { texts: keys, padded: barWidth(keys, true) <= available };
 }
 
 interface TabBarProps {
@@ -66,14 +137,15 @@ export function TabBar({ currentScreen }: TabBarProps) {
 	const dimensions = useDimensions();
 	// ScreenLayout pads the bar by 1 each side, inside a container padded by 1.
 	const available = Math.max(10, dimensions.terminalWidth - 4);
-	const texts = layoutTabs(TABS, currentScreen, available);
+	const { texts, padded } = layoutTabs(TABS, currentScreen, available);
+	const pad = padded ? " " : "";
 
 	return (
 		<box flexDirection="row" gap={0}>
 			{TABS.map((tab, index) => {
 				const isSelected = tab.screen === currentScreen;
 				const isLast = index === TABS.length - 1;
-				const text = texts[index];
+				const text = `${pad}${texts[index]}${pad}`;
 
 				return (
 					<box key={tab.key} flexDirection="row">
@@ -81,12 +153,12 @@ export function TabBar({ currentScreen }: TabBarProps) {
 						{isSelected ? (
 							<box>
 								<text bg={theme.colors.accent} fg={theme.hints.fg}>
-									<strong> {text} </strong>
+									<strong>{text}</strong>
 								</text>
 							</box>
 						) : (
 							<box>
-								<text fg={theme.colors.muted}> {text} </text>
+								<text fg={theme.colors.muted}>{text}</text>
 							</box>
 						)}
 						{/* Separator */}

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

@@ -1,31 +1,15 @@
 import type React from "react";
+import { FOOTER_GAP, joinKeys } from "../../keymap.js";
 import { hintChip } from "../../theme-mode.js";
 import { theme } from "../../theme.js";
 
 /** One footer hint: a key (or key group) and the action it performs. */
 export interface FooterHint {
 	/** Key(s) for this action, e.g. ["↑", "↓"] or ["U"]. Joined by `joinKeys`. */
-	keys: string[];
+	keys: readonly string[];
 	label: string;
 }
 
-/**
- * Render a key group as one chip's text.
- *
- * Single-character keys butt together, because `↑↓` is how an arrow pair is written
- * everywhere and a separator there would be noise. Anything longer needs a gap, or the
- * names run into each other and read as one key that does not exist — MEASURED on screen:
- * `["Enter", "a"]` rendered as `Entera`, and the layout's own scroll hint
- * `["^U/^D", "PgUp/Dn"]` rendered as `^U/^DPgUp/Dn` on every screen in the app.
- *
- * A space rather than a slash, because several key names already contain one.
- */
-export function joinKeys(keys: string[]): string {
-	return keys.every((k) => [...k].length === 1)
-		? keys.join("")
-		: keys.join(" ");
-}
-
 // The shared chip palette, not a local one. This file used to define its own
 // (`theme.colors.dim` block + terminal-foreground ink), which is why the footer
 // stayed a low-contrast grey-on-grey strip after the palette was made vivid —
@@ -34,7 +18,6 @@ export function joinKeys(keys: string[]): string {
 // `hintChip()` rather than `theme.hints`: the chip is two fills that must sit a
 // measured step apart, and "a step quieter" is only definable against a page.
 // The static palette cannot express it; `theme-mode` resolves it.
-const GAP = "  ";
 
 /**
  * Render a row of footer hints as key badges + labels:
@@ -42,11 +25,12 @@ const GAP = "  ";
  *   [↑↓] 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.
+ * Shared across screens so every footer looks the same. `footerWidth` in
+ * ui/keymap.ts measures exactly this layout — change one, change both.
  */
 export function FooterHints({
 	hints,
-}: { hints: FooterHint[] }): React.ReactNode {
+}: { hints: readonly FooterHint[] }): React.ReactNode {
 	const ink = hintChip();
 	const nodes: React.ReactNode[] = [];
 	hints.forEach((hint, i) => {
@@ -55,7 +39,7 @@ export function FooterHints({
 		if (i > 0) {
 			nodes.push(
 				<span key={`gap-${id}`} fg={theme.colors.muted}>
-					{GAP}
+					{FOOTER_GAP}
 				</span>,
 			);
 		}
@@ -82,9 +66,4 @@ export function FooterHints({
 	return <text fg={theme.colors.text}>{nodes}</text>;
 }
 
-/** Convenience for callers that already have a node: same as <FooterHints>. */
-export function renderFooterHints(hints: FooterHint[]): React.ReactNode {
-	return <FooterHints hints={hints} />;
-}
-
 export default FooterHints;