@opengsd/gsd-pi 1.0.2-dev.867e002 → 1.0.2-dev.cce3612

package/src/resources/extensions/shared/next-action-ui.ts

@@ -44,6 +44,7 @@
 import type { ExtensionCommandContext } from "@gsd/pi-coding-agent";
 import { type Theme } from "@gsd/pi-coding-agent";
 import { Key, matchesKey, type TUI } from "@gsd/pi-tui";
+import { renderSharedDialogFrame } from "./dialog-frame.js";
 import { makeUI } from "./ui.js";
 
 // ─── Public API ───────────────────────────────────────────────────────────────
@@ -142,14 +143,14 @@ export async function showNextAction(
 
 		function render(width: number): string[] {
 			if (cachedLines) return cachedLines;
-			const ui = makeUI(theme, width);
+			const contentWidth = Math.max(1, width - 4);
+			const ui = makeUI(theme, contentWidth);
 			const lines: string[] = [];
 			const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
 			// ── Header — uses success colour to signal completion ────────────
 			// Note: next-action intentionally uses "success" for its bar/title
 			// to distinguish it from regular accent-coloured screens.
-			push(ui.bar());
 			push(ui.blank());
 			push(ui.header(`  ✓  ${opts.title}`));
 
@@ -192,11 +193,10 @@ export async function showNextAction(
 
 			// ── Footer ────────────────────────────────────────────────────────
 			const numHint = allActions.map((_, i) => `${i + 1}`).join("/");
-			push(ui.hints([`↑/↓ to choose`, `${numHint} to quick-select`, `enter to confirm`]));
-			push(ui.bar());
+			const footer = ui.hints([`↑/↓ to choose`, `${numHint} to quick-select`, `enter to confirm`])[0] ?? "";
 
-			cachedLines = lines;
-			return lines;
+			cachedLines = renderSharedDialogFrame(theme, "GSD Next Action", lines, width, { footer });
+			return cachedLines;
 		}
 
 		return { render, invalidate: () => { cachedLines = undefined; }, handleInput };

package/src/resources/extensions/shared/tests/confirm-ui.test.ts

@@ -0,0 +1,57 @@
+import { describe, it } from "node:test";
+import assert from "node:assert/strict";
+import { stripVTControlCharacters } from "node:util";
+
+import { visibleWidth } from "@gsd/pi-tui";
+
+import { showConfirm } from "../confirm-ui.js";
+
+function assertFullOuterBorder(lines: string[], width: number): void {
+  assert.ok(lines.length >= 2, "dialog must include top and bottom borders");
+  for (const [index, line] of lines.entries()) {
+    assert.equal(visibleWidth(line), width, `line ${index} must fill dialog width`);
+  }
+  const top = stripVTControlCharacters(lines[0] ?? "");
+  const bottom = stripVTControlCharacters(lines.at(-1) ?? "");
+  assert.match(top, /^[╭┌].*[╮┐]$/);
+  assert.match(bottom, /^[╰└].*[╯┘]$/);
+  for (let index = 1; index < lines.length - 1; index++) {
+    const line = stripVTControlCharacters(lines[index] ?? "");
+    assert.match(line, /^[│┃├]/, `line ${index} missing left border: ${line}`);
+    assert.match(line, /[│┃┤]$/, `line ${index} missing right border: ${line}`);
+  }
+}
+
+describe("showConfirm", () => {
+  it("renders the confirmation prompt inside a full border", async () => {
+    let rendered: string[] = [];
+    const theme = {
+      fg: (_color: string, text: string) => text,
+      bold: (text: string) => text,
+    };
+
+    const ctx = {
+      hasUI: true,
+      ui: {
+        custom: async (factory: any) => {
+          let resolved: boolean | undefined;
+          const component = factory({ requestRender() {} }, theme, null, (value: boolean) => {
+            resolved = value;
+          });
+          rendered = component.render(80);
+          component.handleInput("\r");
+          return resolved as never;
+        },
+      },
+    };
+
+    const result = await showConfirm(ctx as any, {
+      title: "Confirm action",
+      message: "Proceed with the change?",
+    });
+
+    assert.equal(result, true);
+    assertFullOuterBorder(rendered, 80);
+    assert.match(stripVTControlCharacters(rendered[0] ?? ""), /Confirm action/);
+  });
+});

package/src/resources/extensions/shared/tests/interview-ui-border.test.ts

@@ -0,0 +1,163 @@
+// gsd-pi — Shared interview UI dialog border contract
+
+import assert from "node:assert/strict";
+import { before, describe, it } from "node:test";
+
+import { visibleWidth } from "@gsd/pi-tui";
+import { initTheme } from "@gsd/pi-coding-agent";
+import {
+	showInterviewRound,
+	showWrapUpScreen,
+	type Question,
+	type RoundResult,
+	type WrapUpResult,
+} from "../interview-ui.js";
+
+const ANSI_PATTERN = /\x1b\[[0-9;?]*[ -/]*[@-~]/g;
+const ENTER = "\r";
+const ESC = "\x1b";
+
+before(() => { initTheme(); });
+
+type RenderWidget = {
+	render(width: number): string[];
+	handleInput(input: string): void;
+};
+
+function stripAnsi(text: string): string {
+	return text.replace(ANSI_PATTERN, "");
+}
+
+function assertFullOuterBorder(lines: string[], width: number): void {
+	assert.ok(lines.length >= 2, "dialog must include top and bottom borders");
+
+	for (const [index, line] of lines.entries()) {
+		assert.equal(visibleWidth(line), width, `line ${index} must fill dialog width`);
+	}
+
+	const top = stripAnsi(lines[0] ?? "");
+	const bottom = stripAnsi(lines.at(-1) ?? "");
+	assert.match(top, /^╭.*╮$/, `top border missing full corners: ${top}`);
+	assert.match(bottom, /^╰.*╯$/, `bottom border missing full corners: ${bottom}`);
+
+	for (let index = 1; index < lines.length - 1; index++) {
+		const line = stripAnsi(lines[index] ?? "");
+		assert.match(line, /^[│├]/, `line ${index} missing left border: ${line}`);
+		assert.match(line, /[│┤]$/, `line ${index} missing right border: ${line}`);
+	}
+}
+
+function mockTheme() {
+	return {
+		fg: (_color: string, text: string) => text,
+		bold: (text: string) => text,
+		dim: (text: string) => text,
+		italic: (text: string) => text,
+		strikethrough: (text: string) => text,
+		accent: (text: string) => text,
+		success: (text: string) => text,
+		warning: (text: string) => text,
+		error: (text: string) => text,
+		info: (text: string) => text,
+		muted: (text: string) => text,
+		dimmed: (text: string) => text,
+	};
+}
+
+async function captureInterviewWidget(
+	questions: Question[],
+): Promise<RenderWidget> {
+	let widget: RenderWidget | undefined;
+
+	await showInterviewRound(questions, {}, {
+		ui: {
+			custom: (factory: any) => {
+				widget = factory(
+					{ requestRender: () => {} },
+					mockTheme(),
+					{},
+					(_result: RoundResult) => {},
+				);
+				return Promise.resolve({ endInterview: false, answers: {} });
+			},
+		},
+	} as any);
+
+	assert.ok(widget, "interview widget should be created");
+	return widget;
+}
+
+async function captureWrapUpWidget(): Promise<RenderWidget> {
+	let widget: RenderWidget | undefined;
+
+	await showWrapUpScreen({
+		headline: "Ready to wrap up?",
+		progress: "4 questions answered",
+		keepGoingLabel: "Keep going",
+		satisfiedLabel: "I'm satisfied",
+	}, {
+		ui: {
+			custom: (factory: any) => {
+				widget = factory(
+					{ requestRender: () => {} },
+					mockTheme(),
+					{},
+					(_result: WrapUpResult) => {},
+				);
+				return Promise.resolve({ satisfied: false });
+			},
+		},
+	} as any);
+
+	assert.ok(widget, "wrap-up widget should be created");
+	return widget;
+}
+
+describe("interview-ui dialog borders", () => {
+	const questions: Question[] = [
+		{
+			id: "project_type",
+			header: "Project Type",
+			question: "What type of project?",
+			options: [
+				{ label: "Web App", description: "Frontend or full-stack" },
+				{ label: "CLI Tool", description: "Command-line utility" },
+			],
+		},
+	];
+
+	it("renders the main question screen with a full border", async () => {
+		const widget = await captureInterviewWidget(questions);
+		assertFullOuterBorder(widget.render(80), 80);
+	});
+
+	it("renders the preview split screen with a full border", async () => {
+		const widget = await captureInterviewWidget([{
+			...questions[0],
+			options: [
+				{
+					label: "Web App",
+					description: "Frontend or full-stack",
+					preview: "### Stack\n\nUse React with a typed API boundary.",
+				},
+			],
+		}]);
+		assertFullOuterBorder(widget.render(100), 100);
+	});
+
+	it("renders review and exit confirmation screens with full borders", async () => {
+		const widget = await captureInterviewWidget(questions);
+
+		widget.handleInput(ENTER);
+		assertFullOuterBorder(widget.render(80), 80);
+
+		const exitWidget = await captureInterviewWidget(questions);
+		exitWidget.handleInput(ESC);
+		assertFullOuterBorder(exitWidget.render(80), 80);
+	});
+
+	it("renders the wrap-up screen with a full border", async () => {
+		const widget = await captureWrapUpWidget();
+		assertFullOuterBorder(widget.render(80), 80);
+	});
+});

package/src/resources/extensions/shared/tests/next-action-ui-hasui.test.ts

@@ -15,9 +15,27 @@
 
 import { describe, it } from "node:test";
 import assert from "node:assert/strict";
+import { stripVTControlCharacters } from "node:util";
+import { visibleWidth } from "@gsd/pi-tui";
 
 import { showNextAction } from "../next-action-ui.js";
 
+function assertFullOuterBorder(lines: string[], width: number): void {
+  assert.ok(lines.length >= 2, "dialog must include top and bottom borders");
+  for (const [index, line] of lines.entries()) {
+    assert.equal(visibleWidth(line), width, `line ${index} must fill dialog width`);
+  }
+  const top = stripVTControlCharacters(lines[0] ?? "");
+  const bottom = stripVTControlCharacters(lines.at(-1) ?? "");
+  assert.match(top, /^[╭┌].*[╮┐]$/);
+  assert.match(bottom, /^[╰└].*[╯┘]$/);
+  for (let index = 1; index < lines.length - 1; index++) {
+    const line = stripVTControlCharacters(lines[index] ?? "");
+    assert.match(line, /^[│┃├]/, `line ${index} missing left border: ${line}`);
+    assert.match(line, /[│┃┤]$/, `line ${index} missing right border: ${line}`);
+  }
+}
+
 describe("showNextAction ctx.hasUI guard (#5125 lockup root protection)", () => {
   it("returns 'not_yet' immediately when ctx.hasUI is false (no UI calls)", async () => {
     let customCalled = 0;
@@ -152,4 +170,41 @@ describe("showNextAction ctx.hasUI guard (#5125 lockup root protection)", () =>
     assert.equal(result, "beta", "TUI selection should be returned verbatim");
     assert.equal(selectCalled, 0, "ctx.ui.select fallback must NOT fire when custom returns a value");
   });
+
+  it("renders the interactive next-action menu inside a full border", async () => {
+    let rendered: string[] = [];
+    const theme = {
+      fg: (_color: string, text: string) => text,
+      bold: (text: string) => text,
+    };
+
+    const ctx = {
+      hasUI: true,
+      ui: {
+        custom: async (factory: any) => {
+          let resolved: string | undefined;
+          const component = factory({ requestRender() {} }, theme, null, (value: string) => {
+            resolved = value;
+          });
+          rendered = component.render(80);
+          component.handleInput("\r");
+          return resolved as never;
+        },
+        select: async () => undefined,
+      },
+    };
+
+    const result = await showNextAction(ctx as any, {
+      title: "GSD — test",
+      summary: ["summary"],
+      actions: [
+        { id: "alpha", label: "Alpha", description: "first", recommended: true },
+        { id: "beta", label: "Beta", description: "second" },
+      ],
+    });
+
+    assert.equal(result, "alpha");
+    assertFullOuterBorder(rendered, 80);
+    assert.match(stripVTControlCharacters(rendered[0] ?? ""), /GSD Next Action/);
+  });
 });

package/src/resources/skills/create-skill/references/gsd-skill-ecosystem.md

@@ -31,7 +31,7 @@ GSD auto-discovers skills at session start and during auto-mode:
 
 **Session start:** All discovered skills are enumerated and their names + descriptions are injected into the system prompt as `<available_skills>`.
 
-**Auto-mode discovery:** `skill-discovery.ts` takes a snapshot of the skills directory at auto-mode start. On each unit boundary it diffs against the snapshot. Any new skills found are injected via a `<newly_discovered_skills>` XML block so the LLM sees them without requiring `/reload`.
+**Auto-mode discovery:** `skill-discovery.ts` snapshots installed skill names at auto-mode start. When new skills appear mid-run, GSD reloads the resource catalog so they appear in the standard `<available_skills>` block (no separate XML injection).
 
 **Manual reload:** Running `/reload` re-scans the skill directories and updates the available skills list mid-session.
 </skill_discovery>