claudeup 4.37.0 → 4.38.0

package/src/ui/renderers/styleRenderers.tsx

@@ -0,0 +1,809 @@
+import type React from "react";
+import type { CommunityUpstreamStatus } from "../../services/community-styles.js";
+import type {
+	StyleBrowserItem,
+	StyleCategoryItem,
+	StyleEntryItem,
+	StyleOfferItem,
+} from "../adapters/stylesAdapter.js";
+import {
+	ActionHints,
+	DetailSection,
+	KeyValueLine,
+	ListCategoryRow,
+	MetaText,
+	SelectableRow,
+} from "../components/primitives/index.js";
+import type { ItemRenderer } from "../registry.js";
+import { type UiColor, theme } from "../theme.js";
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+const MAX_NAME_LEN = 22;
+
+function truncate(text: string, max: number): string {
+	return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+/**
+ * The checkbox glyph.
+ *
+ * `applied` (what the generated file records) and `checked` (the pending
+ * 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.
+ */
+function checkbox(item: StyleEntryItem): { glyph: string; tone: string } {
+	if (item.disabled) return { 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 };
+	return { glyph: "[ ]", tone: theme.colors.muted };
+}
+
+/**
+ * The glyph for a registry entry whose text is not here yet.
+ *
+ * Never a `[ ]`. An unchecked checkbox says "tick me to include this", and an
+ * offer cannot be included — there are no words behind it until it is fetched.
+ * The arrow says "available", which is the true statement.
+ */
+const OFFER_GLYPH = "[↓]";
+
+/** "3h ago", for a check timestamp. Coarse on purpose — precision implies rigour. */
+function ago(then: number, now: number): string {
+	const minutes = Math.max(0, Math.round((now - then) / 60_000));
+	if (minutes < 1) return "just now";
+	if (minutes < 60) return `${minutes}m ago`;
+	const hours = Math.round(minutes / 60);
+	if (hours < 24) return `${hours}h ago`;
+	return `${Math.round(hours / 24)}d ago`;
+}
+
+/**
+ * The Upstream line, and the one rule it must never break.
+ *
+ * `unknown` renders as "not checked" plus the reason, NEVER as anything a reader
+ * could mistake for currency. A rate-limited check, an offline box and a check
+ * that has simply aged past its window all land here, and each of them is the
+ * absence of evidence rather than evidence of freshness.
+ */
+export function upstreamLine(
+	status: CommunityUpstreamStatus | undefined,
+	now: number,
+): { text: string; tone: string } {
+	if (!status) {
+		return { text: "not checked — press u", tone: theme.colors.muted };
+	}
+	const when = status.checkedAt
+		? ` (checked ${ago(status.checkedAt, now)})`
+		: "";
+	if (status.state === "up-to-date") {
+		return { text: `up to date${when}`, tone: theme.colors.success };
+	}
+	if (status.state === "update-available") {
+		return { text: status.detail, tone: theme.colors.warning };
+	}
+	return { text: `not checked — ${status.detail}`, tone: theme.colors.muted };
+}
+
+/** A line that must be reproduced exactly: fenced code, or a markdown table. */
+function isVerbatim(line: string): boolean {
+	return line.trimStart().startsWith("|");
+}
+
+/** A line that opens a new block rather than continuing the previous one. */
+function startsBlock(line: string): boolean {
+	return /^\s*(?:[-*+]\s|#{1,6}\s|\d+\.\s|>\s?)/.test(line);
+}
+
+/**
+ * Group hard-wrapped source lines back into logical blocks.
+ *
+ * Style presets are authored as markdown wrapped at ~76 columns. Re-wrapping
+ * those lines individually to a ~50-column panel leaves every second line a
+ * ragged fragment, because a 40-character continuation line already fits and is
+ * emitted untouched. Joining a block's lines before re-wrapping is what makes
+ * the output look like a paragraph instead of shredded source.
+ *
+ * Fenced code and table rows are passed through untouched — reflowing a table
+ * destroys it, and there is no width at which a mangled table is better than a
+ * clipped one.
+ */
+export function toBlocks(text: string): string[] {
+	const blocks: string[] = [];
+	let current = "";
+	let inFence = false;
+
+	const flush = () => {
+		if (current) blocks.push(current);
+		current = "";
+	};
+
+	for (const raw of text.split("\n")) {
+		const line = raw.replace(/\s+$/, "");
+
+		if (line.trimStart().startsWith("```")) {
+			flush();
+			blocks.push(line);
+			inFence = !inFence;
+			continue;
+		}
+		if (inFence || isVerbatim(line)) {
+			flush();
+			blocks.push(line);
+			continue;
+		}
+		if (!line.trim()) {
+			flush();
+			blocks.push("");
+			continue;
+		}
+		if (startsBlock(line)) {
+			flush();
+			current = line;
+			// A heading is a block of exactly one line; anything after it starts
+			// fresh rather than being folded into the heading text.
+			if (/^\s*#{1,6}\s/.test(line)) flush();
+			continue;
+		}
+		current = current ? `${current} ${line.trim()}` : line;
+	}
+	flush();
+
+	return blocks;
+}
+
+/**
+ * Render a style body as fixed-width lines: reflow, then wrap.
+ *
+ * OpenTUI does not fold text, so a line longer than the panel is clipped rather
+ * than wrapped — which for a rules list means silently losing the end of every
+ * rule.
+ */
+export function formatBody(text: string, width: number): string[] {
+	const out: string[] = [];
+	for (const block of toBlocks(text)) {
+		if (!block) {
+			out.push("");
+			continue;
+		}
+		if (isVerbatim(block) || block.trimStart().startsWith("```")) {
+			out.push(block);
+			continue;
+		}
+		out.push(...wrapText(block, width));
+	}
+	return out;
+}
+
+/**
+ * Wrap one logical block to `width` columns, hanging-indenting continuations
+ * under the block's marker.
+ */
+export function wrapText(text: string, width: number): string[] {
+	const limit = Math.max(20, width);
+	const out: string[] = [];
+
+	for (const rawLine of text.split("\n")) {
+		const line = rawLine.replace(/\s+$/, "");
+		if (line.length <= limit) {
+			out.push(line);
+			continue;
+		}
+
+		// Split the line into its leading marker (indentation plus an optional
+		// bullet) and the content after it. The marker is emitted ONCE and
+		// continuation lines get a blank hanging indent of the same width — so a
+		// bullet stays a bullet instead of being repeated on every wrapped row.
+		const match = /^(\s*(?:[-*]\s+)?)(.*)$/.exec(line);
+		const marker = match?.[1] ?? "";
+		const content = match?.[2] ?? line;
+		const hanging = " ".repeat(marker.length);
+
+		let prefix = marker;
+		let current = "";
+		for (const word of content.split(/\s+/).filter(Boolean)) {
+			const candidate = current ? `${current} ${word}` : word;
+			// Measure the rendered row — prefix included — against the real column
+			// width, not against a budget that drifts with how much came before.
+			if (current && prefix.length + candidate.length > limit) {
+				out.push(prefix + current);
+				prefix = hanging;
+				current = word;
+			} else {
+				current = candidate;
+			}
+		}
+		if (current) out.push(prefix + current);
+	}
+
+	return out;
+}
+
+// ─── Category renderer ────────────────────────────────────────────────────────
+
+const CATEGORY_BLURB: Record<string, string> = {
+	anthropic:
+		"Claude Code's own built-in styles. Their text ships inside the binary, so these are snapshots captured to disk — re-capture them after a Claude Code upgrade or they drift from what the harness actually does.",
+	verbosity:
+		"How much the answer says. Exactly one applies — two contradict each other and cancel out.",
+	modifier:
+		"Independent rules layered on top of the verbosity preset. Combine as many as you like.",
+	team: "This project's own styles, in .claude/output-styles/. They live in the repository, so they commit with the project and everyone working on it gets the same one. Press n to start a new one.",
+	personal:
+		"Styles in ~/.claude/output-styles/ that are not captured built-ins. They exist only on this machine — move one into the project to share it with the team.",
+	community:
+		"Styles written by other people, fetched from their GitHub repos when you ask. claudeup stores no copy of the text — pressing f downloads the current version and stamps where it came from. Third-party writing becomes part of the system prompt when applied, so read it before you tick it.",
+};
+
+/**
+ * Why the two names a user would look for first are absent.
+ *
+ * Without this the omission reads as an oversight: caveman and humanizer are the
+ * highest-starred entries in this space by two orders of magnitude, and they
+ * ship zero output-style files. A registry entry for either would 404 on its
+ * first fetch.
+ */
+const COMMUNITY_ABSENCE_NOTE =
+	"caveman and humanizer are skills, not output styles — they ship no style files, so they cannot appear here.";
+
+/**
+ * A paragraph, pre-wrapped to the panel.
+ *
+ * The same reason `formatBody` exists: OpenTUI does not fold, so a line longer
+ * than the panel is clipped rather than wrapped, and every one of these blocks
+ * is longer than a half-width detail panel. Pre-wrapping is safe either way —
+ * short lines render identically whatever the renderer does with long ones.
+ */
+function WrappedText({
+	text,
+	width,
+	tone,
+}: {
+	text: string;
+	width?: number;
+	/** `UiColor`, not `string`: the terminal's own foreground is an RGBA. */
+	tone?: UiColor;
+}): React.ReactNode {
+	return (
+		<box flexDirection="column">
+			{wrapText(text, width ?? 48).map((line, index) => (
+				<text
+					key={`${index}:${line.slice(0, 12)}`}
+					fg={tone ?? theme.colors.muted}
+				>
+					{line || " "}
+				</text>
+			))}
+		</box>
+	);
+}
+
+const categoryRenderer: ItemRenderer<StyleCategoryItem> = {
+	renderRow: ({ item, isSelected }) => (
+		<ListCategoryRow
+			selected={isSelected}
+			title={item.title}
+			count={item.count}
+			badge={item.badge}
+			tone={item.tone}
+			// These are section labels, not collapsible groups — the cursor skips
+			// them entirely, so a ▶ would advertise an interaction that isn't there.
+			expandable={false}
+		/>
+	),
+
+	renderDetail: ({ item, width }) => (
+		<box flexDirection="column">
+			<text fg={theme.colors.accent}>
+				<strong>{item.title}</strong>
+			</text>
+			<box marginTop={1}>
+				<WrappedText
+					text={CATEGORY_BLURB[item.categoryKey] ?? ""}
+					width={width}
+				/>
+			</box>
+			{item.categoryKey === "community" ? (
+				<box marginTop={1}>
+					<WrappedText text={COMMUNITY_ABSENCE_NOTE} width={width} />
+				</box>
+			) : null}
+		</box>
+	),
+};
+
+// ─── Style renderer ───────────────────────────────────────────────────────────
+
+const styleRenderer: ItemRenderer<StyleEntryItem> = {
+	renderRow: ({ item, isSelected, width }) => {
+		const { source } = item;
+		const { glyph, tone } = checkbox(item);
+		const summary =
+			source.kind === "preset" ? source.summary : source.description;
+		// The label the adapter chose: Anthropic's own name for a captured
+		// built-in, the on-disk name for everything else.
+		const shown = item.label;
+		// Budget: indent(1) + checkbox(3) + space + name + 2 + summary.
+		const nameWidth = Math.min(MAX_NAME_LEN, shown.length);
+		const summaryRoom = Math.max(0, (width ?? 48) - nameWidth - 9);
+
+		return (
+			<SelectableRow selected={isSelected} indent={1}>
+				<span fg={isSelected ? theme.selection.fg : tone}>{glyph}</span>
+				<span> </span>
+				<span
+					fg={
+						isSelected
+							? theme.selection.fg
+							: item.disabled
+								? theme.colors.muted
+								: theme.colors.text
+					}
+				>
+					{truncate(shown, MAX_NAME_LEN).padEnd(nameWidth)}
+				</span>
+				{/* ASCII on purpose. U+26A0 carries emoji presentation, so terminals
+				    draw it two cells wide while the layout measures it as one — the
+				    row's next character was overprinted. */}
+				{item.conflictsWith ? <MetaText text=" (!)" tone="danger" /> : null}
+				{/* A pending update has to be visible from the LIST. Nobody opens the
+				    detail panel on a style they are happy with, which is exactly the
+				    style an update lands on. */}
+				{item.upstream?.state === "update-available" ? (
+					<MetaText text=" (new)" tone="warning" />
+				) : null}
+				{summaryRoom > 6 ? (
+					<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
+						{`  ${truncate(summary, summaryRoom)}`}
+					</span>
+				) : null}
+			</SelectableRow>
+		);
+	},
+
+	renderDetail: ({ item, width }) => {
+		const { source } = item;
+		const summary =
+			source.kind === "preset" ? source.summary : source.description;
+		const bodyLines = formatBody(source.body, width ?? 48);
+
+		const originLabel =
+			source.kind === "imported"
+				? source.origin === "anthropic"
+					? "Anthropic official"
+					: source.origin === "community"
+						? "community style (fetched from GitHub)"
+						: source.origin === "team"
+							? "team style (commits with the project)"
+							: "personal style (this machine only)"
+				: null;
+
+		const provenance = source.kind === "imported" ? source.community : null;
+		const upstream = upstreamLine(item.upstream, Date.now());
+
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.accent}>
+					<strong>{item.label}</strong>
+				</text>
+
+				{summary ? (
+					<box marginTop={1}>
+						<text fg={theme.colors.text}>{summary}</text>
+					</box>
+				) : null}
+
+				<box flexDirection="column" marginTop={1}>
+					<KeyValueLine
+						label="Kind"
+						value={
+							<span fg={theme.colors.info}>
+								{source.kind === "preset"
+									? source.axis === "verbosity"
+										? "verbosity preset"
+										: "modifier preset"
+									: (originLabel ?? "")}
+							</span>
+						}
+					/>
+					{provenance ? (
+						<KeyValueLine
+							label="Source"
+							value={
+								<span fg={theme.colors.text}>
+									{provenance.path
+										? `${provenance.source} · ${provenance.path}`
+										: provenance.source}
+								</span>
+							}
+						/>
+					) : null}
+					{provenance ? (
+						<KeyValueLine
+							label="Ref"
+							value={
+								<span fg={theme.colors.muted}>
+									{provenance.commit
+										? `${provenance.ref ?? "HEAD"}, pinned at ${provenance.commit}`
+										: // An unresolved pin is stated, not hidden. It is the
+											// difference between "this copy is reproducible" and
+											// "these are the bytes we happened to get".
+											`${provenance.ref ?? "HEAD"}, no commit pin recorded`}
+								</span>
+							}
+						/>
+					) : null}
+					{provenance?.fetched ? (
+						<KeyValueLine
+							label="Fetched"
+							value={<span fg={theme.colors.text}>{provenance.fetched}</span>}
+						/>
+					) : null}
+					{provenance ? (
+						<KeyValueLine
+							label="Licence"
+							value={
+								provenance.licence ? (
+									<span fg={theme.colors.text}>
+										{provenance.author
+											? `${provenance.licence} · ${provenance.author}`
+											: provenance.licence}
+									</span>
+								) : (
+									// Warning colour, and the words say what is missing rather
+									// than naming a licence that does not exist. NOASSERTION or
+									// no licence file means no grant of redistribution rights.
+									<span fg={theme.colors.warning}>
+										{provenance.author
+											? `no licence granted · ${provenance.author}`
+											: "no licence granted"}
+									</span>
+								)
+							}
+						/>
+					) : null}
+					{provenance ? (
+						<KeyValueLine
+							label="Upstream"
+							value={<span fg={upstream.tone}>{upstream.text}</span>}
+						/>
+					) : null}
+					{provenance ? (
+						<KeyValueLine
+							label="Managed"
+							value={
+								<span fg={theme.colors.muted}>
+									{source.kind === "imported" && source.managed
+										? "yes — claudeup's copy, re-fetchable"
+										: "no — this copy is yours, claudeup leaves it alone"}
+								</span>
+							}
+						/>
+					) : null}
+					{source.kind === "preset" && source.displayName !== source.name ? (
+						<KeyValueLine
+							label="Preset"
+							value={<span fg={theme.colors.muted}>{source.name}</span>}
+						/>
+					) : null}
+					{source.kind === "imported" && source.updatedAt ? (
+						<KeyValueLine
+							label="Updated"
+							value={<span fg={theme.colors.text}>{source.updatedAt}</span>}
+						/>
+					) : null}
+					{source.kind === "imported" && source.capturedFrom ? (
+						// The Claude Code version this snapshot came from. Shown because
+						// a built-in's real text lives in the binary: once the harness
+						// moves on, this file is a copy of what it USED to say.
+						<KeyValueLine
+							label="Captured"
+							value={
+								<span fg={theme.colors.muted}>
+									{`from Claude Code ${source.capturedFrom}`}
+								</span>
+							}
+						/>
+					) : null}
+					{source.kind === "imported" && source.displayName !== source.name ? (
+						<KeyValueLine
+							label="File"
+							value={<span fg={theme.colors.muted}>{`${source.name}.md`}</span>}
+						/>
+					) : null}
+					<KeyValueLine
+						label="Selected"
+						value={
+							<span
+								fg={item.checked ? theme.colors.success : theme.colors.muted}
+							>
+								{item.checked ? "yes" : "no"}
+							</span>
+						}
+					/>
+					<KeyValueLine
+						label="Live"
+						value={
+							<span
+								fg={item.applied ? theme.colors.success : theme.colors.muted}
+							>
+								{item.applied ? "yes — in the active style" : "no"}
+							</span>
+						}
+					/>
+					{source.kind === "preset" && source.conflicts.length > 0 ? (
+						<KeyValueLine
+							label="Conflicts"
+							value={
+								<span fg={theme.colors.warning}>
+									{source.conflicts.join(", ")}
+								</span>
+							}
+						/>
+					) : null}
+				</box>
+
+				{item.conflictsWith ? (
+					<box marginTop={1}>
+						<text fg={theme.colors.danger}>
+							{`Conflict: cancels out with "${item.conflictsWith}", which is also selected. Apply will refuse until one is unticked.`}
+						</text>
+					</box>
+				) : null}
+
+				{item.disabled ? (
+					<box marginTop={1}>
+						<text fg={theme.colors.warning}>
+							This is a template — its table is empty until it is filled from
+							this codebase. Press t to have Claude Code survey the project and
+							fill it in; the result lands under Team, where it commits with the
+							repository.
+						</text>
+					</box>
+				) : null}
+
+				{/* Stated plainly, and never softened. We validate the coordinate, the
+				    content type, the size and the frontmatter; we do not and cannot
+				    validate the body, and a panel that implied otherwise would be
+				    worse than one that admits it. `(!)` is ASCII for the reason given
+				    on the row glyph above. */}
+				{provenance ? (
+					<box marginTop={1}>
+						<WrappedText
+							width={width}
+							tone={theme.colors.warning}
+							text="(!) Third-party text. Applying it puts these words in the system prompt. A re-fetch overwrites this file, so edit a copy, not this one."
+						/>
+					</box>
+				) : null}
+
+				<DetailSection title="Rules">
+					<box flexDirection="column">
+						{bodyLines.map((line, index) => (
+							<text
+								key={`${index}:${line.slice(0, 12)}`}
+								fg={
+									line.startsWith("#") ? theme.colors.info : theme.colors.text
+								}
+							>
+								{line || " "}
+							</text>
+						))}
+					</box>
+				</DetailSection>
+
+				<DetailSection title="Source">
+					<text fg={theme.colors.muted}>{source.path}</text>
+				</DetailSection>
+
+				<ActionHints
+					hints={[
+						{ key: "Space", label: "toggle", tone: "primary" },
+						{ key: "a", label: "apply selection to this project" },
+						...(item.disabled
+							? [{ key: "t", label: "fill it in from this codebase" }]
+							: source.kind === "imported"
+								? [{ key: "e", label: "open in your default editor" }]
+								: []),
+						...(provenance
+							? [
+									{
+										key: "f",
+										label:
+											item.upstream?.state === "update-available"
+												? "accept the downloaded update"
+												: "re-fetch the current version",
+									},
+									{ key: "u", label: "check this repo for updates" },
+								]
+							: []),
+						{ key: "n", label: "new team style" },
+						{
+							key: "c",
+							label: "clear the active style",
+							tone: "danger" as const,
+						},
+					]}
+				/>
+			</box>
+		);
+	},
+};
+
+// ─── Offer renderer ───────────────────────────────────────────────────────────
+
+/**
+ * A registry entry nobody has fetched.
+ *
+ * Landable but not tickable. It renders in the info colour rather than as a
+ * checkbox because there is nothing on this machine to tick yet — the row is an
+ * offer, and the honest thing for it to advertise is the key that makes it real.
+ */
+const offerRenderer: ItemRenderer<StyleOfferItem> = {
+	renderRow: ({ item, isSelected, width }) => {
+		const nameWidth = Math.min(MAX_NAME_LEN, item.label.length);
+		const summaryRoom = Math.max(0, (width ?? 48) - nameWidth - 9);
+
+		return (
+			<SelectableRow selected={isSelected} indent={1}>
+				<span fg={isSelected ? theme.selection.fg : theme.colors.info}>
+					{OFFER_GLYPH}
+				</span>
+				<span> </span>
+				<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
+					{truncate(item.label, MAX_NAME_LEN).padEnd(nameWidth)}
+				</span>
+				{/* The project asked for this one and this machine does not have it.
+				    Worth flagging on the row: it is the difference between "you could
+				    have this" and "your project is waiting for this". */}
+				{item.declared ? <MetaText text=" (needed)" tone="warning" /> : null}
+				{summaryRoom > 6 ? (
+					<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
+						{`  ${truncate(item.entry.summary, summaryRoom)}`}
+					</span>
+				) : null}
+			</SelectableRow>
+		);
+	},
+
+	renderDetail: ({ item, width }) => {
+		const { entry, source } = item;
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.accent}>
+					<strong>{entry.displayName}</strong>
+				</text>
+
+				<box marginTop={1}>
+					<WrappedText
+						text={entry.summary}
+						width={width}
+						tone={theme.colors.text}
+					/>
+				</box>
+
+				<box flexDirection="column" marginTop={1}>
+					<KeyValueLine
+						label="Kind"
+						value={
+							<span fg={theme.colors.info}>not fetched yet — an offer</span>
+						}
+					/>
+					<KeyValueLine
+						label="Source"
+						value={
+							<span fg={theme.colors.text}>
+								{`${source.repo} · ${entry.path}`}
+							</span>
+						}
+					/>
+					<KeyValueLine
+						label="Licence"
+						value={
+							source.licence ? (
+								<span fg={theme.colors.text}>
+									{`${source.licence} · ${source.author}`}
+								</span>
+							) : (
+								<span fg={theme.colors.warning}>
+									{`no licence granted · ${source.author}`}
+								</span>
+							)
+						}
+					/>
+					<KeyValueLine
+						label="Repo"
+						value={
+							// No star count, deliberately. In this category stars measure
+							// the wrong thing: the best-known names in the space ship no
+							// style files at all, so a number here would imply a ranking
+							// across entries that cannot honour it. The push date is the
+							// signal that actually helps — it says whether anyone still
+							// maintains this.
+							<span fg={theme.colors.muted}>
+								{`last pushed ${source.pushedAt}`}
+							</span>
+						}
+					/>
+					{item.declared ? (
+						<KeyValueLine
+							label="Needed"
+							value={
+								<span fg={theme.colors.warning}>
+									yes — this project's committed style asks for it
+								</span>
+							}
+						/>
+					) : null}
+				</box>
+
+				<box marginTop={1}>
+					<WrappedText
+						width={width}
+						text="Press Space or f to fetch — nothing is downloaded until you do. claudeup ships the coordinates for this style, never its text."
+					/>
+				</box>
+
+				<box marginTop={1}>
+					<WrappedText
+						width={width}
+						tone={theme.colors.warning}
+						text="(!) Third-party text. Once fetched, applying it puts someone else's words in the system prompt. Read it first."
+					/>
+				</box>
+
+				<DetailSection title="Source">
+					<text fg={theme.colors.muted}>{source.homepage}</text>
+				</DetailSection>
+
+				<ActionHints
+					hints={[
+						{ key: "Space", label: "fetch it", tone: "primary" },
+						{ key: "f", label: "fetch it" },
+						{ key: "/", label: "filter the list" },
+					]}
+				/>
+			</box>
+		);
+	},
+};
+
+// ─── Dispatch ─────────────────────────────────────────────────────────────────
+
+export function renderStyleRow(
+	item: StyleBrowserItem,
+	_index: number,
+	isSelected: boolean,
+	width?: number,
+): React.ReactNode {
+	if (item.kind === "category") {
+		return categoryRenderer.renderRow({ item, isSelected, width });
+	}
+	if (item.kind === "offer") {
+		return offerRenderer.renderRow({ item, isSelected, width });
+	}
+	return styleRenderer.renderRow({ item, isSelected, width });
+}
+
+export function renderStyleDetail(
+	item: StyleBrowserItem | undefined,
+	width?: number,
+): React.ReactNode {
+	if (!item) {
+		return (
+			<box flexDirection="column">
+				<text fg={theme.colors.muted}>No style selected.</text>
+			</box>
+		);
+	}
+	if (item.kind === "category") {
+		return categoryRenderer.renderDetail({ item, width });
+	}
+	if (item.kind === "offer") {
+		return offerRenderer.renderDetail({ item, width });
+	}
+	return styleRenderer.renderDetail({ item, width });
+}