@aliou/pi-synthetic 0.10.2 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aliou/pi-synthetic",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "license": "MIT",
   "type": "module",
   "private": false,
@@ -17,7 +17,8 @@
     "extensions": [
       "./src/extensions/provider/index.ts",
       "./src/extensions/web-search/index.ts",
-      "./src/extensions/command-quotas/index.ts"
+      "./src/extensions/command-quotas/index.ts",
+      "./src/extensions/quota-warnings/index.ts"
     ],
     "video": "https://assets.aliou.me/pi-extensions/demos/pi-synthetic.mp4"
   },

package/src/extensions/command-quotas/command.ts

@@ -19,10 +19,19 @@ export function registerQuotasCommand(pi: ExtensionAPI): void {
 
       const result = await ctx.ui.custom<null>((tui, theme, _kb, done) => {
         const controller = new AbortController();
-        const component = new QuotasComponent(theme, tui, () => {
-          controller.abort();
-          done(null);
-        });
+        const component = new QuotasComponent(
+          theme,
+          tui,
+          () => {
+            controller.abort();
+            done(null);
+          },
+          () => {
+            component.setState({ type: "loading" });
+            tui.requestRender();
+            void loadQuotas();
+          },
+        );
 
         async function loadQuotas(): Promise<void> {
           const fetchResult = await fetchQuotas(key, controller.signal);

package/src/extensions/command-quotas/components/quotas-display.ts

@@ -1,196 +1,32 @@
 import type { Theme } from "@mariozechner/pi-coding-agent";
 import { DynamicBorder } from "@mariozechner/pi-coding-agent";
 import type { Component, TUI } from "@mariozechner/pi-tui";
-import {
-  Loader,
-  matchesKey,
-  truncateToWidth,
-  visibleWidth,
-} from "@mariozechner/pi-tui";
+import { Loader, matchesKey, truncateToWidth } from "@mariozechner/pi-tui";
 import type { QuotasResponse } from "../../../types/quotas";
+import {
+  assessWindow,
+  formatTimeRemaining,
+  getSeverityColor,
+  type QuotaWindow,
+  toWindows,
+} from "../../../utils/quotas-severity";
 
 type QuotasState =
   | { type: "loading" }
   | { type: "error"; message: string }
   | { type: "loaded"; quotas: QuotasResponse };
 
-interface QuotaWindow {
-  label: string;
-  usedPercent: number;
-  resetsAt: Date;
-  windowSeconds: number;
-  usedValue: number;
-  limitValue: number;
-  isCredits?: boolean;
-  isLimited?: boolean;
-  tickPercent?: number;
-  nextRegenCredits?: string;
-}
-
-/** Safely compute percentage, guarding against division by zero */
-function safePercent(used: number, limit: number): number {
-  if (!Number.isFinite(used) || !Number.isFinite(limit) || limit <= 0) return 0;
-  return Math.max(0, Math.min(100, (used / limit) * 100));
-}
-
-/** Parse currency string like "$1,234.56" to number */
-function parseCurrency(value: string): number {
-  const n = Number(value.replace(/[^0-9.-]/g, ""));
-  return Number.isFinite(n) ? n : 0;
-}
-
-function toWindows(quotas: QuotasResponse): QuotaWindow[] {
-  const windows: QuotaWindow[] = [];
-
-  // Weekly token limit (credits-based)
-  if (quotas.weeklyTokenLimit) {
-    const { weeklyTokenLimit } = quotas;
-    const limitValue = parseCurrency(weeklyTokenLimit.maxCredits);
-    const remainingValue = parseCurrency(weeklyTokenLimit.remainingCredits);
-    windows.push({
-      label: "Credits",
-      usedPercent: Math.max(
-        0,
-        Math.min(100, 100 - weeklyTokenLimit.percentRemaining),
-      ),
-      resetsAt: new Date(weeklyTokenLimit.nextRegenAt),
-      windowSeconds: 7 * 24 * 60 * 60,
-      usedValue: limitValue - remainingValue,
-      limitValue,
-      isCredits: true,
-      nextRegenCredits: weeklyTokenLimit.nextRegenCredits,
-    });
-  }
-
-  // Rolling 5-hour limit (request-based)
-  if (quotas.rollingFiveHourLimit && quotas.rollingFiveHourLimit.max > 0) {
-    const { rollingFiveHourLimit } = quotas;
-    windows.push({
-      label: "5h",
-      usedPercent: safePercent(
-        rollingFiveHourLimit.max - rollingFiveHourLimit.remaining,
-        rollingFiveHourLimit.max,
-      ),
-      resetsAt: new Date(rollingFiveHourLimit.nextTickAt),
-      windowSeconds: 5 * 60 * 60,
-      usedValue: rollingFiveHourLimit.max - rollingFiveHourLimit.remaining,
-      limitValue: rollingFiveHourLimit.max,
-      isLimited: rollingFiveHourLimit.limited,
-      tickPercent: rollingFiveHourLimit.tickPercent,
-    });
-  }
-
-  // Legacy subscription (fallback if rollingFiveHourLimit not available)
-  if (
-    !quotas.rollingFiveHourLimit &&
-    quotas.subscription?.limit &&
-    quotas.subscription.limit > 0
-  ) {
-    windows.push({
-      label: "Completions",
-      usedPercent: safePercent(
-        quotas.subscription.requests,
-        quotas.subscription.limit,
-      ),
-      resetsAt: new Date(quotas.subscription.renewsAt),
-      windowSeconds: 5 * 60 * 60,
-      usedValue: quotas.subscription.requests,
-      limitValue: quotas.subscription.limit,
-    });
-  }
-
-  if (quotas.search?.hourly?.limit && quotas.search.hourly.limit > 0) {
-    windows.push({
-      label: "Search",
-      usedPercent: safePercent(
-        quotas.search.hourly.requests,
-        quotas.search.hourly.limit,
-      ),
-      resetsAt: new Date(quotas.search.hourly.renewsAt),
-      windowSeconds: 60 * 60,
-      usedValue: quotas.search.hourly.requests,
-      limitValue: quotas.search.hourly.limit,
-    });
-  }
-
-  if (quotas.freeToolCalls?.limit && quotas.freeToolCalls.limit > 0) {
-    windows.push({
-      label: "Free Tool Calls",
-      usedPercent: safePercent(
-        quotas.freeToolCalls.requests,
-        quotas.freeToolCalls.limit,
-      ),
-      resetsAt: new Date(quotas.freeToolCalls.renewsAt),
-      windowSeconds: 24 * 60 * 60,
-      usedValue: quotas.freeToolCalls.requests,
-      limitValue: quotas.freeToolCalls.limit,
-    });
-  }
-
-  return windows;
-}
-
-function getPacePercent(window: QuotaWindow): number | null {
-  const totalMs = window.windowSeconds * 1000;
-  if (totalMs <= 0) return null;
-  const remainingMs = window.resetsAt.getTime() - Date.now();
-  const elapsedMs = totalMs - remainingMs;
-  return Math.max(0, Math.min(100, (elapsedMs / totalMs) * 100));
-}
-
-function getProjectedPercent(
-  usedPercent: number,
-  pacePercent: number | null,
-): number {
-  if (pacePercent === null) return usedPercent;
-  const effectivePace = Math.max(5, pacePercent);
-  return Math.max(0, (usedPercent / effectivePace) * 100);
-}
-
-function getSeverity(
-  projectedPercent: number,
-  pacePercent: number | null,
-): "success" | "warning" | "error" {
-  if (pacePercent === null) {
-    if (projectedPercent >= 100) return "error";
-    if (projectedPercent >= 90) return "warning";
-    return "success";
-  }
-  // Dynamic thresholds based on window progress
-  const progress = pacePercent / 100;
-  const warnThreshold = 260 - (260 - 120) * progress;
-  const highThreshold = 320 - (320 - 145) * progress;
-  const criticalThreshold = 400 - (400 - 170) * progress;
-
-  if (projectedPercent >= criticalThreshold) return "error";
-  if (projectedPercent >= highThreshold) return "error";
-  if (projectedPercent >= warnThreshold) return "warning";
-  return "success";
-}
-
-function formatResetDateTime(date: Date): string {
-  const now = new Date();
-  const isToday =
-    date.getDate() === now.getDate() &&
-    date.getMonth() === now.getMonth() &&
-    date.getFullYear() === now.getFullYear();
-
-  const timeStr = date.toLocaleTimeString("en-US", {
-    hour: "numeric",
-    minute: "2-digit",
-    hour12: true,
-  });
-
-  if (isToday) {
-    return `today ${timeStr}`;
-  }
-
-  const dateStr = date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-  });
-
-  return `${dateStr} ${timeStr}`;
+/**
+ * Convert a foreground ANSI escape to its background equivalent.
+ * Handles truecolor (38;2), 256-color (38;5), and basic (3X) escapes.
+ */
+function fgAnsiToBg(fgAnsi: string): string {
+  // Convert fg escape sequences to bg equivalents by replacing the
+  // discriminating digit: 38 (truecolor/256) → 48, 3X (basic) → 4X.
+  return fgAnsi
+    .split("[38;")
+    .join("[48;")
+    .replace(/\[3([0-9])m/g, "[4$1m");
 }
 
 function renderProgressBar(
@@ -202,45 +38,40 @@ function renderProgressBar(
 ): string {
   const clamped = Math.max(0, Math.min(100, Math.round(percent)));
   const filled = Math.round((clamped / 100) * width);
-  const paceIndex =
-    pacePercent === null || pacePercent === undefined || pacePercent <= percent
-      ? null
-      : Math.round((Math.max(0, Math.min(100, pacePercent)) / 100) * width);
 
-  const parts: string[] = [];
-  for (let idx = 0; idx < width; idx++) {
-    if (idx < filled) {
-      parts.push(theme.fg(fillColor, "█"));
-    } else if (paceIndex !== null && idx < paceIndex) {
-      parts.push(theme.fg(fillColor, "▓"));
-    } else {
-      parts.push(theme.fg("dim", "░"));
-    }
-  }
+  const showPace =
+    pacePercent !== null &&
+    pacePercent !== undefined &&
+    pacePercent >= 5 &&
+    Math.abs(pacePercent - percent) >= 5;
+  const paceIndex = showPace
+    ? Math.min(
+        width - 1,
+        Math.round(
+          (Math.max(0, Math.min(100, pacePercent ?? 0)) / 100) * width,
+        ),
+      )
+    : null;
 
-  return parts.join("");
-}
+  const reset = "\x1b[0m";
 
-function renderSimpleIndicatorBar(
-  usedPercent: number,
-  width: number,
-  theme: Theme,
-  severity: "success" | "warning" | "error",
-): string {
-  const clampedPercent = Math.max(0, Math.min(100, usedPercent));
-  // Clamp to width - 1 to avoid off-by-one when usedPercent === 100
-  const usedIndex = Math.min(
-    Math.round((clampedPercent / 100) * width),
-    width - 1,
-  );
   const parts: string[] = [];
-
-  // Hide marker when within 5% of edges
-  const showMarker = clampedPercent >= 5 && clampedPercent <= 95;
-
   for (let idx = 0; idx < width; idx++) {
-    if (showMarker && idx === usedIndex) {
-      parts.push(theme.fg(severity, "|"));
+    if (paceIndex !== null && idx === paceIndex) {
+      // Inside fill = ahead of pace: accent. Outside = behind pace: severity.
+      const markerColor = idx < filled ? "accent" : fillColor;
+      // Inside fill: set bg to fill color so `|` doesn't expose the panel bg
+      // through the thin character. Outside fill: ░ uses terminal bg naturally,
+      // so leave bg unset to match.
+      if (idx < filled) {
+        const bgAnsi = fgAnsiToBg(theme.getFgAnsi(fillColor));
+        const fgAnsi = theme.getFgAnsi(markerColor);
+        parts.push(`${bgAnsi}${fgAnsi}|${reset}`);
+      } else {
+        parts.push(theme.fg(markerColor, "|"));
+      }
+    } else if (idx < filled) {
+      parts.push(theme.fg(fillColor, "█"));
     } else {
       parts.push(theme.fg("dim", "░"));
     }
@@ -254,12 +85,19 @@ export class QuotasComponent implements Component {
   private theme: Theme;
   private tui: TUI;
   private onClose: () => void;
+  private onRefetch: () => void;
   private loader: Loader | null = null;
 
-  constructor(theme: Theme, tui: TUI, onClose: () => void) {
+  constructor(
+    theme: Theme,
+    tui: TUI,
+    onClose: () => void,
+    onRefetch: () => void,
+  ) {
     this.theme = theme;
     this.tui = tui;
     this.onClose = onClose;
+    this.onRefetch = onRefetch;
     this.startLoader();
   }
 
@@ -278,7 +116,10 @@ export class QuotasComponent implements Component {
   }
 
   setState(state: QuotasState): void {
-    if (this.state.type === "loading" && state.type !== "loading") {
+    if (state.type === "loading") {
+      this.loader?.stop();
+      this.startLoader();
+    } else if (this.state.type === "loading") {
       this.loader?.stop();
       this.loader = null;
     }
@@ -290,6 +131,10 @@ export class QuotasComponent implements Component {
       this.onClose();
       return true;
     }
+    if (data === "r") {
+      this.onRefetch();
+      return true;
+    }
     return false;
   }
 
@@ -326,7 +171,7 @@ export class QuotasComponent implements Component {
     }
 
     lines.push("");
-    lines.push(this.theme.fg("dim", "  q/Esc to close"));
+    lines.push(this.theme.fg("dim", "  r to refresh  q/Esc to close"));
     lines.push(...border.render(width));
 
     return lines;
@@ -362,134 +207,44 @@ export class QuotasComponent implements Component {
     const lines: string[] = [];
     const theme = this.theme;
 
-    const pacePercent = getPacePercent(window);
-    const projectedPercent = getProjectedPercent(
-      window.usedPercent,
-      pacePercent,
-    );
-    const severity = getSeverity(projectedPercent, pacePercent);
+    const assessment = assessWindow(window);
+    const color = getSeverityColor(assessment.severity);
 
     // Label
     lines.push(
       truncateToWidth(`  ${theme.fg("accent", window.label)}`, maxWidth),
     );
 
-    // Progress bar + usage (or indicator for new quota types)
-    if (window.isCredits || window.tickPercent !== undefined) {
-      // Show simple indicator bar for new quota types
-      const bar = renderSimpleIndicatorBar(
-        window.usedPercent,
-        barWidth,
-        theme,
-        severity,
-      );
-      const usedStr = window.isCredits
-        ? `$${window.usedValue.toFixed(2)}/$${window.limitValue.toFixed(2)} (${Math.round(window.usedPercent)}%)`
-        : `${window.usedValue.toFixed(0)}/${window.limitValue.toFixed(0)} (${Math.round(window.usedPercent)}%)`;
-      const limitedBadge = window.isLimited
-        ? theme.fg("error", " LIMITED")
-        : "";
-      lines.push(
-        truncateToWidth(
-          `  ${bar} ${theme.fg(severity, usedStr)}${limitedBadge}`,
-          maxWidth,
-        ),
-      );
-    } else {
-      // Traditional progress bar for legacy quota types
-      const bar = renderProgressBar(
-        window.usedPercent,
-        barWidth,
-        theme,
-        severity,
-        pacePercent,
-      );
-      const usedStr = `${window.usedValue.toLocaleString()}/${window.limitValue.toLocaleString()} (${Math.round(window.usedPercent)}%)`;
-      lines.push(
-        truncateToWidth(`  ${bar} ${theme.fg(severity, usedStr)}`, maxWidth),
-      );
-    }
-
-    // Metadata: estimated + pace left, reset time right
-    const leftParts: string[] = [];
-
-    // Show tick info for rolling window
-    if (window.tickPercent !== undefined) {
-      const now = Date.now();
-      const remainingMs = window.resetsAt.getTime() - now;
-      const remainingMins = Math.ceil(remainingMs / (1000 * 60));
-      const remainingSecs = Math.ceil(remainingMs / 1000);
-      const timeStr =
-        remainingMs <= 0
-          ? "now"
-          : remainingMins >= 1
-            ? `${remainingMins}m`
-            : `${remainingSecs}s`;
-      const tickValue = (window.tickPercent / 100) * window.limitValue;
-      const tickStr = `+${tickValue.toFixed(1)} in ${timeStr}`;
-      leftParts.push(theme.fg("dim", tickStr));
-    }
-
-    // Show next regen credits for weekly token limit
-    if (window.nextRegenCredits !== undefined) {
-      const now = Date.now();
-      const remainingMs = window.resetsAt.getTime() - now;
-      const remainingHours = Math.ceil(remainingMs / (1000 * 60 * 60));
-      const remainingMins = Math.ceil(remainingMs / (1000 * 60));
-      const timeStr =
-        remainingMs <= 0
-          ? "now"
-          : remainingHours >= 1
-            ? `${remainingHours}h`
-            : `${remainingMins}m`;
-      const regenStr = `+${window.nextRegenCredits} in ${timeStr}`;
-      leftParts.push(theme.fg("dim", regenStr));
-    }
+    // Bar + usage
+    const bar = renderProgressBar(
+      window.usedPercent,
+      barWidth,
+      theme,
+      color,
+      assessment.pacePercent,
+    );
+    const usedStr = window.isCurrency
+      ? `${Math.round(window.usedPercent)}%/$${window.limitValue.toFixed(2)}`
+      : `${Math.round(window.usedPercent)}%/${window.limitValue}`;
+    const limitedBadge = window.limited ? theme.fg("error", " LIMITED") : "";
+    lines.push(
+      truncateToWidth(
+        `  ${bar} ${theme.fg(color, usedStr)}${limitedBadge}`,
+        maxWidth,
+      ),
+    );
 
-    if (
-      projectedPercent > 0 &&
-      window.tickPercent === undefined &&
-      window.nextRegenCredits === undefined
-    ) {
-      const estStr = `est ${Math.round(projectedPercent)}%`;
-      leftParts.push(
-        severity !== "success"
-          ? theme.fg(severity, estStr)
-          : theme.fg("dim", estStr),
+    // Subtitle: next event info
+    if (window.nextLabel) {
+      const timeStr = formatTimeRemaining(window.resetsAt);
+      const subtitleStr = window.nextAmount
+        ? `${window.nextAmount} in ${timeStr}`
+        : `${window.nextLabel} in ${timeStr}`;
+      lines.push(
+        truncateToWidth(`  ${theme.fg("dim", subtitleStr)}`, maxWidth),
       );
     }
 
-    if (
-      pacePercent !== null &&
-      window.tickPercent === undefined &&
-      window.nextRegenCredits === undefined
-    ) {
-      const paceDiff = window.usedPercent - pacePercent;
-      if (Math.abs(paceDiff) > 5) {
-        if (paceDiff > 0) {
-          leftParts.push(
-            theme.fg("warning", `${Math.round(Math.abs(paceDiff))}% ahead`),
-          );
-        } else {
-          leftParts.push(
-            theme.fg("success", `${Math.round(Math.abs(paceDiff))}% behind`),
-          );
-        }
-      }
-    }
-
-    const leftStr = leftParts.join("  ");
-    const resetStr = formatResetDateTime(window.resetsAt);
-    const rightStr = theme.fg("dim", resetStr);
-
-    const leftW = visibleWidth(leftStr);
-    const rightW = visibleWidth(rightStr);
-    const gap = Math.max(2, barWidth - leftW - rightW);
-
-    lines.push(
-      truncateToWidth(`  ${leftStr}${" ".repeat(gap)}${rightStr}`, maxWidth),
-    );
-
     return lines;
   }
 

package/src/extensions/provider/models.ts

@@ -36,7 +36,7 @@ const SYNTHETIC_REASONING_EFFORT_MAP = {
 } as const;
 
 export const SYNTHETIC_MODELS: SyntheticModelConfig[] = [
-  // API: hf:zai-org/GLM-4.7 → ctx=202752, multimodal
+  // API: hf:zai-org/GLM-4.7 → ctx=202752
   {
     id: "hf:zai-org/GLM-4.7",
     name: "zai-org/GLM-4.7",
@@ -45,11 +45,11 @@ export const SYNTHETIC_MODELS: SyntheticModelConfig[] = [
       supportsReasoningEffort: true,
       reasoningEffortMap: SYNTHETIC_REASONING_EFFORT_MAP,
     },
-    input: ["text", "image"],
+    input: ["text"],
     cost: {
-      input: 2.19,
+      input: 0.45,
       output: 2.19,
-      cacheRead: 2.19,
+      cacheRead: 0.45,
       cacheWrite: 0,
     },
     contextWindow: 202752,

package/src/extensions/quota-warnings/index.ts

@@ -0,0 +1,22 @@
+import type { ExtensionAPI } from "@mariozechner/pi-coding-agent";
+import { clearAlertState, triggerCheck } from "./notifier";
+
+export default async function (pi: ExtensionAPI) {
+  // Session start: reset local warning state and run an immediate check
+  pi.on("session_start", async (_event, ctx) => {
+    if (ctx.model?.provider !== "synthetic") return;
+    clearAlertState();
+    triggerCheck(ctx, ctx.model, false);
+  });
+
+  // Check after agent turn - only warn for newly crossed thresholds
+  pi.on("agent_end", async (_event, ctx) => {
+    if (ctx.model?.provider !== "synthetic") return;
+    triggerCheck(ctx, ctx.model, true);
+  });
+
+  // Clear state on shutdown
+  pi.on("session_shutdown", async () => {
+    clearAlertState();
+  });
+}