gsd-pi 2.76.0-dev.4100bd590 → 2.76.0-dev.76f9a2dc5

package/packages/pi-coding-agent/src/modes/interactive/components/chat-frame.ts

@@ -2,7 +2,7 @@ import { truncateToWidth, visibleWidth } from "@gsd/pi-tui";
 import { theme } from "../theme/theme.js";
 import { formatTimestamp, type TimestampFormat } from "./timestamp.js";
 
-type FrameTone = "assistant" | "user" | "compaction";
+type FrameTone = "assistant" | "user" | "compaction" | "skill";
 
 function trimOuterBlankLines(lines: string[]): string[] {
 	let start = 0;
@@ -25,14 +25,14 @@ export function renderChatFrame(
 ): string[] {
 	const outerWidth = Math.max(20, width);
 	const contentWidth = Math.max(1, outerWidth - 2); // "│ " + content
+	const isPurple = opts.tone === "compaction" || opts.tone === "skill";
 	const borderColor =
 		opts.tone === "user"
 			? "border"
-			: opts.tone === "compaction"
+			: isPurple
 				? "customMessageLabel"
 				: "borderAccent";
-	const borderMuted =
-		opts.tone === "compaction" ? "customMessageLabel" : "borderMuted";
+	const borderMuted = isPurple ? "customMessageLabel" : "borderMuted";
 	const border = (s: string) => theme.fg(borderColor, s);
 	const leftRaw = `• ${opts.label}`;
 	const rightRaw =
@@ -47,7 +47,7 @@ export function renderChatFrame(
 	const labelColor =
 		opts.tone === "user"
 			? "border"
-			: opts.tone === "compaction"
+			: isPurple
 				? "customMessageLabel"
 				: "borderAccent";
 	const dashIdx = left.indexOf(" - ");
@@ -71,7 +71,7 @@ export function renderChatFrame(
 	const bodyColor =
 		opts.tone === "user"
 			? "userMessageText"
-			: opts.tone === "compaction"
+			: isPurple
 				? "customMessageText"
 				: "assistantMessageText";
 	const bodyLines = (sourceLines.length > 0 ? sourceLines : [""]).map((line) => {

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;
+	}
 }