claudeup 4.36.0 → 4.37.0

package/src/ui/screens/PluginsScreen.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useCallback, useMemo } from "react";
+import React, { useEffect, useCallback, useMemo, useState } from "react";
 import { useApp, useModal, useProgress } from "../state/AppContext.js";
+import { asyncValue } from "../state/types.js";
 import { useDimensions } from "../state/DimensionsContext.js";
 import { useKeyboard } from "../hooks/useKeyboard.js";
 import { ScreenLayout } from "../components/layout/index.js";
@@ -18,12 +19,14 @@ import {
 } from "../../services/version-snapshot.js";
 import {
 	getAvailablePlugins,
+	getMarketplaceFetchFailures,
 	refreshAllMarketplaces,
 	clearMarketplaceCache,
 	getLocalMarketplacesInfo,
 	isInstalledInScope,
 	resolveScopeAction,
 	saveInstalledPluginVersion,
+	type MarketplaceFetchFailure,
 	type PluginInfo,
 	type ScopeStatus,
 } from "../../services/plugin-manager.js";
@@ -66,8 +69,18 @@ import {
 	renderPluginRow,
 	renderPluginDetail,
 } from "../renderers/pluginRenderers.js";
+import { buildCatalogNoticeText } from "../adapters/catalogNotice.js";
 import { theme } from "../theme.js";
 
+/** Wraps the notice text in the warning-coloured row ScreenLayout renders. */
+function buildCatalogNotice(
+	input: Parameters<typeof buildCatalogNoticeText>[0],
+): React.ReactNode {
+	const text = buildCatalogNoticeText(input);
+	if (!text) return null;
+	return <text fg={theme.colors.warning}>{text}</text>;
+}
+
 export function PluginsScreen() {
 	const { state, dispatch } = useApp();
 	const { plugins: pluginsState } = state;
@@ -81,6 +94,20 @@ export function PluginsScreen() {
 		state.currentRoute.screen === "plugins" &&
 		!state.modal;
 
+	/**
+	 * Catalogs that could not be read from any authoritative source.
+	 *
+	 * Held in state rather than derived at render time because it is an answer
+	 * from the last fetch and must survive until the next one — a failure the user
+	 * cannot see is the bug this screen shipped with.
+	 */
+	const [catalogFailures, setCatalogFailures] = useState<
+		MarketplaceFetchFailure[]
+	>([]);
+
+	/** Re-render tick so the retry countdown in the notice actually counts down. */
+	const [nowTick, setNowTick] = useState(() => Date.now());
+
 	// Fetch data (always fetches all scopes)
 	const fetchData = useCallback(async () => {
 		dispatch({ type: "PLUGINS_DATA_LOADING" });
@@ -89,6 +116,24 @@ export function PluginsScreen() {
 			const allMarketplaces = getAllMarketplaces(localMarketplaces);
 			const pluginData = await getAvailablePlugins(state.projectPath);
 
+			// Which catalogs answered, and which only appeared to. Read straight
+			// after the fetch, while the record still describes this attempt.
+			//
+			// Only failures that survived every authoritative source are worth
+			// reporting: a rate-limited HTTP fetch that the git remote ref then
+			// answered is a non-event for the user, and reporting it would fire a
+			// warning about intended, working behaviour.
+			const unresolved = new Set(
+				pluginData
+					.filter((p) => p.updateCheckFailed)
+					.map((p) => p.marketplace),
+			);
+			setCatalogFailures(
+				getMarketplaceFetchFailures().filter((f) =>
+					unresolved.has(f.marketplace),
+				),
+			);
+
 			// Surface version changes made outside claudeup (Claude Code's own
 			// plugin update, the prerunner, a manual CLI call). Diffing against
 			// what we last rendered catches all of them; logging only what
@@ -131,24 +176,60 @@ export function PluginsScreen() {
 		fetchData();
 	}, [fetchData, state.dataRefreshVersion]);
 
+	/**
+	 * Tick the countdown, and refetch by itself once the rate-limit window reopens.
+	 *
+	 * The user asked "when can I try again" — so the screen answers it and then
+	 * acts on it. Leaving them to press `r` and guess is what makes a rate limit
+	 * feel like a dead end, and a mistimed guess spends another request against the
+	 * limit for nothing.
+	 *
+	 * Only armed while a retry is actually pending, so an untroubled screen runs no
+	 * timer at all.
+	 */
+	const nextRetryAt = useMemo(() => {
+		const times = catalogFailures
+			.map((f) => f.retryAt)
+			.filter((t): t is number => typeof t === "number");
+		return times.length > 0 ? Math.min(...times) : undefined;
+	}, [catalogFailures]);
+
+	useEffect(() => {
+		if (nextRetryAt === undefined) return;
+
+		const tick = setInterval(() => {
+			const now = Date.now();
+			setNowTick(now);
+			if (now >= nextRetryAt) {
+				clearInterval(tick);
+				// The cooldown has expired, so the fetcher will really try again
+				// rather than short-circuit on its own negative cache.
+				clearMarketplaceCache();
+				fetchData();
+			}
+		}, 1000);
+
+		return () => clearInterval(tick);
+	}, [nextRetryAt, fetchData]);
+
+	// The data to render: fresh when loaded, else the previous list while a
+	// reload is in flight. Reading `status === "success"` alone is what made a
+	// tab switch blank the screen — the router remounts this component, which
+	// refetches, and every intermediate frame had nothing to show.
+	const shownMarketplaces = asyncValue(pluginsState.marketplaces);
+	const shownPlugins = asyncValue(pluginsState.plugins);
+	const isReloading =
+		pluginsState.plugins.status === "loading" && shownPlugins !== undefined;
+
 	// Build list items (categories + plugins)
 	const allItems = useMemo((): PluginBrowserItem[] => {
-		if (
-			pluginsState.marketplaces.status !== "success" ||
-			pluginsState.plugins.status !== "success"
-		) {
-			return [];
-		}
+		if (!shownMarketplaces || !shownPlugins) return [];
 		return buildPluginBrowserItems({
-			marketplaces: pluginsState.marketplaces.data,
-			plugins: pluginsState.plugins.data,
+			marketplaces: shownMarketplaces,
+			plugins: shownPlugins,
 			collapsedMarketplaces: pluginsState.collapsedMarketplaces,
 		});
-	}, [
-		pluginsState.marketplaces,
-		pluginsState.plugins,
-		pluginsState.collapsedMarketplaces,
-	]);
+	}, [shownMarketplaces, shownPlugins, pluginsState.collapsedMarketplaces]);
 
 	// Filter items by search query
 	const filteredItems = useMemo(() => {
@@ -1061,30 +1142,47 @@ export function PluginsScreen() {
 
 	// ── Render ─────────────────────────────────────────────────────────────────
 
-	if (
-		pluginsState.marketplaces.status === "loading" ||
-		pluginsState.plugins.status === "loading"
-	) {
-		return (
-			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
-				<text fg={theme.colors.accent}>
-					<strong>claudeup Plugins</strong>
-				</text>
-				<text fg={theme.colors.muted}>Loading...</text>
-			</box>
-		);
+	// Only a genuine first load takes over the screen. A reload keeps the list on
+	// screen and says so in the notice line instead.
+	if (!shownMarketplaces || !shownPlugins) {
+		if (
+			pluginsState.marketplaces.status === "loading" ||
+			pluginsState.plugins.status === "loading"
+		) {
+			return (
+				<box flexDirection="column" paddingLeft={1} paddingRight={1}>
+					<text fg={theme.colors.accent}>
+						<strong>claudeup Plugins</strong>
+					</text>
+					<text fg={theme.colors.muted}>
+						Loading plugin catalogs from GitHub…
+					</text>
+				</box>
+			);
+		}
 	}
 
 	if (
 		pluginsState.marketplaces.status === "error" ||
 		pluginsState.plugins.status === "error"
 	) {
+		// Name the error. "Error loading data" told the user nothing and sent them
+		// to the debug pane to find out what claudeup already knew.
+		const failure =
+			pluginsState.plugins.status === "error"
+				? pluginsState.plugins.error
+				: pluginsState.marketplaces.status === "error"
+					? pluginsState.marketplaces.error
+					: undefined;
 		return (
 			<box flexDirection="column" paddingLeft={1} paddingRight={1}>
 				<text fg={theme.colors.accent}>
 					<strong>claudeup Plugins</strong>
 				</text>
-				<text fg={theme.colors.danger}>Error loading data</text>
+				<text fg={theme.colors.danger}>
+					Could not load plugins: {failure?.message ?? "unknown error"}
+				</text>
+				<text fg={theme.colors.muted}>Press r to retry.</text>
 			</box>
 		);
 	}
@@ -1107,8 +1205,7 @@ export function PluginsScreen() {
 			];
 
 	const scopeLabel = pluginsState.scope === "global" ? "Global" : "Project";
-	const plugins: PluginInfo[] =
-		pluginsState.plugins.status === "success" ? pluginsState.plugins.data : [];
+	const plugins: PluginInfo[] = shownPlugins ?? [];
 	const installedCount = plugins.filter((p) => p.enabled).length;
 	const updateCount = plugins.filter(
 		(p) =>
@@ -1120,10 +1217,22 @@ export function PluginsScreen() {
 	const subtitle = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} updates` : ""}`;
 	const searchPlaceholder = `${scopeLabel} │ ${installedCount} installed${updateCount > 0 ? ` │ ${updateCount} ⬆` : ""} │ / to search`;
 
+	const notice = isReloading ? (
+		<text fg={theme.colors.muted}>⟳ Refreshing catalogs from GitHub…</text>
+	) : (
+		buildCatalogNotice({
+			failures: catalogFailures,
+			unverifiedPlugins: plugins.filter((p) => p.updateCheckFailed).length,
+			width: dimensions.terminalWidth,
+			now: nowTick,
+		})
+	);
+
 	return (
 		<ScreenLayout
 			title="claudeup Plugins"
 			subtitle={subtitle}
+			notice={notice}
 			currentScreen="plugins"
 			search={{
 				isActive: isSearchActive,

package/src/ui/state/reducer.ts

@@ -1,4 +1,5 @@
 import type { AppState, AppAction } from "./types.js";
+import { asyncValue } from "./types.js";
 
 export const initialState: AppState = {
 	// Navigation - start on plugins screen
@@ -137,8 +138,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),
+					},
 				},
 			};
 

package/src/ui/state/types.ts

@@ -39,10 +39,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
 // ============================================================================

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")
+	);
+}