magus-cli 7.3.0 → 7.4.0

package/src/ui/renderers/skillRenderers.tsx

@@ -1,6 +1,6 @@
 import type React from "react";
 import { STAR_RELIABILITY_INFO } from "../../data/skill-repos.js";
-import type { StarReliability } from "../../types/index.js";
+import type { SkillInfo, StarReliability } from "../../types/index.js";
 import type {
 	SkillBrowserItem,
 	SkillCategoryItem,
@@ -18,6 +18,7 @@ import {
 	SelectableRow,
 } from "../components/primitives/index.js";
 import type { ItemRenderer } from "../registry.js";
+import { displayWidth, padTo, truncate } from "../text-width.js";
 import { type UiColor, theme } from "../theme.js";
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
@@ -30,17 +31,26 @@ function formatStarsNum(stars?: number): string {
 	return `${stars}`;
 }
 
-/** Star icon and color based on reliability classification */
+/** Star icon based on reliability classification */
 function starIcon(reliability?: StarReliability): string {
 	if (reliability === "mega-repo") return "☆";
 	if (reliability === "skill-dump") return "☆";
 	return "★";
 }
 
+/**
+ * A star count is a reference fact, so a meaningful one is `info`. A hollow
+ * star — a count that says little about the skill — recedes to `muted`. Never
+ * `warning`: amber means "needs a look", and a star count asks for nothing.
+ */
+function starTone(reliability?: StarReliability): "info" | "muted" {
+	return reliability === "mega-repo" || reliability === "skill-dump"
+		? "muted"
+		: "info";
+}
+
 function starColor(reliability?: StarReliability): UiColor {
-	if (reliability === "mega-repo") return theme.colors.muted;
-	if (reliability === "skill-dump") return theme.colors.warning;
-	return theme.colors.warning;
+	return theme.meta[starTone(reliability)];
 }
 
 function formatStars(stars?: number, reliability?: StarReliability): string {
@@ -68,7 +78,7 @@ const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
 		const isRec = item.categoryKey === "recommended";
 		return (
 			<box flexDirection="column">
-				<text fg={isRec ? theme.colors.success : theme.colors.info}>
+				<text fg={theme.colors.info}>
 					<strong>
 						{item.star ?? ""}
 						{item.title}
@@ -89,23 +99,28 @@ const categoryRenderer: ItemRenderer<SkillCategoryItem> = {
 // ─── Skill renderer ───────────────────────────────────────────────────────────
 
 const MAX_SKILL_NAME_LEN = 35;
-
-function truncateName(name: string): string {
-	return name.length > MAX_SKILL_NAME_LEN
-		? `${name.slice(0, MAX_SKILL_NAME_LEN - 1)}\u2026`
-		: name;
-}
+/** Width a row assumes when its caller does not pass the panel's. */
+const DEFAULT_ROW_WIDTH = 45;
 
 const skillRenderer: ItemRenderer<SkillSkillItem> = {
-	renderRow: ({ item, isSelected }) => {
+	renderRow: ({ item, isSelected, width = DEFAULT_ROW_WIDTH }) => {
 		const { skill } = item;
 		const hasUser = skill.installedScope === "user";
 		const hasProject = skill.installedScope === "project";
 		const reliability = skill.starReliability;
 		const starsStr = formatStars(skill.stars, reliability);
-		const sColor = starColor(reliability);
-		const displayName = truncateName(skill.name);
 		const indentLevel = item.indent ?? 1;
+		// Cells before and after the name: indent, two squares and a space; the
+		// update arrow; the star count. The name takes what is left, in cells.
+		const fixed =
+			indentLevel +
+			3 +
+			(skill.hasUpdate ? 2 : 0) +
+			(starsStr ? displayWidth(starsStr) + 2 : 0);
+		const displayName = truncate(
+			skill.name,
+			Math.max(1, Math.min(MAX_SKILL_NAME_LEN, width - fixed)),
+		);
 
 		return (
 			<SelectableRow selected={isSelected} indent={indentLevel}>
@@ -118,7 +133,7 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
 				<span
 					fg={
 						isSelected
-							? theme.colors.text
+							? theme.selection.fg
 							: skill.installed
 								? theme.colors.text
 								: theme.colors.muted
@@ -129,170 +144,208 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
 				{skill.hasUpdate ? (
 					<MetaText text=" ⬆" tone="warning" selected={isSelected} />
 				) : null}
-				{starsStr ? <span fg={sColor}>{`  ${starsStr}`}</span> : null}
+				{starsStr ? (
+					<MetaText
+						text={`  ${starsStr}`}
+						tone={starTone(reliability)}
+						selected={isSelected}
+					/>
+				) : null}
 			</SelectableRow>
 		);
 	},
 
-	renderDetail: ({ item }) => {
-		const { skill } = item;
-		const fm = skill.frontmatter;
-		const description = fm?.description || skill.description || "Loading...";
-		const reliability = skill.starReliability;
-		const starsStr = formatStars(skill.stars, reliability);
-		const sColor = starColor(reliability);
-		const reliabilityInfo = reliability
-			? STAR_RELIABILITY_INFO[reliability]
-			: null;
+	renderDetail: ({ item }) => skillDetail(item.skill, {}),
+};
 
-		return (
-			<box flexDirection="column">
-				<text fg={theme.colors.info}>
-					<strong>{skill.name}</strong>
-					{starsStr ? <span fg={sColor}> {starsStr}</span> : null}
-				</text>
+/** What the detail pane knows about a skill's description fetch. */
+export interface SkillDetailState {
+	/** The remote SKILL.md fetch failed. */
+	descriptionFailed?: boolean;
+}
 
-				<box marginTop={1}>
-					<text fg={theme.colors.text}>{description}</text>
-				</box>
+/**
+ * The description line, always in a definite state.
+ *
+ * It used to fall back to "Loading..." whenever the description was empty, so a
+ * LOCAL skill — which is never fetched — and a remote one whose fetch had failed
+ * both sat on "Loading..." for good. Now: the text when there is one; for a local
+ * skill, the fact that its SKILL.md has none; for a remote one, loading only
+ * while a fetch is outstanding, and the failure once it is not.
+ */
+function descriptionLine(
+	skill: SkillInfo,
+	state: SkillDetailState,
+): { text: string; tone: UiColor } {
+	const text = skill.frontmatter?.description || skill.description;
+	if (text) return { text, tone: theme.colors.text };
+	if (skill.source.repo === "local") {
+		return {
+			text: "No description in its SKILL.md.",
+			tone: theme.colors.muted,
+		};
+	}
+	if (state.descriptionFailed) {
+		return {
+			text: "Could not fetch the description. Press r to retry.",
+			tone: theme.colors.warning,
+		};
+	}
+	if (skill.frontmatter) {
+		return { text: "No description.", tone: theme.colors.muted };
+	}
+	return { text: "Loading the description…", tone: theme.colors.muted };
+}
 
-				{fm?.category ? (
-					<KeyValueLine
-						label="Category"
-						value={<span fg={theme.colors.info}>{fm.category}</span>}
-					/>
-				) : null}
-				{fm?.author ? (
-					<KeyValueLine label="Author" value={<span>{fm.author}</span>} />
-				) : null}
-				{fm?.version ? (
-					<KeyValueLine label="Version" value={<span>{fm.version}</span>} />
-				) : null}
-				{fm?.tags && fm.tags.length > 0 ? (
-					<KeyValueLine
-						label="Tags"
-						value={<span>{(fm.tags as string[]).join(", ")}</span>}
-					/>
-				) : null}
+function skillDetail(
+	skill: SkillInfo,
+	state: SkillDetailState,
+): React.ReactNode {
+	const fm = skill.frontmatter;
+	const description = descriptionLine(skill, state);
+	const reliability = skill.starReliability;
+	const starsStr = formatStars(skill.stars, reliability);
+	const sColor = starColor(reliability);
+	const reliabilityInfo = reliability
+		? STAR_RELIABILITY_INFO[reliability]
+		: null;
+
+	return (
+		<box flexDirection="column">
+			<text fg={theme.colors.info}>
+				<strong>{skill.name}</strong>
+				{starsStr ? <span fg={sColor}> {starsStr}</span> : null}
+			</text>
+
+			<box marginTop={1}>
+				<text fg={description.tone}>{description.text}</text>
+			</box>
 
-				<DetailSection>
-					<text fg={theme.colors.text}>
-						<span fg={theme.colors.muted}>Source </span>
-						<span fg={theme.colors.link}>{skill.source.repo}</span>
-					</text>
-					<text fg={theme.colors.text}>
-						<span fg={theme.colors.muted}>{"          "}</span>
-						<span fg={theme.colors.muted}>{skill.repoPath}</span>
-					</text>
-				</DetailSection>
+			{fm?.category ? (
+				<KeyValueLine
+					label="Category"
+					value={<span fg={theme.colors.info}>{fm.category}</span>}
+				/>
+			) : null}
+			{fm?.author ? (
+				<KeyValueLine label="Author" value={<span>{fm.author}</span>} />
+			) : null}
+			{fm?.version ? (
+				<KeyValueLine label="Version" value={<span>{fm.version}</span>} />
+			) : null}
+			{fm?.tags && fm.tags.length > 0 ? (
+				<KeyValueLine
+					label="Tags"
+					value={<span>{(fm.tags as string[]).join(", ")}</span>}
+				/>
+			) : null}
 
-				{reliabilityInfo && reliability !== "dedicated" && (
-					<box marginTop={1}>
-						<text fg={theme.colors.text}>
-							<span fg={sColor}>{starIcon(reliability)} </span>
-							<span fg={sColor}>
-								<strong>{reliabilityInfo.label}</strong>
-							</span>
-							<span fg={theme.colors.muted}>
-								{" "}
-								— {reliabilityInfo.description}
-							</span>
-						</text>
-					</box>
-				)}
+			<DetailSection>
+				<text fg={theme.colors.text}>
+					<span fg={theme.colors.muted}>Source </span>
+					<span fg={theme.colors.info}>{skill.source.repo}</span>
+				</text>
+				<text fg={theme.colors.text}>
+					<span fg={theme.colors.muted}>{"          "}</span>
+					<span fg={theme.colors.muted}>{skill.repoPath}</span>
+				</text>
+			</DetailSection>
 
-				<DetailSection>
-					<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+			{reliabilityInfo && reliability !== "dedicated" && (
+				<box marginTop={1}>
 					<text fg={theme.colors.text}>
-						<strong>Scopes:</strong>
-					</text>
-					<box marginTop={1} flexDirection="column">
-						<text fg={theme.colors.text}>
-							<span bg={theme.colors.info} fg={theme.hints.fg}>
-								{" "}
-								u{" "}
-							</span>
-							<span
-								fg={
-									skill.installedScope === "user"
-										? theme.colors.info
-										: theme.colors.muted
-								}
-							>
-								{skill.installedScope === "user" ? " ● " : " ○ "}
-							</span>
-							<span fg={theme.colors.info}>User</span>
-							<span fg={theme.colors.muted}> ~/.claude/skills/</span>
-						</text>
-						<text fg={theme.colors.text}>
-							<span bg={theme.colors.success} fg={theme.hints.fg}>
-								{" "}
-								p{" "}
-							</span>
-							<span
-								fg={
-									skill.installedScope === "project"
-										? theme.colors.success
-										: theme.colors.muted
-								}
-							>
-								{skill.installedScope === "project" ? " ● " : " ○ "}
-							</span>
-							<span fg={theme.colors.success}>Project</span>
-							<span fg={theme.colors.muted}> .claude/skills/</span>
-						</text>
-					</box>
-				</DetailSection>
-
-				{skill.hasUpdate && (
-					<box marginTop={1}>
-						<text bg={theme.colors.warning} fg={theme.hints.fg}>
+						<span fg={sColor}>{starIcon(reliability)} </span>
+						<span fg={sColor}>
+							<strong>{reliabilityInfo.label}</strong>
+						</span>
+						<span fg={theme.colors.muted}>
 							{" "}
-							UPDATE AVAILABLE{" "}
-						</text>
-					</box>
-				)}
+							— {reliabilityInfo.description}
+						</span>
+					</text>
+				</box>
+			)}
 
+			<DetailSection>
+				<text fg={theme.colors.text}>{"─".repeat(24)}</text>
+				<text fg={theme.colors.text}>
+					<strong>Scopes:</strong>
+				</text>
 				<box marginTop={1}>
-					<text fg={theme.colors.muted}>
-						{skill.installed
-							? "Press u/p to toggle scope"
-							: "Press u/p to install"}
-					</text>
+					<ScopeDetail
+						scopes={{
+							user: skill.installedScope === "user",
+							project: skill.installedScope === "project",
+						}}
+						paths={{ user: "~/.claude/skills/", project: ".claude/skills/" }}
+					/>
 				</box>
-				<box>
-					<text fg={theme.colors.text}>
-						<span bg={theme.colors.dim} fg={theme.hints.fg}>
-							{" "}
-							o{" "}
-						</span>
-						<span fg={theme.colors.muted}> Open in browser</span>
+			</DetailSection>
+
+			{skill.hasUpdate && (
+				<box marginTop={1}>
+					<text bg={theme.colors.warning} fg={theme.hints.fg}>
+						{" "}
+						UPDATE AVAILABLE{" "}
 					</text>
 				</box>
+			)}
+
+			<box marginTop={1}>
+				<text fg={theme.colors.muted}>
+					{skill.installed
+						? "Press u/p to toggle scope"
+						: "Press u/p to install"}
+				</text>
 			</box>
-		);
-	},
-};
+			<box>
+				<text fg={theme.colors.text}>
+					<span bg={theme.colors.dim} fg={theme.hints.fg}>
+						{" "}
+						o{" "}
+					</span>
+					<span fg={theme.colors.muted}> Open in browser</span>
+				</text>
+			</box>
+		</box>
+	);
+}
 
 // ─── Skill Set renderer ──────────────────────────────────────────────────────
 
-const MAX_SET_NAME_LEN = 28;
+/**
+ * A skill set's icon in exactly two cells.
+ *
+ * The icons come from a remote catalogue, so their widths are whatever its
+ * author typed: most are wide emoji (\uD83E\uDD17 \uD83C\uDF10 \uD83E\uDDF1 \uD83E\uDDF0, two cells), one is `\u2601\uFE0F` \u2014 a
+ * one-cell symbol plus U+FE0F asking for emoji presentation. MEASURED in tmux
+ * under OpenTUI 0.1.107, that pair paints as two BLANK cells: the icon vanished.
+ * Dropping the selector draws the plain `\u2601`, and padding to two cells in
+ * `displayWidth` terms puts every name after it in the same column, whatever
+ * the icon's width.
+ */
+function iconCell(icon: string): string {
+	return padTo(icon.replaceAll("\uFE0F", ""), 2);
+}
+
+/** Row cells before the name: lead, arrow, space, icon, space. */
+const SET_ROW_HEAD = 6;
+/** Row cells after the stars: a space and the two scope squares. */
+const SET_ROW_TAIL = 3;
+/** Below this many cells for the name, the star count is dropped first. */
+const MIN_SET_NAME = 8;
 
 const skillSetRenderer: ItemRenderer<SkillSetItem> = {
-	renderRow: ({ item, isSelected }) => {
+	renderRow: ({ item, isSelected, width = DEFAULT_ROW_WIDTH }) => {
 		const { skillSet, expanded } = item;
 		const arrow = expanded ? "\u25BC" : "\u25B6";
-		const displayName =
-			skillSet.name.length > MAX_SET_NAME_LEN
-				? `${skillSet.name.slice(0, MAX_SET_NAME_LEN - 1)}\u2026`
-				: skillSet.name;
 
 		// Count installed child skills
 		const installedCount = skillSet.loaded
 			? skillSet.skills.filter((s) => s.installed).length
 			: 0;
 		const totalCount = skillSet.loaded ? skillSet.skills.length : "...";
-		const countStr = `(${installedCount}/${totalCount})`;
+		const count = ` (${installedCount}/${totalCount})`;
 
 		// Any child installed at user or project scope?
 		const hasUser =
@@ -302,28 +355,34 @@ const skillSetRenderer: ItemRenderer<SkillSetItem> = {
 			skillSet.loaded &&
 			skillSet.skills.some((s) => s.installedScope === "project");
 
-		const starsStr = formatStars(skillSet.stars);
+		// Fitted in cells, not characters: the row is measured end to end so the
+		// panel never has to clip it, and a narrow panel loses the star count
+		// before it loses the name.
+		const fixed = SET_ROW_HEAD + displayWidth(count) + SET_ROW_TAIL;
+		const starsFull = skillSet.stars ? `  ${formatStars(skillSet.stars)}` : "";
+		const stars =
+			width - fixed - displayWidth(starsFull) >= MIN_SET_NAME ? starsFull : "";
+		const displayName = truncate(
+			skillSet.name,
+			Math.max(1, width - fixed - displayWidth(stars)),
+		);
 
 		return (
 			<SelectableRow selected={isSelected} indent={1}>
-				<span fg={isSelected ? theme.colors.text : theme.colors.muted}>
+				<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
 					{arrow}{" "}
 				</span>
-				<span fg={isSelected ? theme.colors.text : theme.colors.warning}>
-					{skillSet.icon}{" "}
+				<span fg={isSelected ? theme.selection.fg : theme.colors.text}>
+					{iconCell(skillSet.icon)}{" "}
 				</span>
-				<span fg={isSelected ? theme.colors.text : theme.colors.info}>
+				<span fg={isSelected ? theme.selection.fg : theme.colors.info}>
 					<strong>{displayName}</strong>
 				</span>
 				<span fg={isSelected ? theme.selection.dim : theme.colors.muted}>
-					{` ${countStr}`}
+					{count}
 				</span>
-				{starsStr ? (
-					<MetaText
-						text={`  ${starsStr}`}
-						tone="warning"
-						selected={isSelected}
-					/>
+				{stars ? (
+					<MetaText text={stars} tone="info" selected={isSelected} />
 				) : null}
 				<span> </span>
 				<ScopeSquares
@@ -343,9 +402,9 @@ const skillSetRenderer: ItemRenderer<SkillSetItem> = {
 			<box flexDirection="column">
 				<text fg={theme.colors.info}>
 					<strong>
-						{skillSet.icon} {skillSet.name}
+						{iconCell(skillSet.icon)} {skillSet.name}
 					</strong>
-					{starsStr ? <span fg={theme.colors.warning}> {starsStr}</span> : null}
+					{starsStr ? <span fg={theme.colors.info}> {starsStr}</span> : null}
 				</text>
 
 				<box marginTop={1}>
@@ -355,13 +414,13 @@ const skillSetRenderer: ItemRenderer<SkillSetItem> = {
 				<DetailSection>
 					<text fg={theme.colors.text}>
 						<span fg={theme.colors.muted}>Source </span>
-						<span fg={theme.colors.link}>{skillSet.repo}</span>
+						<span fg={theme.colors.info}>{skillSet.repo}</span>
 					</text>
 				</DetailSection>
 
 				{skillSet.loading && (
 					<box marginTop={1}>
-						<text fg={theme.colors.warning}>Loading skills...</text>
+						<text fg={theme.colors.muted}>Loading skills…</text>
 					</box>
 				)}
 
@@ -383,25 +442,11 @@ const skillSetRenderer: ItemRenderer<SkillSetItem> = {
 						</text>
 						<box marginTop={1} flexDirection="column">
 							{skillSet.skills.map((s) => (
-								<text key={s.id}>
-									<span
-										fg={
-											s.installedScope === "user"
-												? theme.colors.info
-												: theme.colors.muted
-										}
-									>
-										{s.installedScope === "user" ? "\u25A0" : "\u25A1"}
-									</span>
-									<span
-										fg={
-											s.installedScope === "project"
-												? theme.colors.success
-												: theme.colors.muted
-										}
-									>
-										{s.installedScope === "project" ? "\u25A0" : "\u25A1"}
-									</span>
+								<text key={s.id} fg={theme.colors.text}>
+									<ScopeSquares
+										user={s.installedScope === "user"}
+										project={s.installedScope === "project"}
+									/>
 									<span
 										fg={s.installed ? theme.colors.text : theme.colors.muted}
 									>
@@ -448,24 +493,26 @@ export const skillRenderers: {
 };
 
 /**
- * Dispatch rendering by item kind.
+ * Dispatch rendering by item kind, fitted to `width` — the list panel's
+ * usable columns.
  */
 export function renderSkillRow(
 	item: SkillBrowserItem,
-	_index: number,
 	isSelected: boolean,
+	width: number,
 ): React.ReactNode {
 	if (item.kind === "category") {
-		return skillRenderers.category.renderRow({ item, isSelected });
+		return skillRenderers.category.renderRow({ item, isSelected, width });
 	}
 	if (item.kind === "skillset") {
-		return skillRenderers.skillset.renderRow({ item, isSelected });
+		return skillRenderers.skillset.renderRow({ item, isSelected, width });
 	}
-	return skillRenderers.skill.renderRow({ item, isSelected });
+	return skillRenderers.skill.renderRow({ item, isSelected, width });
 }
 
 export function renderSkillDetail(
 	item: SkillBrowserItem | undefined,
+	state: SkillDetailState = {},
 ): React.ReactNode {
 	if (!item)
 		return <text fg={theme.colors.muted}>Select a skill to see details</text>;
@@ -475,5 +522,5 @@ export function renderSkillDetail(
 	if (item.kind === "skillset") {
 		return skillRenderers.skillset.renderDetail({ item });
 	}
-	return skillRenderers.skill.renderDetail({ item });
+	return skillDetail(item.skill, state);
 }

package/src/ui/renderers/styleRenderers.tsx

@@ -32,13 +32,24 @@ function truncate(text: string, max: number): string {
  * selection) are distinct on purpose: the whole point of a staged multi-select
  * is that you can see, before pressing apply, how the pending set differs from
  * what is live. A single glyph for both would hide exactly that.
+ *
+ * The glyph carries the state; the colour only repeats it. Both pending states
+ * — `[+]` will be added, `[~]` will be removed — are unapplied changes, so both
+ * are `warning`. `[~]` used to be `danger`, but nothing is broken: it is a
+ * change waiting for `a`, exactly like `[+]`.
+ *
+ * `[–]` is an EN DASH, and must stay one: it is the symbol the help legend
+ * explains ("a template; fill it before it can be ticked"). A hyphen drew a
+ * glyph the legend did not name.
  */
+const TEMPLATE_GLYPH = "[–]";
+
 function checkbox(item: StyleEntryItem): { glyph: string; tone: string } {
-	if (item.disabled) return { glyph: "[-]", tone: theme.colors.muted };
+	if (item.disabled) return { glyph: TEMPLATE_GLYPH, tone: theme.colors.muted };
 	if (item.checked && item.applied)
 		return { glyph: "[x]", tone: theme.colors.success };
 	if (item.checked) return { glyph: "[+]", tone: theme.colors.warning };
-	if (item.applied) return { glyph: "[~]", tone: theme.colors.danger };
+	if (item.applied) return { glyph: "[~]", tone: theme.colors.warning };
 	return { glyph: "[ ]", tone: theme.colors.muted };
 }