feat: Usage page redesign with CLI fallback + API billing support

packages/ui/src/modules/usage/components/api-billing-notice/index.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { Receipt } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+
+export function ApiBillingNotice() {
+  return (
+    <div className="flex flex-col items-center justify-center py-16">
+      <Card className="w-full max-w-md">
+        <CardContent className="flex flex-col items-center gap-5 p-6">
+          <div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 dark:bg-primary/20">
+            <Receipt className="size-6 text-primary" />
+          </div>
+          <div className="space-y-2 text-center">
+            <p className="font-semibold">Pay-as-you-go account</p>
+            <p className="text-sm text-muted-foreground">
+              This account uses pay-per-use API billing instead of a Claude
+              subscription, so there are no fixed quotas to show. Check your
+              provider's dashboard for spend and usage details.
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

packages/ui/src/modules/usage/components/extra-usage-card/index.tsx

@@ -1,67 +1,23 @@
 "use client";
 
-import { cn } from "@/lib/utils";
+import { EChart } from "@/components/echarts";
 import type { ExtraUsageCardProps } from "./types";
-
-function formatCents(cents: number): string {
-  return `$${(cents / 100).toFixed(2)}`;
-}
+import { useExtraUsageCard } from "./use-service";
 
 export function ExtraUsageCard({ extra }: ExtraUsageCardProps) {
-  const percent = Math.round(extra.utilization ?? 0);
-  const barColor =
-    percent >= 90
-      ? "bg-red-500"
-      : percent >= 70
-        ? "bg-amber-500"
-        : "bg-chart-1";
-  const textColor =
-    percent >= 90
-      ? "text-red-600 dark:text-red-400"
-      : percent >= 70
-        ? "text-amber-600 dark:text-amber-400"
-        : "text-muted-foreground";
+  const { option, resetText } = useExtraUsageCard(extra);
 
   return (
-    <div className="space-y-4">
-      {/* Progress bar */}
-      <div className="space-y-3">
-        <div className="flex items-baseline justify-between gap-4">
-          <div className="min-w-0">
-            <p className="text-sm font-medium">
-              {extra.usedCredits != null
-                ? `${formatCents(extra.usedCredits)} spent`
-                : "Extra usage"}
-            </p>
-          </div>
-          <span className={cn("shrink-0 text-sm tabular-nums", textColor)}>
-            {percent}% used
-          </span>
-        </div>
-
-        <div className="h-2 overflow-hidden rounded-full bg-muted">
-          <div
-            className={cn(
-              "h-full rounded-full transition-all duration-500",
-              barColor,
-            )}
-            style={{
-              width: `${Math.max(Math.min(percent, 100), 1)}%`,
-            }}
-          />
-        </div>
+    <div className="flex flex-col rounded-xl border bg-card p-4">
+      <p className="text-sm font-medium">Extra usage</p>
+      <div className="mt-2 flex justify-center">
+        <EChart
+          option={option}
+          className="aspect-square w-full max-w-[200px]"
+        />
       </div>
-
-      {/* Monthly limit */}
-      {extra.monthlyLimit != null && (
-        <div>
-          <p className="text-sm font-medium">
-            {formatCents(extra.monthlyLimit)}
-          </p>
-          <p className="mt-0.5 text-xs text-muted-foreground">
-            Monthly spend limit
-          </p>
-        </div>
+      {resetText && (
+        <p className="mt-2 text-xs text-muted-foreground">Resets {resetText}</p>
       )}
     </div>
   );