@hienlh/ppm 0.19.2 → 0.19.4

package/src/web/components/layout/mobile-drawer.tsx

@@ -1,12 +1,11 @@
 import { useState, useCallback, useEffect, useMemo } from "react";
-import { X, Bug as BugIcon, Cloud, FolderTree, MonitorSmartphone } from "lucide-react";
+import { X, Bug as BugIcon, Cloud, FolderTree, MonitorSmartphone, Settings } from "lucide-react";
 import { useShallow } from "zustand/react/shallow";
 import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { useExtensionStore } from "@/stores/extension-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
-import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { JiraPanel } from "@/components/jira/jira-panel";
 import { AiResourcesPanel } from "@/components/ai-resources/ai-resources-panel";
@@ -25,6 +24,7 @@ import { isMobileDevice } from "@/hooks/use-is-mobile";
 import { openExplorer } from "@/components/os-explorer/open-explorer";
 import { useOpenRemoteDesktop } from "@/components/remote-desktop/open-remote-desktop";
 import { useRemoteDesktopAvailable } from "@/components/remote-desktop/use-remote-desktop-available";
+import { openSettings } from "@/components/settings/open-settings";
 import { FeatureBadge } from "@/components/ui/feature-badge";
 import type { FeatureBadgeId } from "@/lib/feature-badges";
 import { cn } from "@/lib/utils";
@@ -32,7 +32,7 @@ import { cn } from "@/lib/utils";
 // Tab ids the mobile drawer can render content for. `search` is desktop-only for now;
 // ext views are supported via the `ext:` prefix.
 const MOBILE_SUPPORTED = new Set<string>([
-  "history", "teams", "explorer", "git", "database", "tunnels", "ai-resources", "settings", "jira",
+  "history", "teams", "explorer", "git", "database", "tunnels", "ai-resources", "jira",
 ]);
 const isMobileSupported = (id: SidebarActiveTab) => MOBILE_SUPPORTED.has(id) || id.startsWith("ext:");
 
@@ -148,7 +148,6 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
           {activeTab === "tunnels" && <TunnelManagerTab />}
           {activeTab === "jira" && <JiraPanel />}
           {activeTab === "ai-resources" && <AiResourcesPanel />}
-          {activeTab === "settings" && <SettingsTab />}
           {activeTab.startsWith("ext:") && <ExtensionTreeView viewId={activeTab.slice(4)} className="h-full" />}
         </div>
 
@@ -171,6 +170,8 @@ export function MobileDrawer({ isOpen, onClose, initialTab }: MobileDrawerProps)
                 <FooterTile icon={MonitorSmartphone} label="Remote" badge="remote-desktop" onClick={() => { onClose(); openRemoteDesktop(); }} />
               )}
               <FooterTile icon={Cloud} label="Cloud" onClick={() => setCloudOpen(true)} />
+              {/* Also not a sidebar tab — settings open as their own tab here, window on desktop. */}
+              <FooterTile icon={Settings} label="Settings" onClick={() => { onClose(); openSettings(); }} />
               <FooterTile icon={BugIcon} label="Bug" onClick={handleReportBug} />
             </div>
             {/* Version / upgrade pinned at the very bottom, under a divider. */}

package/src/web/components/layout/mobile-nav.tsx

@@ -261,7 +261,11 @@ export function MobileNav({ onMenuPress, onProjectsPress }: MobileNavProps) {
       <div className="flex items-center h-12">
         {/* Fixed cluster: Menu | Project | Terminal | + */}
         <div className="flex items-center shrink-0 border-r border-border">
-          <button onClick={onMenuPress} className="flex items-center justify-center size-12 shrink-0 text-text-secondary">
+          <button
+            onClick={onMenuPress}
+            aria-label="Open menu"
+            className="flex items-center justify-center size-12 shrink-0 text-text-secondary"
+          >
             <Menu className="size-5" />
           </button>
 

package/src/web/components/layout/nav-section-rail.tsx

@@ -4,6 +4,7 @@ import { Settings, Bug, Cloud, FolderTree, MonitorSmartphone } from "lucide-reac
 import { openExplorer } from "@/components/os-explorer/open-explorer";
 import { useOpenRemoteDesktop } from "@/components/remote-desktop/open-remote-desktop";
 import { useRemoteDesktopAvailable } from "@/components/remote-desktop/use-remote-desktop-available";
+import { openSettings } from "@/components/settings/open-settings";
 import { FeatureBadge } from "@/components/ui/feature-badge";
 import type { FeatureBadgeId } from "@/lib/feature-badges";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
@@ -220,7 +221,7 @@ export const NavSectionRail = memo(function NavSectionRail({ className }: { clas
           <FooterUtil icon={MonitorSmartphone} label="Remote Desktop" featureBadge="remote-desktop" onClick={openRemoteDesktop} />
         )}
         <FooterUtil icon={Bug} label="Report Bug" onClick={handleReportBug} />
-        <FooterUtil icon={Settings} label="Settings" active={sidebarActiveTab === "settings"} onClick={() => handleTabClick("settings")} />
+        <FooterUtil icon={Settings} label="Settings" onClick={() => openSettings()} />
       </div>
     </div>
   );

package/src/web/components/layout/project-bottom-sheet.tsx

@@ -12,6 +12,7 @@ import { formatRelativeDate } from "@/lib/format-date";
 import { cn } from "@/lib/utils";
 import { copyToClipboard } from "@/lib/clipboard";
 import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { openSettings } from "@/components/settings/open-settings";
 
 interface ProjectBottomSheetProps {
   isOpen: boolean;
@@ -96,15 +97,8 @@ export function ProjectBottomSheet({ isOpen, onClose }: ProjectBottomSheetProps)
 
   function handleSettings() {
     handleClose();
-    // Mobile: open drawer with settings tab
-    if (window.innerWidth < 768) {
-      window.dispatchEvent(new Event("open-mobile-settings"));
-      return;
-    }
-    // Desktop: open sidebar settings tab
-    const { sidebarCollapsed, toggleSidebar, setSidebarActiveTab } = useSettingsStore.getState();
-    if (sidebarCollapsed) toggleSidebar();
-    setSidebarActiveTab("settings");
+    // No viewport branch here: the hook routes to a window or a tab on its own.
+    openSettings();
   }
 
   async function handleRename() {

package/src/web/components/layout/sidebar.tsx

@@ -5,7 +5,6 @@ import { useProjectStore } from "@/stores/project-store";
 import { useSettingsStore, type SidebarActiveTab } from "@/stores/settings-store";
 import { FileTree } from "@/components/explorer/file-tree";
 import { GitStatusPanel } from "@/components/git/git-status-panel";
-import { SettingsTab } from "@/components/settings/settings-tab";
 import { DatabaseSidebar } from "@/components/database/database-sidebar";
 import { SearchPanel } from "@/components/explorer/search-panel";
 import { ExtensionTreeView } from "@/components/extensions/extension-tree-view";
@@ -137,7 +136,6 @@ export const Sidebar = memo(function Sidebar() {
             {sidebarActiveTab === "tunnels" && <TunnelManagerTab />}
             {sidebarActiveTab === "jira" && <JiraPanel />}
             {sidebarActiveTab === "ai-resources" && <AiResourcesPanel />}
-            {sidebarActiveTab === "settings" && <SettingsTab />}
             {typeof sidebarActiveTab === "string" && sidebarActiveTab.startsWith("ext:") && (
               <ExtensionTreeView viewId={sidebarActiveTab.slice(4)} className="h-full" />
             )}

package/src/web/components/layout/tab-pop-out-menu-item.tsx

@@ -15,6 +15,7 @@ import { isDocumentPipSupported } from "@/components/floating-window/pip/pip-sup
 import { ContextMenuItem, ContextMenuSeparator } from "@/components/ui/context-menu";
 import { useIsMobile } from "@/hooks/use-is-mobile";
 import { usePanelStore } from "@/stores/panel-store";
+import { NON_POPPABLE_TAB_TYPES } from "@/stores/panel-utils";
 import type { Tab } from "@/stores/tab-store";
 
 interface TabPopOutMenuItemProps {
@@ -25,9 +26,9 @@ interface TabPopOutMenuItemProps {
 
 export function TabPopOutMenuItem({ tab, panelId }: TabPopOutMenuItemProps) {
   const isMobile = useIsMobile();
-  // The monitor already has a window kind of its own; detaching it would open a second,
+  // Some tabs already have a window kind of their own; detaching one would open a second,
   // duplicate presentation of the same data.
-  if (isMobile || tab.type === "system-monitor") return null;
+  if (isMobile || NON_POPPABLE_TAB_TYPES.has(tab.type)) return null;
 
   return (
     <>

package/src/web/components/settings/accounts/account-add-dialog.tsx

@@ -0,0 +1,155 @@
+import { useState } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Loader2 } from "lucide-react";
+import { addAccount, getOAuthUrl, exchangeOAuthCode } from "../../../lib/api-settings";
+
+// ── Add Account Dialog ─────────────────────────────────────────────
+
+interface AddAccountDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: (msg?: string) => void;
+}
+
+export function AddAccountDialog({ open, onOpenChange, onSuccess }: AddAccountDialogProps) {
+  const [newToken, setNewToken] = useState("");
+  const [newLabel, setNewLabel] = useState("");
+  const [adding, setAdding] = useState(false);
+  const [addError, setAddError] = useState<string | null>(null);
+  const [oauthState, setOauthState] = useState<string | null>(null);
+  const [oauthCode, setOauthCode] = useState("");
+  const [oauthLoading, setOauthLoading] = useState(false);
+  const [oauthStep, setOauthStep] = useState<"idle" | "waiting">("idle");
+
+  function resetOAuth() {
+    setOauthState(null);
+    setOauthCode("");
+    setOauthStep("idle");
+    setAddError(null);
+  }
+
+  function handleClose() {
+    onOpenChange(false);
+    resetOAuth();
+    setNewToken("");
+    setNewLabel("");
+    setAddError(null);
+  }
+
+  async function handleOAuthLogin() {
+    setOauthLoading(true);
+    setAddError(null);
+    try {
+      const { url, state } = await getOAuthUrl();
+      setOauthState(state);
+      setOauthStep("waiting");
+      window.open(url, "_blank");
+    } catch (e) {
+      setAddError((e as Error).message);
+    }
+    setOauthLoading(false);
+  }
+
+  async function handleOAuthExchange() {
+    if (!oauthCode.trim() || !oauthState) return;
+    setOauthLoading(true);
+    setAddError(null);
+    try {
+      let code = oauthCode.trim();
+      if (code.includes("#")) code = code.split("#")[0] ?? code;
+      const acc = await exchangeOAuthCode(code, oauthState);
+      handleClose();
+      // Signing in again on an account this machine parked carries the token in but
+      // deliberately leaves it out of the rotation. A flat success over a toggle that is
+      // still off reads as a bug, and this is the only place the user finds out otherwise.
+      onSuccess(acc?.status === "disabled"
+        ? "Signed in. This account is still disabled — enable it to use it."
+        : "Account connected via OAuth!");
+    } catch (e) {
+      setAddError((e as Error).message);
+    }
+    setOauthLoading(false);
+  }
+
+  async function handleAddToken() {
+    if (!newToken.trim()) return;
+    setAdding(true);
+    setAddError(null);
+    try {
+      const acc = await addAccount({ apiKey: newToken.trim(), label: newLabel.trim() || undefined });
+      handleClose();
+      onSuccess(acc?.status === "disabled"
+        ? "Token updated. This account is still disabled — enable it to use it."
+        : "Account added!");
+    } catch (e) {
+      setAddError((e as Error).message);
+    }
+    setAdding(false);
+  }
+
+  const tokenHint = newToken.trim()
+    ? newToken.trim().startsWith("sk-ant-oat") ? "OAuth token (Claude Max/Pro)"
+    : newToken.trim().startsWith("sk-ant-api") ? "API key"
+    : "Unknown format"
+    : "";
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="text-sm">Add Claude Account</DialogTitle>
+          <DialogDescription className="text-xs leading-relaxed">
+            Connect via OAuth (recommended) or paste a token manually.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-3">
+          {/* OAuth login */}
+          <div className="rounded-md border p-3 space-y-2">
+            <p className="text-[11px] font-medium">Recommended: Login with Claude</p>
+            {oauthStep === "idle" ? (
+              <Button size="sm" className="w-full h-8 text-xs" onClick={handleOAuthLogin} disabled={oauthLoading}>
+                {oauthLoading ? <><Loader2 className="size-3 animate-spin mr-1" /> Opening...</> : "Login with Claude"}
+              </Button>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-[10px] text-muted-foreground">Authorize in the opened tab, then paste the code:</p>
+                <Input placeholder="Paste code here..." value={oauthCode} onChange={(e) => setOauthCode(e.target.value)} className="text-xs h-8 font-mono" autoFocus />
+                <div className="flex gap-1.5">
+                  <Button size="sm" className="flex-1 h-7 text-xs" onClick={handleOAuthExchange} disabled={!oauthCode.trim() || oauthLoading}>
+                    {oauthLoading ? <><Loader2 className="size-3 animate-spin mr-1" /> Connecting...</> : "Connect"}
+                  </Button>
+                  <Button size="sm" variant="ghost" className="h-7 text-xs" onClick={resetOAuth}>Cancel</Button>
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 border-t" />
+            <span className="text-[10px] text-muted-foreground">or paste token</span>
+            <div className="flex-1 border-t" />
+          </div>
+          {/* Manual token */}
+          <div className="space-y-1.5">
+            <Label htmlFor="add-token" className="text-xs">Token</Label>
+            <Input id="add-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="add-label" className="text-xs">Label (optional)</Label>
+            <Input id="add-label" placeholder="e.g. Personal, Work" value={newLabel} onChange={(e) => setNewLabel(e.target.value)} className="text-xs h-8" />
+          </div>
+        </div>
+        {addError && <div className="text-[11px] p-2 rounded bg-error/10 text-error">{addError}</div>}
+        <DialogFooter>
+          <Button size="sm" variant="outline" className="text-xs h-7" onClick={handleClose}>Cancel</Button>
+          <Button size="sm" className="text-xs h-7" onClick={handleAddToken} disabled={!newToken.trim() || adding}>
+            {adding ? "Adding..." : "Add Token"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/web/components/settings/accounts/account-backup-format.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared bits of the encrypted account-backup format.
+ *
+ * The password default is part of the format, not a UI nicety: an export written with it
+ * must import with it, so export and import have to read the same constant.
+ */
+
+/** Used when the user leaves the password field empty on either side of the round trip. */
+export const DEFAULT_PASSWORD = "ppm-hienlh";
+
+/** Save the backup text as a file — the fallback when the clipboard is unavailable. */
+export function downloadBackup(text: string): void {
+  const blob = new Blob([text], { type: "application/json" });
+  const a = document.createElement("a");
+  a.href = URL.createObjectURL(blob);
+  a.download = "ppm-accounts-backup.json";
+  a.click();
+  URL.revokeObjectURL(a.href);
+}

package/src/web/components/settings/accounts/account-bucket-row.tsx

@@ -0,0 +1,55 @@
+/**
+ * The usage bar, and the rate-limit-bucket adapter over it.
+ *
+ * Two callers with different data: a Claude bucket knows its reset time and window, a Codex
+ * usage figure is a bare percentage. `AccountUsageBar` is the shared visual so both read the
+ * same; the bucket adapter adds what only a bucket has. Fabricating a reset time to force
+ * Codex through the bucket shape would have put invented data on screen.
+ */
+
+import type { LimitBucket } from "../../../../types/chat";
+import { barColor, formatResetTime, pctColor } from "./account-usage-format";
+
+export function AccountUsageBar({ label, pct, reset }: {
+  label: string;
+  /** 0-100. Null renders the row with an em dash instead of a bar. */
+  pct: number | null;
+  /** "Resets in" text, when the source knows it. */
+  reset?: string | null;
+}) {
+  return (
+    <div className="space-y-1" data-testid="account-usage-bar">
+      <div className="flex items-center justify-between">
+        <span className="text-xs font-medium text-text-primary">{label}</span>
+        {reset && (
+          <span className="text-[10px] text-text-subtle" title="Resets in">↻ {reset}</span>
+        )}
+      </div>
+      <div className="flex items-center gap-2">
+        <div className="flex-1 h-2 rounded-full bg-border overflow-hidden">
+          {pct != null && (
+            <div
+              className={`h-full rounded-full transition-all ${barColor(pct)}`}
+              style={{ width: `${Math.min(pct, 100)}%` }}
+            />
+          )}
+        </div>
+        <span className={`text-xs font-medium tabular-nums w-10 text-right ${pct != null ? pctColor(pct) : "text-text-subtle"}`}>
+          {pct != null ? `${pct}%` : "—"}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/** A Claude rate-limit bucket as a usage bar. Renders nothing when the bucket is absent. */
+export function AccountBucketRow({ label, bucket }: { label: string; bucket?: LimitBucket }) {
+  if (!bucket) return null;
+  return (
+    <AccountUsageBar
+      label={label}
+      pct={Math.round(bucket.utilization * 100)}
+      reset={formatResetTime(bucket)}
+    />
+  );
+}

package/src/web/components/settings/accounts/account-card.tsx

@@ -0,0 +1,151 @@
+/**
+ * One account: name, badges, per-account controls, its rate-limit buckets, and a footer of
+ * token facts.
+ *
+ * Three layouts, because the two callers want opposite things. Settings manages accounts one
+ * at a time, so `list` gives each card the full width. The chat panel is for comparing them
+ * at a glance, so `strip` makes fixed-width cards that scroll sideways and `grid` fills a
+ * cell of the fullscreen view — stacked vertically, comparing two accounts meant scrolling
+ * past the one above.
+ *
+ * An expired account (past `expiresAt` AND no refresh token) is dimmed and loses every
+ * control except delete — toggling or exporting a token the server can no longer renew only
+ * produces confusing failures.
+ */
+
+import { Download, Eye, Trash2 } from "lucide-react";
+import { Switch } from "@/components/ui/switch";
+import type { AccountInfo, AccountUsageEntry, OAuthProfileData } from "../../../lib/api-settings";
+import { AccountBucketRow } from "./account-bucket-row";
+import { AccountCardShell } from "./accounts-pane-header";
+import { formatExpiry, formatLastUpdated, tokenStatus } from "./account-usage-format";
+
+export interface AccountCardProps {
+  entry: AccountUsageEntry;
+  isActive: boolean;
+  accountInfo?: AccountInfo;
+  onToggle?: (id: string, status: string) => void;
+  toggling?: boolean;
+  onDelete?: (id: string, display: string) => void;
+  onExport?: (id: string) => void;
+  onViewProfile?: (profile: OAuthProfileData, accountId: string) => void;
+  /** Brief highlight when this account's usage numbers just changed. */
+  flash?: boolean;
+  /** `list` fills the width, `strip` is a fixed-width card in a sideways scroller, `grid`
+   *  fills a cell of the fullscreen grid. */
+  layout?: "list" | "strip" | "grid";
+}
+
+// Fixed widths so a row scrolls instead of squeezing. Two of them: a read-only card holds a
+// name and its bars, but a card that also carries view/export/toggle/delete needs room for
+// four controls beside the name, and at the read-only width that header wraps.
+const STRIP_WIDTH = { readOnly: "min-w-[220px]", withActions: "min-w-[300px]" } as const;
+
+export function AccountCard({
+  entry, isActive, accountInfo, onToggle, toggling, onDelete, onExport, onViewProfile, flash,
+  layout = "list",
+}: AccountCardProps) {
+  const { usage } = entry;
+  const hasBuckets = usage.session || usage.weekly || usage.weeklyOpus || usage.weeklySonnet;
+  const status = accountInfo?.status ?? entry.accountStatus;
+  const isExpired = !!(
+    accountInfo && !accountInfo.hasRefreshToken && accountInfo.expiresAt
+    && accountInfo.expiresAt < Math.floor(Date.now() / 1000)
+  );
+  const ts = tokenStatus(accountInfo);
+  const hasActions = Boolean(onToggle || onDelete || onExport || onViewProfile);
+
+  const layoutClass = layout === "list"
+    ? ""
+    : layout === "grid"
+      // The cell owns the height, so the card spreads its rows into it.
+      ? "flex flex-col justify-evenly overflow-hidden min-h-0"
+      : `shrink-0 snap-start ${hasActions ? STRIP_WIDTH.withActions : STRIP_WIDTH.readOnly}`;
+
+  return (
+    <AccountCardShell
+      active={isActive}
+      flash={flash}
+      dense={layout !== "list"}
+      className={[layoutClass, isExpired ? "opacity-50" : ""].filter(Boolean).join(" ") || undefined}
+      data-testid="account-card"
+      data-account-id={entry.accountId}
+    >
+      <div className="flex items-center gap-2">
+        <span className="text-sm font-medium truncate flex-1 min-w-0">
+          {entry.accountLabel ?? entry.accountId.slice(0, 8)}
+        </span>
+        {isActive && <span className="text-[10px] text-primary shrink-0 font-medium">Active</span>}
+        {isExpired && <span className="text-[10px] text-error shrink-0 font-medium">Expired</span>}
+        {!entry.isOAuth && !isExpired && (
+          <span className="text-[10px] text-text-subtle shrink-0">API key</span>
+        )}
+
+        <div className="flex items-center gap-0.5 shrink-0">
+          {!isExpired && onViewProfile && accountInfo?.profileData && (
+            <button
+              className="p-2 rounded cursor-pointer text-text-subtle hover:text-foreground hover:bg-surface-elevated transition-colors"
+              onClick={() => onViewProfile(accountInfo.profileData!, entry.accountId)}
+              title="View profile"
+              aria-label="View profile"
+            >
+              <Eye className="size-4" />
+            </button>
+          )}
+          {!isExpired && onExport && entry.isOAuth && (
+            <button
+              className="p-2 rounded cursor-pointer text-text-subtle hover:text-primary hover:bg-surface-elevated transition-colors"
+              onClick={() => onExport(entry.accountId)}
+              title="Export this account"
+              aria-label="Export this account"
+            >
+              <Download className="size-4" />
+            </button>
+          )}
+          {!isExpired && onToggle && (
+            <Switch
+              checked={status !== "disabled"}
+              onCheckedChange={() => onToggle(entry.accountId, status)}
+              disabled={toggling || status === "cooldown"}
+              aria-label={status === "disabled" ? "Enable account" : "Disable account"}
+              className="cursor-pointer"
+            />
+          )}
+          {onDelete && (
+            <button
+              className="p-2 rounded cursor-pointer text-text-subtle hover:text-error hover:bg-surface-elevated transition-colors"
+              onClick={() => onDelete(entry.accountId, entry.accountLabel ?? entry.accountId.slice(0, 8))}
+              title="Remove account"
+              aria-label="Remove account"
+            >
+              <Trash2 className="size-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {hasBuckets ? (
+        <div className="space-y-2">
+          <AccountBucketRow label="5-Hour Session" bucket={usage.session} />
+          <AccountBucketRow label="Weekly" bucket={usage.weekly} />
+          <AccountBucketRow label="Weekly (Opus)" bucket={usage.weeklyOpus} />
+          <AccountBucketRow label="Weekly (Sonnet)" bucket={usage.weeklySonnet} />
+        </div>
+      ) : (
+        <p className="text-xs text-text-subtle">
+          {entry.isOAuth ? "No usage data yet" : "Usage tracking not available for API keys"}
+        </p>
+      )}
+
+      <div className="flex items-center gap-2 text-[10px] text-text-subtle flex-wrap">
+        {usage.lastFetchedAt && (
+          <span title="Last usage data update">↻ {formatLastUpdated(new Date(usage.lastFetchedAt).getTime())}</span>
+        )}
+        {accountInfo?.expiresAt && accountInfo.expiresAt * 1000 > Date.now() && (
+          <span title="Token expires in">⏱ {formatExpiry(accountInfo.expiresAt * 1000)}</span>
+        )}
+        <span className={ts.color} title={ts.tip}>© {ts.label}</span>
+      </div>
+    </AccountCardShell>
+  );
+}

package/src/web/components/settings/accounts/account-delete-confirm.tsx

@@ -0,0 +1,62 @@
+/**
+ * Confirmation before removing an account.
+ *
+ * Bottom sheet below `md`, centered dialog above — the same adaptive shell the process-kill
+ * confirmation uses. Removal is destructive and not undoable, so the destructive button is
+ * never the focused default and both Escape and the backdrop cancel.
+ */
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { BottomSheet } from "@/components/ui/mobile-bottom-sheet";
+import { Button } from "@/components/ui/button";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+export function AccountDeleteConfirm({ display, onConfirm, onCancel }: {
+  /** Label shown to the user — never the raw token or id. */
+  display: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const isMobile = useIsMobile();
+
+  const body = (
+    <div className="space-y-4" data-testid="account-delete-confirm">
+      <p className="text-sm">
+        Remove <span className="font-medium">{display}</span>?
+      </p>
+      <p className="text-xs text-text-subtle">
+        The stored token is deleted from this machine. Any export you already made keeps working.
+      </p>
+      <div className="flex flex-col-reverse md:flex-row gap-2 md:justify-end pt-2">
+        <Button variant="outline" onClick={onCancel} className="min-h-11">
+          Cancel
+        </Button>
+        <Button variant="destructive" autoFocus={false} onClick={onConfirm} className="min-h-11">
+          Remove account
+        </Button>
+      </div>
+    </div>
+  );
+
+  if (isMobile) {
+    return (
+      <BottomSheet open onClose={onCancel}>
+        <div className="px-4 pb-4">
+          <h2 className="text-base font-semibold mb-3">Remove account</h2>
+          {body}
+        </div>
+      </BottomSheet>
+    );
+  }
+
+  return (
+    <Dialog open onOpenChange={(v) => { if (!v) onCancel(); }}>
+      <DialogContent className="sm:max-w-sm">
+        <DialogHeader>
+          <DialogTitle className="text-sm">Remove account</DialogTitle>
+        </DialogHeader>
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}