@hienlh/ppm 0.7.16 → 0.7.18

package/src/web/components/chat/message-list.tsx

@@ -141,8 +141,10 @@ function MessageBubble({ message, isStreaming, projectName, onFork }: { message:
               <MarkdownContent content={message.content} projectName={projectName} />
             </div>
           )}
-      {message.accountLabel && (
-        <p className="text-[11px] text-text-tertiary/60 select-none">via {message.accountLabel}</p>
+      {!isStreaming && message.accountLabel && (
+        <p className="text-[10px] select-none" style={{ color: "var(--color-text-subtle)" }}>
+          via {message.accountLabel}
+        </p>
       )}
     </div>
   );

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

@@ -1,7 +1,17 @@
 import { useState, useEffect } from "react";
-import { Activity, RefreshCw } from "lucide-react";
+import { Activity, RefreshCw, Eye, ShieldCheck, Loader2, X } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
 import type { UsageInfo, LimitBucket } from "../../../types/chat";
-import { getAllAccountUsages, type AccountUsageEntry } from "../../lib/api-settings";
+import {
+  getAccounts,
+  getActiveAccount,
+  getAllAccountUsages,
+  patchAccount,
+  verifyAccount,
+  type AccountInfo,
+  type AccountUsageEntry,
+  type OAuthProfileData,
+} from "../../lib/api-settings";
 
 interface UsageBadgeProps {
   usage: UsageInfo;
@@ -111,19 +121,30 @@ function formatLastUpdated(ts: number | null | undefined): string | null {
   if (secs < 5) return "just now";
   if (secs < 60) return `${secs}s ago`;
   const mins = Math.floor(secs / 60);
-  return `${mins}m ago`;
+  if (mins < 60) return `${mins}m ago`;
+  const hrs = Math.floor(mins / 60);
+  const remainMins = mins % 60;
+  if (hrs < 24) return remainMins > 0 ? `${hrs}h ${remainMins}m ago` : `${hrs}h ago`;
+  const days = Math.floor(hrs / 24);
+  return `${days}d ago`;
 }
 
-function AccountUsageCard({ entry, isActive }: {
+function AccountUsageCard({ entry, isActive, accountInfo, onToggle, onVerify, verifyingId, onViewProfile }: {
   entry: AccountUsageEntry;
   isActive: boolean;
+  accountInfo?: AccountInfo;
+  onToggle?: (id: string, status: string) => void;
+  onVerify?: (id: string) => void;
+  verifyingId?: string | null;
+  onViewProfile?: (profile: OAuthProfileData) => void;
 }) {
   const { usage } = entry;
   const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+  const status = accountInfo?.status ?? entry.accountStatus;
 
   return (
     <div className={`rounded-md border p-2 space-y-1.5 ${isActive ? "border-primary/30 bg-primary/5" : "border-border/50"}`}>
-      <div className="flex items-center gap-1.5 flex-wrap">
+      <div className="flex items-center gap-1.5">
         <span className="text-xs font-medium truncate flex-1 min-w-0">
           {entry.accountLabel ?? entry.accountId.slice(0, 8)}
         </span>
@@ -133,9 +154,36 @@ function AccountUsageCard({ entry, isActive }: {
         {!entry.isOAuth && (
           <span className="text-[9px] text-text-subtle shrink-0">API key</span>
         )}
-        {entry.accountStatus === "disabled" && (
-          <span className="text-[9px] text-text-subtle shrink-0">disabled</span>
-        )}
+        {/* Account controls */}
+        <div className="flex items-center gap-0.5 shrink-0">
+          {onViewProfile && accountInfo?.profileData && (
+            <button
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
+              onClick={() => onViewProfile(accountInfo.profileData!)}
+              title="View profile"
+            >
+              <Eye className="size-3" />
+            </button>
+          )}
+          {onVerify && (
+            <button
+              className="p-1 rounded cursor-pointer text-text-subtle hover:text-green-600 hover:bg-surface-elevated transition-colors"
+              onClick={() => onVerify(entry.accountId)}
+              disabled={verifyingId === entry.accountId}
+              title="Verify token"
+            >
+              {verifyingId === entry.accountId ? <Loader2 className="size-3 animate-spin" /> : <ShieldCheck className="size-3" />}
+            </button>
+          )}
+          {onToggle && (
+            <Switch
+              checked={status !== "disabled"}
+              onCheckedChange={() => onToggle(entry.accountId, status)}
+              disabled={status === "cooldown"}
+              className="scale-[0.6] cursor-pointer"
+            />
+          )}
+        </div>
       </div>
       {hasBuckets ? (
         <div className="space-y-1.5">
@@ -160,27 +208,57 @@ function AccountUsageCard({ entry, isActive }: {
 
 export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, lastFetchedAt }: UsageDetailPanelProps) {
   const [allUsages, setAllUsages] = useState<AccountUsageEntry[]>([]);
-  const [loadingAll, setLoadingAll] = useState(false);
+  const [accounts, setAccounts] = useState<AccountInfo[]>([]);
+  const [activeAccountId, setActiveAccountId] = useState<string | null>(null);
+  const [loadingAll, setLoadingAll] = useState(true);
+  const [verifyingId, setVerifyingId] = useState<string | null>(null);
+  const [profileView, setProfileView] = useState<OAuthProfileData | null>(null);
+
+  async function loadAll() {
+    setLoadingAll(true);
+    const [usages, accs, active] = await Promise.allSettled([
+      getAllAccountUsages(), getAccounts(), getActiveAccount(),
+    ]);
+    if (usages.status === "fulfilled") setAllUsages(usages.value);
+    if (accs.status === "fulfilled") setAccounts(accs.value);
+    if (active.status === "fulfilled") setActiveAccountId(active.value?.id ?? null);
+    setLoadingAll(false);
+  }
 
   useEffect(() => {
     if (!visible) return;
-    setLoadingAll(true);
-    getAllAccountUsages()
-      .then(setAllUsages)
-      .catch(() => {})
-      .finally(() => setLoadingAll(false));
+    loadAll();
   }, [visible]);
 
+  // Re-fetch account usages after parent refreshes from Anthropic API
+  useEffect(() => {
+    if (!visible || !lastFetchedAt) return;
+    loadAll();
+  }, [lastFetchedAt]); // eslint-disable-line react-hooks/exhaustive-deps
+
   if (!visible) return null;
 
+  const accountMap = new Map(accounts.map((a) => [a.id, a]));
   const hasCost = usage.queryCostUsd != null || usage.totalCostUsd != null;
   const hasMultipleAccounts = allUsages.length > 0;
 
+  async function handleToggle(id: string, status: string) {
+    await patchAccount(id, { status: status === "disabled" ? "active" : "disabled" });
+    loadAll();
+    onReload?.();
+  }
+
+  async function handleVerify(id: string) {
+    setVerifyingId(id);
+    try { await verifyAccount(id); loadAll(); } catch { /* silent */ }
+    setVerifyingId(null);
+  }
+
   return (
     <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>
+          <span className="text-xs font-semibold text-text-primary">Usage & Accounts</span>
           {lastFetchedAt && (
             <span className="text-[10px] text-text-subtle">{formatLastUpdated(new Date(lastFetchedAt).getTime())}</span>
           )}
@@ -188,39 +266,43 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
         <div className="flex items-center gap-1">
           {onReload && (
             <button
-              onClick={onReload}
-              disabled={loading}
-              className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50"
-              title="Refresh usage data"
+              onClick={() => { setLoadingAll(true); onReload(); }}
+              disabled={loading || loadingAll}
+              className="text-xs text-text-subtle hover:text-text-primary px-1 disabled:opacity-50 cursor-pointer"
+              title="Refresh"
             >
-              <RefreshCw className={`size-3 ${loading ? "animate-spin" : ""}`} />
+              <RefreshCw className={`size-3 ${(loading || loadingAll) ? "animate-spin" : ""}`} />
             </button>
           )}
           <button
             onClick={onClose}
-            className="text-xs text-text-subtle hover:text-text-primary px-1"
+            className="text-xs text-text-subtle hover:text-text-primary px-1 cursor-pointer"
           >
-            ✕
+            <X className="size-3" />
           </button>
         </div>
       </div>
 
-      {hasMultipleAccounts ? (
+      {(hasMultipleAccounts || loadingAll) ? (
         <div className="grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-1.5">
           {loadingAll ? (
-            <p className="text-[10px] text-text-subtle">Loading accounts...</p>
+            <p className="text-[10px] text-text-subtle">Loading...</p>
           ) : (
             allUsages.map((entry) => (
               <AccountUsageCard
                 key={entry.accountId}
                 entry={entry}
-                isActive={entry.accountId === usage.activeAccountId}
+                isActive={entry.accountId === (activeAccountId ?? usage.activeAccountId)}
+                accountInfo={accountMap.get(entry.accountId)}
+                onToggle={handleToggle}
+                onVerify={handleVerify}
+                verifyingId={verifyingId}
+                onViewProfile={setProfileView}
               />
             ))
           )}
         </div>
       ) : (
-        // Fallback: single-account view (legacy or no accounts configured)
         <>
           {usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet ? (
             <div className="space-y-2.5">
@@ -255,6 +337,26 @@ export function UsageDetailPanel({ usage, visible, onClose, onReload, loading, l
           )}
         </div>
       )}
+
+      {/* Inline profile popup */}
+      {profileView && (
+        <div className="border-t border-border pt-2">
+          <div className="flex items-center justify-between mb-1">
+            <span className="text-[10px] font-medium text-text-subtle">Profile</span>
+            <button className="text-text-subtle hover:text-foreground cursor-pointer" onClick={() => setProfileView(null)}>
+              <X className="size-3" />
+            </button>
+          </div>
+          <div className="grid grid-cols-[70px_1fr] gap-x-2 gap-y-0.5 text-[10px]">
+            {profileView.account?.display_name && <><span className="text-text-subtle">Name</span><span>{profileView.account.display_name}</span></>}
+            {profileView.account?.email && <><span className="text-text-subtle">Email</span><span>{profileView.account.email}</span></>}
+            {profileView.organization?.name && <><span className="text-text-subtle">Org</span><span>{profileView.organization.name}</span></>}
+            {profileView.organization?.organization_type && <><span className="text-text-subtle">Type</span><span>{profileView.organization.organization_type}</span></>}
+            {profileView.organization?.rate_limit_tier && <><span className="text-text-subtle">Tier</span><span>{profileView.organization.rate_limit_tier}</span></>}
+            {profileView.organization?.subscription_status && <><span className="text-text-subtle">Status</span><span>{profileView.organization.subscription_status}</span></>}
+          </div>
+        </div>
+      )}
     </div>
   );
 }