gsd-pi 2.76.0 → 2.77.0-dev.1d17f366c

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/controllers/input-controller.test.ts

@@ -17,6 +17,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 = "";
@@ -60,6 +61,9 @@ function createHost(options: HostOptions = {}) {
 		showError(message: string) {
 			errors.push(message);
 		},
+		showTip(message: string) {
+			tips.push(message);
+		},
 		updateEditorBorderColor() {},
 		isExtensionCommand() {
 			return false;
@@ -70,6 +74,15 @@ function createHost(options: HostOptions = {}) {
 		queueCompactionMessage() {},
 		updatePendingMessagesDisplay() {},
 		flushPendingBashComponents() {},
+		contextualTips: {
+			recordBashIncluded() {},
+			evaluate() {
+				return undefined;
+			},
+		},
+		getContextPercent() {
+			return undefined;
+		},
 	};
 
 	setupEditorSubmitHandler(host as any);
@@ -79,6 +92,7 @@ function createHost(options: HostOptions = {}) {
 		prompted,
 		errors,
 		warnings,
+		tips,
 		history,
 		getEditorText: () => editorText,
 		getSettingsOpened: () => settingsOpened,

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

@@ -3585,7 +3585,19 @@ export class InteractiveMode {
 					this.ui.requestRender();
 				},
 				async (provider: string) => {
-					// Enter key → auth setup for selected provider (#3579)
+					// Enter key → auth setup for selected provider (#3579).
+					// Only OAuth providers support the login dialog flow.
+					// externalCli providers (e.g. claude-code) authenticate through
+					// their own CLI — sending them to the OAuth dialog produces
+					// "Unknown OAuth provider: claude-code" (#4548).
+					const isOAuthProvider = this.session.modelRegistry.authStorage
+						.getOAuthProviders()
+						.some((p) => p.id === provider);
+					if (!isOAuthProvider) {
+						done();
+						this.showStatus(`${provider} uses external CLI auth — use /model to select a model or run the provider's own auth command.`);
+						return;
+					}
 					done();
 					await this.showLoginDialog(provider);
 				},