claudeup 4.37.0 → 4.38.0

package/src/__tests__/styles-screen-state.test.ts

@@ -0,0 +1,460 @@
+import { afterEach, beforeEach, describe, expect, test } from "bun:test";
+import { mkdtemp, rm, symlink } from "node:fs/promises";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import fs from "fs-extra";
+import {
+	applyStyles,
+	clearStyle,
+	communityCacheDirOrNull,
+	loadStyles,
+} from "../services/styles-manager.js";
+import { appReducer, initialState } from "../ui/state/reducer.js";
+import type { AppAction, AppState } from "../ui/state/types.js";
+
+function run(actions: AppAction[], from: AppState = initialState): AppState {
+	return actions.reduce(appReducer, from);
+}
+
+describe("styles search state", () => {
+	test("appending builds up the query one character at a time", () => {
+		// The regression this guards: computing `searchQuery + char` in the screen
+		// reads a value captured at render time. Keystrokes arriving faster than
+		// React re-renders then all start from the same stale string, so typing
+		// "slop" left just "p" in the filter.
+		const state = run([
+			{ type: "STYLES_SEARCH_APPEND", char: "s" },
+			{ type: "STYLES_SEARCH_APPEND", char: "l" },
+			{ type: "STYLES_SEARCH_APPEND", char: "o" },
+			{ type: "STYLES_SEARCH_APPEND", char: "p" },
+		]);
+		expect(state.styles.searchQuery).toBe("slop");
+	});
+
+	test("appending resets the cursor so it cannot sit past the filtered list", () => {
+		const state = run([
+			{ type: "STYLES_SELECT", index: 9 },
+			{ type: "STYLES_SEARCH_APPEND", char: "a" },
+		]);
+		expect(state.styles.selectedIndex).toBe(0);
+	});
+
+	test("backspace removes one character at a time", () => {
+		const typed = run([
+			{ type: "STYLES_SEARCH_APPEND", char: "a" },
+			{ type: "STYLES_SEARCH_APPEND", char: "b" },
+			{ type: "STYLES_SEARCH_APPEND", char: "c" },
+		]);
+		expect(
+			run([{ type: "STYLES_SEARCH_BACKSPACE" }], typed).styles.searchQuery,
+		).toBe("ab");
+	});
+
+	test("backspace on an empty query is harmless", () => {
+		expect(run([{ type: "STYLES_SEARCH_BACKSPACE" }]).styles.searchQuery).toBe(
+			"",
+		);
+	});
+});
+
+describe("template fill state", () => {
+	test("survives the screen unmounting, because it lives in app state", () => {
+		// A fill runs Claude Code over the whole project for minutes, so switching
+		// tabs mid-run is the normal thing to do. Held in the screen's own
+		// useState it was lost on unmount, and the returning user — seeing no sign
+		// one was running — could launch a second subprocess on top of the first.
+		const filling = run([{ type: "STYLES_FILL_START" }]);
+		expect(filling.styles.isFilling).toBe(true);
+
+		// Navigating away and back is what unmounts the screen. App state is
+		// untouched by it.
+		const navigated = run(
+			[
+				{ type: "NAVIGATE", route: { screen: "plugins" } },
+				{ type: "NAVIGATE", route: { screen: "styles" } },
+			],
+			filling,
+		);
+		expect(navigated.styles.isFilling).toBe(true);
+	});
+
+	test("clears when the fill finishes", () => {
+		const done = run([
+			{ type: "STYLES_FILL_START" },
+			{ type: "STYLES_FILL_END" },
+		]);
+		expect(done.styles.isFilling).toBe(false);
+	});
+
+	test("starts false", () => {
+		expect(initialState.styles.isFilling).toBe(false);
+	});
+});
+
+describe("styles selection state", () => {
+	test("toggle adds then removes", () => {
+		const on = run([{ type: "STYLES_TOGGLE", id: "direct" }]);
+		expect([...on.styles.selected]).toEqual(["direct"]);
+		const off = run([{ type: "STYLES_TOGGLE", id: "direct" }], on);
+		expect([...off.styles.selected]).toEqual([]);
+	});
+
+	test("the committed declaration wins over the stale local artifact", () => {
+		// The screen tells the user to "press a to re-apply" when the project's
+		// style has moved on. Seeding from the local artifact would make `a`
+		// re-apply the OLD set and leave the message permanently true.
+		const state = run([
+			{
+				type: "STYLES_DATA_SUCCESS",
+				snapshot: {
+					presets: [],
+					imports: [],
+					applied: { presets: ["old"], imports: [], hash: "sha256:old" },
+					declaration: {
+						version: 1,
+						presets: ["pulled"],
+						imports: [],
+						hash: "sha256:new",
+						updatedAt: "",
+					},
+					status: {
+						state: "stale",
+						detail: "project style changed",
+						missing: [],
+						fetchable: [],
+					},
+					stylePath: "/x/composed.md",
+					settingsPath: "/x/settings.json",
+					styleName: "composed",
+					presetsRoot: "/styles",
+					profile: null,
+					currentOutputStyle: "composed",
+				},
+			},
+		]);
+		expect([...state.styles.selected]).toEqual(["pulled"]);
+	});
+
+	test("loading a snapshot seeds the selection from what is live", () => {
+		// Opening the screen on an empty set would read as "nothing is applied"
+		// even when a style is active.
+		const state = run([
+			{
+				type: "STYLES_DATA_SUCCESS",
+				snapshot: {
+					presets: [],
+					imports: [],
+					applied: {
+						presets: ["direct"],
+						imports: ["user:mine"],
+						hash: "sha256:x",
+					},
+					declaration: null,
+					status: {
+						state: "undeclared",
+						detail: "",
+						missing: [],
+						fetchable: [],
+					},
+					stylePath: "/x/composed.md",
+					settingsPath: "/x/settings.json",
+					styleName: "composed",
+					presetsRoot: "/styles",
+					profile: null,
+					currentOutputStyle: "composed",
+				},
+			},
+		]);
+		expect([...state.styles.selected].sort()).toEqual(["direct", "user:mine"]);
+	});
+
+	test("a snapshot with nothing live seeds an empty selection", () => {
+		const state = run([
+			{ type: "STYLES_TOGGLE", id: "stale" },
+			{
+				type: "STYLES_DATA_SUCCESS",
+				snapshot: {
+					presets: [],
+					imports: [],
+					applied: null,
+					declaration: null,
+					status: {
+						state: "undeclared",
+						detail: "",
+						missing: [],
+						fetchable: [],
+					},
+					stylePath: "/x/composed.md",
+					settingsPath: "/x/settings.json",
+					styleName: "composed",
+					presetsRoot: null,
+					profile: null,
+					currentOutputStyle: null,
+				},
+			},
+		]);
+		expect([...state.styles.selected]).toEqual([]);
+	});
+});
+
+describe("loadStyles reports what is actually in force", () => {
+	let dir: string;
+
+	beforeEach(async () => {
+		dir = await mkdtemp(join(tmpdir(), "claudeup-styles-live-"));
+	});
+	afterEach(async () => {
+		await rm(dir, { recursive: true, force: true });
+	});
+
+	test("reports the applied selection while the style is active", async () => {
+		await fs.outputFile(
+			join(dir, ".claude", "output-styles", "composed.md"),
+			[
+				"---",
+				"name: composed",
+				"keep-coding-instructions: true",
+				"style-presets: direct",
+				"style-imports: none",
+				"---",
+				"",
+				"body",
+			].join("\n"),
+		);
+		await fs.outputJson(join(dir, ".claude", "settings.json"), {
+			outputStyle: "composed",
+		});
+
+		const snapshot = await loadStyles(dir);
+		expect(snapshot.applied).toEqual({
+			presets: ["direct"],
+			imports: [],
+			hash: null,
+		});
+	});
+
+	test("reports nothing applied once the style is cleared", async () => {
+		// clearStyle removes the pointer and deliberately keeps the file. Reading
+		// the file alone would keep reporting the rules as live.
+		await applyStyles({
+			projectPath: dir,
+			presets: [
+				{
+					kind: "preset",
+					id: "direct",
+					name: "direct",
+					axis: "verbosity",
+					summary: "",
+					conflicts: [],
+					template: false,
+					body: "rules",
+					path: "/styles/direct.md",
+				},
+			],
+			imports: [],
+		});
+		expect((await loadStyles(dir)).applied).not.toBeNull();
+
+		await clearStyle(dir);
+
+		const snapshot = await loadStyles(dir);
+		expect(snapshot.currentOutputStyle).toBeNull();
+		expect(snapshot.applied).toBeNull();
+		// The file is still there — clearing is reversible.
+		expect(await fs.pathExists(snapshot.stylePath)).toBe(true);
+	});
+
+	test("reports nothing applied when another style is active", async () => {
+		await fs.outputFile(
+			join(dir, ".claude", "output-styles", "composed.md"),
+			"---\nname: composed\nstyle-presets: direct\n---\n\nbody",
+		);
+		await fs.outputJson(join(dir, ".claude", "settings.json"), {
+			outputStyle: "Explanatory",
+		});
+
+		const snapshot = await loadStyles(dir);
+		expect(snapshot.currentOutputStyle).toBe("Explanatory");
+		expect(snapshot.applied).toBeNull();
+	});
+
+	test("makes no network call, in any phase", async () => {
+		// The constraint the whole feature is built around: `loadStyles` runs on
+		// every render and every reload. Fetching and update-checking are explicit
+		// user actions, never a consequence of drawing a panel.
+		const src = await fs.readFile(
+			join(import.meta.dir, "..", "services", "styles-manager.ts"),
+			"utf8",
+		);
+		expect(src).not.toMatch(/\bfetch\s*\(/);
+		expect(src).not.toMatch(/community-fetcher/);
+	});
+
+	test("looks for the per-profile style when a profile is active", async () => {
+		await fs.outputJson(
+			join(dir, ".claude", "_profiles", "dev", "settings.json"),
+			{
+				outputStyle: "composed-dev",
+			},
+		);
+		await symlink(
+			"_profiles/dev/settings.json",
+			join(dir, ".claude", "settings.json"),
+		);
+		await fs.outputFile(
+			join(dir, ".claude", "output-styles", "composed-dev.md"),
+			"---\nname: composed-dev\nstyle-presets: terse\nstyle-imports: none\n---\n\nbody",
+		);
+
+		const snapshot = await loadStyles(dir);
+		expect(snapshot.profile).toBe("dev");
+		expect(snapshot.styleName).toBe("composed-dev");
+		expect(snapshot.applied).toEqual({
+			presets: ["terse"],
+			imports: [],
+			hash: null,
+		});
+	});
+});
+
+// ─── Community styles, end to end through loadStyles ──────────────────────────
+
+describe("a project that committed a community style", () => {
+	let dir: string;
+	let home: string;
+	let previousConfigDir: string | undefined;
+
+	beforeEach(async () => {
+		dir = await mkdtemp(join(tmpdir(), "claudeup-styles-community-"));
+		home = join(dir, "home");
+		previousConfigDir = process.env.CLAUDE_CONFIG_DIR;
+		// Must be ABSENT, not assigned undefined: `process.env.X = undefined`
+		// stores the STRING "undefined", which is truthy.
+		// biome-ignore lint/performance/noDelete: absence is the intent
+		delete process.env.CLAUDE_CONFIG_DIR;
+	});
+	afterEach(async () => {
+		await rm(dir, { recursive: true, force: true });
+		// biome-ignore lint/performance/noDelete: same reason as above
+		if (previousConfigDir === undefined) delete process.env.CLAUDE_CONFIG_DIR;
+		else process.env.CLAUDE_CONFIG_DIR = previousConfigDir;
+	});
+
+	const declare = () =>
+		fs.outputJson(join(dir, ".claude", "style.json"), {
+			version: 1,
+			presets: [],
+			imports: ["community:attention-span--spartan"],
+			hash: "sha256:whatever",
+			updatedAt: "2026-08-18T00:00:00.000Z",
+		});
+
+	test("reports it as fetchable, with an action that actually converges", async () => {
+		// The fresh-clone case, which is the whole point of coordinate ids: this
+		// machine has fetched nothing, so the id has to resolve against the
+		// registry before any file exists locally.
+		await declare();
+		const snapshot = await loadStyles(dir, { home });
+		expect(snapshot.status.fetchable).toEqual([
+			"community:attention-span--spartan",
+		]);
+		expect(snapshot.status.missing).toEqual([]);
+		expect(snapshot.status.detail).toBe(
+			"project style needs 1 community style — press f",
+		);
+	});
+
+	test("stops saying so once the style is in the cache", async () => {
+		await declare();
+		const cacheDir = communityCacheDirOrNull(home);
+		if (!cacheDir) throw new Error("community cache dir did not resolve");
+		await fs.outputFile(
+			join(cacheDir, "attention-span--spartan.md"),
+			[
+				"---",
+				"name: attention-span--spartan",
+				'description: "Blunt Spartan mode."',
+				"keep-coding-instructions: true",
+				"community-source: alexgreensh/attention-span",
+				"community-path: output-styles/spartan.md",
+				"community-ref: HEAD",
+				"community-commit: b860c9f8f3c7",
+				"community-sha256: sha256:abc",
+				"community-fetched: 2026-08-18",
+				"community-licence: AGPL-3.0",
+				"community-author: alexgreensh",
+				"---",
+				"",
+				"- Answer first.",
+			].join("\n"),
+		);
+
+		const snapshot = await loadStyles(dir, { home });
+		expect(snapshot.status.fetchable).toEqual([]);
+		const style = snapshot.imports.find(
+			(s) => s.id === "community:attention-span--spartan",
+		);
+		// The provenance the detail panel renders, parsed from the file itself —
+		// no network call, on a code path that runs on every render.
+		expect(style?.community?.source).toBe("alexgreensh/attention-span");
+		expect(style?.community?.commit).toBe("b860c9f8f3c7");
+		expect(style?.community?.licence).toBe("AGPL-3.0");
+	});
+
+	test("an unresolved pin and an unlicensed repo read as ABSENT, not as values", async () => {
+		// The fetcher stamps `unknown` and `unlicensed` because a blank value in
+		// the file would read as a truncated write. Neither may survive into the
+		// panel, where "unlicensed" in the licence slot looks like an SPDX id.
+		const cacheDir = communityCacheDirOrNull(home);
+		if (!cacheDir) throw new Error("community cache dir did not resolve");
+		await fs.outputFile(
+			join(cacheDir, "attention-span--rundown.md"),
+			[
+				"---",
+				"name: attention-span--rundown",
+				"community-source: alexgreensh/attention-span",
+				"community-commit: unknown",
+				"community-licence: unlicensed",
+				"---",
+				"",
+				"- Brief.",
+			].join("\n"),
+		);
+		const snapshot = await loadStyles(dir, { home });
+		const style = snapshot.imports.find(
+			(s) => s.id === "community:attention-span--rundown",
+		);
+		expect(style?.community?.commit).toBeNull();
+		expect(style?.community?.licence).toBeNull();
+	});
+});
+
+// ─── Keybindings ──────────────────────────────────────────────────────────────
+
+describe("StylesScreen keybindings", () => {
+	test("Shift+U is tested BEFORE plain u, or the plain branch swallows it", async () => {
+		// OpenTUI reports Shift+U as `{name: "u", shift: true}`, so a lowercase
+		// branch placed first matches it too. That exact shape shipped once in
+		// PluginsScreen and made "update" install at user scope instead.
+		const src = await fs.readFile(
+			join(import.meta.dir, "..", "ui", "screens", "StylesScreen.tsx"),
+			"utf8",
+		);
+		const shifted = src.indexOf('event.name === "u" && event.shift');
+		const plain = src.indexOf('event.name === "u") {');
+		expect(shifted).toBeGreaterThan(-1);
+		expect(plain).toBeGreaterThan(-1);
+		expect(shifted).toBeLessThan(plain);
+	});
+
+	test("f is bound, and it is what the sync status tells the user to press", async () => {
+		const src = await fs.readFile(
+			join(import.meta.dir, "..", "ui", "screens", "StylesScreen.tsx"),
+			"utf8",
+		);
+		expect(src).toContain('event.name === "f"');
+		// The falls-through-to-the-declaration branch. Without it, "press f" is a
+		// lie whenever the cursor is not parked on a Community row.
+		expect(src).toContain("status.fetchable");
+	});
+});

package/src/__tests__/styles-status-line.test.ts

@@ -0,0 +1,72 @@
+import { describe, expect, test } from "bun:test";
+import { appReducer, initialState } from "../ui/state/reducer.js";
+import type { AppAction, AppState } from "../ui/state/types.js";
+
+function run(actions: AppAction[], from: AppState = initialState): AppState {
+	return actions.reduce(appReducer, from);
+}
+
+/**
+ * The status line lives in app state, not in the screen.
+ *
+ * Two bugs drove this, and both were invisible to every test we had:
+ *
+ *  1. It was cleared on a 5-second wall clock, so the message describing what
+ *     you just did was usually gone before you looked at it — and unobservable
+ *     to anything sampling the screen a moment later.
+ *  2. It was component-local, and `Router` swaps the component type on a tab
+ *     change, so `9 → 1 → 9` destroyed it.
+ */
+describe("status line state", () => {
+	test("survives leaving the tab and coming back", () => {
+		const shown = run([
+			{
+				type: "STYLES_STATUS_SET",
+				status: { text: "Selection reset to the live style", tone: "success" },
+			},
+		]);
+		expect(shown.styles.status?.text).toBe("Selection reset to the live style");
+
+		// Navigating away and back is what unmounts the screen.
+		const roundTrip = run(
+			[
+				{ type: "NAVIGATE", route: { screen: "plugins" } },
+				{ type: "NAVIGATE", route: { screen: "styles" } },
+			],
+			shown,
+		);
+		expect(roundTrip.styles.status?.text).toBe(
+			"Selection reset to the live style",
+		);
+	});
+
+	test("a new message replaces the previous one", () => {
+		const state = run([
+			{ type: "STYLES_STATUS_SET", status: { text: "first", tone: "success" } },
+			{ type: "STYLES_STATUS_SET", status: { text: "second", tone: "error" } },
+		]);
+		expect(state.styles.status).toEqual({ text: "second", tone: "error" });
+	});
+
+	test("clearing returns the line to its default", () => {
+		const state = run([
+			{ type: "STYLES_STATUS_SET", status: { text: "done", tone: "success" } },
+			{ type: "STYLES_STATUS_CLEAR" },
+		]);
+		expect(state.styles.status).toBeNull();
+	});
+
+	test("starts empty", () => {
+		expect(initialState.styles.status).toBeNull();
+	});
+
+	test("keeps the tone, so an error cannot render as a success", () => {
+		const state = run([
+			{
+				type: "STYLES_STATUS_SET",
+				status: { text: "Already talking to GitHub", tone: "error" },
+			},
+		]);
+		expect(state.styles.status?.tone).toBe("error");
+	});
+});