magus-cli 0.0.0-placeholder → 7.1.0

package/src/ui/adapters/skillsAdapter.ts

@@ -0,0 +1,229 @@
+import type { SkillInfo, SkillSetInfo } from "../../types/index.js";
+
+// ─── Item types ───────────────────────────────────────────────────────────────
+
+export interface SkillCategoryItem {
+	id: string;
+	kind: "category";
+	label: string;
+	title: string;
+	categoryKey: string;
+	count?: number;
+	tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+	badge?: string;
+	star?: string;
+}
+
+export interface SkillSkillItem {
+	id: string;
+	kind: "skill";
+	label: string;
+	skill: SkillInfo;
+	/** Extra indent level for child skills inside an expanded skill set */
+	indent?: number;
+}
+
+export interface SkillSetItem {
+	id: string;
+	kind: "skillset";
+	label: string;
+	skillSet: SkillSetInfo;
+	expanded: boolean;
+}
+
+export type SkillBrowserItem =
+	| SkillCategoryItem
+	| SkillSkillItem
+	| SkillSetItem;
+
+// ─── Adapter ─────────────────────────────────────────────────────────────────
+
+export interface BuildSkillBrowserItemsArgs {
+	recommended: SkillInfo[];
+	popular: SkillInfo[];
+	installed: SkillInfo[];
+	searchResults: SkillInfo[];
+	query: string;
+	isSearchLoading: boolean;
+	skillSets?: SkillSetInfo[];
+	expandedSets?: Set<string>;
+}
+
+/**
+ * Builds the flat list of items for the SkillsScreen list panel.
+ * Extracted from SkillsScreen so it can be tested independently.
+ */
+export function buildSkillBrowserItems({
+	recommended,
+	popular,
+	installed,
+	searchResults,
+	query,
+	isSearchLoading,
+	skillSets = [],
+	expandedSets = new Set(),
+}: BuildSkillBrowserItemsArgs): SkillBrowserItem[] {
+	const lowerQuery = query.toLowerCase();
+	const items: SkillBrowserItem[] = [];
+
+	// ── INSTALLED: always shown at top (if any) ──
+	const installedFiltered = lowerQuery
+		? installed.filter((s) => s.name.toLowerCase().includes(lowerQuery))
+		: installed;
+
+	if (installedFiltered.length > 0) {
+		items.push({
+			id: "cat:installed",
+			kind: "category",
+			label: `Installed (${installedFiltered.length})`,
+			title: "Installed",
+			categoryKey: "installed",
+			count: installedFiltered.length,
+			tone: "purple",
+			star: "\u25CF ",
+		});
+		for (const skill of installedFiltered) {
+			items.push({
+				id: `skill:${skill.id}`,
+				kind: "skill",
+				label: skill.name,
+				skill,
+			});
+		}
+	}
+
+	// ── RECOMMENDED: skill sets + individual skills, all as first-class items ──
+	const filteredSets = lowerQuery
+		? skillSets.filter((s) => {
+				if (s.name.toLowerCase().includes(lowerQuery)) return true;
+				if (s.description.toLowerCase().includes(lowerQuery)) return true;
+				if (
+					s.loaded &&
+					s.skills.some((sk) => sk.name.toLowerCase().includes(lowerQuery))
+				)
+					return true;
+				return false;
+			})
+		: skillSets;
+
+	const filteredRec = lowerQuery
+		? recommended.filter(
+				(s) =>
+					s.name.toLowerCase().includes(lowerQuery) ||
+					(s.description || "").toLowerCase().includes(lowerQuery),
+			)
+		: recommended;
+
+	const recommendedCount = filteredSets.length + filteredRec.length;
+
+	items.push({
+		id: "cat:recommended",
+		kind: "category",
+		label: "Recommended",
+		title: "Recommended",
+		categoryKey: "recommended",
+		count: recommendedCount,
+		tone: "green",
+		star: "\u2605 ",
+	});
+
+	// Skill sets first within recommended
+	for (const set of filteredSets) {
+		const isExpanded = expandedSets.has(set.id);
+		items.push({
+			id: `skillset:${set.id}`,
+			kind: "skillset",
+			label: set.name,
+			skillSet: set,
+			expanded: isExpanded,
+		});
+		// When expanded, show child skills as indented skill items
+		if (isExpanded && set.loaded) {
+			const childSkills = lowerQuery
+				? set.skills.filter((sk) => sk.name.toLowerCase().includes(lowerQuery))
+				: set.skills;
+			for (const skill of childSkills) {
+				items.push({
+					id: `skill:${skill.id}`,
+					kind: "skill",
+					label: skill.name,
+					skill,
+					indent: 2,
+				});
+			}
+		}
+	}
+
+	// Then individual recommended skills
+	for (const skill of filteredRec) {
+		items.push({
+			id: `skill:${skill.id}`,
+			kind: "skill",
+			label: skill.name,
+			skill,
+		});
+	}
+
+	// ── SEARCH MODE ──
+	if (query.length >= 2) {
+		if (!isSearchLoading && searchResults.length > 0) {
+			const recNames = new Set(recommended.map((s) => s.name));
+			const deduped = searchResults
+				.filter((s) => !recNames.has(s.name))
+				.sort((a, b) => (b.stars ?? 0) - (a.stars ?? 0));
+
+			if (deduped.length > 0) {
+				items.push({
+					id: "cat:search",
+					kind: "category",
+					label: `Search (${deduped.length})`,
+					title: "Search",
+					categoryKey: "popular",
+					count: deduped.length,
+					tone: "teal",
+				});
+				for (const skill of deduped) {
+					items.push({
+						id: `skill:${skill.id}`,
+						kind: "skill",
+						label: skill.name,
+						skill,
+					});
+				}
+			}
+		}
+		return items;
+	}
+
+	// ── POPULAR (default, no search query) — only skills with meaningful stars ──
+	// Dedup by name — API can return same skill name from different repos
+	const seenPopular = new Set<string>();
+	const popularDeduped = popular
+		.filter((s) => (s.stars ?? 0) >= 5)
+		.filter((s) => {
+			if (seenPopular.has(s.name)) return false;
+			seenPopular.add(s.name);
+			return true;
+		});
+	if (popularDeduped.length > 0) {
+		items.push({
+			id: "cat:popular",
+			kind: "category",
+			label: "Popular",
+			title: "Popular",
+			categoryKey: "popular",
+			count: popularDeduped.length,
+			tone: "teal",
+		});
+		for (const skill of popularDeduped) {
+			items.push({
+				id: `skill:${skill.id}`,
+				kind: "skill",
+				label: skill.name,
+				skill,
+			});
+		}
+	}
+
+	return items;
+}

package/src/ui/adapters/stylesAdapter.ts

@@ -0,0 +1,403 @@
+import {
+	COMMUNITY_STYLES,
+	type CommunityStyle,
+	type CommunityStyleSource,
+	findCommunitySource,
+} from "../../data/community-styles.js";
+import type { CommunityUpstreamStatus } from "../../services/community-styles.js";
+import type {
+	ImportedStyle,
+	StylePreset,
+	StyleSource,
+} from "../../services/styles-manager.js";
+
+// ─── Item types ───────────────────────────────────────────────────────────────
+
+/**
+ * List sections, in display order.
+ *
+ * Anthropic's official styles lead because they are the familiar starting
+ * point — someone who already knows Explanatory or Learning should find it
+ * first, then discover the presets that refine it. Team comes after the
+ * presets: it is the section a project fills in for itself.
+ *
+ * Community sorts LAST, and deliberately not second where "styles someone else
+ * wrote" would group it with Anthropic's. Two reasons decide it. It is the only
+ * section whose contents can change from the network, so keeping it at the
+ * bottom means the offline-authored sections never shift position underneath a
+ * user. And empty sections are omitted, so inserting it at position two would
+ * push Anthropic's familiar row down the screen for every existing user to buy
+ * discovery for a section most of them will not use.
+ */
+export type StyleCategoryKey =
+	| "anthropic"
+	| "verbosity"
+	| "modifier"
+	| "team"
+	| "personal"
+	| "community";
+
+export interface StyleCategoryItem {
+	id: string;
+	kind: "category";
+	label: string;
+	title: string;
+	categoryKey: StyleCategoryKey;
+	count: number;
+	tone: "purple" | "green" | "teal" | "yellow" | "gray" | "red";
+	badge?: string;
+}
+
+export interface StyleEntryItem {
+	id: string;
+	kind: "style";
+	label: string;
+	source: StyleSource;
+	/** In the pending selection (what apply would write). */
+	checked: boolean;
+	/** In the selection the generated style file records (what is live). */
+	applied: boolean;
+	/**
+	 * Name of an already-selected style this one cancels out with, or null.
+	 * Verbosity presets never report one — they behave as a radio group, so
+	 * selecting a second replaces the first rather than colliding with it.
+	 */
+	conflictsWith: string | null;
+	/** Template presets ship an empty table and cannot be applied directly. */
+	disabled: boolean;
+	/** For a fetched community style: what the last upstream check found. */
+	upstream?: CommunityUpstreamStatus;
+}
+
+/**
+ * A registry entry whose text is NOT on this machine yet.
+ *
+ * Not an `ImportedStyle`, and that is the point. `ImportedStyle` means "text
+ * that exists here"; a synthetic one carrying an empty body would be tickable,
+ * composable, and would hash to a lie. Keeping the type honest costs one extra
+ * item kind and buys a list where every tickable row has real words behind it.
+ */
+export interface StyleOfferItem {
+	id: string;
+	kind: "offer";
+	label: string;
+	entry: CommunityStyle;
+	source: CommunityStyleSource;
+	/** True when the project's committed declaration asks for this one. */
+	declared: boolean;
+}
+
+export type StyleBrowserItem =
+	| StyleCategoryItem
+	| StyleEntryItem
+	| StyleOfferItem;
+
+// ─── Adapter ──────────────────────────────────────────────────────────────────
+
+export interface BuildStyleBrowserItemsArgs {
+	presets: StylePreset[];
+	imports: ImportedStyle[];
+	/** Pending selection, by `source.id`. */
+	selected: Set<string>;
+	/** Selection recorded in the generated style file (null if never applied). */
+	applied: { presets: string[]; imports: string[] } | null;
+	query: string;
+	/**
+	 * Registry entries to offer. Defaults to the shipped registry, which is a
+	 * compile-time constant, so building the list still costs no I/O whatsoever.
+	 */
+	registry?: CommunityStyle[];
+	/** Last upstream check per coordinate id. Read from the local store only. */
+	upstream?: Record<string, CommunityUpstreamStatus>;
+	/** `community:` ids the declaration asks for and this machine lacks. */
+	fetchable?: string[];
+}
+
+function matches(source: StyleSource, lowerQuery: string): boolean {
+	if (!lowerQuery) return true;
+	const summary =
+		source.kind === "preset" ? source.summary : source.description;
+	// Filter on the displayed name too. A captured built-in shows as
+	// "Explanatory" and a titled preset as its full standard name; typing what
+	// you can see has to find it.
+	const shown = source.displayName;
+	return (
+		source.name.toLowerCase().includes(lowerQuery) ||
+		shown.toLowerCase().includes(lowerQuery) ||
+		summary.toLowerCase().includes(lowerQuery)
+	);
+}
+
+/** Same rule for an offer, over the fields an offer actually has. */
+function offerMatches(entry: CommunityStyle, lowerQuery: string): boolean {
+	if (!lowerQuery) return true;
+	return (
+		entry.id.toLowerCase().includes(lowerQuery) ||
+		entry.displayName.toLowerCase().includes(lowerQuery) ||
+		entry.summary.toLowerCase().includes(lowerQuery)
+	);
+}
+
+/**
+ * Which already-selected preset cancels `preset` out.
+ *
+ * `conflicts` is declared on one side of a pair in the shipped presets but the
+ * relationship is symmetric, so both directions are checked — otherwise the
+ * warning appears or not depending on which of the two the user ticked first.
+ */
+function findConflict(
+	preset: StylePreset,
+	selectedPresets: StylePreset[],
+): string | null {
+	for (const other of selectedPresets) {
+		if (other.name === preset.name) continue;
+		if (
+			preset.conflicts.includes(other.name) ||
+			other.conflicts.includes(preset.name)
+		) {
+			return other.name;
+		}
+	}
+	return null;
+}
+
+/**
+ * Build the flat list for the Styles screen.
+ *
+ * Section order is Anthropic official, verbosity (exactly one), modifiers (any
+ * number), the project's own styles, this machine's, and finally other people's.
+ * Category rows are non-selectable headers — the screen's key handler skips
+ * them, and an empty section is omitted entirely rather than shown with a zero
+ * count.
+ */
+export function buildStyleBrowserItems({
+	presets,
+	imports,
+	selected,
+	applied,
+	query,
+	registry = COMMUNITY_STYLES,
+	upstream = {},
+	fetchable = [],
+}: BuildStyleBrowserItemsArgs): StyleBrowserItem[] {
+	const lowerQuery = query.trim().toLowerCase();
+	const items: StyleBrowserItem[] = [];
+
+	const appliedPresets = new Set(applied?.presets ?? []);
+	const appliedImports = new Set(applied?.imports ?? []);
+	const selectedPresets = presets.filter((preset) => selected.has(preset.id));
+
+	const verbosity = presets.filter((preset) => preset.axis === "verbosity");
+	const modifiers = presets.filter((preset) => preset.axis === "modifier");
+
+	const pushPresets = (
+		group: StylePreset[],
+		categoryKey: StyleCategoryKey,
+		title: string,
+		tone: StyleCategoryItem["tone"],
+		badge: string,
+	) => {
+		const filtered = group.filter((preset) => matches(preset, lowerQuery));
+		if (filtered.length === 0) return;
+		items.push({
+			id: `cat:${categoryKey}`,
+			kind: "category",
+			label: title,
+			title,
+			categoryKey,
+			count: filtered.length,
+			tone,
+			badge,
+		});
+		for (const preset of filtered) {
+			items.push({
+				id: preset.id,
+				kind: "style",
+				label: preset.displayName,
+				source: preset,
+				checked: selected.has(preset.id),
+				applied: appliedPresets.has(preset.name),
+				conflictsWith:
+					preset.axis === "verbosity"
+						? null
+						: findConflict(preset, selectedPresets),
+				disabled: preset.template,
+			});
+		}
+	};
+
+	const pushImports = (
+		origin: ImportedStyle["origin"],
+		categoryKey: StyleCategoryKey,
+		title: string,
+		tone: StyleCategoryItem["tone"],
+		badge: string,
+	) => {
+		const filtered = imports.filter(
+			(style) => style.origin === origin && matches(style, lowerQuery),
+		);
+		if (filtered.length === 0) return;
+		items.push({
+			id: `cat:${categoryKey}`,
+			kind: "category",
+			label: title,
+			title,
+			categoryKey,
+			count: filtered.length,
+			tone,
+			badge,
+		});
+		for (const style of filtered) {
+			items.push({
+				id: style.id,
+				kind: "style",
+				// The displayed name, not the on-disk slug — "Explanatory", not
+				// "builtin-explanatory". `id` still carries the real one.
+				label: style.displayName,
+				source: style,
+				checked: selected.has(style.id),
+				applied: appliedImports.has(style.id),
+				conflictsWith: null,
+				disabled: false,
+			});
+		}
+	};
+
+	/**
+	 * ONE stable order: registry order, by source then display name, whether a
+	 * style is fetched or still an offer.
+	 *
+	 * Grouping fetched ones first was worse in use. Fetching moved the row out
+	 * of the offers group and up into the fetched group, so everything below it
+	 * shifted by one and the cursor — which tracks an index — ended up on a
+	 * different style than the one just acted on. Position now says WHERE a
+	 * style is in the registry and nothing else; whether it is on disk is the
+	 * checkbox's job, which is the thing that can change without moving.
+	 *
+	 * Never ordered by popularity: the best-known names in this space ship no
+	 * style files at all, so any such ranking would be one the registry cannot
+	 * honour.
+	 */
+	const pushCommunity = () => {
+		const declared = new Set(fetchable);
+		const fetched = imports.filter((style) => style.origin === "community");
+		// A community style's `name` IS its registry coordinate id, which is what
+		// lets one row hold either state without moving.
+		const onDisk = new Map(fetched.map((style) => [style.name, style]));
+
+		// Walk the registry in its own order and emit whichever state each entry
+		// is in. A fetched entry keeps the slot its offer occupied.
+		const rows = registry
+			.filter((entry) => !entry.retired || onDisk.has(entry.id))
+			.filter(
+				(entry) =>
+					findCommunitySource(entry.sourceId)?.retired !== true ||
+					onDisk.has(entry.id),
+			)
+			.filter((entry) => {
+				const style = onDisk.get(entry.id);
+				// Filter on whichever representation is showing, so typing a query
+				// cannot make a row vanish just because it changed state.
+				return style
+					? matches(style, lowerQuery)
+					: offerMatches(entry, lowerQuery);
+			})
+			.sort(
+				(a, b) =>
+					a.sourceId.localeCompare(b.sourceId) ||
+					a.displayName.localeCompare(b.displayName),
+			);
+
+		// Anything on disk the registry no longer lists — a retired entry pulled
+		// before it was dropped. It still belongs to the user, so it is shown,
+		// after the registry rows so it cannot shift them.
+		const listed = new Set(rows.map((entry) => entry.id));
+		const orphans = fetched
+			.filter((style) => !listed.has(style.name))
+			.filter((style) => matches(style, lowerQuery))
+			.sort((a, b) => a.name.localeCompare(b.name));
+
+		if (rows.length === 0 && orphans.length === 0) return;
+
+		items.push({
+			id: "cat:community",
+			kind: "category",
+			label: "Community",
+			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",
+			badge: "from GitHub",
+		});
+
+		const pushFetched = (style: ImportedStyle) => {
+			items.push({
+				id: style.id,
+				kind: "style",
+				label: style.displayName,
+				source: style,
+				checked: selected.has(style.id),
+				applied: appliedImports.has(style.id),
+				conflictsWith: null,
+				disabled: false,
+				upstream: upstream[style.name],
+			});
+		};
+
+		for (const entry of rows) {
+			const style = onDisk.get(entry.id);
+			if (style) {
+				pushFetched(style);
+				continue;
+			}
+			const source = findCommunitySource(entry.sourceId);
+			if (!source) continue;
+			items.push({
+				id: `offer:${entry.id}`,
+				kind: "offer",
+				label: entry.displayName,
+				entry,
+				source,
+				declared: declared.has(`community:${entry.id}`),
+			});
+		}
+
+		for (const style of orphans) pushFetched(style);
+	};
+
+	// Badges are kept short deliberately: the row already carries a title and a
+	// 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.
+	pushImports(
+		"anthropic",
+		"anthropic",
+		"Anthropic official",
+		"yellow",
+		"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");
+	pushCommunity();
+
+	return items;
+}
+
+/**
+ * Index of the first row the user can actually land on, or 0 if none.
+ *
+ * `kind !== "category"` rather than `kind === "style"`: an offer is landable, it
+ * simply cannot be ticked. A cursor that skipped offers would make the whole
+ * section unreachable for a user who has fetched nothing — which is every user
+ * on their first launch.
+ */
+export function firstSelectableIndex(items: StyleBrowserItem[]): number {
+	const index = items.findIndex((item) => item.kind !== "category");
+	return index >= 0 ? index : 0;
+}

package/src/ui/components/CategoryHeader.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { type UiColor, theme } from "../theme.js";
+
+interface CategoryHeaderProps {
+	/** Category title */
+	title: string;
+	/** Optional version to render after the title (e.g., "8.0.0" → " v8.0.0") */
+	version?: string;
+	/** Status badge (e.g., "✓ Configured", "3 plugins") */
+	status?: string;
+	/** Status badge color */
+	statusColor?: UiColor;
+	/** Whether category is expanded */
+	expanded?: boolean;
+	/** Number of items in category */
+	count?: number;
+}
+
+export function CategoryHeader({
+	title,
+	version,
+	status,
+	statusColor = theme.colors.success,
+	expanded = true,
+	count,
+}: CategoryHeaderProps) {
+	const expandIcon = expanded ? "▼" : "▶";
+	const versionBadge = version ? ` v${version}` : "";
+	const countBadge = count !== undefined ? ` (${count})` : "";
+	const statusText = status ? ` ${status}` : "";
+
+	// Flex row instead of one flat <text>: a flat text wraps when the pane is
+	// narrower than the row ("by MadAppGang" lost its final character and the wrap
+	// shifted every item below by one line). Here the dash filler is the only
+	// element allowed to shrink to nothing, so the badge survives at any width
+	// and the title clips last.
+	return (
+		<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>
+					<span fg={theme.colors.text}>
+						<strong> {title}</strong>
+					</span>
+					<span fg={theme.colors.muted}>{versionBadge}</span>
+					<span fg={theme.colors.muted}>{countBadge}</span>
+				</text>
+			</box>
+			{/* flexShrink 100: the filler must be the first thing sacrificed. With equal
+			    shrink factors yoga takes width from the (larger-basis) title first, which
+			    clipped a character off the title while all four dashes survived. */}
+			<box flexShrink={100} minWidth={0} overflow="hidden" height={1}>
+				<text fg={theme.colors.border}> ────</text>
+			</box>
+			{status ? (
+				<box flexShrink={0} height={1}>
+					<text fg={statusColor}>{statusText}</text>
+				</box>
+			) : null}
+		</box>
+	);
+}
+
+export default CategoryHeader;