@hienlh/ppm 0.7.7 → 0.7.9

package/src/web/components/chat/usage-badge.tsx

@@ -1,5 +1,7 @@
-import { Activity, RefreshCw } from "lucide-react";
+import { useState, useEffect } from "react";
+import { Activity, RefreshCw, ChevronDown, ChevronRight } from "lucide-react";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
+import { getAllAccountUsages, type AccountUsageEntry } from "../../lib/api-settings";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -56,7 +58,6 @@ interface UsageDetailPanelProps {
 
 function formatResetTime(bucket?: LimitBucket): string | null {
   if (!bucket) return null;
-  // Compute total minutes from whichever field is available
   let totalMins: number | null = null;
   if (bucket.resetsInMinutes != null) {
     totalMins = bucket.resetsInMinutes;
@@ -113,14 +114,91 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   return `${mins}m ago`;
 }
 
+function AccountUsageSection({ entry, isActive, defaultExpanded }: {
+  entry: AccountUsageEntry;
+  isActive: boolean;
+  defaultExpanded: boolean;
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const { usage } = entry;
+  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+
+  // Summary: worst utilization for collapsed view
+  const worstPct = Math.max(
+    usage.session ? Math.round(usage.session.utilization * 100) : 0,
+    usage.weekly ? Math.round(usage.weekly.utilization * 100) : 0,
+  );
+
+  return (
+    <div className={`rounded-md border ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
+      <button
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-1.5 px-2 py-1.5 text-left"
+      >
+        {expanded ? <ChevronDown className="size-3 text-text-subtle shrink-0" /> : <ChevronRight className="size-3 text-text-subtle shrink-0" />}
+        <span className="text-xs font-medium truncate flex-1">
+          {entry.accountLabel ?? entry.accountId.slice(0, 8)}
+        </span>
+        {isActive && (
+          <span className="text-[9px] px-1 py-0 rounded bg-primary/20 text-primary font-medium shrink-0">In use</span>
+        )}
+        {!entry.isOAuth && (
+          <span className="text-[9px] text-text-subtle shrink-0">API key</span>
+        )}
+        {!expanded && hasBuckets && (
+          <span className={`text-[10px] font-medium tabular-nums shrink-0 ${pctColor(worstPct)}`}>
+            {worstPct}%
+          </span>
+        )}
+        {entry.accountStatus === "disabled" && (
+          <span className="text-[9px] text-text-subtle shrink-0">disabled</span>
+        )}
+      </button>
+      {expanded && (
+        <div className="px-2 pb-2 space-y-2">
+          {hasBuckets ? (
+            <>
+              <BucketRow label="5-Hour Session" bucket={usage.session} />
+              <BucketRow label="Weekly" bucket={usage.weekly} />
+              <BucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
+              <BucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+            </>
+          ) : (
+            <p className="text-[10px] text-text-subtle">
+              {entry.isOAuth ? "No usage data yet" : "Usage tracking not available for API keys"}
+            </p>
+          )}
+          {usage.lastFetchedAt && (
+            <p className="text-[9px] text-text-subtle">
+              Updated: {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastFetchedAt }: UsageDetailPanelProps) {
+  const [allUsages, setAllUsages] = useState<AccountUsageEntry[]>([]);
+  const [loadingAll, setLoadingAll] = useState(false);
+
+  useEffect(() => {
+    if (!visible) return;
+    setLoadingAll(true);
+    getAllAccountUsages()
+      .then(setAllUsages)
+      .catch(() => {})
+      .finally(() => setLoadingAll(false));
+  }, [visible]);
+
   if (!visible) return null;
 
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
-  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+  const hasMultipleAccounts = allUsages.length > 0;
 
   return (
-    <div className="border-b border-border bg-surface px-3 py-2.5 space-y-2.5">
+    <div className="border-b 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">
         <div className="flex items-center gap-2">
           <span className="text-xs font-semibold text-text-primary">Usage Limits</span>
@@ -148,17 +226,35 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         </div>
       </div>
 
-      {hasBuckets ? (
-        <div className="space-y-2.5">
-          <BucketRow label="5-Hour Session" bucket={usage.session} />
-          <BucketRow label="Weekly" bucket={usage.weekly} />
-          <BucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
-          <BucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+      {hasMultipleAccounts ? (
+        <div className="space-y-1.5">
+          {loadingAll ? (
+            <p className="text-[10px] text-text-subtle">Loading accounts...</p>
+          ) : (
+            allUsages.map((entry) => (
+              <AccountUsageSection
+                key={entry.accountId}
+                entry={entry}
+                isActive={entry.accountId === usage.activeAccountId}
+                defaultExpanded={entry.accountId === usage.activeAccountId}
+              />
+            ))
+          )}
         </div>
       ) : (
-        <p className="text-xs text-text-subtle">
-          No data — run <code className="bg-surface-elevated px-1 rounded">bun install</code>
-        </p>
+        // Fallback: single-account view (legacy or no accounts configured)
+        <>
+          {usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
+            <div className="space-y-2.5">
+              <BucketRow label="5-Hour Session" bucket={usage.session} />
+              <BucketRow label="Weekly" bucket={usage.weekly} />
+              <BucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
+              <BucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+            </div>
+          ) : (
+            <p className="text-xs text-text-subtle">No usage data available</p>
+          )}
+        </>
       )}
 
       {hasCost && (

package/src/web/components/settings/accounts-settings-section.tsx

@@ -0,0 +1,358 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Switch } from "@/components/ui/switch";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import {
+  getAccounts,
+  getActiveAccount,
+  addAccount,
+  deleteAccount,
+  patchAccount,
+  getAccountSettings,
+  updateAccountSettings,
+  getAllAccountUsages,
+  type AccountInfo,
+  type AccountSettings,
+  type AccountUsageEntry,
+} from "../../lib/api-settings";
+
+function detectTokenType(token: string): string {
+  if (token.startsWith("sk-ant-oat")) return "OAuth token (Claude Max/Pro)";
+  if (token.startsWith("sk-ant-api")) return "API key";
+  return "Unknown format";
+}
+
+function miniBarColor(pct: number): string {
+  if (pct >= 90) return "bg-red-500";
+  if (pct >= 70) return "bg-amber-500";
+  return "bg-green-500";
+}
+
+function miniPctColor(pct: number): string {
+  if (pct >= 90) return "text-red-500";
+  if (pct >= 70) return "text-amber-500";
+  return "text-green-500";
+}
+
+function MiniBar({ label, value }: { label: string; value: number }) {
+  const pct = Math.round(value * 100);
+  return (
+    <div className="flex items-center gap-1">
+      <span className="text-[9px] text-muted-foreground w-5 shrink-0">{label}</span>
+      <div className="w-12 h-1.5 rounded-full bg-border overflow-hidden">
+        <div className={`h-full rounded-full ${miniBarColor(pct)}`} style={{ width: `${Math.min(pct, 100)}%` }} />
+      </div>
+      <span className={`text-[9px] tabular-nums w-7 ${miniPctColor(pct)}`}>{pct}%</span>
+    </div>
+  );
+}
+
+function CompactUsageBars({ usage }: { usage: AccountUsageEntry["usage"] }) {
+  if (!usage.session && !usage.weekly) return null;
+  return (
+    <div className="flex flex-col gap-0.5 mt-1">
+      {usage.session && <MiniBar label="5h" value={usage.session.utilization} />}
+      {usage.weekly && <MiniBar label="Wk" value={usage.weekly.utilization} />}
+    </div>
+  );
+}
+
+export function AccountsSettingsSection() {
+  const [accounts, setAccounts] = useState<AccountInfo[]>([]);
+  const [activeAccountId, setActiveAccountId] = useState<string | null>(null);
+  const [settings, setSettings] = useState<AccountSettings | null>(null);
+  const [usageMap, setUsageMap] = useState<Map<string, AccountUsageEntry["usage"]>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
+  const [showAddDialog, setShowAddDialog] = useState(false);
+  const [newToken, setNewToken] = useState("");
+  const [newLabel, setNewLabel] = useState("");
+  const [adding, setAdding] = useState(false);
+
+  useEffect(() => {
+    refresh();
+  }, []);
+
+  async function refresh() {
+    setLoading(true);
+    try {
+      const [accs, cfg, active, usages] = await Promise.all([
+        getAccounts(), getAccountSettings(), getActiveAccount(), getAllAccountUsages(),
+      ]);
+      setAccounts(accs);
+      setSettings(cfg);
+      setActiveAccountId(active?.id ?? null);
+      setUsageMap(new Map(usages.map((u) => [u.accountId, u.usage])));
+    } catch {
+      // ignore
+    }
+    setLoading(false);
+  }
+
+  async function handleAddAccount() {
+    if (!newToken.trim()) return;
+    setAdding(true);
+    try {
+      await addAccount({ apiKey: newToken.trim(), label: newLabel.trim() || undefined });
+      setMessage({ type: "success", text: "Account added successfully!" });
+      setShowAddDialog(false);
+      setNewToken("");
+      setNewLabel("");
+      refresh();
+    } catch (e) {
+      setMessage({ type: "error", text: (e as Error).message });
+    }
+    setAdding(false);
+  }
+
+  async function handleToggle(id: string, currentStatus: string) {
+    const newStatus = currentStatus === "disabled" ? "active" : "disabled";
+    await patchAccount(id, { status: newStatus });
+    refresh();
+  }
+
+  async function handleDelete(id: string, email: string | null) {
+    if (!confirm(`Remove account ${email ?? id}?`)) return;
+    await deleteAccount(id);
+    refresh();
+  }
+
+  function formatLastUsed(ts: number | null): string {
+    if (!ts) return "Never";
+    const diff = Math.floor(Date.now() / 1000 - ts);
+    if (diff < 60) return "Just now";
+    if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
+    if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`;
+    return `${Math.floor(diff / 86400)}d ago`;
+  }
+
+  function formatCooldown(cooldownUntil: number | null): string {
+    if (!cooldownUntil) return "";
+    const remaining = cooldownUntil - Math.floor(Date.now() / 1000);
+    if (remaining <= 0) return "";
+    if (remaining < 60) return `${remaining}s`;
+    return `${Math.floor(remaining / 60)}m ${remaining % 60}s`;
+  }
+
+  function statusBadge(acc: AccountInfo) {
+    if (acc.status === "active") return <Badge variant="default" className="text-[10px] px-1.5 py-0">Active</Badge>;
+    if (acc.status === "disabled") return <Badge variant="secondary" className="text-[10px] px-1.5 py-0">Disabled</Badge>;
+    const cd = formatCooldown(acc.cooldownUntil);
+    return <Badge variant="destructive" className="text-[10px] px-1.5 py-0">Cooldown{cd ? ` (${cd})` : ""}</Badge>;
+  }
+
+  async function handleExport() {
+    window.location.href = "/api/accounts/export";
+  }
+
+  async function handleImport(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const text = await file.text();
+    try {
+      const res = await fetch("/api/accounts/import", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: text,
+      });
+      const json = await res.json() as { ok: boolean; data?: { imported: number }; error?: string };
+      if (json.ok) {
+        setMessage({ type: "success", text: `Imported ${json.data?.imported ?? 0} account(s).` });
+        refresh();
+      } else {
+        setMessage({ type: "error", text: json.error ?? "Import failed" });
+      }
+    } catch {
+      setMessage({ type: "error", text: "Import failed" });
+    }
+    e.target.value = "";
+  }
+
+  const tokenHint = newToken.trim() ? detectTokenType(newToken.trim()) : "";
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <p className="text-[11px] text-muted-foreground mb-3">
+          Connect multiple Claude accounts. PPM rotates between them automatically to avoid rate limits.
+        </p>
+
+        {message && (
+          <div className={`text-[11px] mb-3 p-2 rounded ${message.type === "success" ? "bg-green-500/10 text-green-600" : "bg-red-500/10 text-red-600"}`}>
+            {message.text}
+          </div>
+        )}
+
+        <div className="space-y-1.5 mb-3">
+          {loading && <p className="text-[11px] text-muted-foreground">Loading...</p>}
+          {!loading && accounts.length === 0 && (
+            <p className="text-[11px] text-muted-foreground">No accounts connected.</p>
+          )}
+          {accounts.map((acc) => (
+            <div key={acc.id} className={`flex items-center justify-between p-2.5 rounded-lg border bg-card gap-2 ${acc.id === activeAccountId ? "ring-1 ring-primary/50 border-primary/30" : ""}`}>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-1.5 flex-wrap">
+                  <span className="text-xs font-medium truncate">{acc.label ?? acc.email ?? acc.id.slice(0, 8)}</span>
+                  {statusBadge(acc)}
+                  {acc.id === activeAccountId && <Badge variant="outline" className="text-[9px] px-1 py-0 border-primary/40 text-primary">In use</Badge>}
+                </div>
+                <div className="text-[11px] text-muted-foreground mt-0.5 flex gap-2 flex-wrap">
+                  {acc.email && acc.label && <span>{acc.email}</span>}
+                  <span>{acc.totalRequests} reqs</span>
+                  <span>Last: {formatLastUsed(acc.lastUsedAt)}</span>
+                </div>
+                {usageMap.get(acc.id) && <CompactUsageBars usage={usageMap.get(acc.id)!} />}
+              </div>
+              <div className="flex items-center gap-1.5 shrink-0">
+                <Switch
+                  checked={acc.status !== "disabled"}
+                  onCheckedChange={() => handleToggle(acc.id, acc.status)}
+                  disabled={acc.status === "cooldown"}
+                  className="scale-75"
+                />
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="h-6 w-6 p-0 text-muted-foreground hover:text-destructive"
+                  onClick={() => handleDelete(acc.id, acc.email)}
+                >
+                  ✕
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="flex gap-1.5 flex-wrap">
+          <Button size="sm" className="h-7 text-xs" onClick={() => setShowAddDialog(true)}>
+            + Add Account
+          </Button>
+          <Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleExport}>
+            Export
+          </Button>
+          <label>
+            <Button size="sm" variant="outline" className="h-7 text-xs" asChild>
+              <span>Import</span>
+            </Button>
+            <input type="file" accept=".json" className="hidden" onChange={handleImport} />
+          </label>
+        </div>
+      </div>
+
+      {settings && (
+        <div className="border-t pt-3 space-y-2">
+          <p className="text-[11px] font-medium text-muted-foreground">Rotation Settings</p>
+          <div className="flex items-center gap-2">
+            <label className="text-[11px] text-muted-foreground w-20 shrink-0">Strategy</label>
+            <Select
+              value={settings.strategy}
+              onValueChange={async (v) => {
+                const updated = await updateAccountSettings({ strategy: v as "round-robin" | "fill-first" });
+                setSettings(updated);
+              }}
+            >
+              <SelectTrigger className="w-32 h-7 text-xs">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="round-robin">Round-robin</SelectItem>
+                <SelectItem value="fill-first">Fill-first</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <label className="text-[11px] text-muted-foreground w-20 shrink-0">Max retry</label>
+            <input
+              type="number"
+              min={0}
+              value={settings.maxRetry}
+              className="w-14 h-7 text-xs border rounded px-2 bg-background"
+              onChange={async (e) => {
+                const v = parseInt(e.target.value, 10);
+                if (!isNaN(v) && v >= 0) {
+                  const updated = await updateAccountSettings({ maxRetry: v });
+                  setSettings(updated);
+                }
+              }}
+            />
+            <span className="text-[11px] text-muted-foreground">(0 = try all)</span>
+          </div>
+          <p className="text-[11px] text-muted-foreground">
+            Active accounts: {settings.activeCount}
+          </p>
+        </div>
+      )}
+
+      <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle className="text-sm">Add Claude Account</DialogTitle>
+            <DialogDescription className="text-xs leading-relaxed">
+              Supports both Claude Max/Pro session tokens and API keys. Token is encrypted and stored locally.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="token" className="text-xs">Token</Label>
+              <Input
+                id="token"
+                type="password"
+                placeholder="sk-ant-..."
+                value={newToken}
+                onChange={(e) => setNewToken(e.target.value)}
+                className="text-xs h-8 font-mono"
+              />
+              {tokenHint && (
+                <p className="text-[10px] text-muted-foreground">
+                  Detected: {tokenHint}
+                </p>
+              )}
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="label" className="text-xs">Label (optional)</Label>
+              <Input
+                id="label"
+                placeholder="e.g. Personal, Work"
+                value={newLabel}
+                onChange={(e) => setNewLabel(e.target.value)}
+                className="text-xs h-8"
+              />
+            </div>
+            <div className="rounded-md bg-muted/50 p-2.5 space-y-1.5">
+              <p className="text-[10px] font-medium text-muted-foreground">How to get your token:</p>
+              <div className="text-[10px] text-muted-foreground space-y-1">
+                <p><span className="font-medium">Claude Max/Pro:</span> Run in terminal:</p>
+                <code className="block bg-background rounded px-1.5 py-1 text-[10px] font-mono select-all">
+                  claude setup-token
+                </code>
+                <p className="text-[9px]">Follow the prompts to generate a long-lived token (valid for 1 year).</p>
+                <p className="mt-1"><span className="font-medium">API key:</span>{" "}
+                  <a
+                    href="https://console.anthropic.com/settings/keys"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary underline hover:no-underline"
+                  >
+                    console.anthropic.com/settings/keys
+                  </a>
+                </p>
+              </div>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button size="sm" variant="outline" className="text-xs h-7" onClick={() => setShowAddDialog(false)}>
+              Cancel
+            </Button>
+            <Button size="sm" className="text-xs h-7" onClick={handleAddAccount} disabled={!newToken.trim() || adding}>
+              {adding ? "Adding..." : "Add Account"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

package/src/web/components/settings/settings-tab.tsx

@@ -6,6 +6,7 @@ import { cn } from "@/lib/utils";
 import { AISettingsSection } from "./ai-settings-section";
 import { KeyboardShortcutsSection } from "./keyboard-shortcuts-section";
 import { TelegramSettingsSection } from "./telegram-settings-section";
+import { AccountsSettingsSection } from "./accounts-settings-section";
 import { usePushNotification } from "@/hooks/use-push-notification";
 
 const THEME_OPTIONS: { value: Theme; label: string; icon: React.ElementType }[] = [
@@ -137,6 +138,16 @@ export function SettingsTab() {
             </AccordionContent>
           </AccordionItem>
 
+          {/* Accounts */}
+          <AccordionItem value="accounts">
+            <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">
+              Accounts
+            </AccordionTrigger>
+            <AccordionContent className="pb-2">
+              <AccountsSettingsSection />
+            </AccordionContent>
+          </AccordionItem>
+
           {/* Keyboard Shortcuts */}
           <AccordionItem value="shortcuts">
             <AccordionTrigger className="py-2 text-xs font-medium text-text-secondary hover:no-underline">

package/src/web/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

package/src/web/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ComponentRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

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

@@ -2,7 +2,7 @@ import { useState, useCallback, useEffect, useRef } from "react";
 import { getAuthToken, projectUrl } from "@/lib/api-client";
 import type { UsageInfo } from "../../types/chat";
 
-const POLL_INTERVAL = 30_000; // read cache every 30s
+const POLL_INTERVAL = 120_000; // read cache every 2min
 
 interface UseUsageReturn {
   usageInfo: UsageInfo;