gsd-pi 2.81.0 → 2.82.0

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

@@ -1,13 +1,16 @@
+// Project/App: GSD-2
+// File Purpose: Left-edge user message rail renderer for interactive chat transcripts.
+
 import { Container, Markdown, type MarkdownTheme } from "@gsd/pi-tui";
 import { getMarkdownTheme } from "../theme/theme.js";
-import { type TimestampFormat } from "./timestamp.js";
-import { renderChatFrame } from "./chat-frame.js";
+import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
+import { chatMessageWidth, renderUserRail } from "./transcript-design.js";
 
 const OSC133_ZONE_START = "\x1b]133;A\x07";
 const OSC133_ZONE_END = "\x1b]133;B\x07";
 
 /**
- * Component that renders a user message with a right-aligned timestamp.
+ * Component that renders a user message against the left edge of the chat transcript.
  */
 export class UserMessageComponent extends Container {
 	private timestamp: number | undefined;
@@ -22,14 +25,16 @@ export class UserMessageComponent extends Container {
 
 	override render(width: number): string[] {
 		const frameWidth = Math.max(20, width);
-		const contentWidth = Math.max(1, frameWidth - 4);
+		const messageWidth = chatMessageWidth(frameWidth);
+		const contentWidth = Math.max(1, messageWidth - 2);
 		const lines = super.render(contentWidth);
-		const framed = renderChatFrame(lines, frameWidth, {
+		const meta =
+			this.timestamp !== undefined
+				? formatTimestamp(this.timestamp, this.timestampFormat)
+				: undefined;
+		const framed = renderUserRail(lines, frameWidth, {
 			label: "You",
-			tone: "user",
-			timestamp: this.timestamp,
-			timestampFormat: this.timestampFormat,
-			showTimestamp: true,
+			meta,
 		});
 		if (framed.length === 0) {
 			return framed;

package/packages/pi-coding-agent/src/modes/interactive/theme/theme-highlight.test.ts

@@ -0,0 +1,23 @@
+// Project/App: GSD-2
+// File Purpose: Tests for safe terminal syntax highlighting fallback.
+
+import test from "node:test";
+import assert from "node:assert/strict";
+import stripAnsi from "strip-ansi";
+
+import { highlightCode, initTheme } from "./theme.js";
+
+initTheme("dark", false);
+
+test("highlightCode applies lightweight syntax colors when native highlighting is disabled", () => {
+	const [line] = highlightCode("const answer = 42 // meaning", "typescript");
+
+	assert.ok(line.includes("\x1b["), "expected ANSI color output");
+	assert.equal(stripAnsi(line), "const answer = 42 // meaning");
+});
+
+test("highlightCode keeps plain text unstyled when no language is known", () => {
+	const [line] = highlightCode("const answer = 42");
+
+	assert.equal(line, "const answer = 42");
+});

package/packages/pi-coding-agent/src/modes/interactive/theme/theme.ts

@@ -878,13 +878,118 @@ function getHighlightColors(t: Theme): HighlightColors {
 	return cachedHighlightColors;
 }
 
+const LIGHTWEIGHT_KEYWORDS = new Set([
+	"as",
+	"async",
+	"await",
+	"break",
+	"case",
+	"catch",
+	"class",
+	"const",
+	"continue",
+	"default",
+	"def",
+	"else",
+	"enum",
+	"export",
+	"extends",
+	"false",
+	"fn",
+	"for",
+	"from",
+	"function",
+	"if",
+	"import",
+	"in",
+	"interface",
+	"let",
+	"match",
+	"new",
+	"null",
+	"return",
+	"struct",
+	"switch",
+	"throw",
+	"true",
+	"try",
+	"type",
+	"undefined",
+	"use",
+	"var",
+	"while",
+]);
+
+function lightweightHighlightLine(line: string): string {
+	let out = "";
+	let i = 0;
+	while (i < line.length) {
+		const ch = line[i];
+		const next = line[i + 1];
+		if (ch === "/" && next === "/") {
+			out += theme.fg("syntaxComment", line.slice(i));
+			break;
+		}
+		if (ch === "#") {
+			out += theme.fg("syntaxComment", line.slice(i));
+			break;
+		}
+		if (ch === '"' || ch === "'" || ch === "`") {
+			const quote = ch;
+			let j = i + 1;
+			while (j < line.length) {
+				if (line[j] === "\\") {
+					if (j + 1 >= line.length) {
+						j = line.length;
+						break;
+					}
+					j += 2;
+					continue;
+				}
+				if (line[j] === quote) {
+					j++;
+					break;
+				}
+				j++;
+			}
+			out += theme.fg("syntaxString", line.slice(i, j));
+			i = j;
+			continue;
+		}
+		if (/[A-Za-z_$]/.test(ch ?? "")) {
+			let j = i + 1;
+			while (j < line.length && /[A-Za-z0-9_$]/.test(line[j] ?? "")) j++;
+			const word = line.slice(i, j);
+			out += LIGHTWEIGHT_KEYWORDS.has(word)
+				? theme.fg("syntaxKeyword", word)
+				: word;
+			i = j;
+			continue;
+		}
+		if (/\d/.test(ch ?? "")) {
+			let j = i + 1;
+			while (j < line.length && /[\d._]/.test(line[j] ?? "")) j++;
+			out += theme.fg("syntaxNumber", line.slice(i, j));
+			i = j;
+			continue;
+		}
+		out += ch;
+		i++;
+	}
+	return out;
+}
+
+function lightweightHighlightCode(code: string): string[] {
+	return code.split("\n").map(lightweightHighlightLine);
+}
+
 /**
  * Highlight code with syntax coloring based on file extension or language.
  * Returns array of highlighted lines.
  */
 export function highlightCode(code: string, lang?: string): string[] {
 	if (!NATIVE_TUI_HIGHLIGHT_ENABLED) {
-		return code.split("\n");
+		return lang ? lightweightHighlightCode(code) : code.split("\n");
 	}
 
 	const validLang = lang && supportsLanguage(lang) ? lang : null;

package/packages/pi-coding-agent/src/modes/interactive/theme/themes.ts

@@ -1,4 +1,5 @@
-// GSD2 TUI - Built-in terminal theme definitions.
+// Project/App: GSD-2
+// File Purpose: Built-in terminal theme definitions for interactive TUI rendering.
 /**
  * Built-in theme definitions.
  *
@@ -19,24 +20,24 @@ import type { ThemeJson } from "./theme-schema.js";
 const dark: ThemeJson = {
 	name: "dark",
 	vars: {
-		cyan: "#5cc8c8",
-		blue: "#79b8ff",
-		green: "#7ad38b",
-		red: "#f27b7b",
-		yellow: "#d6b85f",
-		gray: "#87949b",
-		dimGray: "#657178",
-		darkGray: "#303a40",
-		line: "#52616a",
-		lineSoft: "#303a40",
-		textSoft: "#cbd6dc",
-		accent: "#5cc8c8",
-		selectedBg: "#1d282a",
-		userMsgBg: "#202a2f",
-		toolPendingBg: "#252721",
-		toolSuccessBg: "#1c251f",
-		toolErrorBg: "#251e20",
-		customMsgBg: "#202a2f",
+		cyan: "#7fd4e8",
+		blue: "#8db7ff",
+		green: "#a8c978",
+		red: "#d98484",
+		yellow: "#e6c06a",
+		gray: "#7d889f",
+		dimGray: "#4d5870",
+		darkGray: "#4e596d",
+		line: "#a7ba78",
+		lineSoft: "#4e596d",
+		textSoft: "#dce4f2",
+		accent: "#8db7ff",
+		selectedBg: "#1d2430",
+		userMsgBg: "#232c3a",
+		toolPendingBg: "#171c26",
+		toolSuccessBg: "#171c26",
+		toolErrorBg: "#241b22",
+		customMsgBg: "#171c26",
 	},
 	colors: {
 		accent: "accent",
@@ -61,11 +62,11 @@ const dark: ThemeJson = {
 		toolPendingBg: "toolPendingBg",
 		toolSuccessBg: "toolSuccessBg",
 		toolErrorBg: "toolErrorBg",
-		toolTitle: "gray",
+		toolTitle: "accent",
 		toolOutput: "textSoft",
 		surfaceTitle: "accent",
 		surfaceAccent: "accent",
-		toolRunning: "yellow",
+		toolRunning: "accent",
 		toolSuccess: "green",
 		toolError: "red",
 
@@ -74,7 +75,7 @@ const dark: ThemeJson = {
 		mdLinkUrl: "dimGray",
 		mdCode: "accent",
 		mdCodeBlock: "green",
-		mdCodeBlockBorder: "gray",
+		mdCodeBlockBorder: "lineSoft",
 		mdQuote: "gray",
 		mdQuoteBorder: "gray",
 		mdHr: "gray",
@@ -101,12 +102,12 @@ const dark: ThemeJson = {
 		thinkingHigh: "#c084fc",
 		thinkingXhigh: "#f472b6",
 
-		bashMode: "green",
+		bashMode: "line",
 	},
 	export: {
-		pageBg: "#111416",
-		cardBg: "#1e2529",
-		infoBg: "#252721",
+		pageBg: "#10141d",
+		cardBg: "#171c26",
+		infoBg: "#1d2430",
 	},
 };
 

package/packages/pi-coding-agent/src/modes/interactive/tui-mode.test.ts

@@ -1,4 +1,5 @@
-// GSD2 - Tests for adaptive TUI mode selection
+// Project/App: GSD-2
+// File Purpose: Tests for adaptive TUI mode selection and command-center layout rendering.
 
 import assert from "node:assert/strict";
 import { describe, test } from "node:test";
@@ -45,7 +46,7 @@ describe("resolveTuiMode", () => {
 });
 
 describe("AdaptiveLayoutComponent", () => {
-	test("renders workflow layout with prototype rule frames", () => {
+	test("renders workflow layout as rounded command center without stale labels", () => {
 		const layout = new AdaptiveLayoutComponent(() => ({
 			override: "workflow",
 			activeToolCount: 2,
@@ -56,10 +57,12 @@ describe("AdaptiveLayoutComponent", () => {
 
 		const plain = layout.render(120).map(stripAnsi);
 
-		assert.match(plain[0], /^─+/, "workflow layout should start with a rule frame");
+		assert.match(plain[0], /^╭─+╮$/, "workflow layout should start with a rounded frame");
 		assert.ok(plain.some((line) => line.includes("GSD Command Center")), "workflow title should render");
-		assert.ok(plain.some((line) => line.includes("signals")), "inspector title should render");
-		assert.ok(plain.some((line) => line.includes("│ Active")), "body rows should keep prototype gutter");
-		assert.ok(!plain.some((line) => /[╭╮╰╯]/.test(line)), "workflow layout should not use rounded box corners");
+		assert.ok(plain.some((line) => line.includes("Status")), "status row should render");
+		assert.ok(plain.some((line) => line.includes("Tools")), "tools row should render");
+		assert.ok(!plain.some((line) => line.includes("signals")), "old signals title should not render");
+		assert.ok(!plain.some((line) => line.includes("inspector")), "old inspector title should not render");
+		assert.ok(!plain.some((line) => /\bAUTO\b/.test(line)), "command center should not imply GSD auto-mode");
 	});
 });