@agentuity/coder-tui 3.0.0-alpha.7 → 3.0.0-beta.0

package/src/aigateway.ts

@@ -0,0 +1,256 @@
+/**
+ * Agentuity AI Gateway Custom Provider Extension
+ *
+ * Registers models from the Agentuity AI Gateway using the appropriate API type
+ * based on model ID patterns. Models are loaded dynamically from the gateway's /models endpoint.
+ *
+ * Usage:
+ *   Use /model to switch to aigateway models
+ */
+import { delimiter, join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { execFileSync } from 'node:child_process';
+import type { ExtensionAPI, ProviderModelConfig } from '@mariozechner/pi-coding-agent';
+
+export type KnownApi =
+	| 'openai-completions'
+	| 'mistral-conversations'
+	| 'openai-responses'
+	| 'azure-openai-responses'
+	| 'openai-codex-responses'
+	| 'anthropic-messages'
+	| 'bedrock-converse-stream'
+	| 'google-generative-ai'
+	| 'google-gemini-cli'
+	| 'google-vertex';
+
+const MODEL_CATALOG_TIMEOUT_MS = 5_000;
+
+const KNOWN_APIS = new Set<string>([
+	'openai-completions',
+	'mistral-conversations',
+	'openai-responses',
+	'azure-openai-responses',
+	'openai-codex-responses',
+	'anthropic-messages',
+	'bedrock-converse-stream',
+	'google-generative-ai',
+	'google-gemini-cli',
+	'google-vertex',
+] satisfies KnownApi[]);
+
+interface AIGatewayModels {
+	[key: string]: AIGatewayModel[];
+}
+
+interface AIGatewayModelResponse {
+	success: boolean;
+	data: AIGatewayModels;
+	message?: string;
+	error?: string;
+}
+
+interface AIGatewayModel {
+	id: string;
+	name: string;
+	api: KnownApi;
+	reasoning: boolean;
+	input_modalities?: ('text' | 'image')[];
+	context_window?: number;
+	max_output_tokens?: number;
+	pricing?: {
+		input: number;
+		output: number;
+		cached_input: number;
+		unit: 'per_million_tokens';
+		currency: 'USD';
+	};
+}
+
+function getEnv(...keys: string[]): string | undefined {
+	for (const key of keys) {
+		if (process.env[key]) {
+			return process.env[key];
+		}
+	}
+}
+
+function normalizeCredential(value: unknown): string | undefined {
+	if (value === undefined || value === null) {
+		return undefined;
+	}
+	const normalized = String(value).trim();
+	return normalized.length > 0 ? normalized : undefined;
+}
+
+function isKnownApi(api: unknown): api is KnownApi {
+	return typeof api === 'string' && KNOWN_APIS.has(api);
+}
+
+function getRegion(): string {
+	return getEnv('AGENTUITY_REGION') ?? 'usc';
+}
+
+function getBaseUrl(): string {
+	const region = getRegion();
+	return `https://aigateway-${region}.agentuity.cloud`;
+}
+
+async function fetchModels(): Promise<AIGatewayModels> {
+	const baseUrl = getBaseUrl();
+	let apiKey = normalizeCredential(
+		getEnv(
+			'AGENTUITY_CODER_API_KEY',
+			'AGENTUITY_SDK_KEY',
+			'AGENTUITY_CLI_API_KEY',
+			'AGENTUITY_CLI_KEY'
+		)
+	);
+	let orgId = normalizeCredential(
+		getEnv('AGENTUITY_ORGID', 'AGENTUITY_CLOUD_ORG_ID', 'AGENTUITY_ORG_ID')
+	);
+
+	if (!apiKey) {
+		let found = false;
+		const path = process.env.PATH?.split(delimiter) ?? [];
+		for (const dir of path) {
+			const fn = join(dir, 'agentuity');
+			if (existsSync(fn)) {
+				try {
+					const res = execFileSync(fn, ['auth', 'apikey', '--json']);
+					const apiKeyResult = JSON.parse(res.toString()) as { apiKey: string };
+					apiKey = normalizeCredential(apiKeyResult.apiKey);
+					found = true;
+					if (!orgId) {
+						const ores = execFileSync(fn, ['auth', 'org', 'current']);
+						orgId = normalizeCredential(ores);
+						if (!orgId) {
+							console.warn(
+								'Cannot determine the org id. Use `agentuity auth org select` to select a default organization'
+							);
+							return {};
+						}
+					}
+					break;
+				} catch (_ex) {
+					//
+				}
+			}
+		}
+		if (!found) {
+			console.warn(
+				'AGENTUITY_SDK_KEY, AGENTUITY_CLI_API_KEY or AGENTUITY_CLI_KEY not set and cannot find the agentuit cli, cannot fetch models from AI Gateway'
+			);
+			return {};
+		}
+	}
+
+	if (!apiKey) {
+		console.warn('Cannot determine the API key, cannot fetch models from AI Gateway');
+		return {};
+	}
+
+	process.env.AGENTUITY_AIGATEWAY_KEY = apiKey;
+	if (orgId) {
+		process.env.AGENTUITY_AIGATEWAY_ORGID = orgId;
+	}
+
+	const controller = new AbortController();
+	const timeout = setTimeout(() => controller.abort(), MODEL_CATALOG_TIMEOUT_MS);
+
+	try {
+		const response = await fetch(`${baseUrl}/models`, { signal: controller.signal });
+
+		if (!response.ok) {
+			console.warn(
+				`Failed to fetch models from AI Gateway: ${response.status} ${response.statusText}`
+			);
+			return {};
+		}
+
+		const payload = (await response.json()) as AIGatewayModelResponse;
+
+		if (!payload.success) {
+			console.warn(`Failed to load models. ${payload.message} ${payload}`);
+		}
+
+		return payload.data;
+	} catch (error) {
+		if (error instanceof Error && error.name === 'AbortError') {
+			console.warn(
+				`Timed out fetching models from AI Gateway after ${MODEL_CATALOG_TIMEOUT_MS}ms`
+			);
+			return {};
+		}
+		console.warn('Failed to fetch models from AI Gateway:', error);
+		return {};
+	} finally {
+		clearTimeout(timeout);
+	}
+}
+
+function toPiModel(m: AIGatewayModel): ProviderModelConfig {
+	return {
+		id: m.id,
+		name: m.name,
+		reasoning: m.reasoning,
+		input: m.input_modalities as ('text' | 'image')[],
+		contextWindow: m.context_window ?? 40000,
+		maxTokens: m.max_output_tokens ?? 64000,
+		cost: {
+			input: m.pricing?.input ?? 0,
+			output: m.pricing?.output ?? 0,
+			cacheRead: m.pricing?.cached_input ?? 0,
+			cacheWrite: 0,
+		},
+		compat: {
+			supportsDeveloperRole: false,
+		},
+	};
+}
+
+export async function setupAIGateway(pi: ExtensionAPI) {
+	const models = await fetchModels();
+	const baseUrl = getBaseUrl();
+
+	const allModels: AIGatewayModel[] = [];
+	for (const providerModels of Object.values(models)) {
+		if (providerModels) {
+			allModels.push(...providerModels);
+		}
+	}
+	if (allModels.length === 0) {
+		return;
+	}
+
+	const modelsByApi = new Map<KnownApi, ProviderModelConfig[]>();
+
+	for (const m of allModels) {
+		const apiType = m.api;
+		if (!isKnownApi(apiType)) {
+			continue; // THIS SHOULD NEVER HAPPEN BUT JUST IN CASE
+		}
+		const existing = modelsByApi.get(apiType) ?? [];
+		existing.push(toPiModel(m));
+		modelsByApi.set(apiType, existing);
+	}
+
+	const headers: Record<string, string> = {};
+	if (process.env.AGENTUITY_AIGATEWAY_ORGID) {
+		headers['x-agentuity-orgid'] = process.env.AGENTUITY_AIGATEWAY_ORGID;
+	}
+
+	for (const [apiType, providerModels] of modelsByApi) {
+		const apitok = apiType.split('-');
+		const name = apitok.length >= 2 ? apitok.slice(0, 2).join('-') : apitok[0];
+		const providerName = `agentuity/${name}`;
+		pi.registerProvider(providerName, {
+			baseUrl,
+			apiKey: 'AGENTUITY_AIGATEWAY_KEY',
+			headers,
+			authHeader: true,
+			api: apiType,
+			models: providerModels,
+		});
+	}
+}

package/src/footer.ts

@@ -11,7 +11,11 @@
  *   [3] SwiftRaven — 3 observers watching, session label "SwiftRaven"
  */
 
-import type { ExtensionContext, ReadonlyFooterDataProvider } from '@mariozechner/pi-coding-agent';
+import type {
+	ExtensionAPI,
+	ExtensionContext,
+	ReadonlyFooterDataProvider,
+} from '@mariozechner/pi-coding-agent';
 
 const RESET = '\x1b[0m';
 const SEP = '>';
@@ -185,42 +189,85 @@ function formatCost(n: number): string {
  *
  * Includes a braille spinner animation when an agent is actively working.
  *
+ * @param pi Extension API
  * @param ctx  Extension context with UI access
  * @param getHubStatus  Callback that returns current Hub connection status
  * @param getObserverState  Optional callback that returns observer count + session label
  */
 export function setupCoderFooter(
+	pi: ExtensionAPI,
 	ctx: ExtensionContext,
 	getHubStatus: () => HubStatus,
 	getObserverState?: () => ObserverState
 ): void {
 	if (!ctx.hasUI) return;
 
+	ctx.ui.setWorkingIndicator({ frames: [] }); // turn off the working indicator since we use our own spinner
+
+	let pendingRequests = 0;
+	let spinnerTimer: ReturnType<typeof setInterval> | null = null;
+	let spinnerFrame = 0;
+	let activeAgentRunning = false;
+	let requestFooterRender: (() => void) | undefined;
+
+	const startSpinner = () => {
+		if (spinnerTimer) return;
+		spinnerTimer = setInterval(() => {
+			spinnerFrame = (spinnerFrame + 1) % SPINNER_FRAMES.length;
+			requestFooterRender?.();
+		}, 80);
+	};
+
+	const stopSpinner = () => {
+		if (!spinnerTimer) return;
+		clearInterval(spinnerTimer);
+		spinnerTimer = null;
+		spinnerFrame = 0;
+	};
+
+	const syncSpinner = () => {
+		if (pendingRequests > 0 || activeAgentRunning) {
+			startSpinner();
+		} else {
+			stopSpinner();
+		}
+	};
+
+	pi.on('before_provider_request', () => {
+		pendingRequests += 1;
+		if (pendingRequests === 1) {
+			startSpinner();
+		}
+	});
+
+	pi.on('after_provider_response', () => {
+		pendingRequests = Math.max(0, pendingRequests - 1);
+		syncSpinner();
+	});
+
+	pi.on('session_shutdown', () => {
+		pendingRequests = 0;
+		activeAgentRunning = false;
+		stopSpinner();
+	});
+
 	ctx.ui.setFooter((tui, _theme, footerData) => {
-		// Spinner state
-		let spinnerTimer: ReturnType<typeof setInterval> | null = null;
-		let spinnerFrame = 0;
+		requestFooterRender = () => tui.requestRender();
 
 		const getText = (width: number): string => {
 			// Detect active agent
 			const activeAgent = footerData.getExtensionStatuses().get('active_agent');
 
-			// Start/stop spinner based on agent activity
-			if (activeAgent && !spinnerTimer) {
-				spinnerTimer = setInterval(() => {
-					spinnerFrame = (spinnerFrame + 1) % SPINNER_FRAMES.length;
-					tui.requestRender();
-				}, 80);
-			} else if (!activeAgent && spinnerTimer) {
-				clearInterval(spinnerTimer);
-				spinnerTimer = null;
-				spinnerFrame = 0;
-			}
+			activeAgentRunning = !!activeAgent;
+			syncSpinner();
 
 			// Token stats from session messages
 			let inputTokens = 0;
 			let outputTokens = 0;
 			let totalCost = 0;
+
+			// TODO (jhaynie): we need to think about how to handle our AI Gateway costs vs whats coming from pi
+
 			for (const entry of ctx.sessionManager.getBranch()) {
 				if (entry.type === 'message') {
 					const msg = entry.message as {

package/src/index.ts

@@ -6,7 +6,7 @@ import {
 	ExtensionCommandContext,
 	ToolDefinition,
 } from '@mariozechner/pi-coding-agent';
-import { Type, type TSchema } from 'typebox';
+import { Type, type TSchema } from '@sinclair/typebox';
 import { createRequire } from 'node:module';
 import { HubClient } from './client.ts';
 import type { ConnectionState } from './client.ts';
@@ -14,6 +14,7 @@ import { processActions } from './handlers.ts';
 import { getToolRenderers } from './renderers.ts';
 import { setupCoderFooter, type ObserverState } from './footer.ts';
 import { setupTitlebar } from './titlebar.ts';
+import { setupStartupLogo } from './startup-logo.ts';
 import { registerAgentCommands } from './commands.ts';
 import { AgentManagerOverlay } from './overlay.ts';
 import { ChainEditorOverlay, type ChainResult } from './chain-preview.ts';
@@ -24,6 +25,7 @@ import { handleRemoteUiRequest } from './remote-ui-handler.ts';
 import { buildInboundRpcPromptText, getInboundRpcDeliverAs } from './inbound-rpc.ts';
 import { applyCoderAuthHeaders, getCoderAuthCurlArgs } from './auth.ts';
 import { formatToolDisplay } from './agentuity-cli.ts';
+import { setupAIGateway } from './aigateway.ts';
 import { adaptInitMessageForLocalTui } from './local-init-filter.ts';
 import { selectSubAgentToolNames } from './subagent-tool-selection.ts';
 import type {
@@ -279,6 +281,15 @@ async function fetchInitMessage(hubUrl: string, agentRole?: string): Promise<Ini
 }
 
 export function agentuityCoderHub(pi: ExtensionAPI) {
+	process.env.AGENTUITY_AGENT_MODE = 'coder'; // let the agentuity cli know we're inside coder
+
+	// Register the startup header before Hub bootstrap so `pi -e .` works for
+	// local visual testing without Agentuity Coder environment variables.
+	setupStartupLogo(pi);
+
+	// Register the AI Gateway
+	setupAIGateway(pi);
+
 	const hubUrl = process.env[HUB_URL_ENV];
 	if (!hubUrl) return;
 
@@ -1469,7 +1480,7 @@ export function agentuityCoderHub(pi: ExtensionAPI) {
 		}
 
 		// Set up Coder footer (powerline: model or active agent > branch > status + observer count)
-		setupCoderFooter(ctx, getHubUiStatus, getObserverState);
+		setupCoderFooter(pi, ctx, getHubUiStatus, getObserverState);
 
 		// Fire-and-forget: fetch session snapshot for label + initial observer count.
 		// Uses the Hub REST endpoint — non-blocking, best-effort.

package/src/startup-logo.ts

@@ -0,0 +1,255 @@
+import type { ExtensionAPI, ExtensionContext, Theme } from '@mariozechner/pi-coding-agent';
+
+type TuiRenderer = {
+	requestRender(): void;
+};
+
+type LogoCell = {
+	ri: number;
+	ci: number;
+	sr: number;
+	sc: number;
+	delay: number;
+};
+
+const LOGO = [
+	'                      ##                          ',
+	'                     ####                         ',
+	'                    ######                        ',
+	'                  ##########                      ',
+	'                 #####  #####                     ',
+	'                #####    #####                    ',
+	'               #####      #####                   ',
+	'              #####        #####                  ',
+	'             #####          #####                 ',
+	'            #############################         ',
+	'           ##############################         ',
+	'                                                  ',
+	'                                                  ',
+	' #####################################            ',
+	'########################################          ',
+	'     #####                          #####         ',
+	'    #####                            #####        ',
+	'   #####                              #####       ',
+	'  #####                                #####      ',
+	' ############################################     ',
+	'##############################################    ',
+];
+
+const ASSEMBLE_FRAMES = 30;
+const SHIMMER_FRAMES = 56;
+const PULSE_FRAMES = 40;
+const FRAME_INTERVAL_MS = 35;
+const CHARS = '░▒▓█#@%&*+=-:.';
+const TITLE = 'Agentuity Coder';
+const SANDBOX_ID_ENV = 'AGENTUITY_SANDBOX_ID';
+
+const LOGO_ROWS = LOGO.length;
+const LOGO_COLS = LOGO[0]?.length ?? 0;
+const CELLS = LOGO.flatMap((row, ri) =>
+	[...row].flatMap((ch, ci) => (ch === '#' ? [{ ri, ci }] : []))
+);
+const TOTAL_FRAMES = ASSEMBLE_FRAMES + SHIMMER_FRAMES + PULSE_FRAMES;
+const TITLE_OFFSET = 3;
+
+function mulberry32(seed: number): () => number {
+	return () => {
+		seed += 0x6d2b79f5;
+		let value = seed;
+		value = Math.imul(value ^ (value >>> 15), value | 1);
+		value ^= value + Math.imul(value ^ (value >>> 7), value | 61);
+		return ((value ^ (value >>> 14)) >>> 0) / 4294967296;
+	};
+}
+
+function center(line: string, width: number): string {
+	if (width <= LOGO_COLS) return line;
+	const padding = Math.max(0, Math.floor((width - LOGO_COLS) / 2));
+	return `${' '.repeat(padding)}${line}`;
+}
+
+function centerText(line: string, width: number): string {
+	const padding = Math.max(0, Math.floor((width - line.length) / 2) - TITLE_OFFSET);
+	return `${' '.repeat(padding)}${line}`;
+}
+
+function randomChar(rand: () => number): string {
+	return CHARS[Math.floor(rand() * CHARS.length)] ?? '#';
+}
+
+function makeParticles(seed: number): LogoCell[] {
+	const rand = mulberry32(seed);
+	return CELLS.map((cell) => ({
+		...cell,
+		sr: Math.floor(rand() * LOGO_ROWS),
+		sc: Math.floor(rand() * LOGO_COLS),
+		delay: rand() * 0.6,
+	}));
+}
+
+function makeGrid(): string[][] {
+	return LOGO.map((row) => [...row].map(() => ' '));
+}
+
+function phaseForFrame(
+	frame: number
+):
+	| { type: 'assemble'; frame: number }
+	| { type: 'shimmer'; frame: number }
+	| { type: 'pulse'; frame: number }
+	| { type: 'final' } {
+	if (frame < ASSEMBLE_FRAMES) return { type: 'assemble', frame };
+	if (frame < ASSEMBLE_FRAMES + SHIMMER_FRAMES) {
+		return { type: 'shimmer', frame: frame - ASSEMBLE_FRAMES };
+	}
+	if (frame < TOTAL_FRAMES) {
+		return { type: 'pulse', frame: frame - ASSEMBLE_FRAMES - SHIMMER_FRAMES };
+	}
+	return { type: 'final' };
+}
+
+class StartupLogoHeader {
+	#frame = 0;
+	#timer: ReturnType<typeof setInterval> | null = null;
+	readonly #particles = makeParticles(Date.now());
+
+	constructor(
+		private readonly tui: TuiRenderer,
+		private readonly theme: Theme
+	) {
+		this.#timer = setInterval(() => {
+			this.#frame++;
+			if (this.#frame >= TOTAL_FRAMES) this.#stop();
+			this.tui.requestRender();
+		}, FRAME_INTERVAL_MS);
+	}
+
+	render(width: number): string[] {
+		const grid = this.#renderGrid();
+		return [
+			'',
+			...grid.map((row) => center(row.join(''), width)),
+			'',
+			this.#renderTitle(width),
+			'',
+		];
+	}
+
+	invalidate(): void {
+		this.tui.requestRender();
+	}
+
+	dispose(): void {
+		this.#stop();
+	}
+
+	#renderGrid(): string[][] {
+		const phase = phaseForFrame(this.#frame);
+		if (phase.type === 'assemble') return this.#renderAssemble(phase.frame);
+		if (phase.type === 'shimmer') return this.#renderShimmer(phase.frame);
+		if (phase.type === 'pulse') return this.#renderPulse(phase.frame);
+		return this.#renderFinal();
+	}
+
+	#renderAssemble(frame: number): string[][] {
+		const rand = mulberry32(frame + 1);
+		const grid = makeGrid();
+		const t = frame / Math.max(1, ASSEMBLE_FRAMES - 1);
+
+		for (const particle of this.#particles) {
+			const pt = Math.max(0, (t - particle.delay) / (1 - particle.delay));
+			const eased = 1 - (1 - Math.min(pt, 1)) ** 3;
+			const ri = Math.round(particle.sr + (particle.ri - particle.sr) * eased);
+			const ci = Math.round(particle.sc + (particle.ci - particle.sc) * eased);
+
+			if (pt >= 1) {
+				grid[particle.ri]![particle.ci] = this.#cyan('#');
+			} else if (ri >= 0 && ri < LOGO_ROWS && ci >= 0 && ci < LOGO_COLS) {
+				grid[ri]![ci] = this.#dim(randomChar(rand));
+			}
+		}
+
+		return grid;
+	}
+
+	#renderShimmer(frame: number): string[][] {
+		const wave = (frame / SHIMMER_FRAMES) * (LOGO_ROWS + LOGO_COLS) * 1.5;
+		return LOGO.map((row, ri) =>
+			[...row].map((ch, ci) => {
+				if (ch !== '#') return ' ';
+				const dist = Math.abs(ri + ci * 0.5 - wave);
+				if (dist < 1.5) return this.#brightCyan('█');
+				if (dist < 3.5) return this.#cyan('#');
+				if (dist < 5) return this.#dim('#');
+				return this.#cyan('#');
+			})
+		);
+	}
+
+	#renderPulse(frame: number): string[][] {
+		const step = frame % 20;
+		const t = step / 20;
+		const bright = t < 0.5 ? t * 2 : (1 - t) * 2;
+
+		return LOGO.map((row) =>
+			[...row].map((ch) => {
+				if (ch !== '#') return ' ';
+				if (bright > 0.5) return this.#brightCyan('#');
+				if (bright > 0.2) return this.#cyan('#');
+				return this.#dim('#');
+			})
+		);
+	}
+
+	#renderFinal(): string[][] {
+		return LOGO.map((row) => [...row].map((ch) => (ch === '#' ? this.#cyan('#') : ' ')));
+	}
+
+	#renderTitle(width: number): string {
+		if (this.#frame < ASSEMBLE_FRAMES) return '';
+
+		const titleFrame = Math.min(this.#frame - ASSEMBLE_FRAMES, SHIMMER_FRAMES);
+		const visibleChars = Math.min(
+			TITLE.length,
+			Math.floor((titleFrame / Math.max(1, SHIMMER_FRAMES - 1)) * TITLE.length)
+		);
+		const title = TITLE.slice(0, visibleChars);
+
+		if (this.#frame >= ASSEMBLE_FRAMES + SHIMMER_FRAMES) {
+			return this.#brightCyan(centerText(TITLE, width));
+		}
+
+		return this.#cyan(centerText(title, width));
+	}
+
+	#cyan(text: string): string {
+		return `\x1b[36m${text}\x1b[0m`;
+	}
+
+	#brightCyan(text: string): string {
+		return `\x1b[96m${text}\x1b[0m`;
+	}
+
+	#dim(text: string): string {
+		return this.theme.fg('dim', this.theme.fg('accent', text));
+	}
+
+	#stop(): void {
+		if (!this.#timer) return;
+		clearInterval(this.#timer);
+		this.#timer = null;
+	}
+}
+
+function installStartupLogo(ctx: ExtensionContext): void {
+	if (!ctx.hasUI) return;
+	ctx.ui.setHeader((tui, theme) => new StartupLogoHeader(tui, theme));
+}
+
+export function setupStartupLogo(pi: ExtensionAPI): void {
+	if (process.env[SANDBOX_ID_ENV]) return;
+
+	pi.on('session_start', async (_event, ctx) => {
+		installStartupLogo(ctx);
+	});
+}