@monotykamary/pi-better-openai 0.1.43 → 0.1.44

package/index.ts

@@ -4,7 +4,12 @@
  * Adds `service_tier: "priority"` to OpenAI provider payloads while fast mode is
  * enabled and the selected model is in the configured allow-list.
  */
-import { type ExtensionAPI, type ExtensionContext } from "@earendil-works/pi-coding-agent";
+import {
+  type ExtensionAPI,
+  type ExtensionContext,
+  type Theme,
+  type ThemeColor,
+} from "@earendil-works/pi-coding-agent";
 import {
   Container,
   Key,
@@ -58,6 +63,8 @@ import {
   applySettingToRawConfig,
 } from "./src/config.ts";
 import {
+  type UsageSegment,
+  type UsageSeverity,
   formatPercent,
   formatUsageSnapshot,
   parseUsageSnapshot,
@@ -114,6 +121,46 @@ const requireSettingsListTheme = (): SettingsListTheme => {
   return loadedSettingsListTheme;
 };
 
+const USAGE_SEVERITY_COLORS: Record<UsageSeverity, ThemeColor> = {
+  ok: "success",
+  warning: "warning",
+  critical: "error",
+  muted: "dim",
+};
+
+/**
+ * Keep a coloured segment on one line. Unlike sanitizeStatusText this leaves the
+ * spacing shared by neighbouring segments ("Usage: " + "5h: " + "90%") intact.
+ */
+function flattenSegment(text: string): string {
+  return text.replace(/[\r\n\t]+/g, " ");
+}
+
+/**
+ * Colour a usage line segment by segment: the percentages carry the severity
+ * colour while the labels, countdowns and banked resets stay dim.
+ */
+function colorizeUsageSegments(segments: UsageSegment[], theme: Theme): string {
+  return segments
+    .map((segment) =>
+      theme.fg(USAGE_SEVERITY_COLORS[segment.severity], flattenSegment(segment.text)),
+    )
+    .join("");
+}
+
+/** Pair the fast-mode segment with the usage segments for the status widget. */
+function statusWidgetParts(
+  fast: string | undefined,
+  usage: UsageSegment[] | undefined,
+): UsageSegment[] | undefined {
+  const parts: UsageSegment[] = fast ? [{ text: fast, severity: "muted" }] : [];
+  if (usage?.length) {
+    if (parts.length > 0) parts.push({ text: " · ", severity: "muted" });
+    parts.push(...usage);
+  }
+  return parts.length > 0 ? parts : undefined;
+}
+
 class DynamicBorder {
   readonly #color: (text: string) => string;
 
@@ -1188,8 +1235,10 @@ export default function betterOpenAI(pi: ExtensionAPI): void {
           const petColumnWidth = Math.min(petRenderSizeCells, Math.max(1, width - 1));
           const footerTextWidth = inlinePet ? Math.max(1, width - petColumnWidth - 2) : width;
 
-          const usageStatusLine = usageController.statusLine(ctx, cfg, usingSubscription);
-          const usageLine = usageStatusLine ? theme.fg("dim", usageStatusLine) : undefined;
+          const usageStatusSegments = usageController.statusSegments(ctx, cfg, usingSubscription);
+          const usageLine = usageStatusSegments
+            ? colorizeUsageSegments(usageStatusSegments, theme)
+            : undefined;
 
           let statsLeft = parts.join(" ");
           let statsLeftWidth = visibleWidth(statsLeft);
@@ -1315,22 +1364,22 @@ export default function betterOpenAI(pi: ExtensionAPI): void {
     statusInstalled = text !== undefined;
   }
 
-  function setStatusWidget(ctx: ExtensionContext, text: string | undefined): void {
-    if (!text && !statusWidgetInstalled) return;
+  function setStatusWidget(ctx: ExtensionContext, parts: UsageSegment[] | undefined): void {
+    if (!parts && !statusWidgetInstalled) return;
     ctx.ui.setWidget(
       STATUS_KEY,
-      text
+      parts
         ? (_tui, theme) => ({
             invalidate() {},
             render(width: number): string[] {
-              const line = theme.fg("dim", sanitizeStatusText(text));
+              const line = colorizeUsageSegments(parts, theme);
               return [truncateToWidth(line, width, theme.fg("dim", "..."))];
             },
           })
         : undefined,
       { placement: "belowEditor" },
     );
-    statusWidgetInstalled = text !== undefined;
+    statusWidgetInstalled = parts !== undefined;
   }
 
   function updateFooter(ctx: ExtensionContext): void {
@@ -1366,8 +1415,8 @@ export default function betterOpenAI(pi: ExtensionAPI): void {
     }
 
     const fast = fastController.statusSegment(ctx, cfg);
-    const usage = usageController.statusLine(ctx, cfg);
-    setStatusWidget(ctx, [fast, usage].filter(Boolean).join(" · ") || undefined);
+    const usage = usageController.statusSegments(ctx, cfg);
+    setStatusWidget(ctx, statusWidgetParts(fast, usage));
   }
 
   pi.on("session_start", (_event, ctx) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monotykamary/pi-better-openai",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "description": "Improve OpenAI in pi with fast mode, usage stats, realtime voice, image generation, and footer polish.",
   "keywords": [
     "fast",

package/src/usage-controller.ts

@@ -3,6 +3,7 @@ import type { ResolvedConfig } from "./config.ts";
 import { maskIdentifier, sanitizeDiagnosticError } from "./format.ts";
 import {
   AUTH_FILE,
+  type UsageSegment,
   type UsageSnapshot,
   formatResetCountdown,
   formatUsageSnapshot,
@@ -10,6 +11,7 @@ import {
   readCodexAuth,
   requestCodexUsage,
   usageScopeForModel,
+  usageSegments,
 } from "./usage.ts";
 import { currentModelKey } from "./fast-controller.ts";
 
@@ -70,20 +72,30 @@ export class UsageController {
     return this.usageSnapshot;
   }
 
-  statusLine(
+  statusSegments(
     ctx: ExtensionContext,
     cfg = this.getConfig(ctx),
     isUsingOAuth?: boolean,
-  ): string | undefined {
+  ): UsageSegment[] | undefined {
     return this.usageSnapshot &&
       !this.usageError &&
       this.usageSnapshot.scope === usageScopeForModel(ctx.model?.id) &&
       cfg.usage.enabled &&
       isOpenAISubscriptionModel(ctx, cfg, isUsingOAuth)
-      ? formatUsageSnapshot(this.usageSnapshot, cfg.usage)
+      ? usageSegments(this.usageSnapshot, cfg.usage)
       : undefined;
   }
 
+  statusLine(
+    ctx: ExtensionContext,
+    cfg = this.getConfig(ctx),
+    isUsingOAuth?: boolean,
+  ): string | undefined {
+    return this.statusSegments(ctx, cfg, isUsingOAuth)
+      ?.map((segment) => segment.text)
+      .join("");
+  }
+
   formatStatus(ctx: ExtensionContext): string {
     const cfg = this.getConfig(ctx);
     if (!cfg.usage.enabled) return "Usage display is disabled.";

package/src/usage.ts

@@ -253,11 +253,29 @@ export function formatPercent(value: number | null): string {
     : "--";
 }
 
-export function formatUsageSnapshot(
+export type UsageSeverity = "ok" | "warning" | "critical" | "muted";
+
+export type UsageSegment = {
+  text: string;
+  severity: UsageSeverity;
+};
+
+/** Remaining budget at or below these thresholds turns the percentage amber/red. */
+const WARNING_LEFT_PERCENT = 30;
+const CRITICAL_LEFT_PERCENT = 10;
+
+export function severityForLeftPercent(percent: number | null): UsageSeverity {
+  if (percent === null) return "muted";
+  if (percent <= CRITICAL_LEFT_PERCENT) return "critical";
+  if (percent <= WARNING_LEFT_PERCENT) return "warning";
+  return "ok";
+}
+
+export function usageSegments(
   snapshot: UsageSnapshot,
   options: { showResetTimes: boolean; showBankedResets?: boolean },
   now = Date.now(),
-): string {
+): UsageSegment[] {
   const windows = [
     {
       label: "5h",
@@ -276,24 +294,41 @@ export function formatUsageSnapshot(
     (window) => window.percent !== null || window.resetSeconds !== null,
   );
   const displayedWindows = availableWindows.length > 0 ? availableWindows : windows;
-  const usage = displayedWindows
-    .map((window) => `${window.label}: ${formatPercent(window.percent)}`)
-    .join(" · ");
-  const resets = options.showResetTimes
-    ? displayedWindows
-        .map((window) =>
-          formatCompactReset(
-            displayedWindows.length > 1 ? window.label : undefined,
-            remainingResetSeconds(window.resetSeconds, snapshot.capturedAt, now),
-            window.includeDate ? { includeDate: true } : undefined,
-            now,
-          ),
-        )
-        .filter((value): value is string => value !== null)
-    : [];
+  const segments: UsageSegment[] = [{ text: "Usage: ", severity: "muted" }];
+  displayedWindows.forEach((window, index) => {
+    if (index > 0) segments.push({ text: " · ", severity: "muted" });
+    segments.push({ text: `${window.label}: `, severity: "muted" });
+    segments.push({
+      text: formatPercent(window.percent),
+      severity: severityForLeftPercent(window.percent),
+    });
+  });
+  if (options.showResetTimes) {
+    for (const window of displayedWindows) {
+      const reset = formatCompactReset(
+        displayedWindows.length > 1 ? window.label : undefined,
+        remainingResetSeconds(window.resetSeconds, snapshot.capturedAt, now),
+        window.includeDate ? { includeDate: true } : undefined,
+        now,
+      );
+      if (reset) segments.push({ text: ` · ${reset}`, severity: "muted" });
+    }
+  }
   const banked =
     options.showBankedResets === false ? null : formatBankedResetsSuffix(snapshot.bankedResets);
-  return `Usage: ${usage}${resets.length ? ` · ${resets.join(" · ")}` : ""}${banked ? ` · ${banked}` : ""}`;
+  if (banked) segments.push({ text: ` · ${banked}`, severity: "muted" });
+  return segments;
+}
+
+/** Flat text form of {@link usageSegments}, used for status lines and notifications. */
+export function formatUsageSnapshot(
+  snapshot: UsageSnapshot,
+  options: { showResetTimes: boolean; showBankedResets?: boolean },
+  now = Date.now(),
+): string {
+  return usageSegments(snapshot, options, now)
+    .map((segment) => segment.text)
+    .join("");
 }
 
 export function formatBankedResetsSuffix(count: number | null): string | null {