claudeup 4.36.0 → 4.38.0

package/src/ui/screens/StylesScreen.tsx

@@ -0,0 +1,1089 @@
+import os from "node:os";
+import React, {
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from "react";
+import {
+	type CommunityStyleSource,
+	resolveCommunityStyle,
+} from "../../data/community-styles.js";
+import { githubFetcher } from "../../services/community-fetcher.js";
+import {
+	type CommunityUpstreamStatus,
+	acceptPendingUpdate,
+	checkAllSources,
+	checkSourceForUpdates,
+	describeCommunityFailure,
+	fetchCommunityStyles,
+	readCommunityStatuses,
+} from "../../services/community-styles.js";
+import {
+	COMMUNITY_ID_PREFIX,
+	type ImportedStyle,
+	type StylePreset,
+	applyStyles,
+	clearStyle,
+	communityCacheDirOrNull,
+	createTeamStyle,
+	loadStyles,
+	validateSelection,
+} from "../../services/styles-manager.js";
+import { fillTerminology } from "../../services/terminology-filler.js";
+import { openInDefaultApp } from "../../utils/open-file.js";
+import {
+	type StyleBrowserItem,
+	buildStyleBrowserItems,
+	firstSelectableIndex,
+} from "../adapters/stylesAdapter.js";
+import { EmptyFilterState } from "../components/EmptyFilterState.js";
+import { ScrollableList } from "../components/ScrollableList.js";
+import { ScreenLayout } from "../components/layout/index.js";
+import { useKeyboard } from "../hooks/useKeyboard.js";
+import {
+	renderStyleDetail,
+	renderStyleRow,
+} from "../renderers/styleRenderers.js";
+import { useApp, useModal } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { theme } from "../theme.js";
+
+export function StylesScreen() {
+	const { state, dispatch } = useApp();
+	const { styles: stylesState } = state;
+	const dimensions = useDimensions();
+	const modal = useModal();
+
+	const isSearchActive =
+		state.isSearching && state.currentRoute.screen === "styles" && !state.modal;
+
+	// ── Data ──────────────────────────────────────────────────────────────────
+
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "STYLES_DATA_LOADING" });
+		try {
+			const snapshot = await loadStyles(state.projectPath);
+			dispatch({ type: "STYLES_DATA_SUCCESS", snapshot });
+		} catch (error) {
+			dispatch({
+				type: "STYLES_DATA_ERROR",
+				error: error instanceof Error ? error : new Error(String(error)),
+			});
+		}
+	}, [dispatch, state.projectPath]);
+
+	// dataRefreshVersion is a refetch signal, not a value this effect reads:
+	// bumping it is how the app tells every screen its data changed.
+	// biome-ignore lint/correctness/useExhaustiveDependencies: signal, not a read
+	useEffect(() => {
+		fetchData();
+	}, [fetchData, state.dataRefreshVersion]);
+
+	const snapshot =
+		stylesState.snapshot.status === "success"
+			? stylesState.snapshot.data
+			: null;
+
+	// ── Community styles ──────────────────────────────────────────────────────
+
+	/**
+	 * Where fetched styles live. Null only under an unisolated test, where the
+	 * whole section is inert rather than pointed at the operator's real cache.
+	 */
+	const cacheDir = useMemo(() => communityCacheDirOrNull(os.homedir()), []);
+
+	/**
+	 * What the last upstream check found, per coordinate id.
+	 *
+	 * Read from the LOCAL store, never from the network. This effect runs on
+	 * every reload and must stay as offline as `loadStyles` itself — an update
+	 * check that fired because a panel was drawn would not be an advisory.
+	 */
+	const [upstream, setUpstream] = useState<
+		Record<string, CommunityUpstreamStatus>
+	>({});
+	const refreshUpstream = useCallback(async () => {
+		try {
+			setUpstream(await readCommunityStatuses());
+		} catch {
+			// A cache that cannot be read means "not checked", which is already the
+			// default and is the safe direction to be wrong in.
+		}
+	}, []);
+	// biome-ignore lint/correctness/useExhaustiveDependencies: re-read per snapshot
+	useEffect(() => {
+		refreshUpstream();
+	}, [refreshUpstream, snapshot]);
+
+	/** The managed copies a check can ask about, with the bytes we hold. */
+	const cachedCommunity = useMemo(
+		() =>
+			(snapshot?.imports ?? [])
+				.filter((style) => style.origin === "community" && style.managed)
+				// `name` IS the coordinate id for a fetched style — that is the whole
+				// point of stamping the coordinate as the file's name.
+				.map((style) => ({
+					id: style.name,
+					sha256: style.community?.sha256 ?? null,
+				})),
+		[snapshot],
+	);
+
+	// ── Status line (auto-clearing) ───────────────────────────────────────────
+
+	/**
+	 * Set the status line.
+	 *
+	 * No timer. A message used to erase itself after 5s, which meant the last
+	 * thing you did was usually gone by the time you looked — and made the line
+	 * untestable by anything that samples the screen a moment later. It is
+	 * cleared when the NEXT action starts instead, so the screen always reports
+	 * the most recent thing that happened.
+	 */
+	const showStatus = useCallback(
+		(text: string, tone: "success" | "error" = "success") => {
+			dispatch({ type: "STYLES_STATUS_SET", status: { text, tone } });
+		},
+		[dispatch],
+	);
+	const statusMsg = stylesState.status;
+
+	// ── Derived ───────────────────────────────────────────────────────────────
+
+	const allItems = useMemo(
+		() =>
+			buildStyleBrowserItems({
+				presets: snapshot?.presets ?? [],
+				imports: snapshot?.imports ?? [],
+				selected: stylesState.selected,
+				applied: snapshot?.applied ?? null,
+				query: stylesState.searchQuery,
+				upstream,
+				fetchable: snapshot?.status.fetchable ?? [],
+			}),
+		[snapshot, stylesState.selected, stylesState.searchQuery, upstream],
+	);
+
+	// Keep the cursor off category headers — they are labels, not rows.
+	useEffect(() => {
+		const item = allItems[stylesState.selectedIndex];
+		if (allItems.length > 0 && (!item || item.kind === "category")) {
+			dispatch({
+				type: "STYLES_SELECT",
+				index: firstSelectableIndex(allItems),
+			});
+		}
+	}, [allItems, stylesState.selectedIndex, dispatch]);
+
+	const selectedItem: StyleBrowserItem | undefined =
+		allItems[stylesState.selectedIndex];
+
+	/** The pending selection, resolved back to real preset/import objects. */
+	const chosen = useMemo(() => {
+		const presets = (snapshot?.presets ?? []).filter((preset) =>
+			stylesState.selected.has(preset.id),
+		);
+		const imports = (snapshot?.imports ?? []).filter((style) =>
+			stylesState.selected.has(style.id),
+		);
+		return { presets, imports };
+	}, [snapshot, stylesState.selected]);
+
+	const errors = useMemo(
+		() => validateSelection(chosen.presets),
+		[chosen.presets],
+	);
+
+	const syncState = snapshot?.status.state;
+
+	/** True when the pending selection already matches what is live. */
+	const isDirty = useMemo(() => {
+		const live = new Set([
+			...(snapshot?.applied?.presets ?? []),
+			...(snapshot?.applied?.imports ?? []),
+		]);
+		if (live.size !== stylesState.selected.size) return true;
+		for (const id of stylesState.selected) if (!live.has(id)) return true;
+		return false;
+	}, [snapshot, stylesState.selected]);
+
+	// ── Actions ───────────────────────────────────────────────────────────────
+
+	const [isFetching, setIsFetching] = useState(false);
+
+	/**
+	 * Fetch, or accept a downloaded update. The only thing that reaches GitHub.
+	 *
+	 * `f` resolves its target in one order, and each step exists for a reason:
+	 * an offer is the obvious case; a fetched style with an update waiting means
+	 * accept, because that is what the row is offering; a fetched style without
+	 * one means re-fetch. Falling through to the project's un-fetched community
+	 * styles is what makes the status line's "press f" literally true rather than
+	 * a suggestion that does nothing unless the cursor happens to be parked in
+	 * the right section.
+	 */
+	const handleFetch = useCallback(async () => {
+		if (isFetching) {
+			showStatus("Already talking to GitHub — one request at a time", "error");
+			return;
+		}
+		if (!cacheDir) {
+			showStatus(
+				"claudeup could not resolve its cache directory — set CLAUDE_CONFIG_DIR",
+				"error",
+			);
+			return;
+		}
+
+		let ids: string[] = [];
+		let accept: string | null = null;
+
+		if (selectedItem?.kind === "offer") {
+			ids = [selectedItem.entry.id];
+		} else if (
+			selectedItem?.kind === "style" &&
+			selectedItem.source.kind === "imported" &&
+			selectedItem.source.origin === "community"
+		) {
+			if (!selectedItem.source.managed) {
+				showStatus(
+					`${selectedItem.label} is your own copy — claudeup will not overwrite it`,
+					"error",
+				);
+				return;
+			}
+			if (selectedItem.upstream?.state === "update-available") {
+				accept = selectedItem.source.name;
+			} else {
+				ids = [selectedItem.source.name];
+			}
+		} else if ((snapshot?.status.fetchable ?? []).length > 0) {
+			ids = (snapshot?.status.fetchable ?? []).map((id) =>
+				id.startsWith(COMMUNITY_ID_PREFIX)
+					? id.slice(COMMUNITY_ID_PREFIX.length)
+					: id,
+			);
+		} else {
+			showStatus(
+				"Nothing to fetch here — move to a Community row and press f",
+				"error",
+			);
+			return;
+		}
+
+		setIsFetching(true);
+		try {
+			if (accept) {
+				const result = await acceptPendingUpdate({ cacheDir, id: accept });
+				await fetchData();
+				await refreshUpstream();
+				showStatus(
+					result.outcome === "accepted"
+						? `Updated ${accept} — press a to re-apply it`
+						: `No downloaded update for ${accept} — press u to check`,
+					result.outcome === "accepted" ? "success" : "error",
+				);
+				return;
+			}
+
+			showStatus(
+				`Fetching ${ids.length} style${ids.length === 1 ? "" : "s"} from GitHub…`,
+				"success",
+			);
+			const result = await fetchCommunityStyles({
+				ids,
+				fetcher: githubFetcher,
+				cacheDir,
+			});
+			await fetchData();
+			await refreshUpstream();
+
+			if (result.failed.length > 0) {
+				// The FIRST failure verbatim, not a count. Each kind carries its own
+				// diagnosis — a 404 blames our registry, a DNS failure names Tailscale
+				// — and "3 styles failed" throws all of that away.
+				const [first] = result.failed;
+				showStatus(
+					describeCommunityFailure(first.failure, first.label),
+					"error",
+				);
+				return;
+			}
+			if (result.unknown.length > 0) {
+				showStatus(
+					`claudeup has no registry entry for ${result.unknown.join(", ")} — please report it`,
+					"error",
+				);
+				return;
+			}
+			showStatus(
+				`Fetched ${result.written.length} style${
+					result.written.length === 1 ? "" : "s"
+				} — read it, then press Space to select and a to apply`,
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		} finally {
+			setIsFetching(false);
+		}
+	}, [
+		isFetching,
+		cacheDir,
+		selectedItem,
+		snapshot,
+		fetchData,
+		refreshUpstream,
+		showStatus,
+	]);
+
+	/**
+	 * Ask GitHub whether cached styles have moved. Advisory, and explicit only.
+	 *
+	 * `all` checks every repo with a cached style — at most one API call each,
+	 * five today. Nothing it finds is installed: an update lands in `.pending/`
+	 * and waits for `f`, because silently rewriting the words of a style that is
+	 * currently applied is the one thing this design will not do.
+	 */
+	const handleCheckUpdates = useCallback(
+		async (all: boolean) => {
+			if (isFetching) {
+				showStatus(
+					"Already talking to GitHub — one request at a time",
+					"error",
+				);
+				return;
+			}
+			if (!cacheDir || cachedCommunity.length === 0) {
+				showStatus("No fetched community styles to check", "error");
+				return;
+			}
+
+			let cached = cachedCommunity;
+			let only: CommunityStyleSource | null = null;
+			if (!all) {
+				const name =
+					selectedItem?.kind === "style" &&
+					selectedItem.source.kind === "imported" &&
+					selectedItem.source.origin === "community"
+						? selectedItem.source.name
+						: null;
+				const resolved = name ? resolveCommunityStyle(name) : null;
+				if (!resolved) {
+					showStatus(
+						"Move to a fetched community style and press u, or U to check all",
+						"error",
+					);
+					return;
+				}
+				only = resolved.source;
+				// Every style of this REPO, not just the selected row — one API call
+				// answers for all of them, so narrowing it further would pay the same
+				// price for less information.
+				cached = cachedCommunity.filter(
+					(entry) => resolveCommunityStyle(entry.id)?.source.id === only?.id,
+				);
+				if (cached.length === 0) {
+					showStatus(
+						`${name} is not a copy claudeup manages — nothing to check`,
+						"error",
+					);
+					return;
+				}
+			}
+
+			setIsFetching(true);
+			showStatus("Checking GitHub for newer versions…");
+			try {
+				const statuses = only
+					? (
+							await checkSourceForUpdates({
+								source: only,
+								cached,
+								fetcher: githubFetcher,
+								cacheDir,
+								force: true,
+							})
+						).statuses
+					: (
+							await checkAllSources({
+								cached,
+								fetcher: githubFetcher,
+								cacheDir,
+								force: true,
+							})
+						).statuses;
+
+				await refreshUpstream();
+				const values = Object.values(statuses);
+				const updates = values.filter(
+					(s) => s.state === "update-available",
+				).length;
+				const unknown = values.filter((s) => s.state === "unknown");
+				if (updates > 0) {
+					showStatus(
+						`${updates} update${updates === 1 ? "" : "s"} downloaded to .pending — press f on a row to accept`,
+					);
+				} else if (unknown.length === values.length && unknown.length > 0) {
+					// Every answer was "we could not look". Say the reason, not a
+					// reassuring summary — a rate-limited check must never read as
+					// up to date.
+					showStatus(`Could not check — ${unknown[0].detail}`, "error");
+				} else {
+					showStatus(
+						`Up to date${unknown.length > 0 ? ` (${unknown.length} could not be checked)` : ""}`,
+					);
+				}
+			} catch (error) {
+				showStatus(
+					error instanceof Error ? error.message : String(error),
+					"error",
+				);
+			} finally {
+				setIsFetching(false);
+			}
+		},
+		[
+			isFetching,
+			cacheDir,
+			cachedCommunity,
+			selectedItem,
+			refreshUpstream,
+			showStatus,
+		],
+	);
+
+	/**
+	 * Toggle one entry.
+	 *
+	 * Verbosity presets are a radio group, not checkboxes: the composition
+	 * accepts exactly one, and letting a second be ticked would only produce an
+	 * error at apply time. Swapping is what the user meant, so do that instead
+	 * of making them untick the old one first.
+	 */
+	const handleToggle = useCallback(() => {
+		// Space on an offer FETCHES it. Pressing the ticking key on something that
+		// cannot be ticked should do the thing that makes it tickable, not beep.
+		if (selectedItem?.kind === "offer") {
+			handleFetch();
+			return;
+		}
+		if (!selectedItem || selectedItem.kind !== "style") return;
+		const { source } = selectedItem;
+
+		if (selectedItem.disabled) {
+			showStatus(
+				`"${source.name}" is a template — fill it in and import it instead`,
+				"error",
+			);
+			return;
+		}
+
+		if (
+			source.kind === "preset" &&
+			source.axis === "verbosity" &&
+			!stylesState.selected.has(source.id)
+		) {
+			const others = (snapshot?.presets ?? [])
+				.filter((preset) => preset.axis === "verbosity")
+				.map((preset) => preset.id);
+			const next = [...stylesState.selected].filter(
+				(id) => !others.includes(id),
+			);
+			next.push(source.id);
+			dispatch({ type: "STYLES_SET_SELECTION", ids: next });
+			return;
+		}
+
+		dispatch({ type: "STYLES_TOGGLE", id: source.id });
+	}, [
+		selectedItem,
+		stylesState.selected,
+		snapshot,
+		dispatch,
+		showStatus,
+		handleFetch,
+	]);
+
+	const [isApplying, setIsApplying] = useState(false);
+
+	const handleApply = useCallback(async () => {
+		if (isApplying) return;
+		if (errors.length > 0) {
+			showStatus(errors[0], "error");
+			return;
+		}
+		if (chosen.presets.length === 0 && chosen.imports.length === 0) {
+			showStatus("Nothing selected — press Space to tick a style", "error");
+			return;
+		}
+
+		setIsApplying(true);
+		try {
+			const result = await applyStyles({
+				projectPath: state.projectPath,
+				presets: chosen.presets as StylePreset[],
+				imports: chosen.imports as ImportedStyle[],
+			});
+			await fetchData();
+			const where = result.profile
+				? `profile "${result.profile}"`
+				: "this project";
+			// Say plainly when the manifest was NOT updated: without that record a
+			// `claudeup install` re-materializes settings.json and drops the style.
+			const durability =
+				result.profile && !result.recordedInManifest
+					? " — not in profiles.json, so `claudeup install` will drop it"
+					: "";
+			showStatus(
+				`Applied ${result.styleName} to ${where} — commit .claude/style.json to share it${durability}`,
+				result.profile && !result.recordedInManifest ? "error" : "success",
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		} finally {
+			setIsApplying(false);
+		}
+	}, [isApplying, errors, chosen, state.projectPath, fetchData, showStatus]);
+
+	const handleClear = useCallback(async () => {
+		try {
+			await clearStyle(state.projectPath);
+			await fetchData();
+			dispatch({ type: "STYLES_SET_SELECTION", ids: [] });
+			showStatus("Cleared the active output style");
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		}
+	}, [state.projectPath, fetchData, dispatch, showStatus]);
+
+	const handleReset = useCallback(() => {
+		dispatch({
+			type: "STYLES_SET_SELECTION",
+			ids: [
+				...(snapshot?.applied?.presets ?? []),
+				...(snapshot?.applied?.imports ?? []),
+			],
+		});
+		showStatus("Selection reset to the live style");
+	}, [snapshot, dispatch, showStatus]);
+
+	/**
+	 * Start a new team style: scaffold a file in the project's
+	 * .claude/output-styles/ that the user edits and commits.
+	 *
+	 * The file is created rather than opened in an editor — claudeup owns the
+	 * TTY, and handing it to `$EDITOR` from inside OpenTUI is a good way to
+	 * leave the terminal wedged. The status line reports the path; `r` reloads.
+	 */
+	const handleNewTeamStyle = useCallback(async () => {
+		const name = await modal.input(
+			"New team style",
+			"Name (committed to .claude/output-styles/)",
+		);
+		if (name === null) return;
+		try {
+			const created = await createTeamStyle(state.projectPath, name);
+			await fetchData();
+			// Project-relative: the status line is one row, and an absolute path
+			// under a long temp or worktree prefix is truncated before it reaches
+			// the filename — the only part the reader needs.
+			const shown = created.path.startsWith(`${state.projectPath}/`)
+				? created.path.slice(state.projectPath.length + 1)
+				: created.path;
+			// Open it straight away: a scaffold nobody edits is worse than no
+			// scaffold, and the whole point of creating one is to write in it.
+			let opened = true;
+			try {
+				await openInDefaultApp(created.path);
+			} catch {
+				opened = false;
+			}
+			showStatus(
+				created.existed
+					? `${shown} already exists — opened it instead of overwriting`
+					: opened
+						? `Created and opened ${shown} — press r after saving`
+						: `Created ${shown} — open it to edit, then press r`,
+				created.existed ? "error" : "success",
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		}
+	}, [modal, state.projectPath, fetchData, showStatus]);
+
+	/**
+	 * Open the selected style's file in the system's default application.
+	 *
+	 * Presets are excluded on purpose: they live in the installed plugin cache,
+	 * so an edit there is silently discarded the next time the plugin updates.
+	 * Saying that is more useful than opening a file whose changes will vanish.
+	 */
+	const handleOpen = useCallback(async () => {
+		if (selectedItem?.kind === "offer") {
+			showStatus(
+				`${selectedItem.label} is not on this machine yet — press f to fetch it`,
+				"error",
+			);
+			return;
+		}
+		if (!selectedItem || selectedItem.kind !== "style") return;
+		const { source } = selectedItem;
+
+		if (source.kind === "preset") {
+			showStatus(
+				`${source.name} ships with style@magus and is replaced on update — press n to make a team style instead`,
+				"error",
+			);
+			return;
+		}
+
+		try {
+			await openInDefaultApp(source.path);
+			showStatus(
+				source.origin === "anthropic"
+					? `Opened ${source.name}.md — note re-capturing overwrites it`
+					: source.origin === "community"
+						? `Opened ${source.name}.md — a re-fetch overwrites it, so edit a copy`
+						: `Opened ${source.name}.md — press r after saving`,
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		}
+	}, [selectedItem, showStatus]);
+
+	const isFilling = stylesState.isFilling;
+
+	/**
+	 * Fill a template preset from the codebase by running Claude Code over it.
+	 *
+	 * `terminology` ships with an empty vocabulary table that is worthless until
+	 * someone surveys the project's own words — which is what the subprocess is
+	 * for. It runs read-only and returns table rows; claudeup writes the file.
+	 */
+	const handleFillTemplate = useCallback(async () => {
+		// Both of these used to return silently. A fill runs for minutes, so the
+		// natural thing a user does is press t again — and got no acknowledgement
+		// that the key had even been received, which reads as the key being dead.
+		if (isFilling) {
+			showStatus(
+				"Already reading the codebase — this takes a few minutes",
+				"error",
+			);
+			return;
+		}
+		if (!selectedItem || selectedItem.kind !== "style") {
+			showStatus("Select a style row first", "error");
+			return;
+		}
+		const { source } = selectedItem;
+		if (source.kind !== "preset" || !source.template) {
+			showStatus("Only a template preset can be filled in", "error");
+			return;
+		}
+
+		dispatch({ type: "STYLES_FILL_START" });
+		showStatus(
+			`Reading the codebase to fill ${source.name}… this can take a few minutes`,
+			"success",
+		);
+		try {
+			const result = await fillTerminology({
+				projectPath: state.projectPath,
+				templateBody: source.body,
+			});
+			await fetchData();
+			showStatus(
+				`Filled ${source.name} with ${result.rows.length} terms — it is now under Team`,
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		} finally {
+			dispatch({ type: "STYLES_FILL_END" });
+		}
+	}, [
+		isFilling,
+		selectedItem,
+		state.projectPath,
+		fetchData,
+		showStatus,
+		dispatch,
+	]);
+
+	// ── Keyboard ──────────────────────────────────────────────────────────────
+
+	const move = useCallback(
+		(delta: -1 | 1) => {
+			let index = stylesState.selectedIndex + delta;
+			while (index >= 0 && index < allItems.length) {
+				// Offers are landable, only category headers are not. Skipping them
+				// would make the Community section unreachable for anyone who has
+				// fetched nothing — which is everyone on their first launch.
+				if (allItems[index] && allItems[index].kind !== "category") {
+					dispatch({ type: "STYLES_SELECT", index });
+					return;
+				}
+				index += delta;
+			}
+		},
+		[stylesState.selectedIndex, allItems, dispatch],
+	);
+
+	useKeyboard((event) => {
+		if (state.modal) return;
+
+		// The previous message belongs to the previous ACTION, so clearing it here
+		// covers every action key in one place and replaces the 5-second timer
+		// that used to erase messages while they were still being read.
+		//
+		// Navigation is excluded. A digit or Tab is handled by the global
+		// handler, not by this screen — and clearing on it wiped the message on
+		// the way OUT of the tab, so a round trip lost it even though the state
+		// now survives the unmount.
+		const isNavigation =
+			/^[1-9]$/.test(event.name ?? "") || event.name === "tab";
+		if (stylesState.status && !isNavigation) {
+			dispatch({ type: "STYLES_STATUS_CLEAR" });
+		}
+
+		const hasQuery = stylesState.searchQuery.length > 0;
+
+		if (event.name === "escape") {
+			if (hasQuery || isSearchActive) {
+				dispatch({ type: "STYLES_SET_SEARCH", query: "" });
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+				dispatch({ type: "STYLES_SELECT", index: 0 });
+			}
+			return;
+		}
+
+		if (event.name === "backspace" || event.name === "delete") {
+			if (hasQuery) {
+				dispatch({ type: "STYLES_SEARCH_BACKSPACE" });
+				// Leaving search mode is driven by what was there BEFORE this
+				// keystroke, which is the one thing the closure does know reliably.
+				if (stylesState.searchQuery.length <= 1) {
+					dispatch({ type: "SET_SEARCHING", isSearching: false });
+				}
+			}
+			return;
+		}
+
+		if (event.name === "up") {
+			if (isSearchActive)
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+			move(-1);
+			return;
+		}
+		if (event.name === "down") {
+			if (isSearchActive)
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+			move(1);
+			return;
+		}
+
+		if (event.name === "space" || event.name === " ") {
+			handleToggle();
+			return;
+		}
+
+		if (event.name === "return" || event.name === "enter") {
+			if (isSearchActive) {
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+				return;
+			}
+			// Enter opens the style for editing; Space is the ticking key. Enter
+			// reads as "go into this thing", and ticking already has a key that
+			// means exactly that and nothing else.
+			handleOpen();
+			return;
+		}
+
+		// While typing a filter, letters are text — not commands.
+		if (isSearchActive) {
+			if (
+				event.name &&
+				event.name.length === 1 &&
+				!event.ctrl &&
+				!event.meta &&
+				!/[0-9]/.test(event.name)
+			) {
+				dispatch({ type: "STYLES_SEARCH_APPEND", char: event.name });
+			}
+			return;
+		}
+
+		// Shift+U is tested BEFORE plain u. OpenTUI reports it as
+		// `{name: "u", shift: true}`, so a lowercase branch above this one would
+		// swallow it — the exact bug `uppercase-keybindings.test.ts` exists for.
+		if (event.name === "u" && event.shift) {
+			handleCheckUpdates(true);
+		} else if (event.name === "u") {
+			handleCheckUpdates(false);
+		} else if (event.name === "k") {
+			move(-1);
+		} else if (event.name === "j") {
+			move(1);
+		} else if (event.name === "a") {
+			handleApply();
+		} else if (event.name === "c") {
+			handleClear();
+		} else if (event.name === "x") {
+			handleReset();
+		} else if (event.name === "n") {
+			handleNewTeamStyle();
+		} else if (event.name === "e") {
+			handleOpen();
+		} else if (event.name === "f") {
+			handleFetch();
+		} else if (event.name === "t") {
+			handleFillTemplate();
+		} else if (event.name === "r") {
+			fetchData();
+		} else if (event.name === "/") {
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+		}
+	});
+
+	// ── Status line ───────────────────────────────────────────────────────────
+
+	// Order matters. A transient message wins while it lasts, so pressing a key
+	// always acknowledges the press — otherwise the fill banner below would
+	// shadow "already reading" and the second press would look ignored again,
+	// which is the bug this whole path exists to fix. The banner is the fallback
+	// because `statusMsg` is local and dies when the screen unmounts, leaving it
+	// the only thing that still reports work in flight after a tab switch.
+	const statusContent = statusMsg ? (
+		<text fg={theme.colors.text}>
+			<span
+				fg={
+					statusMsg.tone === "success"
+						? theme.colors.success
+						: theme.colors.danger
+				}
+			>
+				{statusMsg.text}
+			</span>
+		</text>
+	) : isFilling ? (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.warning}>
+				Reading the codebase to fill a template… this can take a few minutes
+			</span>
+		</text>
+	) : (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>Active: </span>
+			<span
+				fg={
+					snapshot?.currentOutputStyle
+						? theme.colors.success
+						: theme.colors.muted
+				}
+			>
+				{snapshot?.currentOutputStyle ?? "none"}
+			</span>
+			{snapshot?.profile ? (
+				<span fg={theme.colors.info}>{` │ profile ${snapshot.profile}`}</span>
+			) : null}
+			{isApplying ? (
+				<span fg={theme.colors.warning}> │ applying…</span>
+			) : isFetching ? (
+				<span fg={theme.colors.warning}> │ talking to GitHub…</span>
+			) : errors.length > 0 ? (
+				<span fg={theme.colors.danger}> │ selection invalid</span>
+			) : syncState === "not-applied" ? (
+				// Checked before the generic dirty flag: both are true after a pull,
+				// and "project style changed" says WHY, where "unapplied changes"
+				// only says that something differs.
+				<span fg={theme.colors.danger}>{` │ ${snapshot?.status.detail}`}</span>
+			) : syncState === "stale" ? (
+				<span fg={theme.colors.warning}>{` │ ${snapshot?.status.detail}`}</span>
+			) : isDirty ? (
+				<span fg={theme.colors.warning}> │ unapplied changes</span>
+			) : syncState === "in-sync" ? (
+				<span fg={theme.colors.success}> │ in sync with project</span>
+			) : null}
+		</text>
+	);
+
+	// ── Render ────────────────────────────────────────────────────────────────
+
+	// ScreenLayout gives the list 49% and the detail 50%, inside a container
+	// padded by 1 each side, and the detail panel adds 1 more of left padding.
+	const listWidth = Math.max(
+		20,
+		Math.floor(dimensions.terminalWidth * 0.49) - 3,
+	);
+	const detailWidth = Math.max(
+		24,
+		Math.floor(dimensions.terminalWidth * 0.5) - 4,
+	);
+	const query = stylesState.searchQuery.trim();
+	const noPresets = snapshot !== null && snapshot.presetsRoot === null;
+	// `t` only means anything on a template preset, so it is only advertised
+	// there — a footer full of keys that do nothing on the current row teaches
+	// the wrong thing.
+	const selectedIsTemplate =
+		selectedItem?.kind === "style" &&
+		selectedItem.source.kind === "preset" &&
+		selectedItem.source.template;
+	const selectedIsOffer = selectedItem?.kind === "offer";
+	const selectedIsCommunity =
+		selectedItem?.kind === "style" &&
+		selectedItem.source.kind === "imported" &&
+		selectedItem.source.origin === "community";
+	const selectedHasUpdate =
+		selectedItem?.kind === "style" &&
+		selectedItem.upstream?.state === "update-available";
+
+	/**
+	 * Row-sensitive, and it has to REPLACE rather than append.
+	 *
+	 * The tab bar already degrades at about 94 columns, so a footer that only
+	 * grows pushes itself off the screen on a split pane. `n` and `e` stay bound
+	 * on a community row; they are simply not the keys that row is about.
+	 */
+	const rowHints = selectedIsOffer
+		? [
+				{ keys: ["Space"], label: "fetch" },
+				{ keys: ["a"], label: "apply" },
+			]
+		: selectedIsCommunity
+			? [
+					{ keys: ["Space"], label: "toggle" },
+					{ keys: ["a"], label: "apply" },
+					{
+						keys: ["f"],
+						label: selectedHasUpdate ? "accept update" : "re-fetch",
+					},
+					{ keys: ["u"], label: "check" },
+				]
+			: [
+					{ keys: ["Space"], label: "toggle" },
+					{ keys: ["a"], label: "apply" },
+					{ keys: ["n"], label: "new" },
+					{ keys: ["e"], label: "edit" },
+					...(selectedIsTemplate
+						? [{ keys: ["t"], label: "fill from codebase" }]
+						: []),
+				];
+
+	return (
+		<ScreenLayout
+			title="claudeup Styles"
+			currentScreen="styles"
+			statusLine={statusContent}
+			search={
+				stylesState.searchQuery || isSearchActive
+					? {
+							isActive: isSearchActive,
+							query: stylesState.searchQuery,
+							placeholder: "type to filter",
+						}
+					: undefined
+			}
+			footerHints={
+				isSearchActive
+					? [
+							{ keys: ["type"], label: "filter" },
+							{ keys: ["Enter"], label: "done" },
+							{ keys: ["Esc"], label: "clear" },
+						]
+					: [
+							...rowHints,
+							{ keys: ["c"], label: "clear" },
+							{ keys: ["/"], label: "filter" },
+						]
+			}
+			listPanel={
+				<box flexDirection="column">
+					{stylesState.snapshot.status === "loading" && (
+						<box paddingLeft={2}>
+							<text fg={theme.colors.warning}>Reading styles…</text>
+						</box>
+					)}
+
+					{stylesState.snapshot.status === "error" && (
+						<box flexDirection="column" paddingLeft={2} paddingRight={2}>
+							<text fg={theme.colors.danger}>Could not read styles.</text>
+							<box marginTop={1}>
+								<text fg={theme.colors.muted}>
+									{stylesState.snapshot.error.message}
+								</text>
+							</box>
+						</box>
+					)}
+
+					{noPresets && allItems.length === 0 && (
+						<box flexDirection="column" paddingLeft={2} paddingRight={2}>
+							<text fg={theme.colors.warning}>
+								The style plugin is not installed.
+							</text>
+							<box marginTop={1}>
+								<text fg={theme.colors.muted}>
+									Presets come from style@magus. Install it from the
+								</text>
+								<text fg={theme.colors.muted}>
+									Plugins tab, then press r to reload.
+								</text>
+							</box>
+							<box marginTop={1}>
+								<text fg={theme.colors.muted}>
+									Output styles you have written yourself are still
+								</text>
+								<text fg={theme.colors.muted}>
+									listed under Imported, with no plugin needed.
+								</text>
+							</box>
+						</box>
+					)}
+
+					{allItems.length > 0 && (
+						<ScrollableList
+							items={allItems}
+							selectedIndex={stylesState.selectedIndex}
+							renderItem={(item, index, isSelected) =>
+								renderStyleRow(item, index, isSelected, listWidth)
+							}
+							maxHeight={dimensions.listPanelHeight}
+							getKey={(item, index) => `${index}:${item.id}`}
+						/>
+					)}
+
+					{query.length > 0 &&
+						allItems.length === 0 &&
+						stylesState.snapshot.status === "success" &&
+						!noPresets && (
+							<EmptyFilterState
+								query={stylesState.searchQuery}
+								entityName="styles"
+							/>
+						)}
+				</box>
+			}
+			detailPanel={renderStyleDetail(selectedItem, detailWidth)}
+		/>
+	);
+}
+
+export default StylesScreen;