gentle-pi 3.2.1 → 3.3.0

package/tests/shell-bar.test.ts

@@ -2,17 +2,18 @@ import assert from "node:assert/strict";
 import test from "node:test";
 import { visibleWidth } from "@earendil-works/pi-tui";
 import {
+	buildShellHeaderModel,
 	formatCost,
 	formatTokens,
 	gaugeTone,
 	renderGauge,
 	renderShellBar,
+	renderShellHeaderBar,
 	renderShellSidebarBar,
 	shellEnabled,
 	type ShellBarModel,
 	type ShellBarTheme,
 } from "../lib/shell-bar.ts";
-import { parseNanQuota } from "../lib/shell-usage.ts";
 
 // The Gentle Shell bar replaces pi's three-line footer with one line of
 // segments. Rendering is pure so it can be verified without a TUI.
@@ -53,28 +54,6 @@ function model(overrides: Partial<ShellBarModel> = {}): ShellBarModel {
 	};
 }
 
-// The grouped NaN fixture the panel test uses, so both surfaces are asserted
-// against the same payload, the same order and the same percentages.
-const GROUPED_NAN_QUOTA = {
-	periodEnd: "2026-10-01T00:00:00.000Z",
-	models: [
-		{ model: "glm5.3-flash", cap: 2_000_000_000, tokensUsed: 200_000_000 },
-		{ model: "glm5.3", cap: 3_000_000_000, tokensUsed: 0, periodEnd: "2026-10-17T05:53:20.000Z" },
-		{ model: "glm5.2", cap: 3_000_000_000, tokensUsed: 0, periodEnd: "2026-10-17T05:53:20.000Z" },
-		{ model: "deepseek-v4-flash", cap: 3_000_000_000, tokensUsed: 300_000_000 },
-	],
-};
-
-// The sidebar prints the card body between its borders; the Usage rows are the
-// metered block between the Usage heading and Integrations, minus the context
-// meter, which is not a subscription allowance.
-function sidebarUsageRows(lines: string[]): string[] {
-	const body = lines.filter((line) => line.startsWith("│ ")).map((line) => line.slice(2, -2).trim());
-	const start = body.indexOf("Usage");
-	const end = body.indexOf("Integrations");
-	return body.slice(start + 1, end).filter((line) => /[▰▱]/.test(line) && !line.startsWith("Context"));
-}
-
 test("renderGauge fills cells proportionally to the percentage", () => {
 	assert.equal(renderGauge(45, 8), "▰▰▰▰▱▱▱▱");
 	assert.equal(renderGauge(0, 8), "▱▱▱▱▱▱▱▱");
@@ -158,57 +137,9 @@ test("renderShellBar meters the model the session is using inside a multi-model
 	assert.doesNotMatch(glm, /deepseek-v4-flash ▰/);
 	const [other] = renderShellBar(model({ modelId: "deepseek-v4-flash", usage }), plainTheme, 200);
 	assert.match(other, /deepseek-v4-flash ▰▱▱▱▱▱▱▱ 18%$/);
-	const sidebar = renderShellSidebarBar(model({ modelId: "glm5.3-flash", usage }), plainTheme, 60).join("\n");
-	assert.match(sidebar, /glm5\.3-flash +▰▱▱▱▱▱▱▱ +10%/, "the sidebar lists the session model's own allowance");
-});
-
-// The sidebar is the surface that never needs opening, so a provider with
-// per-model allowances shows the panel's model rows there too — most consumed
-// family first, its models inside it — and leaves the aggregate totals and the
-// reset dates to the bar and the panel.
-test("sidebar groups the NaN allowances by subscription without totals or resets", () => {
-	const usage = parseNanQuota(GROUPED_NAN_QUOTA, 0);
-	const lines = renderShellSidebarBar(model({ modelId: "glm5.3-flash", usage }), plainTheme, 60);
-	const rows = sidebarUsageRows(lines);
-	assert.deepEqual(rows.map((row) => row.replace(/\s*[▰▱].*$/, "")), ["deepseek-v4-flash", "glm5.3-flash"]);
-	assert.deepEqual(rows.map((row) => Number.parseInt(row.match(/(\d+)%$/)![1] ?? "", 10)), [10, 10]);
-	assert.equal(rows.some((row) => / 0%$/.test(row)), false, "a window that consumed nothing only spends space");
-	assert.equal(lines.join("\n").includes("total"), false, "an aggregate row only costs space");
-	assert.equal(lines.join("\n").includes("resets in"), false, "the reset dates belong to the panel");
-	for (const width of [24, 46, 60]) {
-		assert.ok(renderShellSidebarBar(model({ usage }), plainTheme, width).every((line) => visibleWidth(line) <= width));
-	}
-});
-
-test("sidebar treats one metered NaN allowance as a per-model provider", () => {
-	const usage = parseNanQuota({
-		periodEnd: "2026-10-01T00:00:00.000Z",
-		models: [{ model: "glm5.3-flash", cap: 2_000_000_000, tokensUsed: 400_000_000, windowHours: 4, windowTokens: 400_000_000, windowTokensUsed: 120_000_000, windowResetsAt: 1_788_620_161 }],
-	}, 0);
-	const lines = renderShellSidebarBar(model({ modelId: "glm5.3-flash", usage }), plainTheme, 60);
-	const rows = sidebarUsageRows(lines).map((row) => row.replace(/\s+/g, " "));
-	// A single allowance is still the panel's rows, not the bar's one-line meter:
-	// the rolling window it reports is a row of its own here too, and the reset
-	// stays in the panel.
-	assert.deepEqual(rows, ["glm5.3-flash ▰▰▱▱▱▱▱▱ 20%", "glm5.3-flash 4h ▰▰▱▱▱▱▱▱ 30%"]);
-	assert.equal(lines.join("\n").includes("resets in"), false);
-});
-
-test("sidebar keeps one aggregate line for a provider without raw allowances", () => {
-	const usage = {
-		provider: "openai-codex",
-		plan: "pro",
-		fetchedAt: 0,
-		limits: [{ name: "codex", limitReached: false, windows: [
-			{ label: "5h", usedPercent: 62, windowSeconds: 18_000, resetAt: null },
-			{ label: "week", usedPercent: 31, windowSeconds: 604_800, resetAt: null },
-		] }],
-	};
-	const lines = renderShellSidebarBar(model({ usage }), plainTheme, 60);
-	assert.deepEqual(sidebarUsageRows(lines), ["codex 5h ▰▰▰▰▰▱▱▱ 62% · week 31%"]);
 });
 
-test("sidebar drops an aggregate allowance that consumed nothing", () => {
+test("renderShellBar keeps its own zero-window contract independent of the sidebar", () => {
 	const usage = {
 		provider: "openai-codex",
 		plan: "pro",
@@ -218,58 +149,9 @@ test("sidebar drops an aggregate allowance that consumed nothing", () => {
 			{ label: "week", usedPercent: 0, windowSeconds: 604_800, resetAt: null },
 		] }],
 	};
-	const lines = renderShellSidebarBar(model({ usage }), plainTheme, 60);
-	assert.deepEqual(sidebarUsageRows(lines), []);
-	const text = lines.join("\n");
-	assert.match(text, /Usage/);
-	assert.match(text, /Context/);
-	assert.match(text, /Cost/);
-	// The bar keeps its own contract: only the sidebar gives zero rows the boot.
 	assert.match(renderShellBar(model({ usage }), plainTheme, 200)[0], /codex 5h ▱▱▱▱▱▱▱▱ 0% · week 0%$/);
 });
 
-test("sidebar keeps the Usage group when nothing was consumed", () => {
-	const usage = parseNanQuota({
-		periodEnd: "2026-10-01T00:00:00.000Z",
-		models: [
-			{ model: "glm5.3", cap: 3_000_000_000, tokensUsed: 0 },
-			{ model: "glm5.2", cap: 3_000_000_000, tokensUsed: 0 },
-		],
-	}, 0);
-	const lines = renderShellSidebarBar(model({ usage }), plainTheme, 60);
-	const text = lines.join("\n");
-	assert.deepEqual(sidebarUsageRows(lines), []);
-	assert.match(text, /Usage/);
-	assert.match(text, /Context/);
-	assert.match(text, /Cost/);
-	assert.match(text, /Integrations/);
-});
-
-test("sidebar hides exactly the rows that would print 0%, rounding included", () => {
-	// The row's own rounding is the only threshold: a fraction below half a
-	// percent is a 0% row and leaves; half a percent keeps its row and prints 1%.
-	const usage = (usedPercent: number) => ({
-		provider: "openai-codex",
-		plan: "pro",
-		fetchedAt: 0,
-		limits: [{ name: "codex", limitReached: false, windows: [{ label: "5h", usedPercent, windowSeconds: 18_000, resetAt: null }] }],
-	});
-	assert.deepEqual(sidebarUsageRows(renderShellSidebarBar(model({ usage: usage(0.4) }), plainTheme, 60)), []);
-	assert.deepEqual(sidebarUsageRows(renderShellSidebarBar(model({ usage: usage(0.5) }), plainTheme, 60)), ["codex 5h ▱▱▱▱▱▱▱▱ 1%"]);
-});
-
-test("sidebar reads a limit without windows as nothing to draw, not as zero consumption", () => {
-	const usage = {
-		provider: "openai-codex",
-		plan: "pro",
-		fetchedAt: 0,
-		limits: [{ name: "codex", limitReached: false, windows: [] }],
-	};
-	const lines = renderShellSidebarBar(model({ usage }), plainTheme, 60);
-	assert.deepEqual(sidebarUsageRows(lines), []);
-	assert.match(lines.join("\n"), /Cost/);
-});
-
 test("renderShellBar shows an unknown context as a question mark after compaction", () => {
 	const [line] = renderShellBar(model({ contextPercent: null }), plainTheme, 160);
 	assert.match(line, /ctx ▱▱▱▱▱▱▱▱ \?%/);
@@ -326,13 +208,20 @@ test("shellEnabled honors GENTLE_PI_SHELL=0", () => {
 	assert.equal(shellEnabled({ GENTLE_PI_SHELL: "false" }), false);
 });
 
-test("sidebar unifies project, captured changes, usage and integrations in one frame", () => {
+test("renderShellSidebarBar paints the Status card frame with border and the title with accent", () => {
+	const lines = renderShellSidebarBar(model(), taggedTheme, 46);
+	assert.match(lines[0], /^<border>╭<\/border>/);
+	assert.match(lines[0], /<accent>✿ Status<\/accent>/);
+	assert.match(lines[lines.length - 1], /^<border>╰<\/border>/);
+});
+
+test("sidebar unifies project, captured changes and integrations in one frame", () => {
 	const data = model({ changes: { files: 2, added: 7, deleted: 3, notice: "capture warning" }, statuses: ["MCP connected"] });
 	const lines = renderShellSidebarBar(data, plainTheme, 46);
 	const text = lines.join("\n");
 	assert.equal(lines.filter((line) => line.startsWith("╭")).length, 1);
 	let previous = -1;
-	for (const heading of ["Status", "Project", "Changes", "Usage", "Integrations"]) {
+	for (const heading of ["Status", "Project", "Changes", "Integrations"]) {
 		const index = text.indexOf(heading);
 		assert.ok(index > previous, heading);
 		previous = index;
@@ -340,7 +229,7 @@ test("sidebar unifies project, captured changes, usage and integrations in one f
 	assert.match(text, /2 files.*\+7.*−3/);
 	assert.match(text, /capture warning/);
 	assert.match(text, /\/gentle:changes/);
-	assert.match(text, /gpt-5\.5/);
+	assert.match(text, /main/);
 	for (const width of [1, 8, 24, 46]) assert.ok(renderShellSidebarBar(data, plainTheme, width).every((line) => visibleWidth(line) <= width));
 	const empty = renderShellSidebarBar(model(), plainTheme, 46).join("\n");
 	assert.match(empty, /No captured changes/);
@@ -359,3 +248,182 @@ test("sidebar profile wraps long names without changing the compact bar", () =>
 	}
 	assert.deepEqual(renderShellBar(active, plainTheme, 120), renderShellBar(base, plainTheme, 120));
 });
+
+test("sidebar Status card drops Model, Effort, Context, Cost and Usage, keeping Project, Changes and Integrations", () => {
+	const usage = {
+		provider: "openai-codex",
+		plan: "pro",
+		fetchedAt: 0,
+		limits: [{ name: "codex", limitReached: false, windows: [{ label: "5h", usedPercent: 62, windowSeconds: 18_000, resetAt: null }] }],
+	};
+	const data = model({ profile: "team", sessionName: "session", usage, changes: { files: 1, added: 2, deleted: 1 }, statuses: ["MCP connected"] });
+	const text = renderShellSidebarBar(data, plainTheme, 60).join("\n");
+	assert.doesNotMatch(text, /Usage/);
+	assert.doesNotMatch(text, /Model/);
+	assert.doesNotMatch(text, /Effort/);
+	assert.doesNotMatch(text, /Context/);
+	assert.doesNotMatch(text, /Cost/);
+	assert.doesNotMatch(text, /\$9\.49/);
+	assert.doesNotMatch(text, /codex 5h/);
+	for (const heading of ["Status", "Project", "Changes", "Integrations"]) assert.match(text, new RegExp(heading));
+	assert.match(text, /Branch.*main/);
+	assert.match(text, /Session.*session/);
+	assert.match(text, /Profile.*team/);
+});
+
+// The live header row above the fullscreen rail: identity on the left (brand,
+// location, model · effort · profile), the per-frame counters right-aligned
+// (context gauge, cost). Never the working/thinking state or extension
+// statuses — those stay in the prompt and the Status card.
+
+test("buildShellHeaderModel keeps only the header's fields from the bar model", () => {
+	const header = buildShellHeaderModel(model({ profile: "team", statuses: ["MCP: 3 servers"] }));
+	assert.deepEqual(header, {
+		cwd: "~/work/gentle-pi",
+		branch: "main",
+		dirty: undefined,
+		modelId: "gpt-5.5",
+		effort: "medium",
+		profile: "team",
+		contextPercent: 45,
+		costTotal: 9.49,
+		subscription: true,
+		usage: undefined,
+	});
+	assert.ok(!("statuses" in header), "extension statuses never reach the header");
+});
+
+test("renderShellHeaderBar draws the brand, identity, and right-aligned counters (plus the standing usage segment) in one line", () => {
+	const header = buildShellHeaderModel(model({ profile: "team" }));
+	const { text: line } = renderShellHeaderBar(header, plainTheme, 120);
+	const left = "✿ Gentle Shell ⟡ ~/work/gentle-pi main ⟡ gpt-5.5 · medium · team";
+	const right = "ctx ▰▰▰▰▱▱▱▱ 45% ⟡ $9.49 sub ⟡ usage";
+	assert.equal(line, left + " ".repeat(120 - visibleWidth(left) - visibleWidth(right)) + right);
+	assert.equal(visibleWidth(line), 120);
+});
+
+test("renderShellHeaderBar never shows working state or extension statuses", () => {
+	const header = buildShellHeaderModel(model({ statuses: ["MCP: 3 servers", "working…"] }));
+	const { text: line } = renderShellHeaderBar(header, plainTheme, 120);
+	assert.doesNotMatch(line, /MCP: 3 servers/);
+	assert.doesNotMatch(line, /working/);
+});
+
+test("renderShellHeaderBar colors the brand bold and by role", () => {
+	const bolding = { fg: (color: string, text: string) => `<${color}>${text}</${color}>`, bold: (text: string) => `**${text}**` };
+	const header = buildShellHeaderModel(model());
+	const { text: line } = renderShellHeaderBar(header, bolding, 120);
+	assert.match(line, /<accent>\*\*✿ Gentle Shell\*\*<\/accent>/);
+});
+
+test("renderShellHeaderBar drops the profile, then the effort, then the whole location before the right group", () => {
+	const withProfile = buildShellHeaderModel(model({ profile: "team" }));
+	const { text: wide } = renderShellHeaderBar(withProfile, plainTheme, 120);
+	assert.match(wide, /gpt-5\.5 · medium · team/);
+	assert.match(wide, /~\/work\/gentle-pi main/);
+	assert.match(wide, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub ⟡ usage$/);
+
+	// 100 cols: the profile no longer fits, but effort and location still do.
+	const { text: noProfile } = renderShellHeaderBar(withProfile, plainTheme, 100);
+	assert.doesNotMatch(noProfile, /team/);
+	assert.match(noProfile, /gpt-5\.5 · medium/);
+	assert.match(noProfile, /~\/work\/gentle-pi main/);
+	assert.equal(visibleWidth(noProfile), 100);
+
+	// 90 cols: effort goes too, only the bare model id remains next to location.
+	const { text: noEffort } = renderShellHeaderBar(withProfile, plainTheme, 90);
+	assert.doesNotMatch(noEffort, /medium/);
+	assert.doesNotMatch(noEffort, /team/);
+	assert.match(noEffort, /gpt-5\.5/);
+	assert.match(noEffort, /~\/work\/gentle-pi main/);
+	assert.equal(visibleWidth(noEffort), 90);
+
+	// 82 cols: the whole location segment goes; brand and model survive with the counters.
+	const { text: noLocation } = renderShellHeaderBar(withProfile, plainTheme, 82);
+	assert.doesNotMatch(noLocation, /~\/work\/gentle-pi/);
+	assert.match(noLocation, /gpt-5\.5/);
+	assert.match(noLocation, /✿ Gentle Shell/);
+	assert.match(noLocation, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub ⟡ usage$/);
+	assert.equal(visibleWidth(noLocation), 82);
+
+	// 60 cols: even the standing usage segment is gone now; brand+model and ctx/cost survive.
+	const { text: noUsage } = renderShellHeaderBar(withProfile, plainTheme, 60);
+	assert.doesNotMatch(noUsage, /~\/work\/gentle-pi/);
+	assert.doesNotMatch(noUsage, /usage/);
+	assert.match(noUsage, /gpt-5\.5/);
+	assert.match(noUsage, /✿ Gentle Shell/);
+	assert.match(noUsage, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub$/);
+	assert.equal(visibleWidth(noUsage), 60);
+});
+
+test("renderShellHeaderBar returns an empty string only once the brand itself cannot fit", () => {
+	assert.equal(renderShellHeaderBar(buildShellHeaderModel(model()), plainTheme, 3).text, "");
+	assert.match(renderShellHeaderBar(buildShellHeaderModel(model()), plainTheme, 40).text, /✿ Gentle Shell/);
+});
+
+// T8: the usage segment. It rides after cost in the right group, shows every
+// window of the active provider's main limit, and degrades (gauges, then
+// secondary windows, then the whole segment) before ctx/cost is ever touched.
+
+const USAGE_TWO_WINDOWS = {
+	provider: "openai-codex",
+	plan: "pro",
+	fetchedAt: 0,
+	limits: [{ name: "codex", limitReached: false, windows: [
+		{ label: "5h", usedPercent: 26, windowSeconds: 18_000, resetAt: null },
+		{ label: "week", usedPercent: 12, windowSeconds: 604_800, resetAt: null },
+	] }],
+};
+
+test("renderShellHeaderBar shows every usage window with its gauge and the shortcut hint, after cost", () => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	const { text, usageSpan } = renderShellHeaderBar(header, plainTheme, 140, "alt+u");
+	assert.match(text, /\$9\.49 sub ⟡ usage 5h ▰▰▱▱▱▱▱▱ 26% · week ▰▱▱▱▱▱▱▱ 12% · alt\+u$/);
+	assert.ok(usageSpan);
+	assert.equal(text.slice(usageSpan.start, usageSpan.end), "usage 5h ▰▰▱▱▱▱▱▱ 26% · week ▰▱▱▱▱▱▱▱ 12% · alt+u");
+});
+
+test("renderShellHeaderBar shows 'usage · <shortcut>' with no data, and drops the hint when the shortcut is disabled", () => {
+	const withHint = renderShellHeaderBar(buildShellHeaderModel(model({ usage: undefined })), plainTheme, 140, "alt+u");
+	assert.match(withHint.text, /usage · alt\+u$/);
+	const noHint = renderShellHeaderBar(buildShellHeaderModel(model({ usage: undefined })), plainTheme, 140, undefined);
+	assert.match(noHint.text, /usage$/);
+	assert.doesNotMatch(noHint.text, /alt\+u/);
+});
+
+test("renderShellHeaderBar degrades the usage segment (gauges, then secondary windows, then the whole segment) before touching ctx/cost", () => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	const full = renderShellHeaderBar(header, plainTheme, 140, "alt+u").text;
+	assert.match(full, /5h ▰▰▱▱▱▱▱▱ 26% · week ▰▱▱▱▱▱▱▱ 12%/);
+
+	// 100 cols: the gauges no longer fit, but both windows still show as text
+	// (a positive match on the bare "5h 26% · week 12%" run rules out any
+	// gauge glyph sneaking in between them; ctx's own gauge is unrelated).
+	const noGauges = renderShellHeaderBar(header, plainTheme, 100, "alt+u").text;
+	assert.match(noGauges, /usage 5h 26% · week 12% · alt\+u$/);
+	assert.match(noGauges, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub/, "ctx/cost are untouched while usage still degrades");
+	assert.equal(visibleWidth(noGauges), 100);
+
+	// 80 cols: only the first window remains.
+	const primaryOnly = renderShellHeaderBar(header, plainTheme, 80, "alt+u").text;
+	assert.match(primaryOnly, /usage 5h 26% · alt\+u$/);
+	assert.doesNotMatch(primaryOnly, /week/);
+	assert.match(primaryOnly, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub/);
+	assert.equal(visibleWidth(primaryOnly), 80);
+
+	// 70 cols: the whole usage segment is gone, ctx/cost remain intact.
+	const noUsage = renderShellHeaderBar(header, plainTheme, 70, "alt+u").text;
+	assert.doesNotMatch(noUsage, /usage/);
+	assert.match(noUsage, /ctx ▰▰▰▰▱▱▱▱ 45% ⟡ \$9\.49 sub$/);
+	assert.equal(visibleWidth(noUsage), 70);
+});
+
+test("renderShellHeaderBar's usage span always points at the usage text, not ctx/cost", () => {
+	const header = buildShellHeaderModel(model({ usage: USAGE_TWO_WINDOWS }));
+	for (const width of [140, 100, 90]) {
+		const { text, usageSpan } = renderShellHeaderBar(header, plainTheme, width, "alt+u");
+		if (!usageSpan) continue;
+		assert.match(text.slice(usageSpan.start, usageSpan.end), /^usage/);
+		assert.equal(usageSpan.end, visibleWidth(text), "the usage segment always ends at the right edge");
+	}
+});

package/tests/shell-card.test.ts

@@ -54,10 +54,12 @@ test("renderCard collapses to the frame and the first body line with an expand h
 });
 
 test("renderCard uses the card tone across the full frame while preserving content roles", () => {
+	// INFO paints the rose frame: the rounded border in the plain border role,
+	// the title in accent — the same look every sidebar card already used.
 	const info = renderCard(card(), taggedTheme, 80, { expanded: true });
-	assert.match(info[0], /^<customMessageLabel>╭<\/customMessageLabel><customMessageLabel>─ <\/customMessageLabel><customMessageLabel>✿ Gentle AI<\/customMessageLabel> <muted>·<\/muted> <muted>review preflight<\/muted><customMessageLabel> ─+<\/customMessageLabel><customMessageLabel>╮<\/customMessageLabel>$/);
-	assert.match(info[1], /^<customMessageLabel>│<\/customMessageLabel> <text>.*<customMessageLabel>│<\/customMessageLabel>$/);
-	assert.match(info[info.length - 1], /^<customMessageLabel>╰<\/customMessageLabel><customMessageLabel>─+╯<\/customMessageLabel>$/);
+	assert.match(info[0], /^<border>╭<\/border><border>─ <\/border><accent>✿ Gentle AI<\/accent> <muted>·<\/muted> <muted>review preflight<\/muted><border> ─+<\/border><border>╮<\/border>$/);
+	assert.match(info[1], /^<border>│<\/border> <text>.*<border>│<\/border>$/);
+	assert.match(info[info.length - 1], /^<border>╰<\/border><border>─+╯<\/border>$/);
 
 	const warning = renderCard(card({ tone: CARD_TONE.WARNING, subtitle: undefined }), taggedTheme, 80, { expanded: true });
 	assert.match(warning[0], /^<warning>╭<\/warning>/);

package/tests/shell-changes-view.test.ts

@@ -62,6 +62,30 @@ function mouseButton(type: TuiMouseEvent["type"], button: TuiMouseEvent["button"
 	return { type, button, x, y, screenX: x, screenY: y, width: 80, height, shift: false, alt: false, ctrl: false };
 }
 
+// H1 (odd/tasks/usage-click-and-changes-attribution.md): the same shared
+// hover role every other clickable surface uses, and it never overrides the
+// already-selected row's own role.
+test("WorktreeChangesView paints the shared hover role over an unselected row, never the selected one", async () => {
+	const trees = ["/main", "/linked"].map((root) => ({ root, branch: root === "/main" ? "main" : undefined, model: changesModel([file("same.ts", 1, 0)]) }));
+	const component = new WorktreeChangesView(trees, {
+		theme: taggedTheme, rows: 10,
+		loadDiff: async () => "",
+		onOpen: () => {},
+		onClose: () => {}, requestRender() {}, onRefresh() {},
+	});
+	component.render(80);
+	// Row y=1 is the selected group header (/main, index 0); row y=2 is /linked's header.
+	const hoverOther = component.handleMouse(mouseButton("move", "none", 3, 2, 10));
+	assert.deepEqual(hoverOther, { handled: true, render: true });
+	assert.match(component.render(80)[2]!, /<warning>[^<]*detached/, "hovering the unselected row paints the shared hover role");
+	assert.doesNotMatch(component.render(80)[1]!, /<warning>/, "the selected row keeps its own role");
+
+	const hoverSelected = component.handleMouse(mouseButton("move", "none", 3, 1, 10));
+	assert.deepEqual(hoverSelected, { handled: true, render: true });
+	assert.doesNotMatch(component.render(80)[1]!, /<warning>/, "hovering the selected row still never paints the hover role");
+	assert.doesNotMatch(component.render(80)[2]!, /<warning>/, "leaving the other row clears its hover");
+});
+
 test("worktree accordion keeps groups and nested files beside a framed lazy diff", async () => {
 	const trees = ["/main", "/linked"].map((root) => ({ root, branch: root === "/main" ? "main" : undefined, model: changesModel([file("same.ts", 1, 0)]) }));
 	const loaded: string[] = [];
@@ -503,6 +527,29 @@ test("ChangesView opens the selected file and closes on escape or q", async () =
 	assert.equal(events.filter((event) => event === "close").length, 2);
 });
 
+// H1 (odd/tasks/usage-click-and-changes-attribution.md): the same shared
+// hover role every other clickable surface uses, and it never overrides the
+// already-selected row's own role.
+test("ChangesView paints the shared hover role over an unselected file row, never the selected one", async () => {
+	const { view: component } = view({ theme: taggedTheme });
+	await settle();
+	component.render(80);
+	// Row y=1 is the selected file (lib/a.ts, index 0); row y=2 is lib/b.ts.
+	const hoverOther = component.handleMouse(mouseButton("move", "none", 3, 2, 12));
+	assert.deepEqual(hoverOther, { handled: true, render: true });
+	assert.match(component.render(80)[2]!, /<warning>[^<]*lib\/b\.ts/, "the hovered, unselected row paints the shared hover role");
+	assert.doesNotMatch(component.render(80)[1]!, /<warning>/, "the selected row keeps its own role instead");
+
+	const hoverSelected = component.handleMouse(mouseButton("move", "none", 3, 1, 12));
+	assert.deepEqual(hoverSelected, { handled: true, render: true });
+	assert.doesNotMatch(component.render(80)[1]!, /<warning>/, "hovering the selected row still never paints the hover role");
+	assert.doesNotMatch(component.render(80)[2]!, /<warning>/, "leaving lib/b.ts clears its hover paint");
+
+	const left = component.handleMouse(mouseButton("move", "none", 60, 1, 12)); // outside the list pane entirely
+	assert.deepEqual(left, { handled: true, render: true });
+	assert.doesNotMatch(component.render(80).join("\n"), /<warning>/, "moving off the list clears any hover");
+});
+
 test("ChangesView click selects a file without opening it", async () => {
 	const { view: component, events } = view();
 	await settle();