chore: init main branch
This commit is contained in:
954801926@qq.com committed
commit
549c8b5b13
231 files changed
+27286
No files matched your search
@@ -0,0 +1,310 @@
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { invoke } from "@tauri-apps/api/core";
|
||||
import { Loader2, RefreshCw } from "lucide-react";
|
||||
import { useTranslation } from "../i18n";
|
||||
import type { Agent } from "../types";
|
||||
|
||||
interface UsageData {
|
||||
planName?: string | null;
|
||||
remaining?: number | null;
|
||||
total?: number | null;
|
||||
used?: number | null;
|
||||
unit?: string | null;
|
||||
isValid?: boolean | null;
|
||||
resetsAt?: string | null;
|
||||
}
|
||||
|
||||
interface UsageResult {
|
||||
success: boolean;
|
||||
data?: UsageData[] | null;
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
type UsageStatus = "idle" | "loading" | "success" | "error";
|
||||
|
||||
interface CacheEntry {
|
||||
status: "success" | "error";
|
||||
data: UsageData[];
|
||||
/** Raw error text from Rust; null = transient failure (invoke rejected). */
|
||||
error: string | null;
|
||||
updatedAt: number;
|
||||
}
|
||||
|
||||
// Module-level cache shared across mounts: re-entering the list within the
|
||||
// stale TTL shows the last result without firing new requests.
|
||||
const STALE_TTL_MS = 5 * 60 * 1000;
|
||||
const cache = new Map<string, CacheEntry>();
|
||||
|
||||
// Simple semaphore: at most MAX_CONCURRENT queries in flight at once.
|
||||
const MAX_CONCURRENT = 3;
|
||||
let running = 0;
|
||||
const waiters: Array<() => void> = [];
|
||||
async function acquireSlot(): Promise<void> {
|
||||
if (running >= MAX_CONCURRENT) {
|
||||
await new Promise<void>((resolve) => waiters.push(resolve));
|
||||
}
|
||||
running += 1;
|
||||
}
|
||||
function releaseSlot(): void {
|
||||
running -= 1;
|
||||
waiters.shift()?.();
|
||||
}
|
||||
|
||||
interface UsageFooterProps {
|
||||
agent: Agent;
|
||||
providerName: string;
|
||||
usageKinds?: string[];
|
||||
}
|
||||
|
||||
export function UsageFooter({ agent, providerName, usageKinds }: UsageFooterProps) {
|
||||
const { t } = useTranslation();
|
||||
const supported = (usageKinds?.length ?? 0) > 0;
|
||||
// Cache key includes the agent so a Kimi Code provider and a Pi provider
|
||||
// with the same name do not clobber each other's cached result.
|
||||
const cacheKey = `${agent}:${providerName}`;
|
||||
|
||||
const [status, setStatus] = useState<UsageStatus>("idle");
|
||||
const [data, setData] = useState<UsageData[]>([]);
|
||||
/** undefined = no error; null = network error; string = Rust error text. */
|
||||
const [error, setError] = useState<string | null | undefined>(undefined);
|
||||
const [now, setNow] = useState(() => Date.now());
|
||||
// Generation counter: stale responses (unmounted / superseded query) are ignored.
|
||||
const genRef = useRef(0);
|
||||
|
||||
const runQuery = useCallback(
|
||||
async (forceRefresh: boolean) => {
|
||||
const gen = ++genRef.current;
|
||||
setStatus("loading");
|
||||
setError(undefined);
|
||||
const finish = (entry: CacheEntry) => {
|
||||
cache.set(cacheKey, entry);
|
||||
if (genRef.current !== gen) return;
|
||||
setStatus(entry.status);
|
||||
setData(entry.data);
|
||||
setError(entry.error);
|
||||
};
|
||||
try {
|
||||
await acquireSlot();
|
||||
let result: UsageResult;
|
||||
try {
|
||||
result = await invoke<UsageResult>("query_provider_usage", {
|
||||
agent,
|
||||
providerName,
|
||||
forceRefresh,
|
||||
});
|
||||
} finally {
|
||||
releaseSlot();
|
||||
}
|
||||
if (genRef.current !== gen) return;
|
||||
if (result.success) {
|
||||
finish({
|
||||
status: "success",
|
||||
data: result.data ?? [],
|
||||
error: null,
|
||||
updatedAt: Date.now(),
|
||||
});
|
||||
} else {
|
||||
// Deterministic failure: keep last good data for ghost display.
|
||||
finish({
|
||||
status: "error",
|
||||
data: cache.get(cacheKey)?.data ?? [],
|
||||
error: result.error ?? "",
|
||||
updatedAt: Date.now(),
|
||||
});
|
||||
}
|
||||
} catch {
|
||||
// Transient failure (network / timeout): invoke rejected.
|
||||
finish({
|
||||
status: "error",
|
||||
data: cache.get(cacheKey)?.data ?? [],
|
||||
error: null,
|
||||
updatedAt: Date.now(),
|
||||
});
|
||||
}
|
||||
},
|
||||
[agent, providerName, cacheKey]
|
||||
);
|
||||
|
||||
// On mount / provider change: serve fresh cache, otherwise query once.
|
||||
useEffect(() => {
|
||||
if (!supported) return;
|
||||
const cached = cache.get(cacheKey);
|
||||
if (cached) {
|
||||
setStatus(cached.status);
|
||||
setData(cached.data);
|
||||
setError(cached.error);
|
||||
if (Date.now() - cached.updatedAt < STALE_TTL_MS) return;
|
||||
}
|
||||
void runQuery(false);
|
||||
}, [supported, cacheKey, runQuery]);
|
||||
|
||||
// Ignore late responses after unmount.
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
genRef.current += 1;
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Tick the reset countdown once a minute while showing data.
|
||||
useEffect(() => {
|
||||
if (status !== "success") return;
|
||||
const id = setInterval(() => setNow(Date.now()), 60_000);
|
||||
return () => clearInterval(id);
|
||||
}, [status]);
|
||||
|
||||
if (!supported || status === "idle") return null;
|
||||
|
||||
const percentOf = (d: UsageData): number | null => {
|
||||
if (d.used != null && d.total != null && d.total > 0)
|
||||
return (d.used / d.total) * 100;
|
||||
if (d.remaining != null && d.total != null && d.total > 0)
|
||||
return (1 - d.remaining / d.total) * 100;
|
||||
return null;
|
||||
};
|
||||
|
||||
const formatAmount = (
|
||||
value: number | null | undefined,
|
||||
unit?: string | null
|
||||
): string => {
|
||||
if (value == null) return "—";
|
||||
const symbol =
|
||||
unit === "CNY" ? "¥" : unit === "USD" ? "$" : unit ? `${unit} ` : "";
|
||||
const num = Number.isInteger(value) ? String(value) : value.toFixed(2);
|
||||
return `${symbol}${num}`;
|
||||
};
|
||||
|
||||
const formatReset = (resetsAt?: string | null): string | null => {
|
||||
if (!resetsAt) return null;
|
||||
const ms = new Date(resetsAt).getTime() - now;
|
||||
if (Number.isNaN(ms)) return null;
|
||||
if (ms <= 0) return t("usageResetDone");
|
||||
const mins = Math.floor(ms / 60_000);
|
||||
if (mins < 60) return t("usageResetIn", { time: `${Math.max(mins, 1)}m` });
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return t("usageResetIn", { time: `${hours}h` });
|
||||
return t("usageResetIn", { time: `${Math.floor(hours / 24)}d` });
|
||||
};
|
||||
|
||||
const refreshBtn = (
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void runQuery(true);
|
||||
}}
|
||||
disabled={status === "loading"}
|
||||
title={t("usageRefresh")}
|
||||
aria-label={t("usageRefresh")}
|
||||
className="ml-auto w-6 h-6 flex items-center justify-center rounded text-content-muted hover:text-content-primary hover:bg-hover-2 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
{status === "loading" ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="w-3.5 h-3.5" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
|
||||
// Loading with no prior data: skeleton bar.
|
||||
if (status === "loading" && data.length === 0) {
|
||||
return (
|
||||
<div
|
||||
className="w-full border-t border-border pt-2 mt-1"
|
||||
aria-label={t("usageLoading")}
|
||||
>
|
||||
<div className="h-3.5 w-2/3 rounded bg-hover-2 animate-pulse" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (status === "error" && data.length === 0) {
|
||||
const text =
|
||||
error == null
|
||||
? t("usageNetworkError")
|
||||
: /401|api[ -]?key|invalid key/i.test(error)
|
||||
? t("usageInvalidKey")
|
||||
: error
|
||||
? `${t("usageQueryFailed")} · ${error}`
|
||||
: t("usageQueryFailed");
|
||||
return (
|
||||
<div className="w-full border-t border-border pt-2 mt-1 flex items-center gap-2 text-xs">
|
||||
<span className="text-red-500 dark:text-red-400 truncate" title={text}>
|
||||
{text}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
void runQuery(true);
|
||||
}}
|
||||
className="ml-auto shrink-0 px-2 py-0.5 rounded border border-red-300 dark:border-red-500/30 text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
|
||||
>
|
||||
{t("usageRetry")}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// success, or error/loading with last-good data (ghost).
|
||||
const ghost = status !== "success";
|
||||
return (
|
||||
<div
|
||||
className={`w-full border-t border-border pt-2 mt-1 flex flex-col gap-1 text-xs ${
|
||||
ghost ? "opacity-50" : ""
|
||||
}`}
|
||||
>
|
||||
{data.map((d, i) => {
|
||||
const isPlan = !!d.planName;
|
||||
const pct = isPlan ? percentOf(d) : null;
|
||||
const color =
|
||||
pct == null
|
||||
? "text-content-muted"
|
||||
: pct < 70
|
||||
? "text-green-600 dark:text-green-400"
|
||||
: pct < 90
|
||||
? "text-orange-600 dark:text-orange-400"
|
||||
: "text-red-500 dark:text-red-400";
|
||||
const resetText = isPlan ? formatReset(d.resetsAt) : null;
|
||||
|
||||
let main: string;
|
||||
if (d.isValid === false) {
|
||||
main = t("usageInvalidKey");
|
||||
} else if (isPlan) {
|
||||
const label = data.length > 1 && d.planName ? `${d.planName} · ` : "";
|
||||
main =
|
||||
pct != null
|
||||
? `${label}${Math.round(pct)}% ${t("usageUsed")}`
|
||||
: d.remaining != null
|
||||
? `${label}${t("usageRemaining")} ${formatAmount(d.remaining, d.unit)}`
|
||||
: label || "—";
|
||||
} else {
|
||||
main = `${t("usageBalance")} ${formatAmount(d.remaining, d.unit)}`;
|
||||
}
|
||||
|
||||
return (
|
||||
<div key={i} className="flex items-center gap-1.5 min-w-0">
|
||||
<span aria-hidden="true">{isPlan ? "⚡" : "💰"}</span>
|
||||
<span
|
||||
className={`tabular-nums truncate ${
|
||||
d.isValid === false ? "text-red-500 dark:text-red-400" : color
|
||||
}`}
|
||||
title={main}
|
||||
>
|
||||
{main}
|
||||
</span>
|
||||
{resetText && (
|
||||
<span className="text-content-muted shrink-0">{resetText}</span>
|
||||
)}
|
||||
{i === data.length - 1 && refreshBtn}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{data.length === 0 && (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="text-content-muted">—</span>
|
||||
{refreshBtn}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user