claudeup 4.37.0 → 4.38.1

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/TabBar.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { useDimensions } from "../state/DimensionsContext.js";
 import type { Screen } from "../state/types.js";
 import { theme } from "../theme.js";
 
@@ -8,7 +9,7 @@ interface Tab {
 	screen: Screen;
 }
 
-const TABS: Tab[] = [
+export const TABS: Tab[] = [
 	{ key: "1", label: "Plugins", screen: "plugins" },
 	{ key: "2", label: "Skills", screen: "skills" },
 	{ key: "3", label: "MCP", screen: "mcp" },
@@ -17,18 +18,57 @@ const TABS: Tab[] = [
 	{ key: "6", label: "CLI", screen: "cli-tools" },
 	{ key: "7", label: "Git State", screen: "gitignore" },
 	{ key: "8", label: "Alias", screen: "alias" },
+	{ key: "9", label: "Styles", screen: "styles" },
 ];
 
+/** Columns one tab occupies: the text plus its one-space padding each side. */
+function cellWidth(text: string): number {
+	return text.length + 2;
+}
+
+/** Columns the whole bar occupies: every cell plus the separators between. */
+export function barWidth(texts: string[]): number {
+	if (texts.length === 0) return 0;
+	return texts.reduce((n, t) => n + cellWidth(t), 0) + (texts.length - 1);
+}
+
+/**
+ * Choose what each tab shows for the space available.
+ *
+ * The full bar is ~99 columns at nine tabs, so on a 94-column pane it used to
+ * overflow and OpenTUI clipped each cell — producing a row of truncated stubs
+ * ("1:", "4:", "7:Git ") that named 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.
+ */
+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,
+	);
+}
+
 interface TabBarProps {
 	currentScreen: Screen;
 }
 
 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);
+
 	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];
 
 				return (
 					<box key={tab.key} flexDirection="row">
@@ -36,18 +76,12 @@ export function TabBar({ currentScreen }: TabBarProps) {
 						{isSelected ? (
 							<box>
 								<text bg={theme.colors.accent} fg={theme.hints.fg}>
-									<strong>
-										{" "}
-										{tab.key}:{tab.label}{" "}
-									</strong>
+									<strong> {text} </strong>
 								</text>
 							</box>
 						) : (
 							<box>
-								<text fg={theme.colors.muted}>
-									{" "}
-									{tab.key}:{tab.label}{" "}
-								</text>
+								<text fg={theme.colors.muted}> {text} </text>
 							</box>
 						)}
 						{/* Separator */}

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

@@ -19,7 +19,10 @@ export function ActionHints({ hints }: ActionHintsProps) {
 	return (
 		<box flexDirection="column" marginTop={1}>
 			{hints.map((hint) => (
-				<box key={`${hint.key}:${hint.label}`}>
+				// A box with no flexDirection lays out as a column here, which put
+				// every key chip on its own line above its label. The chip and what
+				// it does are one unit — the footer hints already render that way.
+				<box key={`${hint.key}:${hint.label}`} flexDirection="row">
 					<text
 						bg={
 							hint.tone === "danger"

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

@@ -9,6 +9,13 @@ interface ListCategoryRowProps {
 	badge?: string;
 	tone?: keyof typeof theme.category;
 	selected: boolean;
+	/**
+	 * Whether the row can be opened and closed. Default true, which is what
+	 * every collapsible list wants. Set false for a heading that is purely a
+	 * label — a ▶ on a row that does not respond to Enter reads as a control
+	 * that is broken rather than as a section title.
+	 */
+	expandable?: boolean;
 }
 
 export function ListCategoryRow({
@@ -18,9 +25,11 @@ export function ListCategoryRow({
 	badge,
 	tone = "gray",
 	selected,
+	expandable = true,
 }: ListCategoryRowProps) {
 	const colors = theme.category[tone];
-	const label = `${expanded ? "▼" : "▶"} ${title}${count !== undefined ? ` (${count})` : ""}`;
+	const marker = expandable ? (expanded ? "▼ " : "▶ ") : "";
+	const label = `${marker}${title}${count !== undefined ? ` (${count})` : ""}`;
 
 	return (
 		<SelectableRow selected={selected}>

package/src/ui/registry.ts

@@ -8,6 +8,12 @@ export interface RowRenderProps<T> {
 
 export interface DetailRenderProps<T> {
 	item: T;
+	/**
+	 * Usable columns in the detail panel. Optional — renderers that only emit
+	 * short lines can ignore it. Renderers that print wrapped body text need it,
+	 * because OpenTUI does not reflow: an unwrapped line is clipped, not folded.
+	 */
+	width?: number;
 }
 
 export interface Hint {