@hienlh/ppm 0.19.10 → 0.19.12

package/src/web/components/chat/chat-history-bar.tsx

@@ -33,7 +33,7 @@ interface ChatHistoryBarProps {
   projectName: string;
   usageInfo: UsageInfo;
   usageLoading?: boolean;
-  refreshUsage?: () => void;
+  refreshUsage?: () => void | Promise<void>;
   lastFetchedAt?: string | null;
   sessionId?: string | null;
   providerId?: string;
@@ -628,7 +628,7 @@ export function ChatHistoryBar({
         />
       )}
       {activePanel === "usage" && isCodexProvider && (
-        <CodexUsagePanel usage={usageInfo} onClose={() => setActivePanel(null)} />
+        <CodexUsagePanel usage={usageInfo} onClose={() => setActivePanel(null)} onReload={refreshUsage} />
       )}
 
     </div>

package/src/web/components/chat/codex-usage-panel.tsx

@@ -1,40 +1,20 @@
 import { useState, useEffect, useCallback } from "react";
 import { X, Loader2, RefreshCw } from "lucide-react";
 import { api } from "@/lib/api-client";
+import { AccountUsageBar } from "@/components/settings/accounts/account-bucket-row";
+import { formatResetTime } from "@/components/settings/accounts/account-usage-format";
 import type { UsageInfo } from "../../../types/chat";
 
 interface CodexAccount { id: string; label: string; type: string; planType?: string | null }
-interface Usage { fiveHour?: number; sevenDay?: number }
+type Usage = Pick<UsageInfo, "fiveHour" | "sevenDay" | "session" | "weekly">;
 
-function pctColor(p: number): string {
-  if (p >= 90) return "text-error";
-  if (p >= 70) return "text-warning";
-  return "text-success";
-}
-function barColor(p: number): string {
-  if (p >= 90) return "bg-error";
-  if (p >= 70) return "bg-warning";
-  return "bg-success";
-}
-
-function UsageBar({ label, frac }: { label: string; frac?: number }) {
+function UsageBar({ label, frac, bucket }: {
+  label: string;
+  frac?: number;
+  bucket?: UsageInfo["session"];
+}) {
   const pct = frac != null ? Math.round(frac * 100) : null;
-  return (
-    <div className="space-y-1">
-      <div className="flex items-center justify-between">
-        <span className="text-xs font-medium text-text-primary">{label}</span>
-        <span className={`text-xs font-medium tabular-nums ${pct != null ? pctColor(pct) : "text-text-subtle"}`}>
-          {pct != null ? `${pct}%` : "—"}
-        </span>
-      </div>
-      <div className="h-2 rounded-full bg-border overflow-hidden">
-        <div
-          className={`h-full rounded-full transition-all ${pct != null ? barColor(pct) : ""}`}
-          style={{ width: `${Math.min(pct ?? 0, 100)}%` }}
-        />
-      </div>
-    </div>
-  );
+  return <AccountUsageBar label={label} pct={pct} reset={formatResetTime(bucket)} />;
 }
 
 /** Read-only usage panel opened from the chat toolbar badge (Claude parity).
@@ -42,7 +22,12 @@ function UsageBar({ label, frac }: { label: string; frac?: number }) {
  * accounts exist, chats run on the ambient ~/.codex login — its usage comes
  * from the session `usage` prop. Login/management lives in Settings → AI
  * Provider → Codex. */
-export function CodexUsagePanel({ onClose, usage }: { onClose: () => void; usage: UsageInfo }) {
+export function CodexUsagePanel({ onClose, usage, onReload }: {
+  onClose: () => void;
+  usage: UsageInfo;
+  /** Forces the chat usage endpoint to bypass its provider-usage cache. */
+  onReload?: () => void | Promise<void>;
+}) {
   const [accounts, setAccounts] = useState<CodexAccount[]>([]);
   const [usages, setUsages] = useState<Record<string, Usage>>({});
   const [loading, setLoading] = useState(false);
@@ -58,13 +43,24 @@ export function CodexUsagePanel({ onClose, usage }: { onClose: () => void; usage
   }, []);
   useEffect(() => { load(); }, [load]);
 
+  const reload = useCallback(async () => {
+    setLoading(true);
+    try {
+      // Unlike the account-list endpoint, the chat refresh carries refresh=1
+      // and invalidates Codex's five-minute provider-usage cache first.
+      await onReload?.();
+      const u = await api.get<Record<string, Usage>>("/api/codex-accounts/usage");
+      setUsages(u);
+    } catch { /* retain the last successful reading */ } finally { setLoading(false); }
+  }, [onReload]);
+
   return (
     <div className="border-t border-border bg-surface px-3 py-2.5 space-y-2.5 max-h-[350px] overflow-y-auto">
       <div className="flex items-center justify-between">
         <span className="text-xs font-semibold text-text-primary">Codex Usage</span>
         <div className="flex items-center gap-1">
           <button
-            onClick={load}
+            onClick={reload}
             disabled={loading}
             className="text-text-subtle hover:text-text-primary px-1 cursor-pointer disabled:opacity-50"
             title="Refresh"
@@ -89,8 +85,8 @@ export function CodexUsagePanel({ onClose, usage }: { onClose: () => void; usage
               <span className="text-sm text-text-primary truncate flex-1 min-w-0">{usage.activeAccountLabel || "Default login"}</span>
               <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">~/.codex</span>
             </div>
-            <UsageBar label="5-Hour" frac={usage.fiveHour} />
-            <UsageBar label="Weekly" frac={usage.sevenDay} />
+            <UsageBar label="5-Hour" frac={usage.fiveHour} bucket={usage.session} />
+            <UsageBar label="Weekly" frac={usage.sevenDay} bucket={usage.weekly} />
           </div>
           <p className="text-[11px] text-text-subtle">Using your default <code>~/.codex</code> login. Add managed accounts in Settings → AI Provider → Codex.</p>
         </>
@@ -105,8 +101,8 @@ export function CodexUsagePanel({ onClose, usage }: { onClose: () => void; usage
               <span className="text-[10px] uppercase tracking-wide text-text-subtle border border-border rounded px-1">{a.type}</span>
               {a.planType && <span className="text-[10px] text-text-subtle">{a.planType}</span>}
             </div>
-            <UsageBar label="5-Hour" frac={u.fiveHour} />
-            <UsageBar label="Weekly" frac={u.sevenDay} />
+            <UsageBar label="5-Hour" frac={u.fiveHour} bucket={u.session} />
+            <UsageBar label="Weekly" frac={u.sevenDay} bucket={u.weekly} />
           </div>
         );
       })}

package/src/web/hooks/use-usage.ts

@@ -23,15 +23,15 @@ export function useUsage(projectName: string, providerId = "claude", sessionId?:
   const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const requestRef = useRef(0);
 
-  const doFetch = useCallback((forceRefresh = false) => {
-    if (!projectName) return;
+  const doFetch = useCallback((forceRefresh = false): Promise<void> => {
+    if (!projectName) return Promise.resolve();
     const request = ++requestRef.current;
     setUsageLoading(true);
     const qs = forceRefresh ? "&refresh=1" : "";
     const sessionQs = sessionId ? `&session=${encodeURIComponent(sessionId)}` : "";
     // Via api.get, not raw fetch: the toolbar's loading state is gated on this
     // settling, and a raw fetch has no timeout to stop it stalling forever.
-    api
+    return api
       .get<(UsageInfo & { lastFetchedAt?: string }) | null>(
         `${projectUrl(projectName)}/chat/usage?providerId=${providerId}${sessionQs}${qs}`,
       )