claudeup 6.3.2 → 6.4.0

package/src/ui/renderers/skillRenderers.tsx

@@ -126,7 +126,9 @@ const skillRenderer: ItemRenderer<SkillSkillItem> = {
 				>
 					{displayName}
 				</span>
-				{skill.hasUpdate ? <MetaText text=" ⬆" tone="warning" /> : null}
+				{skill.hasUpdate ? (
+					<MetaText text=" ⬆" tone="warning" selected={isSelected} />
+				) : null}
 				{starsStr ? <span fg={sColor}>{`  ${starsStr}`}</span> : null}
 			</SelectableRow>
 		);
@@ -313,8 +315,16 @@ const skillSetRenderer: ItemRenderer<SkillSetItem> = {
 				<span fg={isSelected ? theme.colors.text : theme.colors.info}>
 					<strong>{displayName}</strong>
 				</span>
-				<span fg={theme.colors.muted}> {countStr}</span>
-				{starsStr ? <MetaText text={`  ${starsStr}`} tone="warning" /> : null}
+				<span fg={isSelected ? theme.selection.dim : theme.colors.muted}>
+					{` ${countStr}`}
+				</span>
+				{starsStr ? (
+					<MetaText
+						text={`  ${starsStr}`}
+						tone="warning"
+						selected={isSelected}
+					/>
+				) : null}
 				<span> </span>
 				<ScopeSquares
 					user={hasUser}

package/src/ui/renderers/styleRenderers.tsx

@@ -348,12 +348,14 @@ const styleRenderer: ItemRenderer<StyleEntryItem> = {
 				{/* 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}
+				{item.conflictsWith ? (
+					<MetaText text=" (!)" tone="danger" selected={isSelected} />
+				) : 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" />
+					<MetaText text=" (new)" tone="warning" selected={isSelected} />
 				) : null}
 				{summaryRoom > 6 ? (
 					<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
@@ -659,7 +661,9 @@ const offerRenderer: ItemRenderer<StyleOfferItem> = {
 				{/* 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}
+				{item.declared ? (
+					<MetaText text=" (needed)" tone="warning" selected={isSelected} />
+				) : null}
 				{summaryRoom > 6 ? (
 					<span fg={isSelected ? theme.selection.fg : theme.colors.muted}>
 						{`  ${truncate(item.entry.summary, summaryRoom)}`}

package/src/ui/screens/ModelsScreen.tsx

@@ -0,0 +1,478 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import {
+	applyModelPreset,
+	clearModels,
+	readModelsConfig,
+	readModelsStatus,
+} from "../../services/models-manager.js";
+import {
+	type ModelsBrowserItem,
+	buildModelsItems,
+	firstSelectableIndex,
+} from "../adapters/modelsAdapter.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 {
+	fitPresetList,
+	renderModelDetail,
+	renderModelRow,
+	renderModelsSummary,
+} from "../renderers/modelRenderers.js";
+import { useApp } from "../state/AppContext.js";
+import { useDimensions } from "../state/DimensionsContext.js";
+import { asyncValue } from "../state/types.js";
+import { theme } from "../theme.js";
+
+export function ModelsScreen() {
+	const { state, dispatch } = useApp();
+	const { models: modelsState } = state;
+	const dimensions = useDimensions();
+
+	const isSearchActive =
+		state.isSearching && state.currentRoute.screen === "models" && !state.modal;
+
+	// ── Data ──────────────────────────────────────────────────────────────────
+
+	/**
+	 * Both reads, in one dispatch.
+	 *
+	 * `readModelsStatus` answers "is this routing in force"; `readModelsConfig`
+	 * is the routing itself, which the list needs in full to give a hand-edited
+	 * config a row of its own. Neither is derivable from the other — a `status`
+	 * of `invalid` reports no preset at all, and an `off` project still has a
+	 * path worth naming.
+	 */
+	const fetchData = useCallback(async () => {
+		dispatch({ type: "MODELS_DATA_LOADING" });
+		try {
+			const [status, config] = await Promise.all([
+				readModelsStatus(state.projectPath),
+				readModelsConfig(state.projectPath),
+			]);
+			dispatch({
+				type: "MODELS_DATA_SUCCESS",
+				snapshot: { status, config: config.config, path: config.path },
+			});
+		} catch (error) {
+			dispatch({
+				type: "MODELS_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 = asyncValue(modelsState.data) ?? null;
+
+	// ── Status line ───────────────────────────────────────────────────────────
+
+	/**
+	 * Set the status line.
+	 *
+	 * No timer, matching the Styles screen: a message that erased itself after a
+	 * few seconds was usually gone by the time anyone looked. It is cleared when
+	 * the NEXT action starts instead.
+	 */
+	const showStatus = useCallback(
+		(text: string, tone: "success" | "error" = "success") => {
+			dispatch({ type: "MODELS_STATUS_SET", status: { text, tone } });
+		},
+		[dispatch],
+	);
+	const statusMsg = modelsState.status;
+
+	// ── Derived ───────────────────────────────────────────────────────────────
+
+	const allItems = useMemo(
+		() =>
+			buildModelsItems({
+				status: snapshot?.status ?? null,
+				config: snapshot?.config ?? null,
+				query: modelsState.searchQuery,
+			}),
+		[snapshot, modelsState.searchQuery],
+	);
+
+	// Keep the cursor off the status header — it is a label, not a row.
+	useEffect(() => {
+		const item = allItems[modelsState.selectedIndex];
+		if (allItems.length > 0 && (!item || item.kind === "status")) {
+			dispatch({
+				type: "MODELS_SELECT",
+				index: firstSelectableIndex(allItems),
+			});
+		}
+	}, [allItems, modelsState.selectedIndex, dispatch]);
+
+	const selectedItem: ModelsBrowserItem | undefined =
+		allItems[modelsState.selectedIndex];
+
+	// ── Actions ───────────────────────────────────────────────────────────────
+
+	/**
+	 * Write the selected preset's routing to this project.
+	 *
+	 * A hand-edited config is re-applied as an OBJECT rather than by name —
+	 * `applyModelPreset` resolves a string against the built-ins, and this one is
+	 * by definition not among them. Re-applying it is also the fix for `stale`:
+	 * it rewrites the settings the config implies.
+	 *
+	 * No `ensureManifest` is passed. That helper prompts on the terminal, and
+	 * this process's terminal belongs to OpenTUI — a project with no profiles
+	 * gets a plain `.claude/models.json`, and the status line says so.
+	 */
+	const handleApply = useCallback(async () => {
+		if (modelsState.isApplying) {
+			showStatus("Already writing the routing — one at a time", "error");
+			return;
+		}
+		if (!selectedItem || selectedItem.kind !== "preset") {
+			showStatus("Move to a preset row and press a", "error");
+			return;
+		}
+		const { config, custom } = selectedItem;
+
+		dispatch({ type: "MODELS_APPLY_START" });
+		try {
+			const result = await applyModelPreset({
+				// `config.preset`, NOT `label`. The row is titled with a human name now
+				// ("Opus with Fable help"), and `applyModelPreset` resolves an id against the
+				// built-ins — so passing the label refused every apply with `Unknown preset
+				// "Opus with Fable help"`. Found by pressing the key, not by a test: the
+				// types agree, both are strings.
+				projectPath: state.projectPath,
+				preset: custom ? config : config.preset,
+			});
+			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` rewrites the profile and the routing disappears.
+			const durability =
+				result.profile && !result.recordedInManifest
+					? " — not in profiles.json, so `claudeup install` will drop it"
+					: "";
+			showStatus(
+				`Applied ${selectedItem.label} in ${where}, hook ${result.hook}${durability}`,
+				result.profile && !result.recordedInManifest ? "error" : "success",
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		} finally {
+			dispatch({ type: "MODELS_APPLY_END" });
+		}
+	}, [
+		modelsState.isApplying,
+		selectedItem,
+		state.projectPath,
+		fetchData,
+		showStatus,
+		dispatch,
+	]);
+
+	const handleClear = useCallback(async () => {
+		if (modelsState.isApplying) {
+			showStatus("Already writing the routing — one at a time", "error");
+			return;
+		}
+		dispatch({ type: "MODELS_APPLY_START" });
+		try {
+			await clearModels(state.projectPath);
+			await fetchData();
+			showStatus(
+				"Model tiers off — subagents inherit the session model again. The hook stays registered and is a no-op without a config.",
+			);
+		} catch (error) {
+			showStatus(
+				error instanceof Error ? error.message : String(error),
+				"error",
+			);
+		} finally {
+			dispatch({ type: "MODELS_APPLY_END" });
+		}
+	}, [
+		modelsState.isApplying,
+		state.projectPath,
+		fetchData,
+		showStatus,
+		dispatch,
+	]);
+
+	// ── Keyboard ──────────────────────────────────────────────────────────────
+
+	const move = useCallback(
+		(delta: -1 | 1) => {
+			let index = modelsState.selectedIndex + delta;
+			while (index >= 0 && index < allItems.length) {
+				if (allItems[index] && allItems[index].kind !== "status") {
+					dispatch({ type: "MODELS_SELECT", index });
+					return;
+				}
+				index += delta;
+			}
+		},
+		[modelsState.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. Navigation is excluded: a digit or
+		// Tab is handled by the global handler, and clearing on it wiped the
+		// message on the way OUT of the tab, losing it on a round trip.
+		const isNavigation =
+			/^[0-9]$/.test(event.name ?? "") || event.name === "tab";
+		if (modelsState.status && !isNavigation) {
+			dispatch({ type: "MODELS_STATUS_CLEAR" });
+		}
+
+		const hasQuery = modelsState.searchQuery.length > 0;
+
+		if (event.name === "escape") {
+			if (hasQuery || isSearchActive) {
+				dispatch({ type: "MODELS_SET_SEARCH", query: "" });
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+				dispatch({ type: "MODELS_SELECT", index: 0 });
+			}
+			return;
+		}
+
+		if (event.name === "backspace" || event.name === "delete") {
+			if (hasQuery) {
+				dispatch({ type: "MODELS_SEARCH_BACKSPACE" });
+				// Driven by what was there BEFORE this keystroke — the one thing the
+				// closure knows reliably.
+				if (modelsState.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 === "return" || event.name === "enter") {
+			if (isSearchActive) {
+				dispatch({ type: "SET_SEARCHING", isSearching: false });
+				return;
+			}
+			// Enter and `a` are the same action here. There is nothing to "open" on
+			// this screen — a preset row has one thing it can do — so binding Enter
+			// to anything else would leave the most obvious key doing nothing.
+			handleApply();
+			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: "MODELS_SEARCH_APPEND", char: event.name });
+			}
+			return;
+		}
+
+		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 === "r") {
+			fetchData();
+		} else if (event.name === "/") {
+			dispatch({ type: "SET_SEARCHING", isSearching: true });
+		}
+	});
+
+	// ── Chrome ────────────────────────────────────────────────────────────────
+
+	// Transient feedback takes the full-width notice row under the header, never
+	// the header itself: a long message beside the title shrinks the title away
+	// and the two read as one garbled sentence.
+	const noticeContent = statusMsg ? (
+		<text
+			fg={
+				statusMsg.tone === "success"
+					? theme.colors.success
+					: theme.colors.danger
+			}
+		>
+			{statusMsg.text}
+		</text>
+	) : undefined;
+
+	const routingState = snapshot?.status.state ?? null;
+	const statusContent = (
+		<text fg={theme.colors.text}>
+			<span fg={theme.colors.muted}>Model tiers: </span>
+			<span
+				fg={
+					routingState === "on"
+						? theme.colors.success
+						: routingState === "stale"
+							? theme.colors.warning
+							: routingState === "off" || routingState === null
+								? theme.colors.muted
+								: theme.colors.danger
+				}
+			>
+				{routingState ?? "reading…"}
+			</span>
+			{snapshot?.status.preset ? (
+				<span fg={theme.colors.info}>{` │ ${snapshot.status.preset}`}</span>
+			) : null}
+			{modelsState.isApplying ? (
+				<span fg={theme.colors.warning}> │ writing…</span>
+			) : null}
+		</text>
+	);
+
+	// ── Render ────────────────────────────────────────────────────────────────
+
+	// The panel widths come from ScreenLayout, which owns the split, the padding
+	// and the scrollbar column. This screen used to re-derive them from
+	// `terminalWidth` with a copy of the formula, and the copy was wrong.
+	const query = modelsState.searchQuery.trim();
+
+	return (
+		<ScreenLayout
+			title="claudeup Models"
+			currentScreen="models"
+			statusLine={statusContent}
+			notice={noticeContent}
+			search={
+				modelsState.searchQuery || isSearchActive
+					? {
+							isActive: isSearchActive,
+							query: modelsState.searchQuery,
+							placeholder: "type to filter",
+						}
+					: undefined
+			}
+			footerHints={
+				isSearchActive
+					? [
+							{ keys: ["type"], label: "filter" },
+							{ keys: ["Enter"], label: "done" },
+							{ keys: ["Esc"], label: "clear" },
+						]
+					: [
+							{ keys: ["Enter", "a"], label: "apply" },
+							{ keys: ["c"], label: "off" },
+							{ keys: ["r"], label: "reload" },
+							{ keys: ["/"], label: "filter" },
+						]
+			}
+			listPanel={(listWidth) => {
+				// ONE layout for every row, measured from the widest of them.
+				// Rows used to fit themselves, so at 120×30 the selected row
+				// dropped its `main` / `critical` labels while its neighbours kept
+				// theirs — four rows in two formats, nothing lining up.
+				const rowLayout = fitPresetList(allItems, listWidth);
+				return (
+					<box flexDirection="column">
+						{modelsState.data.status === "loading" && !snapshot && (
+							<box paddingLeft={2}>
+								<text fg={theme.colors.warning}>Reading the routing…</text>
+							</box>
+						)}
+
+						{modelsState.data.status === "error" && (
+							<box flexDirection="column" paddingLeft={2} paddingRight={2}>
+								<text fg={theme.colors.danger}>
+									Could not read the model routing.
+								</text>
+								<box marginTop={1}>
+									<text fg={theme.colors.muted}>
+										{modelsState.data.error.message}
+									</text>
+								</box>
+							</box>
+						)}
+
+						{allItems.length > 0 && (
+							<ScrollableList
+								items={allItems}
+								selectedIndex={modelsState.selectedIndex}
+								renderItem={(item, index, isSelected) =>
+									renderModelRow(item, index, isSelected, rowLayout)
+								}
+								maxHeight={dimensions.listPanelHeight}
+								getKey={(item, index) => `${index}:${item.id}`}
+							/>
+						)}
+
+						{query.length > 0 &&
+							allItems.length === 0 &&
+							modelsState.data.status !== "error" && (
+								<EmptyFilterState
+									query={modelsState.searchQuery}
+									entityName="presets"
+								/>
+							)}
+
+						{/* Under the list, not in the detail pane. Four preset rows left
+					    the rest of this panel unpainted, and the screen's one graphic
+					    was buried below the fold of a pane nobody had scrolled. It
+					    follows the cursor, so it answers "what would THIS preset do"
+					    while you are choosing. */}
+						{allItems.length > 0 &&
+							renderModelsSummary({
+								items: allItems,
+								selected: selectedItem,
+								status: snapshot?.status ?? null,
+								configPath: snapshot?.path ?? null,
+								width: listWidth,
+								// Rows the list did not use. One held back because the
+								// search bar and the notice each take a row from the panel
+								// without taking one from `listPanelHeight` — and an
+								// over-tall panel overprints rather than clipping.
+								available:
+									dimensions.listPanelHeight -
+									Math.min(allItems.length, dimensions.listPanelHeight) -
+									1,
+							})}
+					</box>
+				);
+			}}
+			detailPanel={(detailWidth) =>
+				renderModelDetail(selectedItem, snapshot?.status ?? null, detailWidth)
+			}
+			detailKey={selectedItem?.id ?? ""}
+		/>
+	);
+}
+
+export default ModelsScreen;

package/src/ui/screens/StylesScreen.tsx

@@ -760,7 +760,7 @@ export function StylesScreen() {
 		// 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";
+			/^[0-9]$/.test(event.name ?? "") || event.name === "tab";
 		if (stylesState.status && !isNavigation) {
 			dispatch({ type: "STYLES_STATUS_CLEAR" });
 		}
@@ -932,16 +932,9 @@ export function StylesScreen() {
 
 	// ── 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,
-	);
+	// The panel widths come from ScreenLayout, which owns the split, the padding
+	// and the scrollbar column. This screen used to re-derive them from
+	// `terminalWidth` with a copy of the formula, and the copy was wrong.
 	const query = stylesState.searchQuery.trim();
 	// `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
@@ -1019,7 +1012,7 @@ export function StylesScreen() {
 							{ keys: ["/"], label: "filter" },
 						]
 			}
-			listPanel={
+			listPanel={(listWidth) => (
 				<box flexDirection="column">
 					{stylesState.snapshot.status === "loading" && (
 						<box paddingLeft={2}>
@@ -1059,8 +1052,10 @@ export function StylesScreen() {
 							/>
 						)}
 				</box>
+			)}
+			detailPanel={(detailWidth) =>
+				renderStyleDetail(selectedItem, detailWidth)
 			}
-			detailPanel={renderStyleDetail(selectedItem, detailWidth)}
 			detailKey={selectedItem?.id ?? ""}
 		/>
 	);

package/src/ui/screens/index.ts

@@ -8,3 +8,4 @@ export { SkillsScreen } from "./SkillsScreen.js";
 export { StylesScreen } from "./StylesScreen.js";
 export { GitignoreScreen } from "./GitignoreScreen.js";
 export { AliasScreen } from "./AliasScreen.js";
+export { ModelsScreen } from "./ModelsScreen.js";

package/src/ui/state/reducer.ts

@@ -73,6 +73,18 @@ export const initialState: AppState = {
 		status: null,
 		isFilling: false,
 	},
+
+	models: {
+		// The status header sits at 0 and the cursor cannot land on it. The screen
+		// moves off it on first render; starting at 1 here would be a second place
+		// encoding the list's shape, and it would be wrong the moment the header
+		// gained a row.
+		selectedIndex: 0,
+		searchQuery: "",
+		data: { status: "idle" },
+		status: null,
+		isApplying: false,
+	},
 };
 
 export function appReducer(state: AppState, action: AppAction): AppState {
@@ -654,6 +666,88 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 				styles: { ...state.styles, selected: new Set(action.ids) },
 			};
 
+		// =========================================================================
+		// Models screen
+		// =========================================================================
+		case "MODELS_SELECT":
+			return {
+				...state,
+				models: { ...state.models, selectedIndex: action.index },
+			};
+
+		case "MODELS_SET_SEARCH":
+			return {
+				...state,
+				models: { ...state.models, searchQuery: action.query },
+			};
+
+		case "MODELS_SEARCH_APPEND":
+			return {
+				...state,
+				models: {
+					...state.models,
+					searchQuery: state.models.searchQuery + action.char,
+					selectedIndex: 0,
+				},
+			};
+
+		case "MODELS_SEARCH_BACKSPACE":
+			return {
+				...state,
+				models: {
+					...state.models,
+					searchQuery: state.models.searchQuery.slice(0, -1),
+					selectedIndex: 0,
+				},
+			};
+
+		case "MODELS_DATA_LOADING":
+			return {
+				...state,
+				models: {
+					...state.models,
+					// Carry the last good snapshot through the reload. The router
+					// unmounts this screen on every tab switch, so without it a return
+					// visit blanks the list to "Reading…" and the cursor resets — and
+					// reading the routing is not instant: it scans session transcripts
+					// to resolve the live model id behind each alias.
+					data: {
+						status: "loading",
+						previous: asyncValue(state.models.data),
+					},
+				},
+			};
+
+		case "MODELS_DATA_SUCCESS":
+			return {
+				...state,
+				models: {
+					...state.models,
+					data: { status: "success", data: action.snapshot },
+				},
+			};
+
+		case "MODELS_DATA_ERROR":
+			return {
+				...state,
+				models: {
+					...state.models,
+					data: { status: "error", error: action.error },
+				},
+			};
+
+		case "MODELS_STATUS_SET":
+			return { ...state, models: { ...state.models, status: action.status } };
+
+		case "MODELS_STATUS_CLEAR":
+			return { ...state, models: { ...state.models, status: null } };
+
+		case "MODELS_APPLY_START":
+			return { ...state, models: { ...state.models, isApplying: true } };
+
+		case "MODELS_APPLY_END":
+			return { ...state, models: { ...state.models, isApplying: false } };
+
 		// =========================================================================
 		// Modals
 		// =========================================================================