claudeup 4.36.0 → 4.38.0

package/src/ui/screens/index.ts

@@ -5,5 +5,6 @@ export { SettingsScreen } from "./EnvVarsScreen.js";
 export { CliToolsScreen } from "./CliToolsScreen.js";
 export { ProfilesScreen } from "./ProfilesScreen.js";
 export { SkillsScreen } from "./SkillsScreen.js";
+export { StylesScreen } from "./StylesScreen.js";
 export { GitignoreScreen } from "./GitignoreScreen.js";
 export { AliasScreen } from "./AliasScreen.js";

package/src/ui/state/reducer.ts

@@ -1,4 +1,5 @@
-import type { AppState, AppAction } from "./types.js";
+import type { AppAction, AppState } from "./types.js";
+import { asyncValue } from "./types.js";
 
 export const initialState: AppState = {
 	// Navigation - start on plugins screen
@@ -60,6 +61,15 @@ export const initialState: AppState = {
 		skills: { status: "idle" },
 		updateStatus: null,
 	},
+
+	styles: {
+		selectedIndex: 0,
+		searchQuery: "",
+		snapshot: { status: "idle" },
+		selected: new Set(),
+		status: null,
+		isFilling: false,
+	},
 };
 
 export function appReducer(state: AppState, action: AppAction): AppState {
@@ -137,8 +147,16 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 				...state,
 				plugins: {
 					...state.plugins,
-					marketplaces: { status: "loading" },
-					plugins: { status: "loading" },
+					// Hand the previous list forward so a reload refreshes in place
+					// instead of replacing the screen with "Loading...".
+					marketplaces: {
+						status: "loading",
+						previous: asyncValue(state.plugins.marketplaces),
+					},
+					plugins: {
+						status: "loading",
+						previous: asyncValue(state.plugins.plugins),
+					},
 				},
 			};
 
@@ -477,6 +495,109 @@ export function appReducer(state: AppState, action: AppAction): AppState {
 			};
 		}
 
+		// =========================================================================
+		// Styles screen
+		// =========================================================================
+		case "STYLES_SELECT":
+			return {
+				...state,
+				styles: { ...state.styles, selectedIndex: action.index },
+			};
+
+		case "STYLES_SET_SEARCH":
+			return {
+				...state,
+				styles: { ...state.styles, searchQuery: action.query },
+			};
+
+		case "STYLES_SEARCH_APPEND":
+			return {
+				...state,
+				styles: {
+					...state.styles,
+					searchQuery: state.styles.searchQuery + action.char,
+					selectedIndex: 0,
+				},
+			};
+
+		case "STYLES_SEARCH_BACKSPACE":
+			return {
+				...state,
+				styles: {
+					...state.styles,
+					searchQuery: state.styles.searchQuery.slice(0, -1),
+					selectedIndex: 0,
+				},
+			};
+
+		case "STYLES_DATA_LOADING":
+			return {
+				...state,
+				styles: { ...state.styles, snapshot: { status: "loading" } },
+			};
+
+		case "STYLES_DATA_SUCCESS":
+			return {
+				...state,
+				styles: {
+					...state.styles,
+					snapshot: { status: "success", data: action.snapshot },
+					// Seed from the project's committed declaration when there is
+					// one, falling back to whatever is live locally.
+					//
+					// The declaration wins deliberately. It is what the project asked
+					// for; the local artifact is only what this machine last did. When
+					// the two differ the screen says "press a to re-apply" — and that
+					// sentence is a lie if `a` would re-apply the stale local set
+					// instead of the pulled one.
+					selected: new Set(
+						action.snapshot.declaration
+							? [
+									...action.snapshot.declaration.presets,
+									...action.snapshot.declaration.imports,
+								]
+							: [
+									...(action.snapshot.applied?.presets ?? []),
+									...(action.snapshot.applied?.imports ?? []),
+								],
+					),
+				},
+			};
+
+		case "STYLES_DATA_ERROR":
+			return {
+				...state,
+				styles: {
+					...state.styles,
+					snapshot: { status: "error", error: action.error },
+				},
+			};
+
+		case "STYLES_STATUS_SET":
+			return { ...state, styles: { ...state.styles, status: action.status } };
+
+		case "STYLES_STATUS_CLEAR":
+			return { ...state, styles: { ...state.styles, status: null } };
+
+		case "STYLES_FILL_START":
+			return { ...state, styles: { ...state.styles, isFilling: true } };
+
+		case "STYLES_FILL_END":
+			return { ...state, styles: { ...state.styles, isFilling: false } };
+
+		case "STYLES_TOGGLE": {
+			const selected = new Set(state.styles.selected);
+			if (selected.has(action.id)) selected.delete(action.id);
+			else selected.add(action.id);
+			return { ...state, styles: { ...state.styles, selected } };
+		}
+
+		case "STYLES_SET_SELECTION":
+			return {
+				...state,
+				styles: { ...state.styles, selected: new Set(action.ids) },
+			};
+
 		// =========================================================================
 		// Modals
 		// =========================================================================

package/src/ui/state/types.ts

@@ -1,11 +1,12 @@
+import type { PluginInfo } from "../../services/plugin-manager.js";
+import type { VersionMismatchInfo } from "../../services/plugin-version-check.js";
+import type { StylesSnapshot } from "../../services/styles-manager.js";
 import type {
 	Marketplace,
 	McpServer,
 	ProfileEntry,
 	SkillInfo,
 } from "../../types/index.js";
-import type { PluginInfo } from "../../services/plugin-manager.js";
-import type { VersionMismatchInfo } from "../../services/plugin-version-check.js";
 
 // ============================================================================
 // Route Types
@@ -19,6 +20,7 @@ export type Screen =
 	| "cli-tools"
 	| "profiles"
 	| "skills"
+	| "styles"
 	| "gitignore"
 	| "alias";
 
@@ -30,6 +32,7 @@ export type Route =
 	| { screen: "cli-tools" }
 	| { screen: "profiles" }
 	| { screen: "skills" }
+	| { screen: "styles" }
 	| { screen: "gitignore" }
 	| { screen: "alias" };
 
@@ -39,10 +42,25 @@ export type Route =
 
 export type AsyncData<T> =
 	| { status: "idle" }
-	| { status: "loading" }
+	/**
+	 * `previous` carries the last successful value through a reload.
+	 *
+	 * Without it a refetch is indistinguishable from a first load, so a screen
+	 * that already had data blanked itself to "Loading..." every time it
+	 * remounted — and the router unmounts screens on every tab switch. Optional so
+	 * that a genuine first load is still just `{ status: "loading" }`.
+	 */
+	| { status: "loading"; previous?: T }
 	| { status: "success"; data: T }
 	| { status: "error"; error: Error };
 
+/** The value to render: fresh if loaded, else the last good one during a reload. */
+export function asyncValue<T>(d: AsyncData<T>): T | undefined {
+	if (d.status === "success") return d.data;
+	if (d.status === "loading") return d.previous;
+	return undefined;
+}
+
 // ============================================================================
 // Modal Types
 // ============================================================================
@@ -176,6 +194,38 @@ export interface SkillsScreenState {
 	updateStatus: Map<string, boolean> | null;
 }
 
+export interface StylesScreenState {
+	selectedIndex: number;
+	searchQuery: string;
+	/** Presets + importable styles + what is currently live, in one read. */
+	snapshot: AsyncData<StylesSnapshot>;
+	/**
+	 * Pending selection, by source id. Staged rather than applied on each
+	 * keystroke: composing writes a file and flips the harness's active output
+	 * style, which is not something a stray Space press should do.
+	 */
+	selected: Set<string>;
+	/**
+	 * The status line's current message, or null for the default line.
+	 *
+	 * App state for the same reason `isFilling` is: `Router` swaps the component
+	 * type on a tab change, so anything held in the screen's own `useState` is
+	 * destroyed by `9 → 1 → 9`. It also stops being cleared on a wall clock —
+	 * the message now survives until the next action replaces it, so the last
+	 * thing you did is still on screen whenever you look.
+	 */
+	status: { text: string; tone: "success" | "error" } | null;
+	/**
+	 * True while a template fill (Claude Code over the whole project) is running.
+	 *
+	 * App state, not screen state, because the screen UNMOUNTS when you switch
+	 * tabs. A fill runs for minutes, so switching away is the normal thing to do
+	 * — and with the flag held locally the returning user saw no sign one was in
+	 * flight and could launch a second subprocess on top of the first.
+	 */
+	isFilling: boolean;
+}
+
 // ============================================================================
 // App State
 // ============================================================================
@@ -209,6 +259,7 @@ export interface AppState {
 	cliTools: CliToolsScreenState;
 	profiles: ProfilesScreenState;
 	skills: SkillsScreenState;
+	styles: StylesScreenState;
 }
 
 // ============================================================================
@@ -297,5 +348,27 @@ export type AppAction =
 	| { type: "SKILLS_UPDATE_STATUS"; updates: Map<string, boolean> }
 	| { type: "SKILLS_UPDATE_ITEM"; name: string; updates: Partial<SkillInfo> }
 
+	// Styles screen
+	| { type: "STYLES_SELECT"; index: number }
+	| { type: "STYLES_SET_SEARCH"; query: string }
+	// Append/backspace are computed IN the reducer, from current state. A
+	// screen-side `searchQuery + char` reads a value captured at render time, so
+	// keystrokes arriving faster than React re-renders all overwrite each other
+	// and typing "slop" leaves just "p".
+	| { type: "STYLES_SEARCH_APPEND"; char: string }
+	| { type: "STYLES_SEARCH_BACKSPACE" }
+	| { type: "STYLES_DATA_LOADING" }
+	| { type: "STYLES_DATA_SUCCESS"; snapshot: StylesSnapshot }
+	| { type: "STYLES_DATA_ERROR"; error: Error }
+	| { type: "STYLES_TOGGLE"; id: string }
+	| {
+			type: "STYLES_STATUS_SET";
+			status: { text: string; tone: "success" | "error" };
+	  }
+	| { type: "STYLES_STATUS_CLEAR" }
+	| { type: "STYLES_FILL_START" }
+	| { type: "STYLES_FILL_END" }
+	| { type: "STYLES_SET_SELECTION"; ids: string[] }
+
 	// Data refresh - triggers screens to refetch
 	| { type: "DATA_REFRESH_COMPLETE" };

package/src/utils/config-dir.ts

@@ -0,0 +1,47 @@
+/**
+ * config-dir.ts — where Claude Code's config lives, with a test guard.
+ *
+ * `CLAUDE_CONFIG_DIR` is Claude Code's own override and must be honoured. It is
+ * resolved per call rather than captured at import time, because a module-level
+ * `os.homedir()` bakes in the operator's real directory and cannot be overridden
+ * afterwards.
+ *
+ * The test guard
+ * --------------
+ * Under `bun test`, a missing `CLAUDE_CONFIG_DIR` returns null instead of
+ * `~/.claude`. Callers treat null as "no cache, no clone" — an empty, inert state.
+ *
+ * This is not defensive decoration. Once the catalog cache and the rate-limit
+ * cooldown moved to disk, and the catalog resolver gained a `git fetch` fallback,
+ * any test that had not isolated its config dir began reading the operator's real
+ * cooldown file and fetching from their real marketplace clones. The suite went
+ * from 6s to 59s and started failing intermittently, because results depended on
+ * whether this particular machine happened to be rate-limited at that moment.
+ *
+ * A test that forgets to isolate should get nothing, not the developer's live
+ * state. Production is unaffected: NODE_ENV is not "test" there.
+ */
+
+import os from "node:os";
+import path from "node:path";
+
+/**
+ * The Claude config directory, or null when a test has not chosen one.
+ *
+ * Callers that must always have a path (writing real user config) should use
+ * `requireClaudeConfigDir`. Callers holding regenerable state — caches — should
+ * treat null as "cache unavailable" and carry on.
+ */
+export function claudeConfigDirOrNull(): string | null {
+	const explicit = process.env.CLAUDE_CONFIG_DIR;
+	if (explicit) return explicit;
+	if (process.env.NODE_ENV === "test") return null;
+	return path.join(os.homedir(), ".claude");
+}
+
+/** The Claude config directory, falling back to `~/.claude` even under test. */
+export function requireClaudeConfigDir(): string {
+	return (
+		process.env.CLAUDE_CONFIG_DIR || path.join(os.homedir(), ".claude")
+	);
+}

package/src/utils/open-file.ts

@@ -0,0 +1,84 @@
+/**
+ * Hand a file or URL to the operating system's default application.
+ *
+ * Why this exists rather than launching `$EDITOR`: claudeup owns the terminal.
+ * Suspending an OpenTUI app to give the TTY to a full-screen editor and then
+ * restoring raw mode, the alternate screen buffer and the cursor is a reliable
+ * way to leave the terminal wedged if anything goes wrong in between. Handing
+ * the path to the OS launches a separate process that never touches our TTY.
+ */
+
+import { spawn } from "node:child_process";
+
+export interface Opener {
+	command: string;
+	/** Arguments that precede the target path. */
+	args: string[];
+}
+
+/**
+ * The platform's "open this with whatever handles it" command.
+ *
+ * claudeup ships darwin-arm64, darwin-x64 and linux-x64, so macOS and Linux
+ * both have to work — the existing `open "${url}"` call in the Skills screen is
+ * macOS-only and silently does nothing on Linux.
+ */
+export function openerFor(platform: NodeJS.Platform): Opener {
+	if (platform === "darwin") return { command: "open", args: [] };
+	// `start` is a cmd.exe builtin, and its first quoted argument is the window
+	// title — hence the empty string, or a quoted path would be consumed as one.
+	if (platform === "win32")
+		return { command: "cmd", args: ["/c", "start", ""] };
+	return { command: "xdg-open", args: [] };
+}
+
+/**
+ * Open `target` in the default application, without blocking the TUI.
+ *
+ * The child is spawned WITHOUT a shell and the target is passed as its own
+ * argv entry, so a filename containing a space, quote or `$(…)` is opened
+ * rather than interpreted. Resolves once the process has been spawned, not
+ * when it exits — the viewer outlives us by design.
+ */
+export function openInDefaultApp(
+	target: string,
+	platform: NodeJS.Platform = process.platform,
+	/**
+	 * Test seam. The default is the platform's real opener; a test passes a
+	 * command that cannot exist, so the missing-opener path is exercised
+	 * deterministically on every OS — CI runners ship `xdg-open`, so "assume
+	 * the opener is absent" fails exactly there, and "spawn the real one"
+	 * launches applications on a build machine.
+	 */
+	opener: Opener = openerFor(platform),
+): Promise<void> {
+	const { command, args } = opener;
+
+	return new Promise((resolve, reject) => {
+		let settled = false;
+		const child = spawn(command, [...args, target], {
+			detached: true,
+			stdio: "ignore",
+		});
+
+		child.once("error", (error: NodeJS.ErrnoException) => {
+			if (settled) return;
+			settled = true;
+			reject(
+				error.code === "ENOENT"
+					? new Error(
+							`No way to open files here — "${command}" is not on PATH.`,
+						)
+					: error,
+			);
+		});
+
+		child.once("spawn", () => {
+			if (settled) return;
+			settled = true;
+			// Detach so claudeup exiting does not take the editor with it.
+			child.unref();
+			resolve();
+		});
+	});
+}