gsd-pi 2.80.0 → 2.81.0-dev.72a81bdf3

package/packages/pi-coding-agent/src/core/tools/tool-target.ts

@@ -0,0 +1,48 @@
+// GSD-2 - Shared target metadata for tool output rendering.
+
+export type ToolTargetKind = "file" | "directory" | "search" | "command";
+
+export type ToolTargetAction = "read" | "write" | "edit" | "list" | "find" | "grep" | "bash";
+
+export interface ToolTargetRange {
+	start: number;
+	end?: number;
+}
+
+export interface ToolTargetMetadata {
+	kind: ToolTargetKind;
+	action: ToolTargetAction;
+	inputPath?: string;
+	resolvedPath?: string;
+	pattern?: string;
+	glob?: string;
+	line?: number;
+	range?: ToolTargetRange;
+}
+
+export function createToolTarget(target: ToolTargetMetadata): ToolTargetMetadata {
+	return target;
+}
+
+export function createReadFileTarget(
+	inputPath: string,
+	resolvedPath: string,
+	offset?: number,
+	limit?: number,
+): ToolTargetMetadata {
+	const effectiveOffset = Math.max(1, offset ?? 1);
+
+	return createToolTarget({
+		kind: "file",
+		action: "read",
+		inputPath,
+		resolvedPath,
+		range:
+			offset !== undefined || limit !== undefined
+				? {
+						start: effectiveOffset,
+						end: limit !== undefined ? effectiveOffset + Math.max(0, limit - 1) : undefined,
+					}
+				: undefined,
+	});
+}

package/packages/pi-coding-agent/src/core/tools/write.ts

@@ -4,6 +4,7 @@ import { mkdir as fsMkdir, writeFile as fsWriteFile } from "fs/promises";
 import { dirname } from "path";
 import { notifyFileChanged } from "../lsp/client.js";
 import { resolveToCwd } from "./path-utils.js";
+import { createToolTarget, type ToolTargetMetadata } from "./tool-target.js";
 
 const writeSchema = Type.Object({
 	path: Type.String({ description: "Path to the file to write (relative or absolute)" }),
@@ -12,6 +13,10 @@ const writeSchema = Type.Object({
 
 export type WriteToolInput = Static<typeof writeSchema>;
 
+export interface WriteToolDetails {
+	target?: ToolTargetMetadata;
+}
+
 /**
  * Pluggable operations for the write tool.
  * Override these to delegate file writing to remote systems (e.g., SSH).
@@ -50,7 +55,7 @@ export function createWriteTool(cwd: string, options?: WriteToolOptions): AgentT
 			const absolutePath = resolveToCwd(path, cwd);
 			const dir = dirname(absolutePath);
 
-			return new Promise<{ content: Array<{ type: "text"; text: string }>; details: undefined }>(
+			return new Promise<{ content: Array<{ type: "text"; text: string }>; details: WriteToolDetails | undefined }>(
 				(resolve, reject) => {
 					// Check if already aborted
 					if (signal?.aborted) {
@@ -98,7 +103,14 @@ export function createWriteTool(cwd: string, options?: WriteToolOptions): AgentT
 
 							resolve({
 								content: [{ type: "text", text: `Successfully wrote ${content.length} bytes to ${path}` }],
-								details: undefined,
+								details: {
+									target: createToolTarget({
+										kind: "file",
+										action: "write",
+										inputPath: path,
+										resolvedPath: absolutePath,
+									}),
+								},
 							});
 						} catch (error: any) {
 							// Clean up abort handler

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/assistant-message-design.test.ts

@@ -0,0 +1,56 @@
+// Project/App: GSD-2
+// File Purpose: Visual contract tests for the recommended indented assistant message rail design.
+
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+import stripAnsi from "strip-ansi";
+import type { AssistantMessage } from "@gsd/pi-ai";
+
+import { initTheme } from "../../theme/theme.js";
+import { AssistantMessageComponent } from "../assistant-message.js";
+import { formatTimestamp } from "../timestamp.js";
+
+initTheme("dark", false);
+
+describe("AssistantMessageComponent recommended rail design", () => {
+	test("renders assistant content with a lightly indented left rail", () => {
+		const message = {
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			timestamp: 1,
+			content: [{ type: "text", text: "I will update the renderer and run verification." }],
+		} as unknown as AssistantMessage;
+
+		const component = new AssistantMessageComponent(message, true);
+		const raw = component.render(80);
+		const plain = raw.map((line) => stripAnsi(line));
+		const joined = plain.join("\n");
+
+		assert.ok(plain.some((line) => line.startsWith("  ┃ ")), `expected indented rail-prefixed lines:\n${joined}`);
+		assert.ok(raw.some((line) => line.includes("\x1b[48;")), `expected faint assistant block background:\n${raw.join("\n")}`);
+		assert.match(joined, /^\s*┃\s*$/m, "assistant block should include vertical padding rows");
+		assert.match(joined, /GSD/);
+		assert.match(joined, /gpt-test/);
+		assert.match(joined, /update the renderer/);
+		assert.doesNotMatch(joined, /^┃/m, "assistant rail should be slightly indented from the left edge");
+		assert.doesNotMatch(joined, /^╭/m, "assistant messages should not use rounded card borders");
+	});
+
+	test("renders metadata for a zero timestamp", () => {
+		const message = {
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			timestamp: 0,
+			content: [{ type: "text", text: "Finished." }],
+		} as unknown as AssistantMessage;
+
+		const component = new AssistantMessageComponent(message, true);
+		const joined = component.render(80).map((line) => stripAnsi(line)).join("\n");
+
+		assert.match(joined, new RegExp(formatTimestamp(0)));
+	});
+});

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/chat-frame-compaction-tone.test.ts

@@ -1,3 +1,4 @@
+// GSD2 TUI Tests - Chat frame card visual contract coverage.
 import { test, describe } from "node:test";
 import assert from "node:assert/strict";
 import stripAnsi from "strip-ansi";
@@ -8,12 +9,12 @@ initTheme("dark", false);
 
 // Regression tests for the "compaction" tone added to renderChatFrame.
 // The compaction notice shares the same visual frame as user / assistant
-// messages (top rule, `• label` header, `│ ` body prefix) but uses the
+// messages (top rule, label header, `│ ` body prefix) but uses the
 // purple `customMessageLabel` color key so it is visually distinct from
 // conversation turns.
 
 describe("renderChatFrame — compaction tone", () => {
-	test("produces a top rule, `• compaction` header row, and a │ body margin", () => {
+	test("produces a top rule, compaction header row, and a │ body margin", () => {
 		const lines = renderChatFrame(
 			["Compacted from 1,224,262 tokens (ctrl+o to expand)"],
 			60,
@@ -33,11 +34,12 @@ describe("renderChatFrame — compaction tone", () => {
 		// Top rule is a solid horizontal bar
 		assert.match(plain[0], /^─+$/, "first line should be the solid top rule");
 
-		// Header row contains `• compaction`
+		// Header row contains `compaction`
 		assert.ok(
-			plain[1].includes("• compaction"),
-			`expected header to contain "• compaction", got ${JSON.stringify(plain[1])}`,
+			plain[1].includes("compaction"),
+			`expected header to contain "compaction", got ${JSON.stringify(plain[1])}`,
 		);
+		assert.ok(!plain[1].includes("•"), `header should not render a bullet prefix, got ${JSON.stringify(plain[1])}`);
 
 		// Body line(s) start with `│ `
 		assert.ok(

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/tool-execution.test.ts

@@ -1,7 +1,9 @@
+// Project/App: GSD-2
+// File Purpose: Tests for interactive terminal tool execution rendering.
 import { describe, test } from "node:test";
 import assert from "node:assert/strict";
 import stripAnsi from "strip-ansi";
-import { ToolExecutionComponent } from "../tool-execution.js";
+import { ToolExecutionComponent, ToolPhaseSummaryComponent, type ToolExecutionPhase } from "../tool-execution.js";
 import { initTheme } from "../../theme/theme.js";
 
 initTheme("dark", false);
@@ -14,7 +16,7 @@ function renderTool(
 		isError: boolean;
 		details?: Record<string, unknown>;
 	},
-	toolDefinition?: { label?: string },
+	toolDefinition?: { label?: string; renderCall?: (...args: any[]) => any; renderResult?: (...args: any[]) => any },
 ): string {
 	const component = new ToolExecutionComponent(
 		toolName,
@@ -36,7 +38,7 @@ function renderToolCollapsed(
 		isError: boolean;
 		details?: Record<string, unknown>;
 	},
-	toolDefinition?: { label?: string },
+	toolDefinition?: { label?: string; renderCall?: (...args: any[]) => any; renderResult?: (...args: any[]) => any },
 ): string {
 	const component = new ToolExecutionComponent(
 		toolName,
@@ -50,25 +52,324 @@ function renderToolCollapsed(
 }
 
 describe("ToolExecutionComponent", () => {
-	test("renders framed header with Running status while tool is partial", () => {
+	test("renders framed header with running status while tool is partial", () => {
 		const rendered = renderToolCollapsed("mcp__demo__do_thing", { ok: true });
 
-		assert.match(rendered, /Tool demo\u00b7do_thing/);
-		assert.match(rendered, /Running/);
+		assert.match(rendered, /demo\u00b7do_thing/);
+		assert.doesNotMatch(rendered, /Tool demo\u00b7do_thing/);
+		assert.match(rendered, /running/);
+		assert.match(rendered, /running · \d+(ms|s)/);
 	});
 
-	test("renders framed header with Error status for failed tool result", () => {
+	test("does not duplicate running generic tool labels before args", () => {
+		const rendered = renderToolCollapsed(
+			"Agent",
+			{
+				description: "Scout habit tracker codebase",
+				subagent_type: "Explore",
+				prompt: "Read these files and give me a concise summary of each.",
+			},
+		);
+
+		const labelMatches = rendered.match(/Agent/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected only the card title to contain Agent:\n${rendered}`);
+		assert.doesNotMatch(rendered, /description="Scout habit tracker codebase"/);
+		assert.doesNotMatch(rendered, /subagent_type="Explore"/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+	});
+
+	test("renders framed header with failed status for failed tool result", () => {
 		const rendered = renderTool(
 			"mcp__demo__do_thing",
 			{ ok: true },
 			{ content: [{ type: "text", text: "boom" }], isError: true },
 		);
 
-		assert.match(rendered, /Tool demo\u00b7do_thing/);
-		assert.match(rendered, /Error/);
+		assert.match(rendered, /demo\u00b7do_thing/);
+		assert.doesNotMatch(rendered, /Tool demo\u00b7do_thing/);
+		assert.match(rendered, /failed/);
+		assert.match(rendered, /failed · \d+(ms|s)/);
 		assert.match(rendered, /boom/);
 	});
 
+	test("collapses successful low-signal tool cards by default", () => {
+		const rendered = renderToolCollapsed(
+			"mcp__demo__noop",
+			{ ok: true },
+			{ content: [], isError: false },
+		);
+
+		assert.match(rendered, /success · \d+(ms|s)/);
+		assert.match(rendered, /demo\u00b7noop/);
+		assert.doesNotMatch(rendered, /Completed/);
+		assert.doesNotMatch(rendered, /ok=true/);
+	});
+
+	test("does not duplicate generic tool labels in collapsed cards", () => {
+		const rendered = renderToolCollapsed(
+			"TodoWrite",
+			{ todos: [{ content: "Ship it", status: "pending" }] },
+			{ content: [{ type: "text", text: "TodoWrite" }], isError: false },
+		);
+
+		const labelMatches = rendered.match(/TodoWrite/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected only the card title to contain TodoWrite:\n${rendered}`);
+		assert.match(rendered, /output hidden/);
+		assert.match(rendered, /ctrl\+o expand/);
+	});
+
+	test("exposes phase metadata for successful low-signal tool rows", () => {
+		const component = new ToolExecutionComponent(
+			"gsd_requirement_update",
+			{ id: "R001" },
+			{},
+			{ label: "Update Requirement" } as any,
+			{ requestRender() {} } as any,
+		);
+		component.updateResult({ content: [], isError: false });
+
+		assert.deepEqual(component.getRollupPhase()?.label, "Requirement writes");
+	});
+
+	test("exposes phase metadata for collapsed output-bearing generic tools", () => {
+		const component = new ToolExecutionComponent(
+			"mcp__demo__do_thing",
+			{ ok: true },
+			{},
+			undefined,
+			{ requestRender() {} } as any,
+		);
+		component.updateResult({ content: [{ type: "text", text: "important output" }], isError: false });
+
+		assert.deepEqual(component.getRollupPhase()?.label, "Other tool actions");
+	});
+
+	test("renders compact read rows with target metadata", () => {
+		const rendered = renderToolCollapsed(
+			"read",
+			{ path: "src/Inspector.tsx" },
+			{
+				content: [{ type: "text", text: "source" }],
+				isError: false,
+				details: {
+					target: {
+						kind: "file",
+						action: "read",
+						inputPath: "src/Inspector.tsx",
+						resolvedPath: "/tmp/project/src/Inspector.tsx",
+						range: { start: 4, end: 12 },
+					},
+				},
+			},
+		);
+
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /src\/Inspector\.tsx:4-12/);
+		assert.doesNotMatch(rendered, /source/);
+		assert.doesNotMatch(rendered, /output hidden\n\s*│\s*ctrl\+o expand/);
+	});
+
+	test("renders compact capitalized read rows from file_path args", () => {
+		const rendered = renderToolCollapsed(
+			"Read",
+			{ file_path: "~/Github/gsd-2/src/resources/extensions/gsd/health-widget-core.ts" },
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /health-widget-core\.ts/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+	});
+
+	test("renders compact read rows from direct result details path", () => {
+		const rendered = renderToolCollapsed(
+			"read",
+			{},
+			{
+				content: [{ type: "text", text: "hidden body output" }],
+				isError: false,
+				details: {
+					path: "/tmp/project/src/resources/extensions/gsd/health-widget-core.ts",
+					range: { start: 1, end: 12 },
+				},
+			},
+		);
+
+		assert.match(rendered, /Read/);
+		assert.match(rendered, /health-widget-core\.ts:1-12/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+	});
+
+	test("renders compact edit rows with target metadata", () => {
+		const rendered = renderToolCollapsed(
+			"edit",
+			{ path: "src/Inspector.tsx" },
+			{
+				content: [{ type: "text", text: "Updated src/Inspector.tsx" }],
+				isError: false,
+				details: {
+					target: {
+						kind: "file",
+						action: "edit",
+						inputPath: "src/Inspector.tsx",
+						resolvedPath: "/tmp/project/src/Inspector.tsx",
+						line: 42,
+					},
+				},
+			},
+		);
+
+		assert.match(rendered, /Edit/);
+		assert.match(rendered, /src\/Inspector\.tsx:42/);
+		assert.doesNotMatch(rendered, /Updated src\/Inspector\.tsx/);
+	});
+
+	test("renders running edit rows with title and target on the top line", () => {
+		const rendered = renderToolCollapsed("edit", { path: "src/Inspector.tsx" });
+
+		const labelMatches = rendered.match(/Edit/g) ?? [];
+		assert.equal(labelMatches.length, 1, `expected tool name only in the card title:\n${rendered}`);
+		assert.match(rendered, /src\/Inspector\.tsx/);
+		assert.match(rendered, /Edit src\/Inspector\.tsx/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+	});
+
+	test("renders compact write rows with target metadata", () => {
+		const rendered = renderToolCollapsed(
+			"write",
+			{ path: "src/output.ts", content: "ok" },
+			{
+				content: [{ type: "text", text: "Successfully wrote 2 bytes to src/output.ts" }],
+				isError: false,
+				details: {
+					target: {
+						kind: "file",
+						action: "write",
+						inputPath: "src/output.ts",
+						resolvedPath: "/tmp/project/src/output.ts",
+					},
+				},
+			},
+		);
+
+		assert.match(rendered, /Write/);
+		assert.match(rendered, /src\/output\.ts/);
+		assert.doesNotMatch(rendered, /Successfully wrote/);
+	});
+
+	test("omits default cwd placeholders for collapsed search tools", () => {
+		const rendered = renderToolCollapsed(
+			"Grep",
+			{},
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Grep/);
+		assert.doesNotMatch(rendered, /^│\.\s+│/m, `expected no placeholder cwd body:\n${rendered}`);
+		assert.match(rendered, /output hidden/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+		assert.doesNotMatch(rendered, /^│\s+output hidden/m, `expected compact footer text on the top row:\n${rendered}`);
+	});
+
+	test("keeps meaningful collapsed search targets", () => {
+		const rendered = renderToolCollapsed(
+			"Grep",
+			{ pattern: "Project Initialized", path: "src/resources/extensions/gsd", glob: "*.ts" },
+			{ content: [{ type: "text", text: "hidden body output" }], isError: false },
+		);
+
+		assert.match(rendered, /Project Initialized in src\/resources\/extensions\/gsd \(\*\.ts\)/);
+		assert.doesNotMatch(rendered, /hidden body output/);
+	});
+
+	test("renders compact bash rows with command preview", () => {
+		const rendered = renderToolCollapsed(
+			"bash",
+			{ command: "npm run typecheck -- --watch false" },
+			{ content: [{ type: "text", text: "ok" }], isError: false, details: { cwd: "/tmp/project" } },
+		);
+
+		assert.match(rendered, /\$ npm run typecheck -- --watch false/);
+		assert.doesNotMatch(rendered, /├/, "collapsed command cards should not include internal divider lines");
+		assert.doesNotMatch(rendered, /\bok\b/);
+	});
+
+	test("keeps failed tools expanded and error visible", () => {
+		const rendered = renderToolCollapsed(
+			"edit",
+			{ path: "src/Inspector.tsx" },
+			{
+				content: [{ type: "text", text: "Could not find target text" }],
+				isError: true,
+				details: {
+					target: {
+						kind: "file",
+						action: "edit",
+						inputPath: "src/Inspector.tsx",
+						resolvedPath: "/tmp/project/src/Inspector.tsx",
+					},
+				},
+			},
+		);
+
+		assert.match(rendered, /Could not find target text/);
+		assert.match(rendered, /edit/);
+	});
+
+	test("renders phase-based summaries for rolled-up tool executions", () => {
+		const phases: ToolExecutionPhase[] = [
+			{ label: "Setup / shell", count: 6, durationMs: 12 },
+			{
+				label: "Context reads",
+				count: 4,
+				durationMs: 6,
+				actionLabel: "read",
+				targets: ["/tmp/project/src/a.ts", "/tmp/project/src/b.ts"],
+			},
+			{
+				label: "File changes",
+				count: 3,
+				durationMs: 5,
+				actionLabel: "edit",
+				targets: ["/tmp/project/src/Inspector.tsx:42", "/tmp/project/src/CompareView.tsx:8"],
+			},
+			{ label: "Requirement writes", count: 4, durationMs: 4 },
+			{ label: "Memory lookups", count: 4, durationMs: 4 },
+			{ label: "Finalization", count: 1, durationMs: 1 },
+		];
+		const rendered = stripAnsi(new ToolPhaseSummaryComponent(phases).render(120).join("\n"));
+
+		assert.match(rendered, /Setup \/ shell 6 actions\s+success · 12ms/);
+		assert.match(rendered, /Context reads · 2 files\s+success · 6ms/);
+		assert.match(rendered, /src\/a\.ts/);
+		assert.match(rendered, /File changes · 2 files, 3 edits\s+success · 5ms/);
+		assert.match(rendered, /src\/Inspector\.tsx:42/);
+		assert.match(rendered, /Requirement writes 4 actions\s+success · 4ms/);
+		assert.match(rendered, /Memory lookups 4 actions\s+success · 4ms/);
+		assert.match(rendered, /Finalization 1 action\s+success · 1ms/);
+	});
+
+	test("passes failed result status to custom result renderers", () => {
+		const rendered = renderTool(
+			"gsd_requirement_save",
+			{ id: "R001" },
+			{ content: [{ type: "text", text: "saved" }], isError: true },
+			{
+				label: "Save Requirement",
+				renderResult(result: { isError?: boolean }) {
+					return {
+						render: () => [result.isError ? "custom saw error" : "custom saw success"],
+						invalidate() {},
+					};
+				},
+			},
+		);
+
+		assert.match(rendered, /failed/);
+		assert.match(rendered, /custom saw error/);
+		assert.doesNotMatch(rendered, /custom saw success/);
+	});
+
 	test("renders capitalized Claude Code Bash tool names with bash output instead of generic args JSON", () => {
 		const rendered = renderTool(
 			"Bash",
@@ -127,18 +428,20 @@ describe("ToolExecutionComponent", () => {
 			{ label: "Complete Slice" },
 		);
 
-		assert.match(rendered, /Tool Complete Slice/);
+		assert.match(rendered, /Complete Slice/);
+		assert.doesNotMatch(rendered, /Tool Complete Slice/);
 		assert.doesNotMatch(rendered, /gsd_slice_complete/);
 	});
 
 	test("frame header strips gsd_ prefix and title-cases when no label is registered", () => {
 		const rendered = renderToolCollapsed("gsd_requirement_update", { id: "R005" });
 
-		assert.match(rendered, /Tool Requirement Update/);
+		assert.match(rendered, /Requirement Update/);
+		assert.doesNotMatch(rendered, /Tool Requirement Update/);
 		assert.doesNotMatch(rendered, /gsd_requirement_update/);
 	});
 
-	test("formatCompactArgs truncates long string values inline instead of dumping JSON", () => {
+	test("collapsed generic running tools hide primitive args", () => {
 		const longPath = "/Users/alice/.gsd/projects/4dce7b775013/worktrees/slice-S03-some-long-path-that-exceeds-limit";
 		const rendered = renderToolCollapsed("gsd_slice_complete", {
 			sliceId: "S03",
@@ -146,9 +449,11 @@ describe("ToolExecutionComponent", () => {
 			worktree: longPath,
 		});
 
-		assert.match(rendered, /sliceId="S03"/);
-		assert.match(rendered, /milestoneId="M001"/);
-		assert.match(rendered, /worktree=".*…"/);
+		assert.match(rendered, /Slice Complete/);
+		assert.match(rendered, /running · \d+(ms|s)/);
+		assert.doesNotMatch(rendered, /sliceId="S03"/);
+		assert.doesNotMatch(rendered, /milestoneId="M001"/);
+		assert.doesNotMatch(rendered, /worktree=/);
 		assert.doesNotMatch(rendered, /"sliceId":\s*"S03"/);
 	});
 
@@ -163,7 +468,7 @@ describe("ToolExecutionComponent", () => {
 		assert.doesNotMatch(rendered, /…/);
 	});
 
-	test("generic fallback truncates long output when collapsed", () => {
+	test("generic fallback collapses successful output rows until expanded", () => {
 		const longOutput = Array.from({ length: 25 }, (_, i) => `line ${i + 1}`).join("\n");
 		const rendered = renderToolCollapsed(
 			"mcp__demo__do_thing",
@@ -171,10 +476,10 @@ describe("ToolExecutionComponent", () => {
 			{ content: [{ type: "text", text: longOutput }], isError: false },
 		);
 
-		assert.match(rendered, /line 1\b/);
-		assert.match(rendered, /line 10\b/);
-		assert.doesNotMatch(rendered, /line 20\b/);
-		assert.match(rendered, /\(15 more lines/);
+		assert.match(rendered, /demo\u00b7do_thing/);
+		assert.match(rendered, /success · \d+(ms|s)/);
+		assert.doesNotMatch(rendered, /line 1\b/);
+		assert.doesNotMatch(rendered, /\(15 more lines/);
 	});
 
 	test("generic fallback falls back to truncated JSON for complex args", () => {

package/packages/pi-coding-agent/src/modes/interactive/components/__tests__/user-message-design.test.ts

@@ -0,0 +1,48 @@
+// Project/App: GSD-2
+// File Purpose: Visual contract tests for left-edge user chat rails.
+
+import { describe, test } from "node:test";
+import assert from "node:assert/strict";
+import { stripVTControlCharacters } from "node:util";
+import type { AssistantMessage } from "@gsd/pi-ai";
+
+import { initTheme } from "../../theme/theme.js";
+import { AssistantMessageComponent } from "../assistant-message.js";
+import { UserMessageComponent } from "../user-message.js";
+
+initTheme("dark", false);
+
+describe("UserMessageComponent chat rail design", () => {
+	test("renders user messages against the left edge", () => {
+		const component = new UserMessageComponent("Can we make the transcript feel like chat?", undefined, 1, "date-time-iso");
+		const raw = component.render(100);
+		const plain = raw.map((line) => stripVTControlCharacters(line));
+		const joined = plain.join("\n");
+
+		assert.ok(plain.some((line) => /^┃ You/.test(line)), `expected left-edge user rail header:\n${joined}`);
+		assert.ok(plain.some((line) => /^┃ Can we make the transcript feel like chat\?/.test(line)), `expected left-edge user rail body:\n${joined}`);
+		assert.ok(raw.some((line) => line.includes("\x1b[48;")), `expected faint user block background:\n${raw.join("\n")}`);
+		assert.match(joined, /^┃\s*$/m, "user block should include vertical padding rows");
+		assert.match(joined, /feel like chat/);
+		assert.doesNotMatch(joined, /[╭╮╰╯]/, "user rail should not use boxed bubble corners");
+		assert.doesNotMatch(joined, /^  ┃ You/m, "user rail should not be indented like GSD messages");
+	});
+
+	test("uses a different faint background than GSD messages", () => {
+		const user = new UserMessageComponent("Use a distinct user color.");
+		const assistant = new AssistantMessageComponent({
+			id: "m1",
+			role: "assistant",
+			provider: "test",
+			model: "gpt-test",
+			content: [{ type: "text", text: "GSD message." }],
+		} as unknown as AssistantMessage);
+
+		const userBg = user.render(100).join("\n").match(/\x1b\[48;[^m]+m/)?.[0];
+		const assistantBg = assistant.render(100).join("\n").match(/\x1b\[48;[^m]+m/)?.[0];
+
+		assert.ok(userBg, "expected user message background color");
+		assert.ok(assistantBg, "expected assistant message background color");
+		assert.notEqual(userBg, assistantBg, "user and GSD message backgrounds should be distinct");
+	});
+});