magus-cli 0.0.0-placeholder → 7.0.0

package/src/ui/screens/ModelsScreen.tsx

@@ -0,0 +1,542 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+import { areMatesAvailable } from "../../services/mate-availability.js";
+import { loadMateCatalog } from "../../services/mate-catalog.js";
+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;
+
+	/**
+	 * Whether the mate slots have anything to serve them.
+	 *
+	 * Its OWN effect, deliberately outside the `fetchData` pair above. That pair is two file
+	 * reads and lands in milliseconds; this one goes through the plugin registry and the
+	 * marketplace resolution behind it, which does network work with its own timeouts.
+	 * Awaiting it in the same `Promise.all` would hold the whole screen — the presets, the
+	 * tier table, the status — on a question that decides three rows.
+	 *
+	 * App state rather than `useState`, and NOT only to satisfy the rule: `Router` swaps the
+	 * component type on a tab change, so a local flag dies on `0 → 1 → 0` and this is the one
+	 * piece of this screen's state that is expensive to fetch again. Held here, the lookup
+	 * happens once per session instead of once per visit.
+	 *
+	 * It starts false and the rows appear when the answer lands. False is also what a failure
+	 * yields (`areMatesAvailable` fails closed), so both render identically: the screen
+	 * exactly as it was before mates existed.
+	 */
+	useEffect(() => {
+		let live = true;
+		areMatesAvailable(state.projectPath).then((available) => {
+			// The screen can be left while this is in flight. Dispatching into a reducer that
+			// outlives the component is harmless, but re-dispatching a stale answer after the
+			// project path changed is not.
+			if (live) dispatch({ type: "MODELS_MATES_AVAILABLE", available });
+		});
+		return () => {
+			live = false;
+		};
+	}, [state.projectPath, dispatch]);
+
+	/**
+	 * claudish's live model catalogue, for the staleness advisory.
+	 *
+	 * A third effect rather than a branch of the second, even though both are about mates:
+	 * this one spawns a process and the other reads a registry, and chaining them would make
+	 * the advisory wait on a plugin lookup it does not depend on. Neither blocks the screen.
+	 *
+	 * NOT gated on `matesAvailable`. The catalogue answers "is this bound id real", which is
+	 * worth knowing about a committed config whether or not this particular machine has the
+	 * plugin installed — and gating it would make the note appear only on machines that need
+	 * it least. The lookup is cached per session, so it costs one spawn either way.
+	 *
+	 * No project path in the deps: a model catalogue is a property of the world, not of the
+	 * project. `loadMateCatalog` caches it for the session, so this re-runs into a resolved
+	 * promise on every remount.
+	 */
+	useEffect(() => {
+		let live = true;
+		// Failure is already [] — `loadMateCatalog` never rejects — so there is no `.catch`
+		// here to swallow. If one becomes necessary the module's contract has been broken.
+		loadMateCatalog().then((catalog) => {
+			if (live) dispatch({ type: "MODELS_CATALOG_LOADED", catalog });
+		});
+		return () => {
+			live = false;
+		};
+	}, [dispatch]);
+
+	// ── 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
+			// `magus install` rewrites the profile and the routing disappears.
+			const durability =
+				result.profile && !result.recordedInManifest
+					? " — not in profiles.json, so `magus 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;
+
+	// The file's `preset` string is deliberately not shown beside the state: it records what
+	// was last APPLIED, so a config edited afterwards would wear a built-in's name here while
+	// the list correctly calls it `Custom`.
+	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 === "off" || routingState === null
+							? theme.colors.muted
+							: theme.colors.danger
+				}
+			>
+				{routingState ?? "reading…"}
+			</span>
+			{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="magus 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({
+								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,
+					modelsState.matesAvailable,
+					modelsState.mateCatalog,
+				)
+			}
+			detailKey={selectedItem?.id ?? ""}
+		/>
+	);
+}
+
+export default ModelsScreen;