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

package/src/resources/extensions/shared/interview-ui.ts

@@ -36,6 +36,7 @@ import {
 	truncateToWidth,
 	type TUI,
 } from "@gsd/pi-tui";
+import { renderSharedDialogFrame } from "./dialog-frame.js";
 import { mergeSideBySide } from "./layout-utils.js";
 import { makeUI, INDENT } from "./ui.js";
 
@@ -126,6 +127,10 @@ const DIVIDER_CHARS = " │ ";
 const DIVIDER_WIDTH = 3;
 const PREVIEW_MAX_LINES = 20;     // hard cap — keeps total ≤ 24 rows for single-question
 
+function dialogContentWidth(width: number): number {
+	return width < 4 ? Math.max(1, width) : Math.max(1, width - 4);
+}
+
 // ─── Wrap-up screen ───────────────────────────────────────────────────────────
 
 export async function showWrapUpScreen(
@@ -157,11 +162,12 @@ export async function showWrapUpScreen(
 
 		function render(width: number): string[] {
 			if (cachedLines) return cachedLines;
-			const ui = makeUI(theme, width);
+			const contentWidth = dialogContentWidth(width);
+			const ui = makeUI(theme, contentWidth);
 			const lines: string[] = [];
 			const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
-			push(ui.bar(), ui.blank(), ui.header(`  ${opts.headline}`), ui.blank());
+			push(ui.blank());
 			if (opts.progress) push(ui.meta(`  ${opts.progress}`), ui.blank());
 
 			if (cursorIdx === 1) {
@@ -175,14 +181,11 @@ export async function showWrapUpScreen(
 			} else {
 				push(ui.actionUnselected(2, opts.keepGoingLabel, "Continue with another batch of questions."));
 			}
-			push(
-				ui.blank(),
-				ui.hints(["↑/↓ to choose", "1/2 to quick-select", "enter to confirm"]),
-				ui.bar(),
-			);
+			push(ui.blank());
 
-			cachedLines = lines;
-			return lines;
+			const footer = ui.hints(["↑/↓ to choose", "1/2 to quick-select", "enter to confirm"])[0] ?? "";
+			cachedLines = renderSharedDialogFrame(theme, opts.headline, lines, width, { footer });
+			return cachedLines;
 		}
 
 		return {
@@ -469,11 +472,13 @@ export async function showInterviewRound(
 		// ── Review screen ────────────────────────────────────────────────
 
 		function renderReviewScreen(width: number): string[] {
-			const ui = makeUI(theme, width);
+			const contentWidth = dialogContentWidth(width);
+			const title = opts.reviewHeadline ?? "Review your answers";
+			const ui = makeUI(theme, contentWidth);
 			const lines: string[] = [];
 			const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
-			push(ui.bar(), ui.blank(), ui.header(`  ${opts.reviewHeadline ?? "Review your answers"}`), ui.blank());
+			push(ui.blank());
 
 			for (let i = 0; i < questions.length; i++) {
 				const q = questions[i];
@@ -500,24 +505,22 @@ export async function showInterviewRound(
 			push(
 				ui.actionSelected(0, "Submit answers"),
 				ui.blank(),
-				ui.hints(["← to go back and edit", "enter to submit", `esc to ${opts.exitLabel ?? "end interview"}`]),
-				ui.bar(),
 			);
 
-			return lines;
+			const footer = ui.hints(["← to go back and edit", "enter to submit", `esc to ${opts.exitLabel ?? "end interview"}`])[0] ?? "";
+			return renderSharedDialogFrame(theme, title, lines, width, { footer });
 		}
 
 		// ── Exit confirm screen ──────────────────────────────────────────
 
 		function renderExitConfirm(width: number): string[] {
-			const ui = makeUI(theme, width);
+			const contentWidth = dialogContentWidth(width);
+			const title = opts.exitHeadline ?? "End interview?";
+			const ui = makeUI(theme, contentWidth);
 			const lines: string[] = [];
 			const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
 			push(
-				ui.bar(),
-				ui.blank(),
-				ui.header(`  ${opts.exitHeadline ?? "End interview?"}`),
 				ui.blank(),
 				ui.subtitle("  Answers from this batch won't be saved."),
 				ui.blank(),
@@ -538,13 +541,10 @@ export async function showInterviewRound(
 			} else {
 				push(ui.actionUnselected(2, exitActionLabel, "Exit and discard this batch of answers."));
 			}
-			push(
-				ui.blank(),
-				ui.hints(["↑/↓ to choose", "1/2 to quick-select", "enter to confirm"]),
-				ui.bar(),
-			);
+			push(ui.blank());
 
-			return lines;
+			const footer = ui.hints(["↑/↓ to choose", "1/2 to quick-select", "enter to confirm"])[0] ?? "";
+			return renderSharedDialogFrame(theme, title, lines, width, { footer });
 		}
 
 		// ── Preview helpers ──────────────────────────────────────────────
@@ -648,17 +648,17 @@ export async function showInterviewRound(
 			if (showingExitConfirm) { cachedLines = renderExitConfirm(width); return cachedLines; }
 			if (showingReview) { cachedLines = renderReviewScreen(width); return cachedLines; }
 
+			const contentWidth = dialogContentWidth(width);
+			const title = questions[currentIdx]?.header || "GSD Interview";
 			const useSideBySide = questionHasAnyPreview()
-				&& width >= (MIN_OPTIONS_WIDTH + MIN_PREVIEW_WIDTH + DIVIDER_WIDTH);
+				&& contentWidth >= (MIN_OPTIONS_WIDTH + MIN_PREVIEW_WIDTH + DIVIDER_WIDTH);
 
 			if (useSideBySide) {
 				// ── Preview path ──────────────────────────────────────
-				const ui = makeUI(theme, width);
+				const ui = makeUI(theme, contentWidth);
 				const lines: string[] = [];
 				const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
-				push(ui.bar());
-
 				if (isMultiQuestion) {
 					const unanswered = questions.filter((_, i) => !isQuestionAnswered(i)).length;
 					const answeredSet = new Set(questions.map((_, i) => i).filter(i => isQuestionAnswered(i)));
@@ -680,12 +680,15 @@ export async function showInterviewRound(
 				// component: spinner/loader (1-2), status line (1), tool header (1),
 				// plus a safety margin for future additions.
 				const termRows = (typeof process !== "undefined" && process.stdout?.rows) || 24;
-				const footerLines = 3; // blank + hints + bar
+				const footerLines = 5; // body spacer + frame top/footer/bottom chrome
 				const tuiChrome = 5;
 				const maxBody = Math.min(PREVIEW_MAX_LINES, Math.max(6, termRows - lines.length - footerLines - tuiChrome));
 
-				const previewWidth = Math.max(MIN_PREVIEW_WIDTH, Math.floor(width * PREVIEW_RATIO));
-				const leftWidth = Math.max(MIN_OPTIONS_WIDTH, width - previewWidth - DIVIDER_WIDTH);
+				const previewWidth = Math.max(
+					MIN_PREVIEW_WIDTH,
+					Math.min(contentWidth - MIN_OPTIONS_WIDTH - DIVIDER_WIDTH, Math.floor(contentWidth * PREVIEW_RATIO)),
+				);
+				const leftWidth = Math.max(MIN_OPTIONS_WIDTH, contentWidth - previewWidth - DIVIDER_WIDTH);
 
 				const fullLeft = renderOptionsColumn(leftWidth);
 				const leftLines = fullLeft.slice(0, maxBody);
@@ -709,7 +712,7 @@ export async function showInterviewRound(
 				while (leftLines.length < maxBody) leftLines.push("");
 				while (rightLines.length < maxBody) rightLines.push("");
 				const divider = theme.fg("dim", DIVIDER_CHARS);
-				lines.push(...mergeSideBySide(leftLines, rightLines, leftWidth, divider, width));
+				lines.push(...mergeSideBySide(leftLines, rightLines, leftWidth, divider, contentWidth));
 
 				// Footer
 				push(ui.blank());
@@ -729,15 +732,15 @@ export async function showInterviewRound(
 					hints.push(isLast && allAnswered() ? "enter to review" : "enter to next");
 				}
 				hints.push("esc to exit");
-				push(ui.hints(hints), ui.bar());
+				const footer = ui.hints(hints)[0] ?? "";
 
-				cachedLines = lines;
-				return lines;
+				cachedLines = renderSharedDialogFrame(theme, title, lines, width, { footer });
+				return cachedLines;
 			}
 
 			// ── Original path — no preview, untouched ────────────────
 
-			const ui = makeUI(theme, width);
+			const ui = makeUI(theme, contentWidth);
 			const lines: string[] = [];
 			const push = (...rows: string[][]) => { for (const r of rows) lines.push(...r); };
 
@@ -745,8 +748,6 @@ export async function showInterviewRound(
 			const st = states[currentIdx];
 			const multiSel = isMultiSelect(currentIdx);
 
-			push(ui.bar());
-
 			// ── Progress header ────────────────────────────────────────────
 			if (isMultiQuestion) {
 				const unanswered = questions.filter((_, i) => !isQuestionAnswered(i)).length;
@@ -809,7 +810,7 @@ export async function showInterviewRound(
 			if (st.notesVisible || focusNotes) {
 				push(ui.blank(), ui.notesLabel(focusNotes));
 				if (focusNotes) {
-					for (const line of getEditor().render(width - 2)) lines.push(truncateToWidth(` ${line}`, width));
+					for (const line of getEditor().render(contentWidth - 2)) lines.push(truncateToWidth(` ${line}`, contentWidth));
 				} else if (st.notes) {
 					push(ui.notesText(st.notes));
 				}
@@ -833,10 +834,10 @@ export async function showInterviewRound(
 				hints.push(isLast && allAnswered() ? "enter to review" : "enter to next");
 			}
 			hints.push("esc to exit");
-			push(ui.hints(hints), ui.bar());
+			const footer = ui.hints(hints)[0] ?? "";
 
-			cachedLines = lines;
-			return lines;
+			cachedLines = renderSharedDialogFrame(theme, title, lines, width, { footer });
+			return cachedLines;
 		}
 
 		return {

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>