claudeup 6.3.2 → 6.4.0

package/src/ui/state/types.ts

@@ -1,3 +1,4 @@
+import type { ModelsConfig, ModelsStatus } from "../../services/models-core.js";
 import type { PluginInfo } from "../../services/plugin-manager.js";
 import type { VersionMismatchInfo } from "../../services/plugin-version-check.js";
 import type {
@@ -26,7 +27,8 @@ export type Screen =
 	| "skills"
 	| "styles"
 	| "gitignore"
-	| "alias";
+	| "alias"
+	| "models";
 
 export type Route =
 	| { screen: "plugins" }
@@ -38,7 +40,8 @@ export type Route =
 	| { screen: "skills" }
 	| { screen: "styles" }
 	| { screen: "gitignore" }
-	| { screen: "alias" };
+	| { screen: "alias" }
+	| { screen: "models" };
 
 // ============================================================================
 // Async Data Types
@@ -253,6 +256,45 @@ export interface StylesScreenState {
 	isFilling: boolean;
 }
 
+/**
+ * What the Models screen reads in one go.
+ *
+ * Both halves are needed and neither implies the other: `status` says whether
+ * the routing is in force, and `config` is the routing itself — which the
+ * screen needs in full to give a hand-edited config a row of its own.
+ */
+export interface ModelsSnapshot {
+	status: ModelsStatus;
+	/** The validated config, or null when there is none (or it failed validation). */
+	config: ModelsConfig | null;
+	/** Where `.claude/models.json` is, whether or not it exists. */
+	path: string;
+}
+
+export interface ModelsScreenState {
+	selectedIndex: number;
+	searchQuery: string;
+	/** Routing status + the config behind it, in one read. */
+	data: AsyncData<ModelsSnapshot>;
+	/**
+	 * The status line's current message, or null for the default line.
+	 *
+	 * App state for the same reason the Styles screen's is: `Router` swaps the
+	 * component type on a tab change, so anything held in the screen's own
+	 * `useState` is destroyed by `0 → 1 → 0`. The message survives until the next
+	 * action replaces it, so the last thing you did is still on screen.
+	 */
+	status: { text: string; tone: "success" | "error" } | null;
+	/**
+	 * True while an apply or a clear is writing.
+	 *
+	 * App state, not screen state, because the screen UNMOUNTS on a tab switch.
+	 * An apply rewrites the profile, re-materializes it and registers a hook —
+	 * two of those running at once would interleave writes to the same files.
+	 */
+	isApplying: boolean;
+}
+
 // ============================================================================
 // App State
 // ============================================================================
@@ -287,6 +329,7 @@ export interface AppState {
 	profiles: ProfilesScreenState;
 	skills: SkillsScreenState;
 	styles: StylesScreenState;
+	models: ModelsScreenState;
 }
 
 // ============================================================================
@@ -412,5 +455,25 @@ export type AppAction =
 	| { type: "STYLES_FILL_END" }
 	| { type: "STYLES_SET_SELECTION"; ids: string[] }
 
+	// Models screen
+	| { type: "MODELS_SELECT"; index: number }
+	| { type: "MODELS_SET_SEARCH"; query: string }
+	// Computed IN the reducer, from current state, for the same reason the
+	// STYLES_SEARCH_* pair is: a screen-side `searchQuery + char` reads a value
+	// captured at render time, so keystrokes arriving faster than React
+	// re-renders all overwrite each other.
+	| { type: "MODELS_SEARCH_APPEND"; char: string }
+	| { type: "MODELS_SEARCH_BACKSPACE" }
+	| { type: "MODELS_DATA_LOADING" }
+	| { type: "MODELS_DATA_SUCCESS"; snapshot: ModelsSnapshot }
+	| { type: "MODELS_DATA_ERROR"; error: Error }
+	| {
+			type: "MODELS_STATUS_SET";
+			status: { text: string; tone: "success" | "error" };
+	  }
+	| { type: "MODELS_STATUS_CLEAR" }
+	| { type: "MODELS_APPLY_START" }
+	| { type: "MODELS_APPLY_END" }
+
 	// Data refresh - triggers screens to refetch
 	| { type: "DATA_REFRESH_COMPLETE" };

package/src/ui/theme-mode.ts

@@ -101,6 +101,122 @@ export const COMPONENT_BADGE = {
 
 export type ComponentBadgeKind = keyof typeof COMPONENT_BADGE;
 
+/**
+ * Badge and chart colours for the four Claude models, plus `inherit`.
+ *
+ * Three strengths, because a badge and a bar cannot share an ink: twenty characters of a
+ * colour weigh far more than six, so what reads as a label reads as a slab when it is a
+ * chart. `bg`/`fg` are the chip; `bar` is the distribution bar's fill.
+ *
+ * ## The two pages are built differently, deliberately
+ *
+ * `COMPONENT_BADGE` above explains why a chip needs two ends at all. This map goes one step
+ * further and does not MIRROR them. Cream already carries the light, so a light chip is a
+ * pale wash under mid-tone ink and stays quiet. A near-black page carries none, so the same
+ * construction turns grey and the screen goes flat — a symmetric palette was built, shown,
+ * and rejected on sight as "dark looks like the light theme". A dark chip is therefore a
+ * SATURATED MID-TONE under near-white ink: a wash toward black is dark, a wash toward white
+ * is the light theme, and neither of those is a colour.
+ *
+ * ## The dark fills clear a page we cannot see
+ *
+ * `CONTRAST_REFERENCE_KEYS.dark` is `#1C1C1E`, but a real terminal may be pure black or a
+ * slate like One Dark's `#282C34`. MEASURED, the `COMPONENT_BADGE` dark washes sit at
+ * 1.00–1.07:1 against that slate — the same luminance as the page — so the chip loses its
+ * edge and reads as a hole punched in the row. These fills clear every ground: 3.1–4.3:1 on
+ * black, 2.8–2.9 on slate, and they still clear 4.5:1 on cream, so even a mis-detected theme
+ * is merely odd rather than unreadable.
+ *
+ * Hues stay far apart for the same reason the scope squares' do: one or two characters of
+ * colour carry no readable hue SHIFT, only a readable hue DIFFERENCE.
+ */
+export const MODEL_BADGE = {
+	opus: {
+		light: { bg: "#D3E7EC", fg: "#0E5F73", bar: "#92CEDC" },
+		dark: { bg: "#0E7C94", fg: "#F0FDFF", bar: "#48C8E0" },
+	},
+	sonnet: {
+		light: { bg: "#D6EEDD", fg: "#166534", bar: "#93D9B2" },
+		dark: { bg: "#12804F", fg: "#EFFFF6", bar: "#4FD98F" },
+	},
+	haiku: {
+		light: { bg: "#E6E6E0", fg: "#4B5563", bar: "#C9CCD2" },
+		dark: { bg: "#697180", fg: "#F8FAFC", bar: "#8A92A2" },
+	},
+	fable: {
+		light: { bg: "#E9DCF5", fg: "#6B21A8", bar: "#C3A6EC" },
+		dark: { bg: "#7B4CD6", fg: "#F6F0FF", bar: "#A87BE8" },
+	},
+	/** Not a model — the absence of a routing decision. Grey on both pages, so it never
+	 *  reads as a fifth choice sitting beside four real ones. */
+	inherit: {
+		light: { bg: "#EFEFE6", fg: "#8A8A80", bar: "#DEDED2" },
+		dark: { bg: "#4A4A54", fg: "#D0D2D8", bar: "#4E4E58" },
+	},
+} as const;
+
+export type ModelBadgeKind = keyof typeof MODEL_BADGE;
+
+export interface ModelInk {
+	bg: string;
+	fg: string;
+	bar: string;
+}
+
+/**
+ * Chip and bar colours for one model, for the resolved mode.
+ *
+ * Total by construction: a name this build does not know gets `inherit`'s grey, which reads
+ * as "claudeup does not recognise this" rather than as a missing colour. A hand-edited
+ * config can name anything.
+ */
+export function modelBadge(kind: string): ModelInk {
+	const key = (kind in MODEL_BADGE ? kind : "inherit") as ModelBadgeKind;
+	return MODEL_BADGE[key][detected];
+}
+
+/**
+ * The UNLIT track: the `·` behind an effort dot, the `░` behind a bar.
+ *
+ * Light reuses `SCOPE_OFF_FILL`, which already solves this there. Dark does NOT: at
+ * `#3A3A40` the track measures 1.51:1 on the reference page and simply vanishes, so a bar
+ * reads as a floating block with no scale and the effort dots lose the denominator that
+ * makes them a level rather than a count. `#4A4A52` is 1.94:1 — still recessive, still
+ * visible.
+ */
+export const TRACK_FILL = {
+	light: SCOPE_OFF_FILL.light,
+	dark: "#4A4A52",
+} as const;
+
+/** Fill for an unlit track segment, for the resolved mode. */
+export function trackFill(): string {
+	return TRACK_FILL[detected];
+}
+
+/**
+ * Effort's colour ramp — TEXT only, never a fill, so a row never paints two blocks.
+ *
+ * Effort is an ORDINAL, so these are a ramp rather than four unrelated hues. The ramp avoids
+ * green and red, which already mean "on" and "failed" elsewhere on the same screen: one
+ * colour, one meaning, app-wide. Dark runs brighter than light for the reason `MODEL_BADGE`
+ * gives — a dim colour on a dark page is a grey one.
+ */
+export const EFFORT_INK = {
+	low: { light: "#6B7280", dark: "#9AA0AC" },
+	medium: { light: "#0E7490", dark: "#6FD9F0" },
+	high: { light: "#B45309", dark: "#F2B25E" },
+	xhigh: { light: "#A21CAF", dark: "#E49BFF" },
+} as const;
+
+export type EffortInkKind = keyof typeof EFFORT_INK;
+
+/** Ink for one effort level, for the resolved mode. Unknown words take the lowest step. */
+export function effortInk(effort: string): string {
+	const key = (effort in EFFORT_INK ? effort : "low") as EffortInkKind;
+	return EFFORT_INK[key][detected];
+}
+
 /**
  * The two reference pages, mirrored from `theme.ts`'s `CONTRAST_REFERENCE`.
  *

package/src/ui/theme.ts

@@ -59,6 +59,22 @@ export const brand = {
 	muted: "#6B7280", // 4.53 / 3.52 — de-emphasis, still legible on both
 	/** Ink on OUR badges. We own both sides, so contrast is deterministic. */
 	ink: "#FFFFFF",
+	/**
+	 * De-emphasised ink on the SELECTION fill, and nowhere else.
+	 *
+	 * Measured on a screenshot: `muted` (#6B7280) on the selection purple is
+	 * 1.11:1, `warning` 1.07:1, `danger` 1.11:1 — every meta tone was invisible
+	 * the moment its row was selected, and `(default)` on the Models screen
+	 * disappeared entirely. The page-level greys cannot help here: they are
+	 * chosen to sit between a cream and a near-black terminal, and the selection
+	 * is neither.
+	 *
+	 * 3.64:1 on the selection fill, and 1.48:1 against `ink` — far enough from
+	 * white to still read as secondary. Like `ink`, it is measured against a fill
+	 * WE paint rather than against the terminal, so it is exempt from the
+	 * both-backgrounds rule the accents above obey.
+	 */
+	selectionDim: "#D4D4D8",
 } as const;
 
 /** Any colour a component may hand to a JSX colour prop. */
@@ -88,9 +104,19 @@ export const theme = {
 		info: brand.info,
 	},
 
+	/**
+	 * The selected row owns the colour channel.
+	 *
+	 * A row's normal palette is chosen against the TERMINAL's background; on the
+	 * selection fill none of it clears even 1.2:1. So a selected row has exactly
+	 * two inks — `fg` for what it is saying, `dim` for what it is saying quietly —
+	 * and any tone a row would otherwise carry is surrendered while it is
+	 * selected. The words survive; the hue does not, and cannot.
+	 */
 	selection: {
 		bg: brand.accent,
 		fg: brand.ink,
+		dim: brand.selectionDim,
 	},
 
 	/** Blue / green / amber: the widest hue separation available, because these