claudeup 4.36.0 → 4.38.0

package/src/__tests__/styles-manager.test.ts

@@ -0,0 +1,1124 @@
+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 {
+	INTEGRITY_BLOCK,
+	type ImportedStyle,
+	type StylePreset,
+	type StyleSource,
+	applyStyles,
+	clearStyle,
+	composeStyleFile,
+	generatedStyleName,
+	orderSources,
+	readApplied,
+	splitFrontmatter,
+	validateSelection,
+} from "../services/styles-manager.js";
+import {
+	buildStyleBrowserItems,
+	firstSelectableIndex,
+} from "../ui/adapters/stylesAdapter.js";
+
+// ─── Fixtures ─────────────────────────────────────────────────────────────────
+
+function preset(overrides: Partial<StylePreset> = {}): StylePreset {
+	const name = overrides.name ?? "direct";
+	return {
+		kind: "preset",
+		name,
+		displayName: name,
+		axis: "verbosity",
+		summary: "Answer first.",
+		conflicts: [],
+		template: false,
+		body: "### Direct\n\n- Lead with the answer.",
+		path: `/styles/${name}.md`,
+		...overrides,
+		// Last, so a fixture that only sets `name` still gets a matching id.
+		id: overrides.id ?? name,
+	};
+}
+
+function imported(overrides: Partial<ImportedStyle> = {}): ImportedStyle {
+	const name = overrides.name ?? "my-voice";
+	const scope = overrides.scope ?? "user";
+	return {
+		kind: "imported",
+		name,
+		displayName: name,
+		scope,
+		origin: scope === "project" ? "team" : "personal",
+		managed: false,
+		description: "A personal voice.",
+		updatedAt: "2026-08-18",
+		capturedFrom: null,
+		community: null,
+		body: "Be brief.",
+		path: `/home/.claude/output-styles/${name}.md`,
+		...overrides,
+		// After the spread so a fixture that only sets `name`/`scope` still gets
+		// a matching id.
+		id: overrides.id ?? `${scope}:${name}`,
+	};
+}
+
+let dir: string;
+
+beforeEach(async () => {
+	dir = await mkdtemp(join(tmpdir(), "claudeup-styles-"));
+});
+
+afterEach(async () => {
+	await rm(dir, { recursive: true, force: true });
+});
+
+// ─── Frontmatter ──────────────────────────────────────────────────────────────
+
+describe("splitFrontmatter", () => {
+	test("parses the shape the style plugin actually ships", () => {
+		const { frontmatter, body } = splitFrontmatter(
+			[
+				"---",
+				"name: direct",
+				"axis: verbosity",
+				"summary: Answer first, no preamble.",
+				"conflicts: explanatory, terse",
+				"---",
+				"",
+				"### Direct",
+				"",
+				"- Lead with the answer.",
+			].join("\n"),
+		);
+		expect(frontmatter.name).toBe("direct");
+		expect(frontmatter.axis).toBe("verbosity");
+		expect(frontmatter.conflicts).toBe("explanatory, terse");
+		expect(body.startsWith("### Direct")).toBe(true);
+	});
+
+	test("unquotes and unescapes a quoted description", () => {
+		const { frontmatter } = splitFrontmatter(
+			["---", 'description: "Composed: \\"x\\", y"', "---", "body"].join("\n"),
+		);
+		expect(frontmatter.description).toBe('Composed: "x", y');
+	});
+
+	test("a file with no frontmatter is all body", () => {
+		const { frontmatter, body } = splitFrontmatter("just text");
+		expect(frontmatter).toEqual({});
+		expect(body).toBe("just text");
+	});
+
+	test("an unterminated fence is not treated as frontmatter", () => {
+		const { frontmatter, body } = splitFrontmatter("---\nname: x\nno close");
+		expect(frontmatter).toEqual({});
+		expect(body).toContain("name: x");
+	});
+});
+
+// ─── Validation ───────────────────────────────────────────────────────────────
+
+describe("validateSelection", () => {
+	test("accepts one verbosity plus any number of modifiers", () => {
+		expect(
+			validateSelection([
+				preset({ name: "direct", axis: "verbosity" }),
+				preset({ name: "no-slop", axis: "modifier" }),
+				preset({ name: "evidence-first", axis: "modifier" }),
+			]),
+		).toEqual([]);
+	});
+
+	test("rejects two verbosity presets — they cancel out", () => {
+		const errors = validateSelection([
+			preset({ name: "direct", axis: "verbosity" }),
+			preset({ name: "terse", axis: "verbosity" }),
+		]);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("exactly one verbosity");
+	});
+
+	test("reports a conflicting pair once, not once from each side", () => {
+		const errors = validateSelection([
+			preset({ name: "a", axis: "modifier", conflicts: ["b"] }),
+			preset({ name: "b", axis: "modifier", conflicts: ["a"] }),
+		]);
+		expect(errors).toHaveLength(1);
+	});
+
+	test("rejects a template preset with an actionable message", () => {
+		const errors = validateSelection([
+			preset({ name: "terminology", axis: "modifier", template: true }),
+		]);
+		expect(errors).toHaveLength(1);
+		expect(errors[0]).toContain("template");
+	});
+
+	test("an empty selection has no validation errors of its own", () => {
+		expect(validateSelection([])).toEqual([]);
+	});
+});
+
+// ─── Ordering ─────────────────────────────────────────────────────────────────
+
+describe("orderSources", () => {
+	test("imports first, then verbosity, then modifiers", () => {
+		const ordered = orderSources(
+			[
+				preset({ name: "no-slop", axis: "modifier" }),
+				preset({ name: "direct", axis: "verbosity" }),
+			],
+			[imported({ name: "mine" })],
+		);
+		expect(ordered.map((s) => s.name)).toEqual(["mine", "direct", "no-slop"]);
+	});
+
+	test("keeps only the first verbosity preset", () => {
+		const ordered = orderSources(
+			[
+				preset({ name: "direct", axis: "verbosity" }),
+				preset({ name: "terse", axis: "verbosity" }),
+			],
+			[],
+		);
+		expect(ordered.map((s) => s.name)).toEqual(["direct"]);
+	});
+});
+
+// ─── Composition ──────────────────────────────────────────────────────────────
+
+describe("composeStyleFile", () => {
+	test("always keeps coding instructions on", () => {
+		// A style about how to COMMUNICATE must not switch off how to write code.
+		// Without this key Claude Code drops its coding-discipline block entirely.
+		const file = composeStyleFile("composed", [preset()]);
+		expect(file).toContain("keep-coding-instructions: true");
+	});
+
+	test("records provenance in frontmatter, not the body", () => {
+		const file = composeStyleFile("composed", [
+			preset({ name: "direct" }),
+			imported({ name: "mine", scope: "user" }),
+		]);
+		const { frontmatter, body } = splitFrontmatter(file);
+		expect(frontmatter["style-presets"]).toBe("direct");
+		expect(frontmatter["style-imports"]).toBe("user:mine");
+		// The body is the prompt and is paid for on every request — provenance
+		// must not leak into it.
+		expect(body).not.toContain("style-presets");
+		expect(body).not.toContain("generated-by");
+	});
+
+	test("records 'none' when a category is empty", () => {
+		const { frontmatter } = splitFrontmatter(
+			composeStyleFile("composed", [preset()]),
+		);
+		expect(frontmatter["style-imports"]).toBe("none");
+	});
+
+	test("quotes the description so a colon cannot break the YAML", () => {
+		const file = composeStyleFile("composed", [preset({ name: "direct" })]);
+		const { frontmatter } = splitFrontmatter(file);
+		// Round-trips through the parser rather than appearing as a nested map.
+		expect(frontmatter.description).toContain("Composed communication style");
+	});
+
+	test("imported bodies come before preset bodies", () => {
+		const file = composeStyleFile("composed", [
+			imported({ name: "mine", body: "IMPORTED-MARKER" }),
+			preset({ name: "direct", body: "PRESET-MARKER" }),
+		]);
+		expect(file.indexOf("IMPORTED-MARKER")).toBeLessThan(
+			file.indexOf("PRESET-MARKER"),
+		);
+	});
+
+	test("appends the integrity block to EVERY composition", () => {
+		// "Every" is the claim worth testing. The block is the semantic backstop
+		// for text we did not write — a third-party import cannot opt out of it,
+		// and neither can a selection that happens to contain no imports.
+		const selections: Array<{ label: string; sources: StyleSource[] }> = [
+			{ label: "nothing selected", sources: [] },
+			{ label: "one preset", sources: [preset()] },
+			{ label: "one import", sources: [imported({ name: "mine" })] },
+			{
+				label: "both",
+				sources: [imported({ name: "mine" }), preset({ name: "direct" })],
+			},
+		];
+		for (const { label, sources } of selections) {
+			const { body } = splitFrontmatter(composeStyleFile("composed", sources));
+			expect(body, `${label} carries the integrity block`).toContain(
+				INTEGRITY_BLOCK,
+			);
+		}
+	});
+
+	test("puts the integrity block LAST, so it refines what came before", () => {
+		// Same reasoning as orderSources: specific-after-broad. A limit stated
+		// before the rule it limits reads as something the rule may override.
+		const { body } = splitFrontmatter(
+			composeStyleFile("composed", [
+				imported({ name: "mine", body: "IMPORTED-MARKER" }),
+				preset({ name: "direct", body: "PRESET-MARKER" }),
+			]),
+		);
+		expect(body.trimEnd().endsWith(INTEGRITY_BLOCK)).toBe(true);
+	});
+
+	test("the integrity block reaches the model, not just the file", () => {
+		// Frontmatter is split off before the prompt is built, so a block written
+		// there would be invisible to the model — the exact failure this test
+		// exists to catch.
+		const file = composeStyleFile("composed", [preset()]);
+		const { frontmatter, body } = splitFrontmatter(file);
+		expect(body).toContain("## Style limits");
+		expect(JSON.stringify(frontmatter)).not.toContain("Style limits");
+	});
+
+	test("the block states the rules it is there to state", () => {
+		// Checkable content, not just presence: these are the four commitments
+		// the block exists for, and a rewrite that drops one should fail here.
+		expect(INTEGRITY_BLOCK).toContain("error");
+		expect(INTEGRITY_BLOCK).toContain("security warning");
+		expect(INTEGRITY_BLOCK).toContain("destructive or irreversible action");
+		expect(INTEGRITY_BLOCK).toMatch(/never cut a flag from a command/);
+	});
+});
+
+describe("readApplied", () => {
+	test("round-trips the selection a composed file records", async () => {
+		const path = join(dir, "composed.md");
+		await fs.writeFile(
+			path,
+			composeStyleFile("composed", [
+				preset({ name: "direct" }),
+				preset({ name: "no-slop", axis: "modifier" }),
+				imported({ name: "mine", scope: "project" }),
+			]),
+		);
+		const applied = await readApplied(path);
+		expect(applied?.presets).toEqual(["direct", "no-slop"]);
+		expect(applied?.imports).toEqual(["project:mine"]);
+		// composeStyleFile now records a fingerprint of the rules it was built
+		// from, so drift can be detected later.
+		expect(applied?.hash).toMatch(/^sha256:[0-9a-f]{32}$/);
+	});
+
+	test("returns null when nothing has been applied", async () => {
+		expect(await readApplied(join(dir, "missing.md"))).toBeNull();
+	});
+});
+
+// ─── Naming ───────────────────────────────────────────────────────────────────
+
+describe("generatedStyleName", () => {
+	test("is plain when no profile is active", () => {
+		expect(generatedStyleName(null)).toBe("composed");
+	});
+
+	test("is per-profile so two profiles cannot clobber each other's file", () => {
+		expect(generatedStyleName("frontend")).toBe("composed-frontend");
+		expect(generatedStyleName("Team Alpha")).toBe("composed-team-alpha");
+	});
+
+	test("falls back to the plain name when a profile slugifies to nothing", () => {
+		expect(generatedStyleName("///")).toBe("composed");
+	});
+});
+
+// ─── Apply ────────────────────────────────────────────────────────────────────
+
+describe("applyStyles", () => {
+	test("writes the style file and activates it", async () => {
+		const result = await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+
+		expect(result.styleName).toBe("composed");
+		expect(await fs.pathExists(result.stylePath)).toBe(true);
+		const settings = await fs.readJson(result.settingsPath);
+		expect(settings.outputStyle).toBe("composed");
+	});
+
+	test("preserves unrelated settings keys", async () => {
+		const settingsPath = join(dir, ".claude", "settings.json");
+		await fs.outputJson(settingsPath, {
+			enabledPlugins: { "dev@magus": true },
+			someOtherKey: 42,
+		});
+
+		await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+
+		const settings = await fs.readJson(settingsPath);
+		expect(settings.enabledPlugins).toEqual({ "dev@magus": true });
+		expect(settings.someOtherKey).toBe(42);
+		expect(settings.outputStyle).toBe("composed");
+	});
+
+	test("refuses to overwrite settings.json that is not valid JSON", async () => {
+		const settingsPath = join(dir, ".claude", "settings.json");
+		await fs.outputFile(settingsPath, "{ not json");
+
+		await expect(
+			applyStyles({
+				projectPath: dir,
+				presets: [preset({ name: "direct" })],
+				imports: [],
+			}),
+		).rejects.toThrow(/not valid JSON/);
+
+		// The user's file is still there, untouched.
+		expect(await fs.readFile(settingsPath, "utf8")).toBe("{ not json");
+	});
+
+	test("rejects an invalid selection instead of writing a contradictory style", async () => {
+		await expect(
+			applyStyles({
+				projectPath: dir,
+				presets: [
+					preset({ name: "direct", axis: "verbosity" }),
+					preset({ name: "terse", axis: "verbosity" }),
+				],
+				imports: [],
+			}),
+		).rejects.toThrow(/exactly one verbosity/);
+		expect(await fs.pathExists(join(dir, ".claude", "output-styles"))).toBe(
+			false,
+		);
+	});
+
+	test("rejects an empty selection", async () => {
+		await expect(
+			applyStyles({ projectPath: dir, presets: [], imports: [] }),
+		).rejects.toThrow(/Nothing selected/);
+	});
+
+	test("writes THROUGH an active profile's settings symlink without breaking it", async () => {
+		// The regression this guards: removing-then-recreating settings.json
+		// silently detaches the project from its profile, and every later profile
+		// switch then writes to a file nothing reads.
+		const profileSettings = join(
+			dir,
+			".claude",
+			"_profiles",
+			"dev",
+			"settings.json",
+		);
+		await fs.outputJson(profileSettings, { enabledPlugins: {} });
+		const link = join(dir, ".claude", "settings.json");
+		await symlink("_profiles/dev/settings.json", link);
+
+		const result = await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+
+		expect(result.profile).toBe("dev");
+		expect(result.styleName).toBe("composed-dev");
+		expect((await fs.lstat(link)).isSymbolicLink()).toBe(true);
+		// The write landed in the profile, which is what "apply to the current
+		// profile" means.
+		expect((await fs.readJson(profileSettings)).outputStyle).toBe(
+			"composed-dev",
+		);
+	});
+
+	test("records the style in profiles.json so re-materializing cannot drop it", async () => {
+		// materializeProfile rewrites settings.json from the manifest, so a live
+		// write alone regresses on the next `claudeup install`.
+		const profileSettings = join(
+			dir,
+			".claude",
+			"_profiles",
+			"dev",
+			"settings.json",
+		);
+		await fs.outputJson(profileSettings, { enabledPlugins: {} });
+		await symlink(
+			"_profiles/dev/settings.json",
+			join(dir, ".claude", "settings.json"),
+		);
+		await fs.outputJson(join(dir, ".claude", "profiles.json"), {
+			version: 2,
+			profiles: { dev: { name: "dev", plugins: {} } },
+		});
+
+		const result = await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+
+		expect(result.recordedInManifest).toBe(true);
+		const manifest = await fs.readJson(join(dir, ".claude", "profiles.json"));
+		expect(manifest.profiles.dev.settings.outputStyle).toBe("composed-dev");
+	});
+
+	test("reports honestly when there is a profile but no manifest entry", async () => {
+		const profileSettings = join(
+			dir,
+			".claude",
+			"_profiles",
+			"dev",
+			"settings.json",
+		);
+		await fs.outputJson(profileSettings, {});
+		await symlink(
+			"_profiles/dev/settings.json",
+			join(dir, ".claude", "settings.json"),
+		);
+
+		const result = await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+		expect(result.profile).toBe("dev");
+		expect(result.recordedInManifest).toBe(false);
+	});
+});
+
+describe("clearStyle", () => {
+	test("removes the key rather than setting it undefined", async () => {
+		await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+		await clearStyle(dir);
+
+		const raw = await fs.readFile(
+			join(dir, ".claude", "settings.json"),
+			"utf8",
+		);
+		expect(raw).not.toContain("outputStyle");
+		expect(JSON.parse(raw)).toEqual({});
+	});
+
+	test("leaves the generated file on disk so a re-apply is one keypress away", async () => {
+		const result = await applyStyles({
+			projectPath: dir,
+			presets: [preset({ name: "direct" })],
+			imports: [],
+		});
+		await clearStyle(dir);
+		expect(await fs.pathExists(result.stylePath)).toBe(true);
+	});
+
+	test("is a no-op on a project that never had a style", async () => {
+		await clearStyle(dir);
+		expect(await fs.pathExists(join(dir, ".claude", "settings.json"))).toBe(
+			false,
+		);
+	});
+});
+
+// ─── Parity with the shipped plugin ───────────────────────────────────────────
+
+describe("parity with plugins/style/styles", () => {
+	// styles-manager re-implements the plugin's compose-style.ts rather than
+	// shelling out to it, so the one thing that must not drift is the file
+	// format. These read the REAL shipped presets — if the plugin changes its
+	// frontmatter vocabulary, this is what notices.
+	const stylesDir = join(
+		import.meta.dir,
+		"..",
+		"..",
+		"..",
+		"..",
+		"plugins",
+		"style",
+		"styles",
+	);
+
+	test("the shipped presets are where this test expects them", async () => {
+		expect(await fs.pathExists(stylesDir)).toBe(true);
+	});
+
+	test("every shipped preset parses into a usable preset", async () => {
+		const files = (await fs.readdir(stylesDir)).filter((f) =>
+			f.endsWith(".md"),
+		);
+		expect(files.length).toBeGreaterThan(0);
+
+		for (const file of files) {
+			const raw = await fs.readFile(join(stylesDir, file), "utf8");
+			const { frontmatter, body } = splitFrontmatter(raw);
+
+			expect(frontmatter.name, `${file} declares a name`).toBeTruthy();
+			expect(
+				["verbosity", "modifier"],
+				`${file} declares a known axis`,
+			).toContain(frontmatter.axis);
+			expect(frontmatter.summary, `${file} declares a summary`).toBeTruthy();
+			// The summary is the list-row text; an empty one renders a blank row.
+			expect(body.length, `${file} has a non-empty body`).toBeGreaterThan(0);
+		}
+	});
+
+	test("exactly one verbosity preset can be chosen from what ships", async () => {
+		const files = (await fs.readdir(stylesDir)).filter((f) =>
+			f.endsWith(".md"),
+		);
+		const axes = await Promise.all(
+			files.map(async (file) => {
+				const { frontmatter } = splitFrontmatter(
+					await fs.readFile(join(stylesDir, file), "utf8"),
+				);
+				return frontmatter.axis;
+			}),
+		);
+		// Both groups must be non-empty or the screen renders a category with no
+		// rows, which reads as "the plugin is broken".
+		expect(axes.filter((a) => a === "verbosity").length).toBeGreaterThan(0);
+		expect(axes.filter((a) => a === "modifier").length).toBeGreaterThan(0);
+	});
+
+	test("the plugin's composer carries the identical integrity block", async () => {
+		// The two composers are separate implementations of one format (see the
+		// header of styles-manager.ts). Everything else about them can differ
+		// harmlessly; this block cannot, because it is the security backstop and a
+		// user who composes with /style:apply must get the same one as a user who
+		// composes with claudeup.
+		//
+		// Read as TEXT rather than imported: claudeup's tsconfig roots at src/,
+		// and a cross-package import would make the check depend on the plugin
+		// being resolvable rather than on the text agreeing.
+		const composer = join(
+			import.meta.dir,
+			"..",
+			"..",
+			"..",
+			"..",
+			"plugins",
+			"style",
+			"scripts",
+			"compose-style.ts",
+		);
+		expect(await fs.pathExists(composer)).toBe(true);
+		const text = await fs.readFile(composer, "utf8");
+		expect(text).toContain(INTEGRITY_BLOCK);
+		// And it is actually appended there, not merely declared.
+		expect(text).toContain("lines.push(INTEGRITY_BLOCK,");
+	});
+
+	test("declared conflicts all name a preset that actually ships", async () => {
+		const files = (await fs.readdir(stylesDir)).filter((f) =>
+			f.endsWith(".md"),
+		);
+		const parsed = await Promise.all(
+			files.map(async (file) =>
+				splitFrontmatter(await fs.readFile(join(stylesDir, file), "utf8")),
+			),
+		);
+		const names = new Set(parsed.map((p) => p.frontmatter.name));
+		for (const { frontmatter } of parsed) {
+			for (const conflict of (frontmatter.conflicts ?? "")
+				.split(",")
+				.map((c) => c.trim())
+				.filter(Boolean)) {
+				// A conflict naming a preset that no longer exists is dead config:
+				// it silently stops protecting the pair it was written for.
+				expect(
+					names,
+					`${frontmatter.name} conflicts with a real preset`,
+				).toContain(conflict);
+			}
+		}
+	});
+});
+
+// ─── Adapter ──────────────────────────────────────────────────────────────────
+
+describe("buildStyleBrowserItems", () => {
+	const presets = [
+		preset({ name: "direct", axis: "verbosity", conflicts: ["terse"] }),
+		preset({ name: "terse", axis: "verbosity" }),
+		preset({ name: "no-slop", axis: "modifier", conflicts: ["chatty"] }),
+		preset({ name: "chatty", axis: "modifier" }),
+	];
+
+	test("leads with Anthropic official, then verbosity, modifiers, team, personal", () => {
+		const items = buildStyleBrowserItems({
+			presets,
+			imports: [
+				imported({ name: "mine", scope: "user", origin: "personal" }),
+				imported({
+					name: "builtin-explanatory",
+					displayName: "Explanatory",
+					scope: "user",
+					origin: "anthropic",
+				}),
+				imported({ name: "house", scope: "project", origin: "team" }),
+			],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			// This test is about the ORDER of the offline-authored sections, so the
+			// registry is emptied to keep it about that. Community's own placement
+			// is asserted separately, against the real registry.
+			registry: [],
+		});
+		const categories = items
+			.filter((i) => i.kind === "category")
+			.map((i) => (i.kind === "category" ? i.categoryKey : ""));
+		expect(categories).toEqual([
+			"anthropic",
+			"verbosity",
+			"modifier",
+			"team",
+			"personal",
+		]);
+	});
+
+	test("shows Anthropic's own name, not the builtin- slug", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [
+				imported({
+					name: "builtin-explanatory",
+					displayName: "Explanatory",
+					origin: "anthropic",
+				}),
+			],
+			selected: new Set(),
+			applied: null,
+			query: "",
+		});
+		const entry = items.find((i) => i.kind === "style");
+		expect(entry?.label).toBe("Explanatory");
+		// The id still carries the real on-disk name — that is what round-trips
+		// through the composed file's `style-imports`.
+		expect(entry?.id).toBe("user:builtin-explanatory");
+	});
+
+	test("filters on the displayed name as well as the file name", () => {
+		// Typing what you can see has to find it.
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [
+				imported({
+					name: "builtin-proactive",
+					displayName: "Proactive",
+					origin: "anthropic",
+				}),
+			],
+			selected: new Set(),
+			applied: null,
+			query: "proact",
+		});
+		expect(items.filter((i) => i.kind === "style")).toHaveLength(1);
+	});
+
+	test("omits a section with no members rather than showing a zero count", () => {
+		const items = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			// Community is omitted the same way, and needs an empty registry to be:
+			// with the shipped one it is never empty, which is the point of offers.
+			registry: [],
+		});
+		const categories = items
+			.filter((i) => i.kind === "category")
+			.map((i) => (i.kind === "category" ? i.categoryKey : ""));
+		expect(categories).toEqual(["verbosity", "modifier"]);
+	});
+
+	test("omits a category entirely when nothing in it matches the filter", () => {
+		const items = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "no-slop",
+		});
+		expect(items.filter((i) => i.kind === "category")).toHaveLength(1);
+		expect(items.filter((i) => i.kind === "style")).toHaveLength(1);
+	});
+
+	test("filters on the summary as well as the name", () => {
+		const items = buildStyleBrowserItems({
+			presets: [preset({ name: "zzz", summary: "findable phrase" })],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "findable",
+		});
+		expect(items.filter((i) => i.kind === "style")).toHaveLength(1);
+	});
+
+	test("distinguishes pending selection from what is live", () => {
+		const items = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(["no-slop"]),
+			applied: { presets: ["chatty"], imports: [] },
+			query: "",
+		});
+		const byName = new Map(
+			items
+				.filter((i) => i.kind === "style")
+				.map((i) => [i.label, i as { checked: boolean; applied: boolean }]),
+		);
+		expect(byName.get("no-slop")?.checked).toBe(true);
+		expect(byName.get("no-slop")?.applied).toBe(false);
+		expect(byName.get("chatty")?.checked).toBe(false);
+		expect(byName.get("chatty")?.applied).toBe(true);
+	});
+
+	test("flags a conflict from both directions, not only the declared one", () => {
+		// `conflicts` is declared on one side in the shipped presets, but the
+		// relationship is symmetric — otherwise the warning would depend on which
+		// of the pair the user happened to tick first.
+		const withChattySelected = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(["chatty"]),
+			applied: null,
+			query: "",
+		});
+		const noSlop = withChattySelected.find((i) => i.label === "no-slop");
+		expect(noSlop?.kind === "style" && noSlop.conflictsWith).toBe("chatty");
+
+		const withNoSlopSelected = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(["no-slop"]),
+			applied: null,
+			query: "",
+		});
+		const chatty = withNoSlopSelected.find((i) => i.label === "chatty");
+		expect(chatty?.kind === "style" && chatty.conflictsWith).toBe("no-slop");
+	});
+
+	test("never flags a conflict between verbosity presets — they are a radio group", () => {
+		const items = buildStyleBrowserItems({
+			presets,
+			imports: [],
+			selected: new Set(["direct"]),
+			applied: null,
+			query: "",
+		});
+		const terse = items.find((i) => i.label === "terse");
+		expect(terse?.kind === "style" && terse.conflictsWith).toBeNull();
+	});
+
+	test("flags a modifier that conflicts with the chosen verbosity preset", () => {
+		// This is the conflict that actually occurs in the shipped set:
+		// plain-language (modifier) declares a conflict with terse (verbosity).
+		// A rule that only compared modifiers against modifiers would never fire.
+		const cross = [
+			preset({ name: "terse", axis: "verbosity" }),
+			preset({
+				name: "plain-language",
+				axis: "modifier",
+				conflicts: ["terse"],
+			}),
+		];
+		const items = buildStyleBrowserItems({
+			presets: cross,
+			imports: [],
+			selected: new Set(["terse"]),
+			applied: null,
+			query: "",
+		});
+		const modifier = items.find((i) => i.label === "plain-language");
+		expect(modifier?.kind === "style" && modifier.conflictsWith).toBe("terse");
+		expect(validateSelection(cross)).toHaveLength(1);
+	});
+
+	test("marks template presets disabled", () => {
+		const items = buildStyleBrowserItems({
+			presets: [preset({ name: "terminology", template: true })],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+		});
+		const entry = items.find((i) => i.kind === "style");
+		expect(entry?.kind === "style" && entry.disabled).toBe(true);
+	});
+});
+
+// ─── Community section ────────────────────────────────────────────────────────
+
+describe("the Community section", () => {
+	const offer = (id: string, sourceId: string, name: string) => ({
+		id,
+		sourceId,
+		path: `output-styles/${id.split("--")[1]}.md`,
+		displayName: name,
+		summary: `Summary for ${name}.`,
+	});
+
+	const spartan = (name = "attention-span--spartan", displayName = "Spartan") =>
+		imported({
+			name,
+			displayName,
+			scope: "community",
+			origin: "community",
+			managed: true,
+			community: {
+				source: "alexgreensh/attention-span",
+				path: "output-styles/spartan.md",
+				ref: "HEAD",
+				commit: "b860c9f8f3c7",
+				sha256: "sha256:abc",
+				fetched: "2026-08-18",
+				licence: "AGPL-3.0",
+				author: "alexgreensh",
+			},
+		});
+
+	test("sorts last, after the sections nobody fetched from the network", () => {
+		const items = buildStyleBrowserItems({
+			presets: [preset({ name: "direct", axis: "verbosity" })],
+			imports: [
+				imported({ name: "mine", scope: "user", origin: "personal" }),
+				imported({ name: "house", scope: "project", origin: "team" }),
+			],
+			selected: new Set(),
+			applied: null,
+			query: "",
+		});
+		const categories = items
+			.filter((i) => i.kind === "category")
+			.map((i) => (i.kind === "category" ? i.categoryKey : ""));
+		expect(categories.at(-1)).toBe("community");
+	});
+
+	test("lists the registry as offers even when nothing has been fetched", () => {
+		// The mitigation for placing the section last: it is non-empty from first
+		// launch, so it is discoverable by scrolling rather than only by already
+		// knowing it exists.
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [offer("attention-span--spartan", "attention-span", "Spartan")],
+		});
+		const offers = items.filter((i) => i.kind === "offer");
+		expect(offers).toHaveLength(1);
+		expect(offers[0]?.label).toBe("Spartan");
+		expect(offers[0]?.id).toBe("offer:attention-span--spartan");
+	});
+
+	test("is omitted entirely when the registry is empty and nothing is cached", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [],
+		});
+		expect(items).toHaveLength(0);
+	});
+
+	test("a fetched style REPLACES its offer rather than appearing twice", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [spartan()],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [offer("attention-span--spartan", "attention-span", "Spartan")],
+		});
+		expect(items.filter((i) => i.kind === "offer")).toHaveLength(0);
+		const style = items.find((i) => i.kind === "style");
+		expect(style?.label).toBe("Spartan");
+		expect(style?.id).toBe("community:attention-span--spartan");
+	});
+
+	test("fetching a style does NOT move it — the row keeps its slot", () => {
+		// The cursor tracks an index. Grouping fetched styles above offers meant
+		// that fetching one moved it up, shifted everything below by a row, and
+		// left the cursor pointing at a different style than the one just acted
+		// on. Position is registry order now; state is the checkbox's job.
+		const reg = [
+			offer(
+				"attention-span--attention-kind",
+				"attention-span",
+				"Attention-kind",
+			),
+			offer("attention-span--rundown", "attention-span", "Rundown"),
+			offer("attention-span--spartan", "attention-span", "Spartan"),
+		];
+
+		const before = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: reg,
+		});
+
+		// Same registry, but the middle entry has now been fetched.
+		const after = buildStyleBrowserItems({
+			presets: [],
+			imports: [spartan("attention-span--rundown", "Rundown")],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: reg,
+		});
+
+		expect(before.map((i) => i.label)).toEqual(after.map((i) => i.label));
+		// Only the row's KIND changed, and only for the one that was fetched.
+		expect(before.map((i) => i.kind)).toEqual([
+			"category",
+			"offer",
+			"offer",
+			"offer",
+		]);
+		expect(after.map((i) => i.kind)).toEqual([
+			"category",
+			"offer",
+			"style",
+			"offer",
+		]);
+	});
+
+	test("offers are landable so the cursor can reach them", () => {
+		// `firstSelectableIndex` used to look for `kind === "style"`, which would
+		// make the whole section unreachable for a user who has fetched nothing —
+		// i.e. everyone, on their first launch.
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [offer("attention-span--spartan", "attention-span", "Spartan")],
+		});
+		expect(firstSelectableIndex(items)).toBe(1);
+		expect(items[1]?.kind).toBe("offer");
+	});
+
+	test("an offer is not tickable — it has no `checked` at all", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(["offer:attention-span--spartan"]),
+			applied: null,
+			query: "",
+			registry: [offer("attention-span--spartan", "attention-span", "Spartan")],
+		});
+		const item = items.find((i) => i.kind === "offer");
+		expect(item).toBeDefined();
+		expect("checked" in (item as object)).toBe(false);
+	});
+
+	test("offers match the filter on name and summary", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "rundown",
+			registry: [
+				offer("attention-span--spartan", "attention-span", "Spartan"),
+				offer("attention-span--rundown", "attention-span", "Rundown"),
+			],
+		});
+		const offers = items.filter((i) => i.kind === "offer");
+		expect(offers.map((o) => o.label)).toEqual(["Rundown"]);
+	});
+
+	test("a retired entry is no longer offered", () => {
+		// Retired means "do not recommend this any more". It must still RESOLVE
+		// for a committed declaration, which is asserted in styles-sync.test.ts —
+		// deleting the entry is what breaks a teammate's checkout.
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [
+				{
+					...offer("attention-span--spartan", "attention-span", "Spartan"),
+					retired: true as const,
+				},
+			],
+		});
+		expect(items).toHaveLength(0);
+	});
+
+	test("an offer the project's declaration asks for is flagged as needed", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [
+				offer("attention-span--spartan", "attention-span", "Spartan"),
+				offer("attention-span--rundown", "attention-span", "Rundown"),
+			],
+			fetchable: ["community:attention-span--spartan"],
+		});
+		const byLabel = new Map(
+			items.filter((i) => i.kind === "offer").map((i) => [i.label, i]),
+		);
+		expect(byLabel.get("Spartan")?.declared).toBe(true);
+		expect(byLabel.get("Rundown")?.declared).toBe(false);
+	});
+
+	test("carries the upstream check state onto the row, keyed by coordinate", () => {
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [spartan()],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [],
+			upstream: {
+				"attention-span--spartan": {
+					state: "update-available",
+					detail: "newer version available — 12 lines changed",
+					checkedAt: 1,
+					changedLines: 12,
+				},
+			},
+		});
+		const style = items.find((i) => i.kind === "style");
+		expect(style?.kind === "style" && style.upstream?.state).toBe(
+			"update-available",
+		);
+	});
+
+	test("wears the same tone as Anthropic captures, never the danger tone", () => {
+		// Both sections are "text captured from somewhere else onto this disk".
+		// Red is the only unused tone and it means danger here — a normal, working
+		// section must not wear it.
+		const items = buildStyleBrowserItems({
+			presets: [],
+			imports: [],
+			selected: new Set(),
+			applied: null,
+			query: "",
+			registry: [offer("attention-span--spartan", "attention-span", "Spartan")],
+		});
+		const category = items.find((i) => i.kind === "category");
+		expect(category?.kind === "category" && category.tone).toBe("yellow");
+		expect(category?.kind === "category" && category.badge).toBe("from GitHub");
+	});
+});