pi-free 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "pi-free",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"type": "module",
 	"description": "AIO Free AI models for Pi - Access free models from Kilo, Zen, OpenRouter, NVIDIA, Cline, Mistral, and Ollama",
 	"keywords": [
@@ -34,6 +34,7 @@
 		"lib/**/*.ts",
 		"usage/**/*.ts",
 		"provider-failover/**/*.ts",
+		"widget/**/*.ts",
 		"config.ts",
 		"constants.ts",
 		"provider-factory.ts",

package/widget/data.ts

@@ -0,0 +1,113 @@
+/**
+ * Widget data collection - aggregates metrics from all sources
+ */
+
+import {
+	PROVIDER_CLINE,
+	PROVIDER_KILO,
+	PROVIDER_NVIDIA,
+	PROVIDER_OPENROUTER,
+	PROVIDER_ZEN,
+} from "../constants.ts";
+import {
+	getCachedMetrics,
+	getDailyRequestCount,
+	getRequestCount,
+} from "../usage/metrics.ts";
+import { getAllCumulativeUsage } from "../usage/store.ts";
+
+export interface ProviderRow {
+	provider: string;
+	key: string;
+	icon: string;
+	sessionReqs: number;
+	dailyReqs: number;
+	dailyLimit?: number;
+	hourlyLimit?: number;
+	remainingToday?: number;
+	totalTokensIn: number;
+	totalTokensOut: number;
+	totalRequests: number;
+	costEquivalent: number;
+	firstUsed?: string;
+	credits?: number;
+	creditsLabel?: string;
+}
+
+const KNOWN_PROVIDERS: Record<string, { icon: string; label: string }> = {
+	[PROVIDER_KILO]: { icon: "🔥", label: "Kilo" },
+	[PROVIDER_OPENROUTER]: { icon: "🔀", label: "OpenRouter" },
+	[PROVIDER_ZEN]: { icon: "✦", label: "Zen" },
+	[PROVIDER_NVIDIA]: { icon: "⚡", label: "NVIDIA" },
+	[PROVIDER_CLINE]: { icon: "🤖", label: "Cline" },
+	local: { icon: "💻", label: "Local" },
+};
+
+// Session-level request tracking for non-extension providers
+const sessionRequestCounts = new Map<string, number>();
+
+export function recordSessionRequest(provider: string): void {
+	const current = sessionRequestCounts.get(provider) ?? 0;
+	sessionRequestCounts.set(provider, current + 1);
+}
+
+export function collectRows(): ProviderRow[] {
+	const cumulative = getAllCumulativeUsage();
+	const orMetrics = getCachedMetrics(PROVIDER_OPENROUTER);
+	const kiloMetrics = getCachedMetrics(PROVIDER_KILO);
+
+	// Discover all providers: known ones + any from cumulative store
+	const allKeys = new Set<string>(Object.keys(KNOWN_PROVIDERS));
+	for (const key of Object.keys(cumulative)) {
+		allKeys.add(key);
+	}
+
+	const rows: ProviderRow[] = [];
+
+	for (const key of allKeys) {
+		const meta = KNOWN_PROVIDERS[key];
+		const c = cumulative[key];
+		const sessionReqs =
+			getRequestCount(key) || sessionRequestCounts.get(key) || 0;
+
+		const row: ProviderRow = {
+			provider: meta?.label ?? key,
+			key,
+			icon: meta?.icon ?? "📦",
+			sessionReqs,
+			dailyReqs: getDailyRequestCount(key) || 0,
+			totalTokensIn: c?.tokensIn ?? 0,
+			totalTokensOut: c?.tokensOut ?? 0,
+			totalRequests: c?.requests ?? 0,
+			costEquivalent: c?.costEquivalent ?? 0,
+			firstUsed: c?.firstUsed,
+		};
+
+		// Provider-specific known limits
+		if (key === PROVIDER_OPENROUTER) {
+			row.dailyLimit = orMetrics?.rateLimit?.requestsPerDay;
+			row.remainingToday = orMetrics?.rateLimit?.remainingToday;
+			row.credits = orMetrics?.credits;
+			row.creditsLabel = "credits";
+		} else if (key === PROVIDER_KILO) {
+			row.hourlyLimit = 200;
+			row.credits = kiloMetrics?.balance;
+			row.creditsLabel = "balance";
+		}
+
+		rows.push(row);
+	}
+
+	// Sort: known providers first (in order), then unknown, then inactive
+	const order = Object.keys(KNOWN_PROVIDERS);
+	rows.sort((a, b) => {
+		const ai = order.indexOf(a.key);
+		const bi = order.indexOf(b.key);
+		const aOrder = ai >= 0 ? ai : 100;
+		const bOrder = bi >= 0 ? bi : 100;
+		if (aOrder !== bOrder) return aOrder - bOrder;
+		return b.sessionReqs + b.totalRequests - (a.sessionReqs + a.totalRequests);
+	});
+
+	return rows;
+}

package/widget/format.ts

@@ -0,0 +1,26 @@
+/**
+ * Widget formatting utilities
+ */
+
+export function formatTokens(n: number): string {
+	if (n < 1000) return n.toString();
+	if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`;
+	if (n < 1_000_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
+	return `${(n / 1_000_000_000).toFixed(1)}B`;
+}
+
+export function formatCost(n: number): string {
+	if (n < 0.01) return `$${n.toFixed(4)}`;
+	if (n < 1) return `$${n.toFixed(3)}`;
+	return `$${n.toFixed(2)}`;
+}
+
+export function relativeTime(isoDate: string): string {
+	const diff = Date.now() - new Date(isoDate).getTime();
+	const days = Math.floor(diff / 86_400_000);
+	if (days === 0) return "today";
+	if (days === 1) return "yesterday";
+	if (days < 30) return `${days}d ago`;
+	const months = Math.floor(days / 30);
+	return `${months}mo ago`;
+}

package/widget/render.ts

@@ -0,0 +1,117 @@
+/**
+ * Widget HTML rendering
+ */
+
+import type { ProviderRow } from "./data.ts";
+import { formatCost, formatTokens, relativeTime } from "./format.ts";
+
+export function renderWidgetHTML(rows: ProviderRow[]): string {
+	let totalTokens = 0,
+		totalReqs = 0,
+		totalCost = 0;
+	for (const r of rows) {
+		totalTokens += r.totalTokensIn + r.totalTokensOut;
+		totalReqs += r.totalRequests;
+		totalCost += r.costEquivalent;
+	}
+
+	const summaryHTML =
+		totalReqs > 0
+			? `
+  <div style="background: rgba(255,255,255,0.04); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px;">
+    <div style="display: flex; justify-content: space-between; font-size: 13px; font-weight: 500;">
+      <span>Total free value</span>
+      <span style="color: #48bb78;">${formatCost(totalCost)} saved</span>
+    </div>
+    <div style="font-size: 11px; color: #888; margin-top: 3px;">
+      ${formatTokens(totalTokens)} tokens · ${totalReqs} requests
+    </div>
+  </div>`
+			: "";
+
+	const providerRows = rows.map((r) => renderProviderRow(r)).join("\n");
+
+	return `<!DOCTYPE html>
+<html><head><meta charset="UTF-8">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    font-family: system-ui, -apple-system, sans-serif;
+    background: rgba(24, 24, 30, 0.95);
+    color: #e0e0e0; padding: 14px 16px;
+    min-height: 100vh; backdrop-filter: blur(20px);
+  }
+  .header { font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
+</style></head>
+<body>
+  <div class="header">Free Usage</div>
+  ${summaryHTML}
+  ${providerRows}
+  <div style="font-size: 10px; color: #555; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.05);">
+    Each gateway has independent quotas — using multiple providers multiplies capacity.
+  </div>
+</body></html>`;
+}
+
+function renderProviderRow(r: ProviderRow): string {
+	const hasActivity = r.sessionReqs > 0 || r.totalRequests > 0;
+	const quotaBar = renderQuotaBar(r);
+	const infoHTML = renderInfoLine(r);
+
+	return `
+      <div style="padding: 7px 0; ${hasActivity ? "" : "opacity: 0.3;"}">
+        <div style="display: flex; justify-content: space-between; align-items: center;">
+          <span style="font-weight: 500; font-size: 13px;">${r.icon} ${r.provider}</span>
+          <span style="font-size: 10px; color: #888;">${r.sessionReqs} this session</span>
+        </div>
+        ${infoHTML}
+        ${quotaBar}
+      </div>`;
+}
+
+function renderQuotaBar(r: ProviderRow): string {
+	if (!r.dailyLimit || r.dailyLimit <= 0) return "";
+
+	const pct = Math.min(100, Math.round((r.dailyReqs / r.dailyLimit) * 100));
+	const color = pct > 80 ? "#e53e3e" : pct > 50 ? "#ecc94b" : "#48bb78";
+
+	return `
+        <div style="display: flex; align-items: center; gap: 8px; margin-top: 3px;">
+          <div style="flex: 1; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden;">
+            <div style="width: ${pct}%; height: 100%; background: ${color}; border-radius: 2px;"></div>
+          </div>
+          <span style="font-size: 10px; color: #666;">${r.dailyReqs}/${r.dailyLimit}</span>
+        </div>`;
+}
+
+function renderInfoLine(r: ProviderRow): string {
+	const infoParts: string[] = [];
+
+	if (r.totalRequests > 0) {
+		infoParts.push(
+			`${formatTokens(r.totalTokensIn + r.totalTokensOut)} tok · ${r.totalRequests} reqs`,
+		);
+		if (r.costEquivalent > 0) {
+			infoParts.push(`≈${formatCost(r.costEquivalent)}`);
+		}
+		if (r.firstUsed) {
+			infoParts.push(`since ${relativeTime(r.firstUsed)}`);
+		}
+	}
+	if (r.remainingToday !== undefined) {
+		infoParts.push(`${r.remainingToday} left today`);
+	}
+	if (r.hourlyLimit) {
+		infoParts.push(`${r.hourlyLimit}/hr limit`);
+	}
+	if (r.credits !== undefined) {
+		infoParts.push(`💰 ${formatCost(r.credits)}`);
+	}
+	if (r.key === "local" && r.totalRequests > 0) {
+		infoParts.push("always free");
+	}
+
+	if (infoParts.length === 0) return "";
+
+	return `<div style="font-size: 10px; color: #777; margin-top: 2px;">${infoParts.join(" · ")}</div>`;
+}