@adeildo/pi-providers 5.7.2 → 5.9.0

package/README.md

@@ -81,3 +81,12 @@ The Claude plan billing comes from [pi-claude-max](https://github.com/bradennss/
 Several accounts per provider, with a switch to the next one when a limit hits, follow [pi-multiprovider](https://github.com/monotykamary/pi-multiprovider) by monotykamary, also MIT. This one keeps them inside pi's own login, with no OAuth of its own.
 
 Part of [pi-harness](https://github.com/felipeadeildo/pi-harness), which brings every piece in one install.
+
+## License
+
+MIT
+
+<p align="center">
+  <a href="https://adeildo.dev"><img src="https://adeildo.dev/assets/images/cat.svg" width="42" height="42" alt="adeildo.dev"></a><br>
+  Brought to you by <a href="https://adeildo.dev">adeildo.dev</a>
+</p>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@adeildo/pi-providers",
-	"version": "5.7.2",
+	"version": "5.9.0",
 	"description": "Provider features for Pi. Bills Anthropic OAuth requests to the Claude Pro or Max plan instead of extra usage.",
 	"keywords": [
 		"anthropic",
@@ -37,7 +37,7 @@
 		"access": "public"
 	},
 	"dependencies": {
-		"@adeildo/pi-kit": "5.7.2"
+		"@adeildo/pi-kit": "5.9.0"
 	},
 	"peerDependencies": {
 		"@earendil-works/pi-ai": "*",

package/src/ui/accounts.ts

@@ -1,6 +1,7 @@
 // The accounts of one provider in our frame: which one is in use, what each plan has left, and the
 // keys to switch, rename, remove or add one. Renaming and removing happen in place, so the list stays
 // where it is and says what changed.
+import { frame, frameInner, type FrameLine } from "@adeildo/pi-kit";
 import type { ExtensionContext, Theme } from "@earendil-works/pi-coding-agent";
 import {
 	type Component,
@@ -15,7 +16,6 @@ import {
 } from "@earendil-works/pi-tui";
 
 import type { UsageWindow } from "../usage/types.ts";
-import { frameBottom, frameInner, frameRow, frameTop } from "./frame.ts";
 import { quotaWindows } from "./quota.ts";
 
 /** What a row says past the account's name: its plan, or the trouble it is in. */
@@ -157,24 +157,25 @@ export class AccountsView implements Component, Focusable {
 		const states = new Map(rows.map((row) => [row.id, describeState(this.theme, row.state)]));
 		const columns = this.columns(rows, [...states.values()], inner);
 
-		const lines: string[] = [];
+		const lines: FrameLine[] = [];
 		if (rows.length === 0) lines.push(this.theme.fg("muted", this.listing.empty), "");
 		for (const item of items.slice(start, end)) {
 			const row = rows.find((candidate) => candidate.id === item);
-			if (row === undefined) lines.push(this.addLine());
-			else lines.push(this.accountLine(row, columns, states.get(row.id) ?? "", inner));
+			const text =
+				row === undefined
+					? this.addLine()
+					: this.accountLine(row, columns, states.get(row.id) ?? "", inner);
+			lines.push({ text, selected: item === this.cursor });
 		}
-		lines.push("");
 		const status = this.statusLine(rows);
-		if (status !== undefined) lines.push(status);
+		if (status !== undefined) lines.push("", status);
 		const position = start > 0 || end < items.length ? `${at + 1}/${items.length}` : undefined;
-		lines.push(this.hint(rows, position));
-
-		return [
-			frameTop(this.theme, `${this.listing.provider} accounts`, width),
-			...lines.map((line) => frameRow(this.theme, line, inner)),
-			frameBottom(this.theme, width),
-		];
+		const row = rows.find((candidate) => candidate.id === this.cursor);
+		return frame(this.theme, width, lines, {
+			title: `${this.listing.provider} accounts`,
+			keys: this.keys(row),
+			footnote: position === undefined ? "" : this.theme.fg("dim", position),
+		});
 	}
 
 	private browsing(data: string): void {
@@ -287,7 +288,7 @@ export class AccountsView implements Component, Focusable {
 		const editing = this.mode.kind !== "browse" && this.mode.id === row.id;
 		// Pi's own field draws the cursor where it is and scrolls a name longer than the column.
 		if (editing && this.mode.kind === "rename") return this.input.render(width)[0] ?? "";
-		const label = truncateToWidth(row.label, NAME_LIMIT, "…");
+		const label = truncateToWidth(row.label, NAME_LIMIT, "...");
 		if (editing) return this.theme.fg("error", label);
 		return chosen ? this.theme.bold(label) : label;
 	}
@@ -308,15 +309,6 @@ export class AccountsView implements Component, Focusable {
 		return this.theme.fg(this.note.tone, this.note.text);
 	}
 
-	private hint(rows: readonly AccountRow[], position: string | undefined): string {
-		const row = rows.find((candidate) => candidate.id === this.cursor);
-		const text = this.keys(row).map(
-			([key, action]) => `${this.theme.fg("muted", key)} ${this.theme.fg("dim", action)}`,
-		);
-		if (position !== undefined) text.push(this.theme.fg("dim", position));
-		return text.join("   ");
-	}
-
 	/** The keys that do something right now, and what each one does. */
 	private keys(row: AccountRow | undefined): [string, string][] {
 		if (this.mode.kind === "rename") {
@@ -368,7 +360,7 @@ export function describeState(theme: Theme, state: AccountState): string {
 		case "quota":
 			return quotaWindows(theme, state.windows);
 		case "reading":
-			return theme.fg("dim", "reading the plan…");
+			return theme.fg("dim", "reading the plan...");
 		case "signIn":
 			return theme.fg("error", "sign in again");
 		case "spent":

package/src/ui/login.ts

@@ -2,6 +2,7 @@
 // it waits for. The provider drives it through the interaction pi would hand it.
 import { spawn } from "node:child_process";
 
+import { frame, frameInner, type KeyHint } from "@adeildo/pi-kit";
 import type { AuthEvent, AuthPrompt, ProviderAuthInteraction } from "@earendil-works/pi-ai";
 import {
 	copyToClipboard,
@@ -21,8 +22,6 @@ import {
 	truncateToWidth,
 } from "@earendil-works/pi-tui";
 
-import { frameBottom, frameInner, frameRow, frameTop } from "./frame.ts";
-
 const MAX_LOG = 5;
 
 /** Pi's own Text wraps the URL and the instructions into the rows the frame draws. */
@@ -139,12 +138,11 @@ export class LoginView implements Component, Focusable {
 			rows.push(this.linkHint());
 		}
 		if (this.code !== undefined) rows.push(this.theme.bold(this.code));
-		rows.push("", ...this.promptRows(inner), "", this.hint());
-		return [
-			frameTop(this.theme, `Entrar · ${this.label}`, width),
-			...rows.map((row) => frameRow(this.theme, row, inner)),
-			frameBottom(this.theme, width),
-		];
+		rows.push("", ...this.promptRows(inner));
+		return frame(this.theme, width, rows, {
+			title: `Entrar · ${this.label}`,
+			keys: this.hint(),
+		});
 	}
 
 	/** Ends the screen; the login it was drawing ended one way or another. */
@@ -237,7 +235,7 @@ export class LoginView implements Component, Focusable {
 
 	private promptRows(inner: number): string[] {
 		const pending = this.pending;
-		if (pending === undefined) return [this.theme.fg("dim", "waiting…")];
+		if (pending === undefined) return [this.theme.fg("dim", "waiting...")];
 		const room = Math.max(1, inner - 2);
 		const asked = this.theme.fg("text", truncateToWidth(pending.prompt.message, inner));
 		if (pending.prompt.type === "select") {
@@ -259,20 +257,16 @@ export class LoginView implements Component, Focusable {
 		return [asked, `${this.theme.fg("accent", "❯ ")}${field}`];
 	}
 
-	private hint(): string {
-		const keys: [string, string][] =
-			this.pending?.prompt.type === "select"
-				? [
-						["↑↓", "move"],
-						["enter", "choose"],
-						["esc", "cancel"],
-					]
-				: [
-						["enter", "submit"],
-						["esc", "cancel"],
-					];
-		return keys
-			.map(([key, action]) => `${this.theme.fg("muted", key)} ${this.theme.fg("dim", action)}`)
-			.join("   ");
+	private hint(): KeyHint[] {
+		return this.pending?.prompt.type === "select"
+			? [
+					["↑↓", "move"],
+					["enter", "choose"],
+					["esc", "cancel"],
+				]
+			: [
+					["enter", "submit"],
+					["esc", "cancel"],
+				];
 	}
 }

package/src/ui/picker.ts

@@ -1,6 +1,6 @@
 // Our dialogs wear the same frame as the rest of the harness. A host that cannot draw a component,
 // like RPC, falls back to pi's own select.
-import { oneAtATime } from "@adeildo/pi-kit";
+import { frame, frameInner, type KeyHint, oneAtATime } from "@adeildo/pi-kit";
 import type { ExtensionContext } from "@earendil-works/pi-coding-agent";
 import type { Theme } from "@earendil-works/pi-coding-agent";
 import {
@@ -12,8 +12,6 @@ import {
 	visibleWidth,
 } from "@earendil-works/pi-tui";
 
-import { frameBottom, frameInner, frameRow, frameTop } from "./frame.ts";
-
 /** One row of a picker: a label, and a second column on the right. */
 export interface PickOption {
 	label: string;
@@ -21,6 +19,11 @@ export interface PickOption {
 }
 
 const POINTER = "\u276f ";
+const KEYS: KeyHint[] = [
+	["↑↓", "move"],
+	["enter", "select"],
+	["esc", "cancel"],
+];
 const MAX_VISIBLE = 10;
 const GAP = 2;
 const MIN_DESCRIPTION = 12;
@@ -109,15 +112,15 @@ export class FramedSelect implements Component {
 			start > 0 || end < this.options.length
 				? `${this.selected + 1}/${this.options.length}`
 				: undefined;
-		return [
-			frameTop(this.theme, this.title, width),
-			...this.options
-				.slice(start, end)
-				.map((option, index) => this.line(this.row(option, start + index, inner), inner)),
-			this.line("", inner),
-			this.line(this.hint(position), inner),
-			frameBottom(this.theme, width),
-		];
+		const rows = this.options.slice(start, end).map((option, index) => ({
+			text: this.row(option, start + index, inner),
+			selected: start + index === this.selected,
+		}));
+		return frame(this.theme, width, rows, {
+			title: this.title,
+			keys: KEYS,
+			footnote: position === undefined ? "" : this.theme.fg("dim", position),
+		});
 	}
 
 	/** One line: the pointer, the label, and the description in a column shared by every row. */
@@ -161,18 +164,4 @@ export class FramedSelect implements Component {
 		const option = this.options[this.selected];
 		if (option !== undefined) this.done(labelOf(option));
 	}
-
-	private hint(position: string | undefined): string {
-		const keys = [
-			`${this.theme.fg("muted", "↑↓")} ${this.theme.fg("dim", "move")}`,
-			`${this.theme.fg("muted", "enter")} ${this.theme.fg("dim", "select")}`,
-			`${this.theme.fg("muted", "esc")} ${this.theme.fg("dim", "cancel")}`,
-		];
-		if (position !== undefined) keys.push(this.theme.fg("dim", position));
-		return keys.join("   ");
-	}
-
-	private line(text: string, inner: number): string {
-		return frameRow(this.theme, text, inner);
-	}
 }

package/src/ui/frame.ts

@@ -1,27 +0,0 @@
-// The rounded frame every dialog of this package wears.
-import type { Theme } from "@earendil-works/pi-coding-agent";
-import { truncateToWidth, visibleWidth } from "@earendil-works/pi-tui";
-
-/** The columns a row's text may use, between the frame's sides and their padding. */
-export function frameInner(width: number): number {
-	return Math.max(1, width - 4);
-}
-
-export function frameTop(theme: Theme, title: string, width: number): string {
-	const border = (text: string) => theme.fg("border", text);
-	const room = Math.max(0, width - 5);
-	const label = theme.fg("accent", truncateToWidth(title, Math.max(0, room - 3), "…"));
-	const dashes = Math.max(0, room - visibleWidth(label));
-	return `${border("╭─ ")}${label}${border(` ${"─".repeat(dashes)}╮`)}`;
-}
-
-export function frameRow(theme: Theme, text: string, inner: number): string {
-	const border = theme.fg("border", "│");
-	const clipped = truncateToWidth(text, inner);
-	const pad = " ".repeat(Math.max(0, inner - visibleWidth(clipped)));
-	return `${border} ${clipped}${pad} ${border}`;
-}
-
-export function frameBottom(theme: Theme, width: number): string {
-	return theme.fg("border", `╰${"─".repeat(Math.max(0, width - 2))}╯`);
-}