magus-cli 7.12.2 → 7.14.0

package/src/ui/adapters/pluginsAdapter.ts

@@ -15,6 +15,7 @@ import type {
 	FailureRow,
 	PluginContentsEntry,
 } from "../state/types.js";
+import { truncate } from "../text-width.js";
 import type { BadgeTone } from "../theme.js";
 import {
 	failureReport,
@@ -215,6 +216,12 @@ function pushPluginItems(
 	}
 }
 
+/**
+ * The widest company name a group header shows. The header keeps its badge
+ * whole and clips the title instead, so a long name is clipped here first.
+ */
+const COMPANY_BADGE_COLUMNS = 24;
+
 /**
  * Derives tone and badge for a category item based on marketplace identity.
  */
@@ -240,6 +247,18 @@ function categoryStyling(
 	if (mp.official) {
 		return { tone: "info", badge: "★ Official" };
 	}
+	// Before the MadAppGang byline: a company marketplace may itself live under
+	// MadAppGang, and being this machine's company marketplace is the stronger
+	// fact.
+	if (mp.company) {
+		const company = companyName(mp);
+		return {
+			tone: "info",
+			badge: company
+				? `by ${truncate(company, COMPANY_BADGE_COLUMNS)}`
+				: "◆ Company",
+		};
+	}
 	if (isMadAppGang(mp)) {
 		return { tone: "byline", badge: "by MadAppGang" };
 	}
@@ -256,6 +275,17 @@ function isMadAppGang(mp: Marketplace): boolean {
 	return (mp.source.repo ?? "").toLowerCase().startsWith("madappgang/");
 }
 
+/**
+ * The name a company marketplace is shown by: the manifest's `owner.name`,
+ * else the GitHub owner of its repository.
+ */
+export function companyName(mp: Marketplace): string | undefined {
+	if (mp.ownerName) return mp.ownerName;
+	const repo = mp.source.repo ?? "";
+	const slash = repo.indexOf("/");
+	return slash > 0 ? repo.slice(0, slash) : undefined;
+}
+
 // ─── "It failed, and here is why" ────────────────────────────────────────────
 
 /** A version token — `v2.0.3`, `8.1.3`, `1.0.0-beta.2`. */
@@ -557,9 +587,16 @@ export function buildPluginBrowserItems({
 		pluginsByMarketplace.set(plugin.marketplace, existing);
 	}
 
-	// Sort marketplaces: our own (magus*) first, deprecated last, others between.
+	// Sort marketplaces: this machine's company marketplaces first, then our own
+	// (magus*), deprecated last, others between.
 	const rank = (m: Marketplace) =>
-		m.owned ? 0 : m.deprecated || m.name === "claude-code-plugins" ? 2 : 1;
+		m.company
+			? 0
+			: m.owned
+				? 1
+				: m.deprecated || m.name === "claude-code-plugins"
+					? 3
+					: 2;
 	const sortedMarketplaces = [...marketplaces].sort(
 		(a, b) => rank(a) - rank(b),
 	);
@@ -569,7 +606,12 @@ export function buildPluginBrowserItems({
 	for (const marketplace of sortedMarketplaces) {
 		const marketplacePlugins = pluginsByMarketplace.get(marketplace.name) || [];
 		const isCollapsed = collapsedMarketplaces.has(marketplace.name);
-		const isEnabled = marketplacePlugins.length > 0 || !!marketplace.official;
+		// A company marketplace is registered by definition, so it keeps its
+		// badge while it holds no plugins yet.
+		const isEnabled =
+			marketplacePlugins.length > 0 ||
+			!!marketplace.official ||
+			!!marketplace.company;
 		const hasPlugins = marketplacePlugins.length > 0;
 
 		// Special handling: split claude-plugins-official into two sub-sections

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

@@ -5,8 +5,10 @@ import { useKeyLayer } from "../../input/KeyRouter.js";
 import { isScrollKey } from "../../input/key-dispatch.js";
 import {
 	type FooterOptions,
+	type KeyBinding,
 	SCROLL_BINDINGS,
 	type ScrollHandlers,
+	fitHints,
 	footerHints,
 	runBindings,
 } from "../../keymap.js";
@@ -87,8 +89,20 @@ interface ScreenLayoutProps<S extends Screen> {
 	title: string;
 	/** Optional subtitle shown to the right of title */
 	subtitle?: string;
-	/** Current screen: highlights its tab and picks its footer bindings. */
-	currentScreen: S;
+	/**
+	 * Current screen: highlights its tab and picks its footer bindings. Left
+	 * out by an app with no tabs, which passes `keymap` instead.
+	 */
+	currentScreen?: S;
+	/**
+	 * The footer of an app with no tabs (the market screens): these bindings,
+	 * fitted to the width by the same rule as a tab's footer, with `pinned`
+	 * kept whenever it fits. Ignored when `currentScreen` is given.
+	 */
+	keymap?: {
+		bindings: readonly KeyBinding[];
+		pinned: readonly KeyBinding[];
+	};
 	/** Search bar configuration (for screens with search) */
 	search?: {
 		/** Is search currently active */
@@ -134,6 +148,7 @@ export function ScreenLayout<S extends Screen>({
 	title,
 	subtitle,
 	currentScreen,
+	keymap,
 	search,
 	statusLine,
 	notice,
@@ -145,10 +160,13 @@ export function ScreenLayout<S extends Screen>({
 	const dimensions = useDimensions();
 
 	const hasSearchBar = search && (search.isActive || search.query);
+	const hasTabs = currentScreen !== undefined;
 
-	// Fixed chrome: top line + tabs + line + header + separator + footer = 6
+	// Fixed chrome: top line + tabs + line + header + separator + footer = 6;
+	// without tabs, the tab row and the line under it go, leaving 4.
 	// Search bar adds 1 when active; the notice adds 1 while present.
-	const fixedHeight = 6 + (hasSearchBar ? 1 : 0) + (notice ? 1 : 0);
+	const fixedHeight =
+		(hasTabs ? 6 : 4) + (hasSearchBar ? 1 : 0) + (notice ? 1 : 0);
 	const panelHeight = Math.max(5, dimensions.contentHeight - fixedHeight);
 	const lineWidth = Math.max(10, dimensions.terminalWidth - 4);
 
@@ -196,11 +214,17 @@ export function ScreenLayout<S extends Screen>({
 
 	// Fitted to the row, highest priority first, so no hint is ever cut
 	// mid-word at the terminal's edge — see `footerHints`.
-	const footerRow = footerHints(
-		currentScreen,
-		Math.max(0, dimensions.terminalWidth - APP_SIDE_PADDING - FOOTER_PADDING),
-		search?.isActive ? { owner: "input" } : footer,
+	const footerWidthCells = Math.max(
+		0,
+		dimensions.terminalWidth - APP_SIDE_PADDING - FOOTER_PADDING,
 	);
+	const footerRow = hasTabs
+		? footerHints(
+				currentScreen,
+				footerWidthCells,
+				search?.isActive ? { owner: "input" } : footer,
+			)
+		: fitHints(keymap?.bindings ?? [], keymap?.pinned ?? [], footerWidthCells);
 
 	useEffect(() => {
 		if (detailKey !== undefined) detailScrollRef.current?.scrollTo(0);
@@ -213,15 +237,17 @@ export function ScreenLayout<S extends Screen>({
 				<text fg={theme.colors.dim}>{"─".repeat(lineWidth)}</text>
 			</box>
 
-			{/* Tab bar */}
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<TabBar currentScreen={currentScreen} />
-			</box>
-
-			{/* Line below tabs */}
-			<box height={1} paddingLeft={1} paddingRight={1}>
-				<text fg={theme.colors.dim}>{"─".repeat(lineWidth)}</text>
-			</box>
+			{/* Tab bar, and the line below it — only in an app with tabs */}
+			{hasTabs && (
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<TabBar currentScreen={currentScreen} />
+				</box>
+			)}
+			{hasTabs && (
+				<box height={1} paddingLeft={1} paddingRight={1}>
+					<text fg={theme.colors.dim}>{"─".repeat(lineWidth)}</text>
+				</box>
+			)}
 
 			{/* Header — title on left, subtitle/status on right */}
 			<box

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

@@ -1,15 +1,128 @@
-import React from "react";
+import type { ScrollBoxRenderable } from "@opentui/core";
+import type React from "react";
+import { useDimensions } from "../../state/DimensionsContext.js";
+import { displayWidth } from "../../text-width.js";
 import { theme } from "../../theme.js";
 
+/** The dialog's width when it carries a plain question. */
+const QUESTION_WIDTH = 60;
+/** The widest a dialog listing a plan grows, so each line reads as one row. */
+const PLAN_MAX_WIDTH = 100;
+/** Cells kept free on each side of the dialog, and rows above and below it. */
+const SCREEN_MARGIN = 2;
+/** The narrowest the dialog gets, however small the terminal. */
+const MIN_WIDTH = 20;
+/** What each plan line starts with. */
+const BULLET = "• ";
+/** Border and padding, left plus right. */
+const SIDE_CELLS = 2 + 2 * 3;
+/**
+ * Rows that are not the message or the plan: border 2, padding 2, the title
+ * and its gap 2, the gap under the message 1, the gap above the keys and the
+ * keys line 2.
+ */
+const CHROME_ROWS = 9;
+
+export interface ConfirmModalSize {
+	width: number;
+	/**
+	 * Rows the plan gets when it does not fit and scrolls — also one page for
+	 * PgUp / PgDn. Null when the whole plan fits.
+	 */
+	planHeight: number | null;
+}
+
+/** Rows `text` takes wrapped at `width` cells. */
+function wrappedRows(text: string, width: number): number {
+	return text
+		.split("\n")
+		.reduce(
+			(n, line) =>
+				n + Math.max(1, Math.ceil(displayWidth(line) / Math.max(1, width))),
+			0,
+		);
+}
+
+/**
+ * The dialog's box, from the terminal's size and what it shows. Never wider
+ * or taller than the terminal: a plan that would not fit gets a fixed height
+ * and scrolls, so every line of what confirming does can be read before it is
+ * confirmed, and the keys line always stays on screen.
+ */
+export function confirmModalSize(
+	terminalWidth: number,
+	terminalHeight: number,
+	message: string,
+	details: readonly string[] | undefined,
+): ConfirmModalSize {
+	// The minimum width yields to the terminal: below it, the dialog takes
+	// every column there is rather than run past the edge.
+	const room = Math.min(
+		Math.max(1, terminalWidth),
+		Math.max(MIN_WIDTH, terminalWidth - 2 * SCREEN_MARGIN),
+	);
+	const hasDetails = details !== undefined && details.length > 0;
+	const width = Math.min(room, hasDetails ? PLAN_MAX_WIDTH : QUESTION_WIDTH);
+	if (!hasDetails) return { width, planHeight: null };
+	const inner = width - SIDE_CELLS;
+	const lineWidth = inner - BULLET.length;
+	const planRows = details.reduce(
+		(n, line) => n + wrappedRows(line, lineWidth),
+		0,
+	);
+	const height =
+		terminalHeight >= 8
+			? terminalHeight - SCREEN_MARGIN
+			: Math.max(1, terminalHeight);
+	const left = height - CHROME_ROWS - wrappedRows(message, inner);
+	return { width, planHeight: planRows <= left ? null : Math.max(1, left) };
+}
+
 interface ConfirmModalProps {
 	/** Modal title */
 	title: string;
 	/** Modal message */
 	message: string;
+	/**
+	 * What confirming will do, one line each — a plan. Drawn as a bulleted
+	 * list under the message, in a dialog as wide as the terminal allows, so a
+	 * line wraps only when it must and never runs into the next one. A plan
+	 * taller than the terminal scrolls.
+	 */
+	details?: readonly string[];
+	/** The plan's scroll box, scrolled by ModalContainer's keys. */
+	scrollRef?: React.RefObject<ScrollBoxRenderable | null>;
 }
 
-/** Draws the question. Its keys (y / Enter, n / Esc / q) are ModalContainer's. */
-export function ConfirmModal({ title, message }: ConfirmModalProps) {
+/** Draws the question. Its keys (y / Enter, n / Esc / q, ↑↓ PgUp PgDn) are ModalContainer's. */
+export function ConfirmModal({
+	title,
+	message,
+	details,
+	scrollRef,
+}: ConfirmModalProps) {
+	const { terminalWidth, terminalHeight } = useDimensions();
+	const size = confirmModalSize(
+		terminalWidth,
+		terminalHeight,
+		message,
+		details,
+	);
+	const plan =
+		details !== undefined && details.length > 0 ? (
+			<box flexDirection="column">
+				{details.map((line, i) => (
+					// Plan lines may repeat word for word; their order is their identity.
+					// biome-ignore lint/suspicious/noArrayIndexKey: positional plan lines
+					<box key={i} flexDirection="row">
+						<text fg={theme.colors.muted}>{BULLET}</text>
+						<box flexGrow={1} flexShrink={1}>
+							<text fg={theme.colors.text}>{line}</text>
+						</box>
+					</box>
+				))}
+			</box>
+		) : null;
 	return (
 		<box
 			flexDirection="column"
@@ -21,18 +134,42 @@ export function ConfirmModal({ title, message }: ConfirmModalProps) {
 			paddingRight={3}
 			paddingTop={1}
 			paddingBottom={1}
-			width={60}
+			width={size.width}
 		>
-			<box marginBottom={1}>
+			<box marginBottom={1} flexShrink={0}>
 				<text fg={theme.colors.text}>
 					<strong>{title}</strong>
 				</text>
 			</box>
-			<box marginBottom={1}>
+			<box marginBottom={1} flexShrink={0}>
 				<text fg={theme.colors.muted}>{message}</text>
 			</box>
-			<box marginTop={1} flexDirection="row">
-				<text fg={theme.colors.muted}>Press </text>
+			{plan && size.planHeight !== null ? (
+				<scrollbox
+					ref={scrollRef}
+					height={size.planHeight}
+					flexShrink={0}
+					scrollY={true}
+					scrollX={false}
+					verticalScrollbarOptions={{
+						showArrows: false,
+						trackOptions: { foregroundColor: theme.colors.muted },
+					}}
+				>
+					{plan}
+				</scrollbox>
+			) : (
+				plan
+			)}
+			<box marginTop={1} flexDirection="row" flexShrink={0}>
+				{size.planHeight !== null ? (
+					<>
+						<text fg={theme.colors.text}>↑↓ PgUp PgDn</text>
+						<text fg={theme.colors.muted}> read the whole plan • </text>
+					</>
+				) : (
+					<text fg={theme.colors.muted}>Press </text>
+				)}
 				<text fg={theme.colors.text}>Y</text>
 				<text fg={theme.colors.muted}> to confirm • </text>
 				<text fg={theme.colors.text}>N</text>

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

@@ -86,14 +86,21 @@ function keyColumnWidth(sections: readonly HelpSection[]): number {
  */
 export function HelpOverlay({
 	screen,
+	sections: given,
 	scrollRef,
 }: {
-	screen: Screen;
+	/** The main TUI's current screen; its section is listed first. */
+	screen?: Screen;
+	/**
+	 * An app with its own keymap passes its sections, already in order; a
+	 * title that should read "(this screen)" says so itself.
+	 */
+	sections?: readonly HelpSection[];
 	scrollRef: React.RefObject<ScrollBoxRenderable | null>;
 }) {
 	const { terminalWidth, terminalHeight } = useDimensions();
 	const size = helpOverlaySize(terminalWidth, terminalHeight);
-	const sections = helpSections(screen);
+	const sections = given ?? (screen ? helpSections(screen) : []);
 	const keyWidth = keyColumnWidth(sections);
 	const textRoom = Math.max(1, size.textWidth - keyWidth - 4);
 
@@ -116,7 +123,7 @@ export function HelpOverlay({
 			);
 		}
 		const title =
-			section.screen === screen
+			screen !== undefined && section.screen === screen
 				? `${section.title} (this screen)`
 				: section.title;
 		rows.push(

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

@@ -4,7 +4,7 @@ import { useKeyLayer, usePasteLayer } from "../../input/KeyRouter.js";
 import { type KeyPress, isScrollKey } from "../../input/key-dispatch.js";
 import { useApp, useModal } from "../../state/AppContext.js";
 import { useDimensions } from "../../state/DimensionsContext.js";
-import { ConfirmModal } from "./ConfirmModal.js";
+import { ConfirmModal, confirmModalSize } from "./ConfirmModal.js";
 import { FailureListModal } from "./FailureListModal.js";
 import { HelpOverlay, helpOverlaySize } from "./HelpOverlay.js";
 import { InputModal } from "./InputModal.js";
@@ -30,7 +30,8 @@ const isPlain = (key: KeyPress) => !key.ctrl && !key.meta;
  * stopped, so the input modal's focused `<input>` still receives it — the
  * arrangement the `input` case below already relies on for keys.
  *
- * - confirm: y / Enter confirm; n / Esc / q cancel.
+ * - confirm: y / Enter confirm; n / Esc / q cancel; a plan too tall for the
+ *            terminal scrolls with ↑↓ (j/k) and PgUp / PgDn.
  * - select:  ↑↓ (j/k) move, Enter picks, Esc / q cancel (a no-op for a
  *            question that must be answered).
  * - input:   Esc cancels; everything else goes to the focused <input>, which
@@ -51,6 +52,7 @@ export function ModalContainer() {
 	// Track select modal index here (lifted from SelectModal)
 	const [selectIndex, setSelectIndex] = useState(0);
 	const helpScrollRef = useRef<ScrollBoxRenderable | null>(null);
+	const confirmScrollRef = useRef<ScrollBoxRenderable | null>(null);
 
 	// Reset select index when modal changes
 	const modalRef = React.useRef(modal);
@@ -89,6 +91,31 @@ export function ModalContainer() {
 		}
 	};
 
+	/** Scroll a confirm dialog's plan when it scrolls. True when the key did. */
+	const scrollConfirm = (
+		key: KeyPress,
+		message: string,
+		details: readonly string[] | undefined,
+	): boolean => {
+		const scroll = confirmScrollRef.current;
+		const { planHeight } = confirmModalSize(
+			dimensions.terminalWidth,
+			dimensions.terminalHeight,
+			message,
+			details,
+		);
+		if (!scroll || planHeight === null) return false;
+		const page = Math.max(1, planHeight - 1);
+		if (key.name === "pageup") scroll.scrollBy(-page);
+		else if (key.name === "pagedown") scroll.scrollBy(page);
+		else if (isPlain(key) && (key.name === "up" || key.name === "k")) {
+			scroll.scrollBy(-1);
+		} else if (isPlain(key) && (key.name === "down" || key.name === "j")) {
+			scroll.scrollBy(1);
+		} else return false;
+		return true;
+	};
+
 	usePasteLayer("modal", modal !== null, () => true);
 
 	useKeyLayer("modal", modal !== null, (key) => {
@@ -109,7 +136,9 @@ export function ModalContainer() {
 
 			case "confirm":
 				if (key.name === "y" || isEnter(key)) modal.onConfirm();
-				else if (
+				else if (scrollConfirm(key, modal.message, modal.details)) {
+					// A long plan scrolled; nothing else happens on that key.
+				} else if (
 					key.name === "n" ||
 					key.name === "q" ||
 					key.name === "escape"
@@ -149,7 +178,14 @@ export function ModalContainer() {
 	const renderModal = () => {
 		switch (modal.type) {
 			case "confirm":
-				return <ConfirmModal title={modal.title} message={modal.message} />;
+				return (
+					<ConfirmModal
+						title={modal.title}
+						message={modal.message}
+						details={modal.details}
+						scrollRef={confirmScrollRef}
+					/>
+				);
 
 			case "input":
 				return (
@@ -191,7 +227,13 @@ export function ModalContainer() {
 				return <LoadingModal message={modal.message} />;
 
 			case "help":
-				return <HelpOverlay screen={modal.screen} scrollRef={helpScrollRef} />;
+				return (
+					<HelpOverlay
+						screen={modal.screen}
+						sections={modal.sections}
+						scrollRef={helpScrollRef}
+					/>
+				);
 
 			default:
 				return null;

package/src/ui/components/primitives/ListCategoryRow.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { displayWidth, truncate } from "../../text-width.js";
 import { type BadgeTone, theme } from "../../theme.js";
 import { SelectableRow, rowLead } from "./SelectableRow.js";
 
@@ -17,6 +18,12 @@ interface ListCategoryRowProps {
 	 * that is broken rather than as a section title.
 	 */
 	expandable?: boolean;
+	/**
+	 * Columns the row may use. When given, the title and count are cut with
+	 * "…" to fit one line (the badge goes first), so a narrow panel never
+	 * wraps the heading onto a second row.
+	 */
+	width?: number;
 }
 
 export function ListCategoryRow({
@@ -27,10 +34,21 @@ export function ListCategoryRow({
 	tone = "neutral",
 	selected,
 	expandable = true,
+	width,
 }: ListCategoryRowProps) {
 	const colors = theme.badge[tone];
 	const marker = expandable ? (expanded ? "▼ " : "▶ ") : "";
-	const label = `${marker}${title}${count !== undefined ? ` (${count})` : ""}`;
+	const full = `${marker}${title}${count !== undefined ? ` (${count})` : ""}`;
+	// The lead cell and the trailing space inside the chip take two columns.
+	const label =
+		width === undefined ? full : truncate(full, Math.max(1, width - 2));
+	const shownBadge =
+		width === undefined ||
+		(badge !== undefined &&
+			label === full &&
+			displayWidth(full) + 3 + displayWidth(badge) <= width)
+			? badge
+			: undefined;
 
 	// Both forms start with the row's lead cell — a blank inside the chip, the
 	// selection mark on the cursor — so the title never moves as it is selected.
@@ -50,7 +68,9 @@ export function ListCategoryRow({
 					{label}{" "}
 				</strong>
 			)}
-			{!selected && badge ? <span fg={colors.badgeFg}> {badge}</span> : null}
+			{!selected && shownBadge ? (
+				<span fg={colors.badgeFg}> {shownBadge}</span>
+			) : null}
 		</SelectableRow>
 	);
 }

package/src/ui/components/primitives/ScopeBadge.tsx

@@ -0,0 +1,28 @@
+import { theme } from "../../theme.js";
+
+/** The scopes as magus names them to the user. */
+export type ScopeWord = "USER" | "PROJECT" | "LOCAL";
+
+interface ScopeBadgeProps {
+	scope: ScopeWord;
+	/** True inside a selected row, where the selection owns the colour channel. */
+	selected?: boolean;
+}
+
+/**
+ * A scope as a word chip — ` USER `, ` PROJECT `, ` LOCAL ` — the badge the
+ * CLI reports print, for a row that says WHERE something is rather than
+ * whether it is on (that is `ScopeSquares`). A neutral fill, because a scope
+ * is a place, not a state. On a selected row the chip gives up its fill and
+ * keeps the word, like every other tone there. Inside a `<text>`.
+ */
+export function ScopeBadge({ scope, selected = false }: ScopeBadgeProps) {
+	if (selected) {
+		return <span fg={theme.selection.fg}>{` ${scope} `}</span>;
+	}
+	return (
+		<span bg={theme.badge.neutral.bg} fg={theme.badge.neutral.fg}>
+			{` ${scope} `}
+		</span>
+	);
+}

package/src/ui/components/primitives/ScopeVersionLine.tsx

@@ -0,0 +1,27 @@
+import { MetaText } from "./MetaText.js";
+import { ScopeBadge, type ScopeWord } from "./ScopeBadge.js";
+import { ToneLine } from "./ToneLine.js";
+
+interface ScopeVersionLineProps {
+	scope: ScopeWord;
+	/** The version installed at this scope; null where it is not installed. */
+	version: string | null;
+}
+
+/**
+ * One scope of an install, as a detail line: the scope's badge, then the
+ * installed version in `success`, or "not installed" muted. The words carry
+ * the state, so it reads the same without colour.
+ */
+export function ScopeVersionLine({ scope, version }: ScopeVersionLineProps) {
+	return (
+		<ToneLine>
+			<ScopeBadge scope={scope} />{" "}
+			{version !== null ? (
+				<MetaText text={version} tone="success" />
+			) : (
+				<MetaText text="not installed" />
+			)}
+		</ToneLine>
+	);
+}

package/src/ui/components/primitives/SelectableRow.tsx

@@ -19,6 +19,12 @@ export function rowLead(selected: boolean): string {
 
 interface SelectableRowProps {
 	selected: boolean;
+	/**
+	 * `item` (the default) is a thing in the list. `action` is a row that does
+	 * something when opened — "+ Create…" — and reads in the accent until the
+	 * selection takes the colour channel over.
+	 */
+	variant?: "item" | "action";
 	/**
 	 * Leading cells before the children. The first of them is the lead cell,
 	 * which carries `SELECTED_MARK` on the selected row. At 0 the children own
@@ -30,6 +36,7 @@ interface SelectableRowProps {
 
 export function SelectableRow({
 	selected,
+	variant = "item",
 	indent = 0,
 	children,
 }: SelectableRowProps) {
@@ -44,7 +51,13 @@ export function SelectableRow({
 			// truecolor white, so every unselected row here rendered white-on-cream
 			// and vanished on a light theme. Same root cause as the original bug,
 			// reached by omission rather than by a wrong literal.
-			fg={selected ? theme.selection.fg : theme.colors.text}
+			fg={
+				selected
+					? theme.selection.fg
+					: variant === "action"
+						? theme.colors.accent
+						: theme.colors.text
+			}
 		>
 			{lead}
 			{children}

package/src/ui/components/primitives/ToneLine.tsx

@@ -0,0 +1,25 @@
+import type React from "react";
+import { theme } from "../../theme.js";
+
+/** A line's tone: plain text, or one of the meta tones by what it says. */
+export type LineTone = "text" | keyof typeof theme.meta;
+
+interface ToneLineProps {
+	/** Plain `text` by default; `muted` for an aside, the rest by meaning. */
+	tone?: LineTone;
+	children: React.ReactNode;
+}
+
+/**
+ * One line of words in a detail panel, a notice or an empty list, coloured by
+ * what it says rather than by where it sits: a note is `muted`, a warning
+ * `warning`. Spans inside it (`MetaText`, `ScopeBadge`) keep their own tones.
+ * Not for list rows: a selectable row is `SelectableRow`.
+ */
+export function ToneLine({ tone = "text", children }: ToneLineProps) {
+	return (
+		<text fg={tone === "text" ? theme.colors.text : theme.meta[tone]}>
+			{children}
+		</text>
+	);
+}