pi-cliproxy-usage 0.1.1 → 0.2.1

package/README.md

@@ -2,13 +2,6 @@
 
 Compact CLIProxyAPI account usage meters for Pi Coding Agent.
 
-Code layout:
-
-- `index.ts` — Pi lifecycle and command wiring
-- `src/settings.ts` / `src/settings-ui.ts` — persisted and interactive settings
-- `src/usage.ts` / `src/parsers.ts` — account discovery, provider requests, response mapping
-- `src/ui.ts` — widget rendering and text formatting
-
 Shows one colored line below editor per enabled account:
 
 ```text
@@ -19,12 +12,19 @@ Shows one colored line below editor per enabled account:
 
 Percentages and filled bars show usage **consumed**. Colors shift green → yellow at 70% → red at 90%. Codex intentionally shows Session only; weekly meter is omitted.
 
+## Requirements
+
+- [Pi Coding Agent](https://github.com/earendil-works/pi)
+- [CLIProxyAPI](https://github.com/router-for-me/CLIProxyAPI) with at least one Claude, Codex, or Grok account configured
+
 ## Install
 
 ```bash
 pi install npm:pi-cliproxy-usage
 ```
 
+After installing or updating, run `/reload` in Pi.
+
 Or test directly:
 
 ```bash
@@ -41,6 +41,7 @@ Older `~/.pi/agent/extensions/pi-cliproxy-usage/config.json` files migrate autom
 {
   "accountsDir": "~/.cli-proxy-api",
   "refreshMinutes": 5,
+  "maxVisibleAccounts": 4,
   "providers": {
     "claude": true,
     "codex": true,
@@ -51,7 +52,7 @@ Older `~/.pi/agent/extensions/pi-cliproxy-usage/config.json` files migrate autom
 
 Extension reads top-level CLIProxyAPI auth JSON files with `type` equal to `claude`, `codex`, or `xai`. Disabled auth files are skipped. Credentials stay local and are sent only to official provider usage endpoints documented by OpenUsage.
 
-Accepted values: `accountsDir` is a non-empty string, `refreshMinutes` is an integer of at least `1`, and provider values are booleans. Invalid values are ignored with a warning. Unknown fields are preserved when saving.
+Accepted values: `accountsDir` is a non-empty string; `refreshMinutes` and `maxVisibleAccounts` are integers of at least `1`; provider values are booleans. Widget prioritizes errors, then accounts with highest usage, and shows an overflow row when more accounts exist. Invalid values are ignored with a warning. Unknown fields are preserved when saving.
 
 ## Commands
 
@@ -62,3 +63,11 @@ Accepted values: `accountsDir` is a non-empty string, `refreshMinutes` is an int
 - `/cliproxy-usage config` — compatibility alias for `settings`
 
 Token refresh is deliberately left to CLIProxyAPI. If provider returns `401`/`403`, let CLIProxyAPI refresh account or log in again.
+
+## Screenshot
+
+![CLIProxyAPI usage widget](https://raw.githubusercontent.com/Villoh/pi-cliproxy-usage/main/assets/preview.png)
+
+## Support
+
+Report bugs and request features in [GitHub Issues](https://github.com/Villoh/pi-cliproxy-usage/issues).

package/index.ts

@@ -31,7 +31,7 @@ export default function (pi: ExtensionAPI) {
 				ctx.ui.notify(loaded.warnings.join("; "), "warning");
 			}
 			const items = await readAccounts(loaded.settings);
-			renderUsage(ctx, items);
+			renderUsage(ctx, items, loaded.settings.maxVisibleAccounts);
 			if (notify) {
 				ctx.ui.notify(
 					formatDetails(items),
@@ -48,8 +48,19 @@ export default function (pi: ExtensionAPI) {
 		timer.unref?.();
 	};
 
-	const applySettings = async (ctx: ExtensionContext, settings: Settings) => {
+	const applySettings = async (
+		ctx: ExtensionContext,
+		settings: Settings,
+		changedId: string,
+	) => {
 		scheduleRefresh(ctx, settings.refreshMinutes);
+		// Only refetch when something that affects the fetched data changed.
+		// Interval/display-only changes (refreshMinutes, maxVisibleAccounts) must
+		// not trigger a request, or every settings tweak burns an API call and
+		// risks rate limiting.
+		if (changedId === "refreshMinutes" || changedId === "maxVisibleAccounts") {
+			return;
+		}
 		await refresh(ctx);
 	};
 
@@ -64,6 +75,7 @@ export default function (pi: ExtensionAPI) {
 				`Settings: ${loaded.path}`,
 				`Accounts: ${loaded.settings.accountsDir}`,
 				`Refresh: ${loaded.settings.refreshMinutes} min`,
+				`Visible accounts: ${loaded.settings.maxVisibleAccounts}`,
 				`Providers: ${providers || "none"}`,
 				`Source: ${Object.keys(loaded.raw).length ? "settings file" : "defaults"}`,
 			].join("\n"),
@@ -103,7 +115,7 @@ export default function (pi: ExtensionAPI) {
 					ctx,
 					SETTINGS_PATH,
 					LEGACY_SETTINGS_PATH,
-					(settings) => applySettings(ctx, settings),
+					(settings, changedId) => applySettings(ctx, settings, changedId),
 				);
 			}
 			if (action === "status") return showStatus(ctx);

package/package.json

@@ -1,17 +1,27 @@
 {
   "name": "pi-cliproxy-usage",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Compact CLIProxyAPI account usage meters for Pi Coding Agent",
   "type": "module",
-  "keywords": ["pi-package", "cliproxyapi", "usage"],
+  "keywords": [
+    "pi-package",
+    "cliproxyapi",
+    "usage"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Villoh/pi-cliproxy-usage.git"
   },
-  "files": ["index.ts", "src", "README.md"],
+  "files": [
+    "index.ts",
+    "src",
+    "README.md"
+  ],
   "pi": {
-    "extensions": ["./index.ts"]
+    "extensions": [
+      "./index.ts"
+    ]
   },
   "peerDependencies": {
     "@earendil-works/pi-coding-agent": "*",

package/src/settings-ui.ts

@@ -18,7 +18,7 @@ export async function showSettings(
 	ctx: ExtensionCommandContext,
 	settingsPath: string,
 	legacySettingsPath: string,
-	onChange: (settings: Settings) => Promise<void>,
+	onChange: (settings: Settings, changedId: string) => Promise<void>,
 ): Promise<void> {
 	if (ctx.mode !== "tui") {
 		if (ctx.hasUI)
@@ -55,11 +55,18 @@ export async function showSettings(
 			},
 			{
 				id: "refreshMinutes",
-				label: "Refresh interval",
+				label: "Refresh interval (min)",
 				description: "Minutes between automatic usage refreshes",
 				currentValue: String(settings.refreshMinutes),
 				values: ["1", "5", "10", "15", "30", "60"],
 			},
+			{
+				id: "maxVisibleAccounts",
+				label: "Visible accounts",
+				description: "Maximum account rows shown below editor",
+				currentValue: String(settings.maxVisibleAccounts),
+				values: ["1", "2", "3", "4", "5", "10"],
+			},
 			...(["claude", "codex", "grok"] as const).map((provider) => ({
 				id: provider,
 				label: `${provider[0]?.toUpperCase()}${provider.slice(1)}`,
@@ -84,6 +91,9 @@ export async function showSettings(
 				const previous = structuredClone(settings);
 				if (id === "accountsDir") settings.accountsDir = value;
 				if (id === "refreshMinutes") settings.refreshMinutes = Number(value);
+				if (id === "maxVisibleAccounts") {
+					settings.maxVisibleAccounts = Number(value);
+				}
 				if (providerIds.has(id as ProviderName)) {
 					settings.providers[id as ProviderName] = value === "enabled";
 				}
@@ -91,7 +101,7 @@ export async function showSettings(
 				saveQueue = saveQueue
 					.then(async () => {
 						raw = await saveSettings(next, raw, settingsPath);
-						await onChange(next);
+						await onChange(next, id);
 					})
 					.catch((error) => {
 						settings = previous;
@@ -99,6 +109,8 @@ export async function showSettings(
 						if (id === "accountsDir") previousValue = previous.accountsDir;
 						else if (id === "refreshMinutes") {
 							previousValue = String(previous.refreshMinutes);
+						} else if (id === "maxVisibleAccounts") {
+							previousValue = String(previous.maxVisibleAccounts);
 						} else {
 							previousValue = previous.providers[id as ProviderName]
 								? "enabled"

package/src/settings.ts

@@ -5,6 +5,7 @@ import type { Settings } from "./types.js";
 export const DEFAULT_SETTINGS: Settings = {
 	accountsDir: "~/.cli-proxy-api",
 	refreshMinutes: 5,
+	maxVisibleAccounts: 4,
 	providers: { claude: true, codex: true, grok: true },
 };
 
@@ -47,6 +48,15 @@ export function normalizeSettings(value: unknown): {
 	} else if (value.refreshMinutes !== undefined) {
 		warnings.push("ignored invalid refreshMinutes");
 	}
+	if (
+		typeof value.maxVisibleAccounts === "number" &&
+		Number.isInteger(value.maxVisibleAccounts) &&
+		value.maxVisibleAccounts > 0
+	) {
+		settings.maxVisibleAccounts = value.maxVisibleAccounts;
+	} else if (value.maxVisibleAccounts !== undefined) {
+		warnings.push("ignored invalid maxVisibleAccounts");
+	}
 	for (const provider of ["claude", "codex", "grok"] as const) {
 		if (typeof providers[provider] === "boolean") {
 			settings.providers[provider] = providers[provider];

package/src/types.ts

@@ -3,6 +3,7 @@ export type ProviderName = "claude" | "codex" | "grok";
 export type Settings = {
 	accountsDir: string;
 	refreshMinutes: number;
+	maxVisibleAccounts: number;
 	providers: Record<ProviderName, boolean>;
 };
 

package/src/ui.ts

@@ -13,8 +13,7 @@ const PROVIDER_LABELS: Record<ProviderName, string> = {
 };
 
 function accountLabel(label: string): string {
-	const local = label.includes("@") ? label.split("@")[0] : label;
-	return local.slice(0, 18);
+	return label;
 }
 
 export function usageBar(used: number, width = 10): string {
@@ -80,18 +79,37 @@ export function clearUsage(ctx: UiContext): void {
 	ctx.ui.setWidget("cliproxy-usage", undefined);
 }
 
-export function renderUsage(ctx: UiContext, items: AccountUsage[]): void {
+export function renderUsage(
+	ctx: UiContext,
+	items: AccountUsage[],
+	maxVisibleAccounts: number,
+): void {
 	ctx.ui.setStatus("cliproxy-usage", undefined);
 	if (!items.length) {
 		ctx.ui.setWidget("cliproxy-usage", undefined);
 		return;
 	}
+	const visibleItems = items
+		.map((item, index) => ({
+			item,
+			index,
+			priority: item.error
+				? Number.POSITIVE_INFINITY
+				: Math.max(item.session?.used ?? -1, item.weekly?.used ?? -1),
+		}))
+		.sort(
+			(left, right) =>
+				right.priority - left.priority || left.index - right.index,
+		)
+		.slice(0, maxVisibleAccounts)
+		.map(({ item }) => item);
+	const hiddenCount = items.length - visibleItems.length;
 	ctx.ui.setWidget(
 		"cliproxy-usage",
 		(_tui: unknown, theme: Theme) => ({
 			invalidate() {},
 			render(width: number): string[] {
-				return items.map((item) => {
+				const lines = visibleItems.map((item) => {
 					const providerColor =
 						item.provider === "claude"
 							? "warning"
@@ -127,6 +145,18 @@ export function renderUsage(ctx: UiContext, items: AccountUsage[]): void {
 						width,
 					);
 				});
+				if (hiddenCount) {
+					lines.push(
+						truncateAnsi(
+							theme.fg(
+								"dim",
+								`… ${hiddenCount} more account${hiddenCount === 1 ? "" : "s"} · /cliproxy-usage for details`,
+							),
+							width,
+						),
+					);
+				}
+				return lines;
 			},
 		}),
 		{ placement: "belowEditor" },