@aliou/pi-synthetic 0.4.6 → 0.5.0

package/package.json

@@ -1,27 +1,40 @@
 {
   "name": "@aliou/pi-synthetic",
-  "version": "0.4.6",
+  "version": "0.5.0",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "keywords": [
+    "pi-package",
+    "pi-extension",
+    "pi"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/aliou/pi-synthetic"
   },
-  "keywords": [
-    "pi-package"
-  ],
   "pi": {
     "extensions": [
       "./src/index.ts"
     ],
     "video": "https://assets.aliou.me/pi-extensions/demos/pi-synthetic.mp4"
   },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
   "peerDependencies": {
-    "@mariozechner/pi-coding-agent": ">=0.52.7"
+    "@mariozechner/pi-coding-agent": ">=0.52.7",
+    "@mariozechner/pi-tui": ">=0.51.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "^2.3.13",
+    "@aliou/biome-plugins": "^0.3.2",
+    "@biomejs/biome": "^2.4.2",
     "@changesets/cli": "^2.27.11",
     "@mariozechner/pi-coding-agent": "0.52.7",
-    "@mariozechner/pi-tui": "0.52.7",
     "@sinclair/typebox": "^0.34.48",
     "@types/node": "^25.0.10",
     "husky": "^9.1.7",
@@ -30,12 +43,16 @@
   "peerDependenciesMeta": {
     "@mariozechner/pi-coding-agent": {
       "optional": true
+    },
+    "@mariozechner/pi-tui": {
+      "optional": true
     }
   },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "lint": "biome check",
     "format": "biome check --write",
+    "check:lockfile": "pnpm install --frozen-lockfile --ignore-scripts",
     "changeset": "changeset",
     "version": "changeset version",
     "release": "pnpm changeset publish"

package/src/commands/quotas.ts

@@ -3,22 +3,12 @@ import type { Component } from "@mariozechner/pi-tui";
 import { QuotasDisplayComponent } from "../components/quotas-display";
 import { QuotasErrorComponent } from "../components/quotas-error";
 import { QuotasLoadingComponent } from "../components/quotas-loading";
-import type { QuotasResponse } from "../types/quotas";
+import { fetchQuotas } from "../utils/quotas";
 
 export function registerQuotasCommand(pi: ExtensionAPI): void {
   pi.registerCommand("synthetic:quotas", {
     description: "Display Synthetic API usage quotas",
     handler: async (_args, ctx) => {
-      if (!ctx.hasUI) {
-        const quotas = await fetchQuotas();
-        if (!quotas) {
-          console.error("Failed to fetch quotas");
-          return;
-        }
-        console.log(formatQuotasPlain(quotas));
-        return;
-      }
-
       const result = await ctx.ui.custom<null>((tui, theme, _kb, done) => {
         let currentComponent: Component = new QuotasLoadingComponent(theme);
 
@@ -30,7 +20,13 @@ export function registerQuotasCommand(pi: ExtensionAPI): void {
                 "Failed to fetch quotas",
               );
             } else {
-              currentComponent = new QuotasDisplayComponent(theme, quotas);
+              currentComponent = new QuotasDisplayComponent(
+                theme,
+                quotas,
+                () => {
+                  done(null);
+                },
+              );
             }
             tui.requestRender();
           })
@@ -45,90 +41,28 @@ export function registerQuotasCommand(pi: ExtensionAPI): void {
         return {
           render: (width: number) => currentComponent.render(width),
           invalidate: () => currentComponent.invalidate(),
-          handleInput: (_data: string) => {
+          handleInput: (data: string) => {
+            if (currentComponent.handleInput) {
+              return currentComponent.handleInput(data);
+            }
             done(null);
+            return true;
           },
         };
       });
 
-      // RPC fallback: custom() returned undefined
+      // RPC fallback: return JSON
       if (result === undefined) {
         const quotas = await fetchQuotas();
         if (!quotas) {
-          ctx.ui.notify("Failed to fetch quotas", "error");
+          ctx.ui.notify(
+            JSON.stringify({ error: "Failed to fetch quotas" }),
+            "error",
+          );
           return;
         }
-        ctx.ui.notify(formatQuotasPlain(quotas), "info");
+        ctx.ui.notify(JSON.stringify(quotas, null, 2), "info");
       }
     },
   });
 }
-
-async function fetchQuotas(): Promise<QuotasResponse | null> {
-  const apiKey = process.env.SYNTHETIC_API_KEY;
-  if (!apiKey) {
-    return null;
-  }
-
-  try {
-    const response = await fetch("https://api.synthetic.new/v2/quotas", {
-      headers: {
-        Authorization: `Bearer ${apiKey}`,
-      },
-    });
-
-    if (!response.ok) {
-      return null;
-    }
-
-    return (await response.json()) as QuotasResponse;
-  } catch {
-    return null;
-  }
-}
-
-function formatQuotasPlain(quotas: QuotasResponse): string {
-  const remaining = quotas.subscription.limit - quotas.subscription.requests;
-  const percentUsed = Math.round(
-    (quotas.subscription.requests / quotas.subscription.limit) * 100,
-  );
-
-  return [
-    "Synthetic API Quotas",
-    "",
-    `Usage: ${percentUsed}%`,
-    `Limit: ${quotas.subscription.limit.toLocaleString()} requests`,
-    `Used: ${quotas.subscription.requests.toLocaleString()} requests`,
-    `Remaining: ${remaining.toLocaleString()} requests`,
-    "",
-    `Renews: ${quotas.subscription.renewsAt} (${formatRelativeTime(new Date(quotas.subscription.renewsAt))})`,
-  ].join("\n");
-}
-
-function formatRelativeTime(date: Date): string {
-  const now = new Date();
-  const diffMs = date.getTime() - now.getTime();
-
-  if (diffMs <= 0) {
-    return "renews soon";
-  }
-
-  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  const diffMinutes = Math.ceil(diffMs / (1000 * 60));
-  const diffHours = Math.ceil(diffMs / (1000 * 60 * 60));
-  const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
-
-  if (diffMinutes < 60) {
-    return rtf.format(diffMinutes, "minute");
-  } else if (diffHours < 24) {
-    return rtf.format(diffHours, "hour");
-  } else if (diffDays < 30) {
-    return rtf.format(diffDays, "day");
-  } else if (diffDays < 365) {
-    const months = Math.floor(diffDays / 30);
-    return rtf.format(months, "month");
-  } else {
-    const years = Math.floor(diffDays / 365);
-    return rtf.format(years, "year");
-  }
-}

package/src/components/quotas-display.ts

@@ -1,139 +1,240 @@
 import type { Theme } from "@mariozechner/pi-coding-agent";
-import { DynamicBorder } from "@mariozechner/pi-coding-agent";
-import { type Component, Container, Text } from "@mariozechner/pi-tui";
+import type { Component, TUI } from "@mariozechner/pi-tui";
+import { matchesKey } from "@mariozechner/pi-tui";
 import type { QuotasResponse } from "../types/quotas";
+import { TabbedScrollablePanel } from "./tabbed-panel";
 
 export class QuotasDisplayComponent implements Component {
-  private container: Container;
-
-  constructor(theme: Theme, quotas: QuotasResponse) {
-    this.container = new Container();
-    const border = new DynamicBorder((s: string) => theme.fg("accent", s));
-
-    this.container.addChild(border);
-    this.container.addChild(
-      new Text(theme.fg("accent", theme.bold(" Synthetic API Quotas ")), 1, 0),
-    );
-    this.container.addChild(new Text("", 0, 0));
-
-    const remaining = quotas.subscription.limit - quotas.subscription.requests;
-    const percentUsed = Math.round(
-      (quotas.subscription.requests / quotas.subscription.limit) * 100,
+  private panel: TabbedScrollablePanel;
+  private onClose: () => void;
+
+  constructor(theme: Theme, quotas: QuotasResponse, onClose: () => void) {
+    this.onClose = onClose;
+
+    this.panel = new TabbedScrollablePanel(
+      {
+        title: "Synthetic API Quotas",
+        tabs: [
+          {
+            label: "Completions",
+            buildContent: () =>
+              buildHybridLayout(theme, quotas.subscription, 5), // 5-hour window
+          },
+          {
+            label: "Search",
+            buildContent: () =>
+              buildHybridLayout(theme, quotas.search.hourly, 1), // 1 hour
+          },
+          {
+            label: "Free tool call",
+            buildContent: () =>
+              buildToolCallsLayout(theme, quotas.freeToolCalls, 24), // 24 hours (daily)
+          },
+        ],
+        onClose: onClose,
+      },
+      null as unknown as TUI,
+      theme,
     );
+  }
 
-    // Usage bar: left side = used (colored by severity), right side = remaining (neutral)
-    const barWidth = 40;
-    const usedWidth = Math.round((percentUsed / 100) * barWidth);
-    const remainingWidth = barWidth - usedWidth;
-
-    let bar: string;
-    if (usedWidth >= barWidth) {
-      bar = theme.fg("error", "█".repeat(barWidth));
-    } else if (percentUsed > 75) {
-      // High usage: used is warning, remaining is dim
-      bar =
-        theme.fg("warning", "█".repeat(usedWidth)) +
-        theme.fg("dim", "█".repeat(remainingWidth));
-    } else {
-      // Normal usage: used is success, remaining is dim
-      bar =
-        theme.fg("success", "█".repeat(usedWidth)) +
-        theme.fg("dim", "█".repeat(remainingWidth));
+  handleInput(data: string): boolean {
+    if (matchesKey(data, "escape") || data === "q") {
+      this.onClose();
+      return true;
     }
+    return this.panel.handleInput(data);
+  }
 
-    this.container.addChild(new Text(`  ${theme.bold("Usage")}`, 1, 0));
-    this.container.addChild(new Text(`  ${bar} ${percentUsed}%`, 1, 0));
-    this.container.addChild(new Text("", 0, 0));
-
-    // Numbers - aligned columns
-    const limitStr = quotas.subscription.limit.toLocaleString();
-    const usedStr = quotas.subscription.requests.toLocaleString();
-    const remainingStr = remaining.toLocaleString();
-    const maxValueWidth = Math.max(
-      limitStr.length,
-      usedStr.length,
-      remainingStr.length,
-    );
+  render(width: number): string[] {
+    return this.panel.render(width);
+  }
 
-    this.container.addChild(
-      new Text(
-        `  ${theme.fg("muted", "Limit:")}     ${limitStr.padStart(maxValueWidth, " ")} requests`,
-        1,
-        0,
-      ),
-    );
-    this.container.addChild(
-      new Text(
-        `  ${theme.fg("muted", "Used:")}      ${usedStr.padStart(maxValueWidth, " ")} requests`,
-        1,
-        0,
-      ),
-    );
-    this.container.addChild(
-      new Text(
-        `  ${theme.fg("muted", "Remaining:")} ${theme.fg(
-          remaining > 0 ? "success" : "error",
-          remainingStr.padStart(maxValueWidth, " "),
-        )} requests`,
-        1,
-        0,
-      ),
-    );
-    this.container.addChild(new Text("", 0, 0));
-
-    // Renewal date - ISO8601 with relative time
-    const renewsAt = new Date(quotas.subscription.renewsAt);
-    const isoStr = quotas.subscription.renewsAt;
-    const relativeStr = formatRelativeTime(renewsAt);
-
-    this.container.addChild(
-      new Text(
-        `  ${theme.fg("muted", "Renews:")}    ${isoStr} (${relativeStr})`,
-        1,
-        0,
-      ),
-    );
+  invalidate(): void {
+    this.panel.invalidate();
+  }
+}
 
-    this.container.addChild(new Text("", 0, 0));
-    this.container.addChild(
-      new Text(theme.fg("dim", "  Press any key to close"), 1, 0),
-    );
-    this.container.addChild(border);
+// Layout: bar + pct/cur-total + pace/reset
+function buildHybridLayout(
+  theme: Theme,
+  quota: { limit: number; requests: number; renewsAt: string },
+  periodHours: number,
+): string[] {
+  const percentUsed = Math.round((quota.requests / quota.limit) * 100);
+  const renewsAt = new Date(quota.renewsAt);
+  const now = new Date();
+
+  const lines: string[] = [];
+  const barWidth = 50;
+
+  const usedStr = quota.requests.toLocaleString();
+  const limitStr = quota.limit.toLocaleString();
+
+  // Color based on usage
+  const usedColor =
+    percentUsed >= 100 ? "error" : percentUsed > 75 ? "warning" : "success";
+
+  // Calculate pace with known period
+  const totalPeriod = periodHours * 60 * 60 * 1000;
+  const timeUntilReset = Math.max(0, renewsAt.getTime() - now.getTime());
+  const timeElapsed = totalPeriod - timeUntilReset;
+  const percentTimeElapsed = (timeElapsed / totalPeriod) * 100;
+  const paceDiff = percentUsed - percentTimeElapsed;
+
+  let paceStr: string;
+  let paceColor: "success" | "dim" | "error";
+  if (paceDiff < -10) {
+    paceStr = `${Math.round(Math.abs(paceDiff))}% behind pace`;
+    paceColor = "success";
+  } else if (paceDiff > 10) {
+    paceStr = `${Math.round(paceDiff)}% ahead of pace`;
+    paceColor = "error";
+  } else {
+    paceStr = "within pace";
+    paceColor = "dim";
   }
 
-  render(width: number): string[] {
-    return this.container.render(width);
+  // Row above bar: pct left, cur/total right
+  const pctStr = `${percentUsed}% used`;
+  const totalDisplay = `${usedStr}/${limitStr}`;
+  const spacing = " ".repeat(
+    Math.max(1, barWidth - pctStr.length - totalDisplay.length),
+  );
+  lines.push(
+    `  ${theme.fg(usedColor, pctStr)}${spacing}${theme.fg("dim", totalDisplay)}`,
+  );
+
+  // Bar
+  const usedWidth = Math.round((percentUsed / 100) * barWidth);
+  let bar: string;
+  if (usedWidth >= barWidth) {
+    bar = theme.fg("error", "█".repeat(barWidth));
+  } else if (percentUsed > 75) {
+    bar =
+      theme.fg("warning", "█".repeat(usedWidth)) +
+      theme.fg("dim", "█".repeat(barWidth - usedWidth));
+  } else {
+    bar =
+      theme.fg("success", "█".repeat(usedWidth)) +
+      theme.fg("dim", "█".repeat(barWidth - usedWidth));
   }
+  lines.push(`  ${bar}`);
+
+  // Row below bar: pace left, reset right
+  const resetStr = formatShortTime(renewsAt);
+  const paceSpacing = " ".repeat(
+    Math.max(1, barWidth - paceStr.length - resetStr.length),
+  );
+  lines.push(
+    `  ${theme.fg(paceColor, paceStr)}${paceSpacing}${theme.fg("dim", resetStr)}`,
+  );
+
+  return lines;
+}
 
-  invalidate(): void {
-    this.container.invalidate();
+// Layout for free tool calls - shows remaining, not usage
+function buildToolCallsLayout(
+  theme: Theme,
+  quota: { limit: number; requests: number; renewsAt: string },
+  periodHours: number,
+): string[] {
+  const remaining = quota.limit - quota.requests;
+  const percentRemaining = Math.round((remaining / quota.limit) * 100);
+  const renewsAt = new Date(quota.renewsAt);
+  const now = new Date();
+
+  const lines: string[] = [];
+  const barWidth = 50;
+
+  const remainingStr = remaining.toLocaleString();
+
+  // Color based on remaining (inverse of usage)
+  const remainingColor =
+    remaining <= 0 ? "error" : percentRemaining < 25 ? "warning" : "success";
+
+  // Calculate pace (how fast you're consuming free calls)
+  const totalPeriod = periodHours * 60 * 60 * 1000;
+  const timeUntilReset = Math.max(0, renewsAt.getTime() - now.getTime());
+  const timeElapsed = totalPeriod - timeUntilReset;
+  const percentTimeElapsed = (timeElapsed / totalPeriod) * 100;
+  const expectedRemaining = Math.round(
+    quota.limit * (1 - percentTimeElapsed / 100),
+  );
+  const remainingDiff = remaining - expectedRemaining;
+
+  let paceStr: string;
+  let paceColor: "success" | "dim" | "error";
+  if (remainingDiff > quota.limit * 0.1) {
+    paceStr = `${remainingDiff.toLocaleString()} more than expected`;
+    paceColor = "success";
+  } else if (remainingDiff < -quota.limit * 0.1) {
+    paceStr = `${Math.abs(remainingDiff).toLocaleString()} fewer than expected`;
+    paceColor = "error";
+  } else {
+    paceStr = "on track";
+    paceColor = "dim";
+  }
+
+  // Row above bar: pct remaining left, ratio right (like other tabs)
+  const pctStr = `${percentRemaining}% remaining`;
+  const ratioStr = `${remainingStr}/${quota.limit.toLocaleString()}`;
+  const spacing = " ".repeat(
+    Math.max(1, barWidth - pctStr.length - ratioStr.length),
+  );
+  lines.push(
+    `  ${theme.fg(remainingColor, pctStr)}${spacing}${theme.fg("dim", ratioStr)}`,
+  );
+
+  // Bar (shows remaining, not used - so full bar = all remaining)
+  const remainingWidth = Math.round((percentRemaining / 100) * barWidth);
+  let bar: string;
+  if (remaining <= 0) {
+    bar = theme.fg("dim", "█".repeat(barWidth));
+  } else if (percentRemaining < 25) {
+    bar =
+      theme.fg("warning", "█".repeat(remainingWidth)) +
+      theme.fg("dim", "█".repeat(barWidth - remainingWidth));
+  } else {
+    bar =
+      theme.fg("success", "█".repeat(remainingWidth)) +
+      theme.fg("dim", "█".repeat(barWidth - remainingWidth));
   }
+  lines.push(`  ${bar}`);
+
+  // Row below bar: pace left, reset right
+  const resetStr = formatShortTime(renewsAt);
+  const paceSpacing = " ".repeat(
+    Math.max(1, barWidth - paceStr.length - resetStr.length),
+  );
+  lines.push(
+    `  ${theme.fg(paceColor, paceStr)}${paceSpacing}${theme.fg("dim", resetStr)}`,
+  );
+
+  // If depleted, show note about paid calls
+  if (remaining <= 0) {
+    lines.push(`  ${theme.fg("dim", "Additional calls will be charged")}`);
+  }
+
+  return lines;
 }
 
-function formatRelativeTime(date: Date): string {
+function formatShortTime(date: Date): string {
   const now = new Date();
   const diffMs = date.getTime() - now.getTime();
 
   if (diffMs <= 0) {
-    return "renews soon";
+    return "soon";
   }
 
-  const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
-  const diffMinutes = Math.ceil(diffMs / (1000 * 60));
   const diffHours = Math.ceil(diffMs / (1000 * 60 * 60));
   const diffDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
 
-  if (diffMinutes < 60) {
-    return rtf.format(diffMinutes, "minute");
-  } else if (diffHours < 24) {
-    return rtf.format(diffHours, "hour");
-  } else if (diffDays < 30) {
-    return rtf.format(diffDays, "day");
-  } else if (diffDays < 365) {
-    const months = Math.floor(diffDays / 30);
-    return rtf.format(months, "month");
+  if (diffHours < 24) {
+    return `in ${diffHours}h`;
+  } else if (diffDays < 7) {
+    return `in ${diffDays}d`;
   } else {
-    const years = Math.floor(diffDays / 365);
-    return rtf.format(years, "year");
+    return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
   }
 }