gsd-pi 2.76.0 → 2.77.0-dev.1594b263e

package/packages/pi-coding-agent/src/modes/interactive/components/provider-manager.ts

@@ -12,7 +12,7 @@ import {
 	type TUI,
 } from "@gsd/pi-tui";
 import type { AuthStorage } from "../../../core/auth-storage.js";
-import { getDiscoverableProviders } from "../../../core/model-discovery.js";
+import { getDiscoverableProviders, getDiscoveryAdapter } from "../../../core/model-discovery.js";
 import { providerDisplayName } from "./model-selector.js";
 import type { ModelRegistry } from "../../../core/model-registry.js";
 import { ModelsJsonWriter } from "../../../core/models-json-writer.js";
@@ -102,12 +102,21 @@ export class ProviderManagerComponent extends Container implements Focusable {
 
 		this.providers = Array.from(providerNames)
 			.sort()
-			.map((name) => ({
-				name,
-				hasAuth: this.authStorage.hasAuth(name),
-				supportsDiscovery: discoverableSet.has(name),
-				modelCount: providerModelCounts.get(name) ?? 0,
-			}));
+			.map((name) => {
+				const providerApis = new Set(
+					allModels
+						.filter((m) => m.provider === name)
+						.map((m) => m.api)
+						.filter((api): api is string => typeof api === "string" && api.length > 0),
+				);
+				return {
+					name,
+					hasAuth: this.authStorage.hasAuth(name),
+					supportsDiscovery:
+						discoverableSet.has(name) || getDiscoveryAdapter(name, providerApis).supportsDiscovery,
+					modelCount: providerModelCounts.get(name) ?? 0,
+				};
+			});
 		this.clampSelectedIndex();
 	}
 

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

@@ -1,55 +1,69 @@
-import { Box, Markdown, type MarkdownTheme, Text } from "@gsd/pi-tui";
+// GSD / pi-coding-agent — Skill invocation message component
+import { Container, Markdown, type MarkdownTheme, Text } from "@gsd/pi-tui";
 import type { ParsedSkillBlock } from "../../../core/agent-session.js";
 import { getMarkdownTheme, theme } from "../theme/theme.js";
+import { renderChatFrame } from "./chat-frame.js";
 import { editorKey } from "./keybinding-hints.js";
 
 /**
- * Component that renders a skill invocation message with collapsed/expanded state.
- * Uses same background color as custom messages for visual consistency.
- * Only renders the skill block itself - user message is rendered separately.
+ * Renders a skill invocation in the shared chat-frame style (top rule,
+ * `• skill - <name>` header, `│ ` body margin) with purple border/label
+ * matching compaction so it visually aligns with user/assistant messages.
  */
-export class SkillInvocationMessageComponent extends Box {
+export class SkillInvocationMessageComponent extends Container {
 	private expanded = false;
 	private skillBlock: ParsedSkillBlock;
 	private markdownTheme: MarkdownTheme;
 
 	constructor(skillBlock: ParsedSkillBlock, markdownTheme: MarkdownTheme = getMarkdownTheme()) {
-		super(1, 1, (t) => theme.bg("customMessageBg", t));
+		super();
 		this.skillBlock = skillBlock;
 		this.markdownTheme = markdownTheme;
-		this.updateDisplay();
+		this.rebuild();
 	}
 
 	setExpanded(expanded: boolean): void {
-		this.expanded = expanded;
-		this.updateDisplay();
+		if (this.expanded !== expanded) {
+			this.expanded = expanded;
+			this.rebuild();
+		}
 	}
 
 	override invalidate(): void {
 		super.invalidate();
-		this.updateDisplay();
+		this.rebuild();
 	}
 
-	private updateDisplay(): void {
+	private rebuild(): void {
 		this.clear();
 
 		if (this.expanded) {
-			// Expanded: label + skill name header + full content
-			const label = theme.fg("customMessageLabel", theme.bold("[skill]"));
-			this.addChild(new Text(label, 0, 0));
-			const header = `**${this.skillBlock.name}**\n\n`;
 			this.addChild(
-				new Markdown(header + this.skillBlock.content, 0, 0, this.markdownTheme, {
+				new Markdown(this.skillBlock.content, 0, 0, this.markdownTheme, {
 					color: (text: string) => theme.fg("customMessageText", text),
 				}),
 			);
 		} else {
-			// Collapsed: single line - [skill] name (hint to expand)
-			const line =
-				theme.fg("customMessageLabel", theme.bold("[skill]") + " ") +
-				theme.fg("customMessageText", this.skillBlock.name) +
-				theme.fg("dim", ` (${editorKey("expandTools")} to expand)`);
-			this.addChild(new Text(line, 0, 0));
+			this.addChild(
+				new Text(
+					theme.fg("dim", `(${editorKey("expandTools")} to expand)`),
+					0,
+					0,
+				),
+			);
 		}
 	}
+
+	override render(width: number): string[] {
+		const frameWidth = Math.max(20, width);
+		const contentWidth = Math.max(1, frameWidth - 4);
+		const lines = super.render(contentWidth);
+		const framed = renderChatFrame(lines, frameWidth, {
+			label: `skill - ${this.skillBlock.name}`,
+			tone: "skill",
+			timestampFormat: "date-time-iso",
+			showTimestamp: false,
+		});
+		return framed.length > 0 ? ["", ...framed] : framed;
+	}
 }

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

@@ -66,6 +66,21 @@ function parseMcpToolName(name: string): { server: string; tool: string } | null
 	return { server: rest.slice(0, delim), tool: rest.slice(delim + 2) };
 }
 
+/**
+ * Prettify a raw tool name for display. Prefers the registered `label`
+ * ("Complete Slice") when available; otherwise strips a leading `gsd_`
+ * prefix and converts snake_case to Title Case.
+ */
+function prettifyToolName(name: string, label?: string): string {
+	if (label && label.trim().length > 0) return label;
+	const stripped = name.replace(/^gsd_/, "");
+	if (stripped.length === 0) return name;
+	return stripped
+		.split("_")
+		.map((word) => (word.length === 0 ? word : word[0].toUpperCase() + word.slice(1)))
+		.join(" ");
+}
+
 type ToolFrameTone = "pending" | "success" | "error";
 
 function trimOuterBlankLines(lines: string[]): string[] {
@@ -131,15 +146,19 @@ function formatCompactArgs(args: unknown, expanded: boolean): string {
 
 	const allPrimitive = entries.every(([, value]) => {
 		const t = typeof value;
-		if (t === "number" || t === "boolean") return true;
-		if (t === "string") return (value as string).length <= COMPACT_ARG_VALUE_LIMIT;
-		return value == null;
+		return t === "number" || t === "boolean" || t === "string" || value == null;
 	});
 
 	if (allPrimitive) {
 		return entries
 			.map(([key, value]) => {
-				if (typeof value === "string") return `${key}=${JSON.stringify(value)}`;
+				if (typeof value === "string") {
+					const truncated =
+						!expanded && value.length > COMPACT_ARG_VALUE_LIMIT
+							? `${value.slice(0, COMPACT_ARG_VALUE_LIMIT - 1)}…`
+							: value;
+					return `${key}=${JSON.stringify(truncated)}`;
+				}
 				if (value == null) return `${key}=null`;
 				return `${key}=${String(value)}`;
 			})
@@ -526,7 +545,7 @@ export class ToolExecutionComponent extends Container {
 		const parsed = parseMcpToolName(this.toolName);
 		const frameLabel = parsed
 			? `Tool ${parsed.server}·${parsed.tool}`
-			: `Tool ${this.normalizedToolName || this.toolName || "unknown"}`;
+			: `Tool ${prettifyToolName(this.toolName, this.toolDefinition?.label) || "unknown"}`;
 		const framed = renderToolFrame(lines, frameWidth, {
 			label: frameLabel,
 			status: frameStatus,
@@ -570,12 +589,30 @@ export class ToolExecutionComponent extends Container {
 					}
 				} catch {
 					// Fall back to default on error
-					this.contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.toolName)), 0, 0));
+					this.contentBox.addChild(
+						new Text(
+							theme.fg(
+								"toolTitle",
+								theme.bold(prettifyToolName(this.toolName, this.toolDefinition?.label)),
+							),
+							0,
+							0,
+						),
+					);
 					customRendererHasContent = true;
 				}
 			} else {
-				// No custom renderCall, show tool name
-				this.contentBox.addChild(new Text(theme.fg("toolTitle", theme.bold(this.toolName)), 0, 0));
+				// No custom renderCall, show prettified tool name
+				this.contentBox.addChild(
+					new Text(
+						theme.fg(
+							"toolTitle",
+							theme.bold(prettifyToolName(this.toolName, this.toolDefinition?.label)),
+						),
+						0,
+						0,
+					),
+				);
 				customRendererHasContent = true;
 			}
 
@@ -1126,7 +1163,9 @@ export class ToolExecutionComponent extends Container {
 			// cleanly. GSD-registered MCP tools have already had their prefix
 			// stripped upstream in partial-builder.ts and won't reach this branch.
 			const parsed = parseMcpToolName(this.toolName);
-			const displayName = parsed ? parsed.tool : this.toolName;
+			const displayName = parsed
+				? parsed.tool
+				: prettifyToolName(this.toolName, this.toolDefinition?.label);
 			const serverPrefix = parsed ? theme.fg("muted", `${parsed.server}\u00b7`) : "";
 			text = serverPrefix + theme.fg("toolTitle", theme.bold(displayName));
 

package/packages/pi-coding-agent/src/modes/interactive/controllers/input-controller.test.ts

@@ -1,7 +1,151 @@
+// GSD2 — Tests for input-controller image pasting behavior
+// Copyright (c) 2026 Jeremy McSpadden <jeremy@fluxlabs.net>
+
+import { describe, it, beforeEach } from "node:test";
 import assert from "node:assert/strict";
 import test from "node:test";
-
 import { setupEditorSubmitHandler } from "./input-controller.js";
+import { ContextualTips } from "../../../core/contextual-tips.js";
+import type { InteractiveModeStateHost } from "../interactive-mode-state.js";
+import type { ImageContent } from "@gsd/pi-ai";
+
+/** Minimal mock host satisfying InteractiveModeStateHost + setupEditorSubmitHandler extras. */
+function createMockHost() {
+	const promptCalls: Array<{ text: string; options?: any }> = [];
+	const historyCalls: string[] = [];
+	let editorText = "";
+
+	const host = {
+		defaultEditor: {
+			onSubmit: undefined as ((text: string) => Promise<void>) | undefined,
+			addToHistory: (text: string) => { historyCalls.push(text); },
+			setText: (text: string) => { editorText = text; },
+			getText: () => editorText,
+		},
+		editor: {
+			setText: (text: string) => { editorText = text; },
+			getText: () => editorText,
+			addToHistory: (text: string) => { historyCalls.push(text); },
+		},
+		session: {
+			isStreaming: false,
+			isCompacting: false,
+			isBashRunning: false,
+			thinkingLevel: undefined,
+			prompt: async (text: string, options?: any) => { promptCalls.push({ text, options }); },
+		},
+		ui: { requestRender: () => {} },
+		footer: {},
+		keybindings: {},
+		statusContainer: {},
+		chatContainer: {},
+		pinnedMessageContainer: {},
+		settingsManager: {},
+		pendingTools: new Map(),
+		toolOutputExpanded: false,
+		hideThinkingBlock: false,
+		isBashMode: false,
+		onInputCallback: undefined,
+		isInitialized: true,
+		loadingAnimation: undefined,
+		pendingWorkingMessage: undefined,
+		defaultWorkingMessage: "Working...",
+		streamingComponent: undefined,
+		streamingMessage: undefined,
+		retryEscapeHandler: undefined,
+		retryLoader: undefined,
+		autoCompactionLoader: undefined,
+		autoCompactionEscapeHandler: undefined,
+		compactionQueuedMessages: [] as Array<{ text: string; mode: "steer" | "followUp" }>,
+		extensionSelector: undefined,
+		extensionInput: undefined,
+		extensionEditor: undefined,
+		editorContainer: {},
+		keybindingsManager: undefined,
+		pendingImages: [] as ImageContent[],
+
+		// Extra methods required by setupEditorSubmitHandler
+		getSlashCommandContext: () => ({}),
+		handleBashCommand: async (_command: string, _excludeFromContext?: boolean) => {},
+		showWarning: (_message: string) => {},
+		showError: (_message: string) => {},
+		showTip: (_message: string) => {},
+		updateEditorBorderColor: () => {},
+		isExtensionCommand: (_text: string) => false,
+		isKnownSlashCommand: (_text: string) => false,
+		queueCompactionMessage: (_text: string, _mode: "steer" | "followUp") => {},
+		updatePendingMessagesDisplay: () => {},
+		flushPendingBashComponents: () => {},
+		contextualTips: new ContextualTips(),
+		getContextPercent: () => undefined,
+		options: { submitPromptsDirectly: true },
+	} satisfies InteractiveModeStateHost & Parameters<typeof setupEditorSubmitHandler>[0];
+
+	return { host, promptCalls, historyCalls };
+}
+
+const TEST_IMAGE: ImageContent = {
+	type: "image",
+	data: "iVBORw0KGgo=",
+	mimeType: "image/png",
+};
+
+describe("input-controller pending images", () => {
+	let host: ReturnType<typeof createMockHost>["host"];
+	let promptCalls: ReturnType<typeof createMockHost>["promptCalls"];
+
+	beforeEach(() => {
+		const mock = createMockHost();
+		host = mock.host;
+		promptCalls = mock.promptCalls;
+		setupEditorSubmitHandler(host);
+	});
+
+	it("passes pending images to session.prompt on submit", async () => {
+		host.pendingImages.push({ ...TEST_IMAGE });
+		await host.defaultEditor.onSubmit!("describe this image");
+
+		assert.equal(promptCalls.length, 1);
+		assert.equal(promptCalls[0].text, "describe this image");
+		assert.ok(promptCalls[0].options?.images);
+		assert.equal(promptCalls[0].options.images.length, 1);
+		assert.equal(promptCalls[0].options.images[0].mimeType, "image/png");
+	});
+
+	it("clears pending images after submit", async () => {
+		host.pendingImages.push({ ...TEST_IMAGE });
+		await host.defaultEditor.onSubmit!("describe this image");
+
+		assert.equal(host.pendingImages.length, 0);
+	});
+
+	it("passes undefined images when no images are pending", async () => {
+		await host.defaultEditor.onSubmit!("hello");
+
+		assert.equal(promptCalls.length, 1);
+		assert.equal(promptCalls[0].options?.images, undefined);
+	});
+
+	it("passes multiple images in order", async () => {
+		const img1: ImageContent = { type: "image", data: "aaa=", mimeType: "image/png" };
+		const img2: ImageContent = { type: "image", data: "bbb=", mimeType: "image/jpeg" };
+		host.pendingImages.push(img1, img2);
+
+		await host.defaultEditor.onSubmit!("describe these images");
+
+		assert.equal(promptCalls[0].options.images.length, 2);
+		assert.equal(promptCalls[0].options.images[0].data, "aaa=");
+		assert.equal(promptCalls[0].options.images[1].data, "bbb=");
+	});
+
+	it("discards pending images on bash command", async () => {
+		host.pendingImages.push({ ...TEST_IMAGE });
+		await host.defaultEditor.onSubmit!("! ls -la");
+
+		assert.equal(host.pendingImages.length, 0);
+		assert.equal(promptCalls.length, 0); // bash commands don't go through prompt
+	});
+});
 
 type HostOptions = {
 	knownSlashCommands?: string[];
@@ -17,6 +161,7 @@ function createHost(options: HostOptions = {}) {
 	const prompted: string[] = [];
 	const errors: string[] = [];
 	const warnings: string[] = [];
+	const tips: string[] = [];
 	const history: string[] = [];
 	const knownSlashCommands = new Set(options.knownSlashCommands ?? []);
 	let editorText = "";
@@ -48,6 +193,7 @@ function createHost(options: HostOptions = {}) {
 		ui: {
 			requestRender() {},
 		},
+		pendingImages: [] as ImageContent[],
 		getSlashCommandContext: () => ({
 			showSettingsSelector: () => {
 				settingsOpened += 1;
@@ -60,6 +206,9 @@ function createHost(options: HostOptions = {}) {
 		showError(message: string) {
 			errors.push(message);
 		},
+		showTip(message: string) {
+			tips.push(message);
+		},
 		updateEditorBorderColor() {},
 		isExtensionCommand() {
 			return false;
@@ -70,6 +219,15 @@ function createHost(options: HostOptions = {}) {
 		queueCompactionMessage() {},
 		updatePendingMessagesDisplay() {},
 		flushPendingBashComponents() {},
+		contextualTips: {
+			recordBashIncluded() {},
+			evaluate() {
+				return undefined;
+			},
+		},
+		getContextPercent() {
+			return undefined;
+		},
 	};
 
 	setupEditorSubmitHandler(host as any);
@@ -79,6 +237,7 @@ function createHost(options: HostOptions = {}) {
 		prompted,
 		errors,
 		warnings,
+		tips,
 		history,
 		getEditorText: () => editorText,
 		getSettingsOpened: () => settingsOpened,

package/packages/pi-coding-agent/src/modes/interactive/controllers/input-controller.ts

@@ -1,7 +1,19 @@
+import type { ImageContent } from "@gsd/pi-ai";
 import { dispatchSlashCommand } from "../slash-command-handlers.js";
 import type { InteractiveModeStateHost } from "../interactive-mode-state.js";
 import type { ContextualTips } from "../../../core/contextual-tips.js";
 
+/**
+ * Consume and clear any pending pasted images from the host.
+ * Returns undefined if there are no pending images.
+ */
+function consumePendingImages(host: InteractiveModeStateHost): ImageContent[] | undefined {
+	if (host.pendingImages.length === 0) return undefined;
+	const images = [...host.pendingImages];
+	host.pendingImages.length = 0;
+	return images;
+}
+
 export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 	getSlashCommandContext: () => any;
 	handleBashCommand: (command: string, excludeFromContext?: boolean) => Promise<void>;
@@ -26,6 +38,7 @@ export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 			const handled = await dispatchSlashCommand(text, host.getSlashCommandContext());
 			if (handled) {
 				host.editor.setText("");
+				consumePendingImages(host); // discard images on slash command
 				return;
 			}
 			if (!host.isKnownSlashCommand(text)) {
@@ -53,10 +66,14 @@ export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 				await host.handleBashCommand(command, isExcluded);
 				host.isBashMode = false;
 				host.updateEditorBorderColor();
+				consumePendingImages(host); // discard images on bash command
 				return;
 			}
 		}
 
+		// Consume pending images for prompt submissions
+		const images = consumePendingImages(host);
+
 		// Evaluate contextual tips before sending to agent
 		const tip = host.contextualTips.evaluate({
 			input: text,
@@ -73,7 +90,7 @@ export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 				host.editor.addToHistory?.(text);
 				host.editor.setText("");
 				try {
-					await host.session.prompt(text);
+					await host.session.prompt(text, { images });
 				} catch (error: unknown) {
 					const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
 					host.showError(errorMessage);
@@ -87,7 +104,7 @@ export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 		if (host.session.isStreaming) {
 			host.editor.addToHistory?.(text);
 			host.editor.setText("");
-			await host.session.prompt(text, { streamingBehavior: "steer" });
+			await host.session.prompt(text, { streamingBehavior: "steer", images });
 			host.updatePendingMessagesDisplay();
 			host.ui.requestRender();
 			return;
@@ -104,7 +121,7 @@ export function setupEditorSubmitHandler(host: InteractiveModeStateHost & {
 		if (host.options?.submitPromptsDirectly) {
 			host.editor.addToHistory?.(text);
 			try {
-				await host.session.prompt(text);
+				await host.session.prompt(text, { images });
 			} catch (error: unknown) {
 				const errorMessage = error instanceof Error ? error.message : "Unknown error occurred";
 				host.showError(errorMessage);

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

@@ -1,3 +1,4 @@
+import type { ImageContent } from "@gsd/pi-ai";
 import type { AgentSessionEvent } from "../../core/agent-session.js";
 
 export interface InteractiveModeStateHost {
@@ -32,6 +33,7 @@ export interface InteractiveModeStateHost {
 	extensionEditor?: any;
 	editorContainer: any;
 	keybindingsManager?: any;
+	pendingImages: ImageContent[];
 }
 
 export type InteractiveModeEvent = AgentSessionEvent;