diff --git a/docs/pr-assets/antigravity-accounts-en.png b/docs/pr-assets/antigravity-accounts-en.png
new file mode 100644
index 0000000000..0077d5d7db
Binary files /dev/null and b/docs/pr-assets/antigravity-accounts-en.png differ
diff --git a/docs/pr-assets/antigravity-accounts-ko.png b/docs/pr-assets/antigravity-accounts-ko.png
new file mode 100644
index 0000000000..a4b53d9d3e
Binary files /dev/null and b/docs/pr-assets/antigravity-accounts-ko.png differ
diff --git a/docs/pr-assets/antigravity-accounts-redesign.png b/docs/pr-assets/antigravity-accounts-redesign.png
new file mode 100644
index 0000000000..0077d5d7db
Binary files /dev/null and b/docs/pr-assets/antigravity-accounts-redesign.png differ
diff --git a/docs/pr-assets/antigravity-accounts-ru.png b/docs/pr-assets/antigravity-accounts-ru.png
new file mode 100644
index 0000000000..e85c520eff
Binary files /dev/null and b/docs/pr-assets/antigravity-accounts-ru.png differ
diff --git a/docs/pr-assets/antigravity-accounts-zh.png b/docs/pr-assets/antigravity-accounts-zh.png
new file mode 100644
index 0000000000..b118d775d9
Binary files /dev/null and b/docs/pr-assets/antigravity-accounts-zh.png differ
diff --git a/docs/pr-assets/antigravity-collapsed-rails.png b/docs/pr-assets/antigravity-collapsed-rails.png
new file mode 100644
index 0000000000..d35476d8e1
Binary files /dev/null and b/docs/pr-assets/antigravity-collapsed-rails.png differ
diff --git a/docs/pr-assets/antigravity-compact-view.png b/docs/pr-assets/antigravity-compact-view.png
new file mode 100644
index 0000000000..0ec5489f19
Binary files /dev/null and b/docs/pr-assets/antigravity-compact-view.png differ
diff --git a/docs/pr-assets/antigravity-filter-dropdown.png b/docs/pr-assets/antigravity-filter-dropdown.png
new file mode 100644
index 0000000000..92470dfda9
Binary files /dev/null and b/docs/pr-assets/antigravity-filter-dropdown.png differ
diff --git a/docs/pr-assets/cockpit-choice-modal.png b/docs/pr-assets/cockpit-choice-modal.png
new file mode 100644
index 0000000000..913fa3733d
Binary files /dev/null and b/docs/pr-assets/cockpit-choice-modal.png differ
diff --git a/gui/public/provider-icons/cockpit-tools.png b/gui/public/provider-icons/cockpit-tools.png
new file mode 100644
index 0000000000..729eaaae86
Binary files /dev/null and b/gui/public/provider-icons/cockpit-tools.png differ
diff --git a/gui/src/App.tsx b/gui/src/App.tsx
index 489cb4e7f6..cf8d02ce86 100644
--- a/gui/src/App.tsx
+++ b/gui/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useKeyedClientResource } from "./client-resource";
 import Dashboard from "./pages/Dashboard";
 import Providers from "./pages/Providers";
@@ -157,6 +157,23 @@ export default function App() {
 
   // Narrow screens: the sidebar becomes an off-canvas drawer behind a hamburger toggle.
   const [navOpen, setNavOpen] = useState(false);
+  const [sidebarCollapsed, setSidebarCollapsed] = useState<boolean>(() => {
+    try {
+      return localStorage.getItem("ocx_sidebar_collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleSidebarCollapsed = useCallback(() => {
+    setSidebarCollapsed(prev => {
+      const next = !prev;
+      try {
+        localStorage.setItem("ocx_sidebar_collapsed", String(next));
+      } catch { /* ignore */ }
+      return next;
+    });
+  }, []);
   const menuBtnRef = useRef<HTMLButtonElement>(null);
   const sidebarRef = useRef<HTMLElement>(null);
   const navWasOpen = useRef(false);
@@ -284,7 +301,7 @@ export default function App() {
   );
 
   return (
-    <div className="app">
+    <div className={`app${sidebarCollapsed ? " app--sidebar-collapsed" : ""}`}>
       {/* inert while the drawer is open: keeps focus and assistive tech inside the drawer */}
       <header className="mobile-topbar" inert={navOpen}>
         <button ref={menuBtnRef} type="button" className="menu-toggle" onClick={() => setNavOpen(o => !o)}
@@ -312,9 +329,18 @@ export default function App() {
         </div>
       </header>
       {navOpen && <div className="drawer-scrim" onClick={() => setNavOpen(false)} aria-hidden="true" />}
-      <aside id="app-sidebar" className={`sidebar${navOpen ? " open" : ""}`} ref={sidebarRef} tabIndex={-1}>
+      <aside id="app-sidebar" className={`sidebar${navOpen ? " open" : ""}${sidebarCollapsed ? " sidebar--collapsed" : ""}`} ref={sidebarRef} tabIndex={-1}>
         <div className="drawer-head">
           {brand}
+          <button
+            type="button"
+            className="sidebar-collapse-toggle-btn"
+            onClick={toggleSidebarCollapsed}
+            title={t(sidebarCollapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
+            aria-label={t(sidebarCollapsed ? "nav.expandSidebar" : "nav.collapseSidebar")}
+          >
+            {sidebarCollapsed ? "▶" : "◀"}
+          </button>
           <button type="button" className="menu-toggle drawer-close" onClick={() => setNavOpen(false)}
             aria-label={t("nav.closeMenu")} title={t("nav.closeMenu")}>
             <IconX />
@@ -344,8 +370,10 @@ export default function App() {
                     navigateToPage(id);
                     setNavOpen(false);
                   }}
+                  title={t(tkey)}
+                  aria-label={t(tkey)}
                   aria-current={active ? "page" : undefined}>
-                  <Icon /> {t(tkey)}
+                  <Icon /> <span className="nav-item-text">{t(tkey)}</span>
                 </button>
               </div>
             );
diff --git a/gui/src/components/AccountAuthChoiceModal.tsx b/gui/src/components/AccountAuthChoiceModal.tsx
new file mode 100644
index 0000000000..2a7fb77ebd
--- /dev/null
+++ b/gui/src/components/AccountAuthChoiceModal.tsx
@@ -0,0 +1,103 @@
+import { useEffect } from "react";
+import { IconX } from "../icons";
+import { useT } from "../i18n/shared";
+import { ProviderIcon } from "./provider-workspace/ProviderRail";
+import CockpitToolsCard from "./provider-workspace/CockpitToolsCard";
+
+export interface AccountAuthChoiceModalProps {
+  provider: string;
+  providerLabel: string;
+  apiBase: string;
+  isOpen: boolean;
+  isBusy?: boolean;
+  onClose: () => void;
+  onContinueOAuth: () => void;
+  onImportSuccess?: () => void;
+}
+
+export default function AccountAuthChoiceModal({
+  provider,
+  providerLabel,
+  apiBase,
+  isOpen,
+  isBusy = false,
+  onClose,
+  onContinueOAuth,
+  onImportSuccess,
+}: AccountAuthChoiceModalProps) {
+  const t = useT();
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        onClose();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="auth-choice-modal-title"
+      className="modal-overlay"
+      onClick={onClose}
+    >
+      <div className="modal-card auth-choice-modal" onClick={e => e.stopPropagation()}>
+        <div className="modal-head">
+          <div>
+            <h3 id="auth-choice-modal-title">
+              {t("pws.authChoiceModalTitle", { provider: providerLabel })}
+            </h3>
+            <p className="muted text-label" style={{ marginTop: 2 }}>
+              {t("pws.authChoiceModalSubtitle")}
+            </p>
+          </div>
+          <button
+            type="button"
+            className="btn btn-ghost btn-icon"
+            aria-label={t("common.close")}
+            onClick={onClose}
+          >
+            <IconX />
+          </button>
+        </div>
+
+        <div className="auth-choice-body">
+          {/* Method 1: Browser OAuth */}
+          <div className="auth-choice-card">
+            <div className="auth-choice-card-info">
+              <ProviderIcon name={provider} cls="provider-icon provider-icon-sm" />
+              <div className="auth-choice-card-text">
+                <span className="auth-choice-card-title">{t("pws.antigravityOauthTitle")}</span>
+                <span className="auth-choice-card-desc">{t("pws.antigravityOauthDesc")}</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              className="btn btn-primary btn-sm"
+              disabled={isBusy}
+              onClick={() => {
+                onClose();
+                onContinueOAuth();
+              }}
+            >
+              {isBusy ? t("prov.waitingBrowser") : t("pws.antigravityOauthAction")}
+            </button>
+          </div>
+
+          {/* Method 2: Cockpit Tools Card */}
+          <CockpitToolsCard
+            apiBase={apiBase}
+            onImportSuccess={onImportSuccess}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/AntigravityChoiceModal.tsx b/gui/src/components/AntigravityChoiceModal.tsx
new file mode 100644
index 0000000000..576eb63df5
--- /dev/null
+++ b/gui/src/components/AntigravityChoiceModal.tsx
@@ -0,0 +1,16 @@
+import AccountAuthChoiceModal, { type AccountAuthChoiceModalProps } from "./AccountAuthChoiceModal";
+
+export type AntigravityChoiceModalProps = Omit<AccountAuthChoiceModalProps, "provider" | "providerLabel"> & {
+  provider?: string;
+  providerLabel?: string;
+};
+
+export default function AntigravityChoiceModal(props: AntigravityChoiceModalProps) {
+  return (
+    <AccountAuthChoiceModal
+      provider={props.provider ?? "google-antigravity"}
+      providerLabel={props.providerLabel ?? "Google Antigravity"}
+      {...props}
+    />
+  );
+}
diff --git a/gui/src/components/provider-workspace/CockpitToolsCard.tsx b/gui/src/components/provider-workspace/CockpitToolsCard.tsx
new file mode 100644
index 0000000000..05422dc080
--- /dev/null
+++ b/gui/src/components/provider-workspace/CockpitToolsCard.tsx
@@ -0,0 +1,301 @@
+import { useRef, useState } from "react";
+import { useT } from "../../i18n/shared";
+import { IconClipboard } from "../../icons";
+
+const COCKPIT_IMPORT_MAX_BYTES = 256 * 1024;
+
+const COCKPIT_RESULT_KEYS = new Set([
+  "totalCount",
+  "importedCount",
+  "updatedCount",
+  "failedCount",
+  "unsupportedCount",
+  "results",
+]);
+
+const COCKPIT_RESULT_STATUSES = new Set(["imported", "updated", "failed", "unsupported"]);
+const COCKPIT_STATUS_CODES: Record<string, ReadonlySet<string>> = {
+  imported: new Set(["imported"]),
+  updated: new Set(["updated"]),
+  failed: new Set(["invalid_record", "credential_rejected", "identity_mismatch", "missing_project", "persist_failed"]),
+  unsupported: new Set(["unsupported_provider", "unsupported_format"]),
+};
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+
+export type CockpitImportResult = {
+  totalCount: number;
+  importedCount: number;
+  updatedCount: number;
+  failedCount: number;
+  unsupportedCount: number;
+  results: Array<{ index: number; status: string; code: string }>;
+};
+
+function safeCockpitImportResult(value: unknown): CockpitImportResult | null {
+  if (!isPlainObject(value) || Object.keys(value).some(key => !COCKPIT_RESULT_KEYS.has(key))) return null;
+  const { totalCount, importedCount, updatedCount, failedCount, unsupportedCount, results } = value;
+  if (
+    typeof totalCount !== "number" || typeof importedCount !== "number"
+    || typeof updatedCount !== "number" || typeof failedCount !== "number"
+    || typeof unsupportedCount !== "number" || !Array.isArray(results)
+  ) return null;
+  for (const [index, result] of results.entries()) {
+    if (!isPlainObject(result) || Object.keys(result).some(key => !["index", "status", "code"].includes(key))) return null;
+    const status = String(result.status);
+    const code = String(result.code);
+    if (result.index !== index || !COCKPIT_RESULT_STATUSES.has(status)) return null;
+    const allowedCodes = COCKPIT_STATUS_CODES[status];
+    if (!allowedCodes || !allowedCodes.has(code)) return null;
+  }
+  return {
+    totalCount, importedCount, updatedCount, failedCount, unsupportedCount,
+    results: results as Array<{ index: number; status: string; code: string }>,
+  };
+}
+
+export interface CockpitToolsCardProps {
+  apiBase: string;
+  onImportSuccess?: () => void | Promise<void>;
+  className?: string;
+}
+
+export default function CockpitToolsCard({
+  apiBase,
+  onImportSuccess,
+  className = "",
+}: CockpitToolsCardProps) {
+  const t = useT();
+  const [importBusy, setImportBusy] = useState(false);
+  const [importStatus, setImportStatus] = useState<"idle" | "invalid" | "failed" | "complete">("idle");
+  const [importResult, setImportResult] = useState<CockpitImportResult | null>(null);
+  const [showManualPaste, setShowManualPaste] = useState(false);
+  const [manualPasteText, setManualPasteText] = useState("");
+  const importFileRef = useRef<HTMLInputElement>(null);
+
+  const importCockpitJson = async (rawText: string) => {
+    const text = rawText.trim();
+    if (!text || importBusy) return;
+    setImportBusy(true);
+    setImportStatus("idle");
+    setImportResult(null);
+    try {
+      if (new TextEncoder().encode(text).byteLength > COCKPIT_IMPORT_MAX_BYTES) {
+        setImportStatus("invalid");
+        return;
+      }
+      let document: unknown;
+      try {
+        document = JSON.parse(text) as unknown;
+      } catch {
+        try {
+          const sanitized = text.replace(/,\s*([}\]])/g, "$1");
+          document = JSON.parse(sanitized) as unknown;
+        } catch {
+          setImportStatus("invalid");
+          return;
+        }
+      }
+      if (isPlainObject(document)) {
+        document = [document];
+      }
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 25000);
+      let response: Response;
+      try {
+        response = await fetch(`${apiBase}/api/oauth/accounts/import`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ provider: "google-antigravity", format: "cockpit-tools", document }),
+          signal: controller.signal,
+        });
+      } finally {
+        clearTimeout(timeoutId);
+      }
+      if (!response.ok) {
+        setImportStatus("failed");
+        return;
+      }
+      const result = safeCockpitImportResult(await response.json().catch(() => null));
+      if (!result) {
+        setImportStatus("failed");
+        return;
+      }
+      setImportResult(result);
+      setImportStatus("complete");
+      setShowManualPaste(false);
+      setManualPasteText("");
+      try {
+        await onImportSuccess?.();
+      } catch {
+        /* Preserve the completed import state */
+      }
+    } catch {
+      setImportStatus("failed");
+    } finally {
+      if (importFileRef.current) importFileRef.current.value = "";
+      setImportBusy(false);
+    }
+  };
+
+  const importCockpitFile = async (file: File | undefined) => {
+    if (!file || importBusy) return;
+    if (!file.name.toLowerCase().endsWith(".json") || file.size > COCKPIT_IMPORT_MAX_BYTES) {
+      setImportStatus("invalid");
+      setImportResult(null);
+      if (importFileRef.current) importFileRef.current.value = "";
+      return;
+    }
+    try {
+      const text = await file.text();
+      await importCockpitJson(text);
+    } catch {
+      setImportStatus("failed");
+      setImportResult(null);
+    } finally {
+      if (importFileRef.current) importFileRef.current.value = "";
+    }
+  };
+
+  const importCockpitClipboard = async () => {
+    if (importBusy) return;
+    setImportStatus("idle");
+    setImportResult(null);
+    try {
+      if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.readText === "function") {
+        const text = await navigator.clipboard.readText();
+        if (text && text.trim()) {
+          await importCockpitJson(text);
+          return;
+        }
+      }
+    } catch {
+      setShowManualPaste(true);
+      return;
+    }
+    setShowManualPaste(true);
+  };
+
+  return (
+    <div className={`pwi-cockpit-card ${className}`.trim()}>
+      <div className="pwi-cockpit-card-top">
+        <div className="pwi-cockpit-card-brand">
+          <img
+            src="/provider-icons/cockpit-tools.png"
+            alt=""
+            aria-hidden="true"
+            className="pwi-cockpit-card-icon"
+          />
+          <div className="pwi-cockpit-card-titles">
+            <span className="pwi-cockpit-card-title">{t("pws.cockpitCardTitle")}</span>
+            <span className="pwi-cockpit-card-subtitle">{t("pws.cockpitCardSubtitle")}</span>
+          </div>
+        </div>
+        <div className="pwi-cockpit-card-actions">
+          <label className="sr-only" htmlFor="cockpit-import-file">{t("pws.cockpitImportFileLabel")}</label>
+          <input
+            ref={importFileRef}
+            id="cockpit-import-file"
+            type="file"
+            accept="application/json,.json"
+            className="sr-only"
+            aria-describedby="cockpit-import-description cockpit-import-status"
+            disabled={importBusy}
+            onChange={event => { void importCockpitFile(event.currentTarget.files?.[0]); }}
+          />
+          <button
+            type="button"
+            id="cockpit-import-clipboard-btn"
+            className="btn btn-primary btn-sm"
+            disabled={importBusy}
+            onClick={() => { void importCockpitClipboard(); }}
+          >
+            <IconClipboard width={14} height={14} aria-hidden="true" />
+            {" "}
+            {t("pws.cockpitImportPasteClipboard")}
+          </button>
+          <button
+            type="button"
+            id="cockpit-import-choose-file-btn"
+            className="btn btn-ghost btn-sm"
+            disabled={importBusy}
+            onClick={() => importFileRef.current?.click()}
+          >
+            {importBusy ? t("pws.cockpitImporting") : t("pws.cockpitImportFileShort")}
+          </button>
+          <button
+            type="button"
+            id="cockpit-import-manual-btn"
+            className="btn btn-ghost btn-sm"
+            disabled={importBusy}
+            onClick={() => setShowManualPaste(prev => !prev)}
+          >
+            {t("pws.cockpitImportPasteManual")}
+          </button>
+        </div>
+      </div>
+      {showManualPaste && (
+        <div className="pwi-cockpit-card-manual">
+          <label htmlFor="cockpit-import-manual-text" className="sr-only">{t("pws.cockpitImportPastePlaceholder")}</label>
+          <textarea
+            id="cockpit-import-manual-text"
+            className="pwi-cockpit-card-textarea"
+            rows={3}
+            value={manualPasteText}
+            onChange={e => setManualPasteText(e.target.value)}
+            placeholder={t("pws.cockpitImportPastePlaceholder")}
+            disabled={importBusy}
+            autoFocus
+          />
+          <div className="pwi-cockpit-card-manual-actions">
+            <button
+              type="button"
+              id="cockpit-import-submit-btn"
+              className="btn btn-primary btn-sm"
+              disabled={importBusy || !manualPasteText.trim()}
+              onClick={() => void importCockpitJson(manualPasteText)}
+            >
+              {importBusy ? t("pws.cockpitImporting") : t("pws.cockpitImportSubmit")}
+            </button>
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm"
+              disabled={importBusy}
+              onClick={() => { setShowManualPaste(false); setManualPasteText(""); }}
+            >
+              {t("common.cancel")}
+            </button>
+          </div>
+        </div>
+      )}
+      <div className="pwi-cockpit-card-divider" />
+      <div id="cockpit-import-status" className="pwi-cockpit-card-footer" role="status" aria-live="polite">
+        {importStatus === "invalid" && <span className="pws-status-warn">{t("pws.cockpitImportInvalid")}</span>}
+        {importStatus === "failed" && <span className="pws-status-warn">{t("pws.cockpitImportFailed")}</span>}
+        {importStatus === "complete" && importResult && (
+          <span className="pws-status-ok">
+            {t("pws.cockpitImportComplete", {
+              imported: importResult.importedCount,
+              updated: importResult.updatedCount,
+              failed: importResult.failedCount,
+              unsupported: importResult.unsupportedCount,
+            })}
+          </span>
+        )}
+        {importStatus === "idle" && (
+          <>
+            <span className="pwi-cockpit-card-dot" aria-hidden="true" />
+            <span>{t("pws.cockpitCardFootnote")}</span>
+          </>
+        )}
+      </div>
+      <div id="cockpit-import-description" className="sr-only">
+        {t("pws.cockpitImportDescription")}
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/provider-workspace/ProviderAccountCard.tsx b/gui/src/components/provider-workspace/ProviderAccountCard.tsx
new file mode 100644
index 0000000000..213295b0c7
--- /dev/null
+++ b/gui/src/components/provider-workspace/ProviderAccountCard.tsx
@@ -0,0 +1,389 @@
+/**
+ * ProviderAccountCard.tsx — Presentation card for one OAuth account with detailed or
+ * compact view, displaying full Gemini and Claude quota windows, unclipped login,
+ * one-click copy, brand headroom badges, and active account pulse indicator.
+ */
+import { useState } from "react";
+import { copyTextToClipboard } from "../../oauth-health-display";
+import { useT, useI18n } from "../../i18n/shared";
+import { IconPencil, IconRefresh, IconTrash } from "../../icons";
+import { formatResetFuture } from "../QuotaBars";
+import type {
+  AnalyzedAccountQuota,
+  AccountDisplayKey,
+  AccountViewModeKey,
+} from "./account-quota-analysis";
+import type { OAuthAccountRow } from "./types";
+import { displayAccountId } from "../../lib/privacy";
+
+export interface ProviderAccountCardProps {
+  analyzed: AnalyzedAccountQuota;
+  viewMode: AccountViewModeKey;
+  titleMode: AccountDisplayKey;
+  switching: boolean;
+  disabled: boolean;
+  refreshing: boolean;
+  onSwitch: (account: OAuthAccountRow) => void;
+  onRefreshSingle?: (account: OAuthAccountRow) => void;
+  onEditAlias: (account: OAuthAccountRow) => void;
+  onRemove: (account: OAuthAccountRow) => void;
+  onReauth?: (account: OAuthAccountRow) => void;
+}
+
+export default function ProviderAccountCard({
+  analyzed,
+  viewMode,
+  titleMode,
+  switching,
+  disabled,
+  refreshing,
+  onSwitch,
+  onRefreshSingle,
+  onEditAlias,
+  onRemove,
+  onReauth,
+}: ProviderAccountCardProps) {
+  const t = useT();
+  const { locale } = useI18n();
+  const { account } = analyzed;
+  const active = account.active;
+  const showReauth = Boolean(account.needsReauth) || account.health?.status === "reauth_required";
+
+  const [copied, setCopied] = useState(false);
+
+  const maskedId = displayAccountId(account.id);
+  const primaryTitle = titleMode === "login"
+    ? analyzed.emailLogin
+    : titleMode === "masked"
+      ? (analyzed.maskedLogin || analyzed.emailLogin)
+      : (account.alias?.trim() || analyzed.emailLogin);
+
+  const hasCustomAlias = Boolean(
+    account.alias &&
+    account.alias.trim() !== "" &&
+    account.alias.trim() !== analyzed.emailLogin &&
+    account.alias.trim() !== account.email
+  );
+
+  const secondarySub = titleMode === "masked"
+    ? `${t("prov.accountId")}: ${maskedId}`
+    : titleMode === "login"
+      ? (hasCustomAlias ? `${account.alias} · ${t("prov.accountId")}: ${maskedId}` : `${t("prov.accountId")}: ${maskedId}`)
+      : (hasCustomAlias ? `${analyzed.emailLogin} · ${t("prov.accountId")}: ${maskedId}` : `${t("prov.accountId")}: ${maskedId}`);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (primaryTitle) {
+      void copyTextToClipboard(primaryTitle).then(success => {
+        if (!success) return;
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+      });
+    }
+  };
+
+  const renderSingleQuotaBar = (label: string, percent: number | undefined, resetAt: number | undefined) => {
+    if (percent === undefined) return null;
+    const rounded = Math.round(percent);
+    const isFull = rounded >= 100 || percent >= 99.5;
+    const resetText = resetAt ? formatResetFuture(resetAt, t, locale) : "";
+    const freeText = isFull
+      ? t("pws.limitExhaustedBadge")
+      : t("pws.freeHeadroom", { percent: Math.max(0, 100 - rounded) });
+
+    return (
+      <div className="pwi-quota-item">
+        <div className="pwi-quota-item-head">
+          <span className={`pwi-quota-title${isFull ? " pwi-quota-warn" : ""}`}>
+            {label}
+          </span>
+          {resetText && <span className="pwi-quota-reset">{resetText}</span>}
+        </div>
+        <div className="pwi-quota-track">
+          <div
+            className={`pwi-quota-fill${isFull ? " pwi-fill-warn" : ""}`}
+            style={{ width: `${Math.min(100, percent)}%` }}
+          />
+        </div>
+        <div className="pwi-quota-item-foot">
+          <span className="pwi-quota-used">{t("quota.usedPercent", { pct: rounded })}</span>
+          <span className={`pwi-quota-free${isFull ? " pwi-quota-warn" : ""}`}>
+            {freeText}
+          </span>
+        </div>
+      </div>
+    );
+  };
+
+  if (viewMode === "compact") {
+    return (
+      <div className={`pwi-card-dense${active ? " pwi-card-dense--active" : ""}`}>
+        <div className="pwi-dense-top">
+          <div className="pwi-dense-id-group">
+            <button
+              type="button"
+              className="pwi-dense-select-btn"
+              disabled={disabled || active}
+              onClick={() => onSwitch(account)}
+              title={active ? t("prov.accountActive") : t("pws.switchToAccount")}
+            >
+              <span className={`pwi-auth-dot ${active ? "pwi-auth-dot--ok pwi-auth-dot--active-pulse" : "pwi-auth-dot--off"}`} aria-hidden="true" />
+              <span className="pwi-dense-title">{primaryTitle}</span>
+              <span className="pwi-dense-click-target-fill" aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              className="pwi-copy-mini-btn"
+              onClick={handleCopy}
+              title={copied ? t("startup.copied") : t("startup.copy")}
+              aria-label={t("startup.copy")}
+            >
+              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+            </button>
+            {copied && <span className="pwi-copied-mini-badge">{t("startup.copied")}</span>}
+          </div>
+
+          <div className="pwi-dense-actions">
+            {showReauth && onReauth && (
+              <button type="button" className="btn btn-primary btn-xs" onClick={() => onReauth(account)}>
+                {t("pws.reauthenticate")}
+              </button>
+            )}
+            {onRefreshSingle && (
+              <button
+                type="button"
+                className="btn btn-ghost btn-xs pwi-icon-btn"
+                title={t("pws.refreshAccountQuota")}
+                disabled={refreshing || disabled}
+                onClick={() => onRefreshSingle(account)}
+              >
+                <IconRefresh width={12} height={12} className={refreshing ? "pwi-spin-inline" : ""} aria-hidden="true" />
+              </button>
+            )}
+            <button
+              type="button"
+              className="btn btn-ghost btn-xs pwi-icon-btn"
+              onClick={() => onEditAlias(account)}
+              title={t("prov.editAlias")}
+              aria-label={t("prov.editAlias")}
+            >
+              <IconPencil width={11} height={11} aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              className="btn btn-ghost btn-xs pwi-remove-btn"
+              title={t("pws.removeAccountTooltip")}
+              onClick={() => onRemove(account)}
+            >
+              <IconTrash width={12} height={12} aria-hidden="true" />
+            </button>
+          </div>
+        </div>
+
+        {/* Compact Bar Columns: Clean Gemini/Claude headers & round % */}
+        <div className="pwi-dense-bars-grid">
+          {/* Gemini */}
+          {(analyzed.gemini5h || analyzed.geminiWeekly) && (
+            <div className="pwi-dense-col">
+              <div className="pwi-dense-col-title">
+                <span className="pwi-brand-badge-title">
+                  <span className="pwi-brand-dot blue">●</span>
+                  <span>{t("pws.modelGemini")}</span>
+                </span>
+                <span className={`pwi-headroom-pill-mini ${analyzed.geminiExhausted ? "warn" : "ok"}`}>
+                  {analyzed.geminiExhausted ? t("pws.limitExhaustedBadge") : t("pws.freeHeadroom", { percent: Math.max(0, 100 - analyzed.geminiUsedMax) })}
+                </span>
+              </div>
+              {analyzed.gemini5h && (
+                <div className="pwi-dense-mini-row">
+                  <div className="pwi-dense-mini-label">
+                    <span className="pwi-dense-window-name">{t("pws.gemini5hLabel")} ({Math.round(analyzed.gemini5h.percent)}%)</span>
+                    <span className="pwi-dense-reset-time">{analyzed.gemini5h.resetAt ? formatResetFuture(analyzed.gemini5h.resetAt, t, locale) : ""}</span>
+                  </div>
+                  <div className="pwi-dense-mini-track">
+                    <div className={`pwi-dense-mini-fill${Math.round(analyzed.gemini5h.percent) >= 100 ? " pwi-fill-warn" : ""}`} style={{ width: `${Math.min(100, Math.round(analyzed.gemini5h.percent))}%` }} />
+                  </div>
+                </div>
+              )}
+              {analyzed.geminiWeekly && (
+                <div className="pwi-dense-mini-row">
+                  <div className="pwi-dense-mini-label">
+                    <span className="pwi-dense-window-name">{t("pws.geminiWeeklyLabel")} ({Math.round(analyzed.geminiWeekly.percent)}%)</span>
+                    <span className="pwi-dense-reset-time">{analyzed.geminiWeekly.resetAt ? formatResetFuture(analyzed.geminiWeekly.resetAt, t, locale) : ""}</span>
+                  </div>
+                  <div className="pwi-dense-mini-track">
+                    <div className={`pwi-dense-mini-fill${Math.round(analyzed.geminiWeekly.percent) >= 100 ? " pwi-fill-warn" : ""}`} style={{ width: `${Math.min(100, Math.round(analyzed.geminiWeekly.percent))}%` }} />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Claude */}
+          {(analyzed.claude5h || analyzed.claudeWeekly) && (
+            <div className="pwi-dense-col">
+              <div className="pwi-dense-col-title">
+                <span className="pwi-brand-badge-title">
+                  <span className="pwi-brand-dot orange">●</span>
+                  <span>{t("pws.modelClaude")}</span>
+                </span>
+                <span className={`pwi-headroom-pill-mini ${analyzed.claudeExhausted ? "warn" : "ok"}`}>
+                  {analyzed.claudeExhausted ? t("pws.limitExhaustedBadge") : t("pws.freeHeadroom", { percent: Math.max(0, 100 - analyzed.claudeUsedMax) })}
+                </span>
+              </div>
+              {analyzed.claude5h && (
+                <div className="pwi-dense-mini-row">
+                  <div className="pwi-dense-mini-label">
+                    <span className="pwi-dense-window-name">{t("pws.claude5hLabel")} ({Math.round(analyzed.claude5h.percent)}%)</span>
+                    <span className="pwi-dense-reset-time">{analyzed.claude5h.resetAt ? formatResetFuture(analyzed.claude5h.resetAt, t, locale) : ""}</span>
+                  </div>
+                  <div className="pwi-dense-mini-track">
+                    <div className={`pwi-dense-mini-fill${Math.round(analyzed.claude5h.percent) >= 100 ? " pwi-fill-warn" : ""}`} style={{ width: `${Math.min(100, Math.round(analyzed.claude5h.percent))}%` }} />
+                  </div>
+                </div>
+              )}
+              {analyzed.claudeWeekly && (
+                <div className="pwi-dense-mini-row">
+                  <div className="pwi-dense-mini-label">
+                    <span className="pwi-dense-window-name">{t("pws.claudeWeeklyLabel")} ({Math.round(analyzed.claudeWeekly.percent)}%)</span>
+                    <span className="pwi-dense-reset-time">{analyzed.claudeWeekly.resetAt ? formatResetFuture(analyzed.claudeWeekly.resetAt, t, locale) : ""}</span>
+                  </div>
+                  <div className="pwi-dense-mini-track">
+                    <div className={`pwi-dense-mini-fill${Math.round(analyzed.claudeWeekly.percent) >= 100 ? " pwi-fill-warn" : ""}`} style={{ width: `${Math.min(100, Math.round(analyzed.claudeWeekly.percent))}%` }} />
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Generic fallback */}
+          {!analyzed.gemini5h && !analyzed.geminiWeekly && !analyzed.claude5h && !analyzed.claudeWeekly && (
+            <div className="pwi-dense-col" style={{ gridColumn: "span 2" }}>
+              {renderSingleQuotaBar(t("pws.window5hLabel"), analyzed.generic5h?.percent, analyzed.generic5h?.resetAt)}
+              {renderSingleQuotaBar(t("pws.windowWeeklyLabel"), analyzed.genericWeekly?.percent, analyzed.genericWeekly?.resetAt)}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Cards view
+  return (
+    <div className={`pwi-account-card${active ? " pwi-account-card--active" : ""}${analyzed.fullyExhausted ? " pwi-account-card--exhausted" : ""}`}>
+      <div className="pwi-card-header">
+        <div className="pwi-card-id-row">
+          <button
+            type="button"
+            className="pwi-card-select-trigger"
+            disabled={disabled || active}
+            onClick={() => onSwitch(account)}
+            title={active ? t("prov.accountActive") : t("pws.switchToAccount")}
+          >
+            <span className={`pwi-auth-dot ${active ? "pwi-auth-dot--ok pwi-auth-dot--active-pulse" : "pwi-auth-dot--off"}`} aria-hidden="true" />
+            <div className="pwi-card-title-block">
+              <div className="pwi-card-title-line">
+                <span className="pwi-card-title">{primaryTitle}</span>
+                {switching && <span className="badge badge-muted">{t("pws.accountSwitching")}</span>}
+              </div>
+              <span className="pwi-card-sub">{secondarySub}</span>
+            </div>
+          </button>
+          <button
+            type="button"
+            className="pwi-copy-mini-btn"
+            onClick={handleCopy}
+            title={copied ? t("startup.copied") : t("startup.copy")}
+            aria-label={t("startup.copy")}
+          >
+            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+          </button>
+          {copied && <span className="pwi-copied-mini-badge">{t("startup.copied")}</span>}
+        </div>
+
+        <div className="pwi-card-controls">
+          {showReauth && onReauth && (
+            <button type="button" className="btn btn-primary btn-sm" onClick={() => onReauth(account)}>
+              {t("pws.reauthenticate")}
+            </button>
+          )}
+          {onRefreshSingle && (
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm pwi-icon-btn"
+              title={t("pws.refreshAccountQuota")}
+              disabled={refreshing || disabled || switching}
+              onClick={() => onRefreshSingle(account)}
+            >
+              <IconRefresh width={13} height={13} className={refreshing ? "pwi-spin-inline" : ""} aria-hidden="true" />
+            </button>
+          )}
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm pwi-action-alias"
+            onClick={() => onEditAlias(account)}
+            title={t("prov.editAlias")}
+            aria-label={t("prov.editAlias")}
+            style={{ display: "inline-flex", alignItems: "center", gap: "6px" }}
+          >
+            <IconPencil width={12} height={12} aria-hidden="true" />
+            <span className="pwi-action-alias-text">{t("pws.aliasShort")}</span>
+          </button>
+          <button
+            type="button"
+            className="btn btn-ghost btn-sm pwi-remove-btn"
+            title={t("pws.removeAccountTooltip")}
+            disabled={disabled || switching}
+            onClick={() => onRemove(account)}
+          >
+            <IconTrash width={13} height={13} aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+
+
+      {/* 2-Column Quotas for Gemini and Claude */}
+      <div className="pwi-card-quotas-grid">
+        {(analyzed.gemini5h || analyzed.geminiWeekly) && (
+          <div className="pwi-quota-col">
+            <div className="pwi-quota-col-head">
+              <span className="pwi-brand-badge-title">
+                <span className="pwi-brand-dot blue">●</span>
+                <span>{t("pws.modelGemini")}</span>
+              </span>
+              <span className={`pwi-headroom-pill ${analyzed.geminiExhausted ? "warn" : "ok"}`}>
+                {analyzed.geminiExhausted ? t("pws.limitExhaustedBadge") : t("pws.freeHeadroom", { percent: Math.max(0, 100 - analyzed.geminiUsedMax) })}
+              </span>
+            </div>
+            {analyzed.gemini5h && renderSingleQuotaBar(t("pws.gemini5hLabel"), analyzed.gemini5h.percent, analyzed.gemini5h.resetAt)}
+            {analyzed.geminiWeekly && renderSingleQuotaBar(t("pws.geminiWeeklyLabel"), analyzed.geminiWeekly.percent, analyzed.geminiWeekly.resetAt)}
+          </div>
+        )}
+
+        {(analyzed.claude5h || analyzed.claudeWeekly) && (
+          <div className="pwi-quota-col">
+            <div className="pwi-quota-col-head">
+              <span className="pwi-brand-badge-title">
+                <span className="pwi-brand-dot orange">●</span>
+                <span>{t("pws.modelClaude")}</span>
+              </span>
+              <span className={`pwi-headroom-pill ${analyzed.claudeExhausted ? "warn" : "ok"}`}>
+                {analyzed.claudeExhausted ? t("pws.limitExhaustedBadge") : t("pws.freeHeadroom", { percent: Math.max(0, 100 - analyzed.claudeUsedMax) })}
+              </span>
+            </div>
+            {analyzed.claude5h && renderSingleQuotaBar(t("pws.claude5hLabel"), analyzed.claude5h.percent, analyzed.claude5h.resetAt)}
+            {analyzed.claudeWeekly && renderSingleQuotaBar(t("pws.claudeWeeklyLabel"), analyzed.claudeWeekly.percent, analyzed.claudeWeekly.resetAt)}
+          </div>
+        )}
+
+        {!analyzed.gemini5h && !analyzed.geminiWeekly && !analyzed.claude5h && !analyzed.claudeWeekly && (
+          <div className="pwi-quota-col" style={{ gridColumn: "span 2" }}>
+            {renderSingleQuotaBar("5-Hour", analyzed.generic5h?.percent, analyzed.generic5h?.resetAt)}
+            {renderSingleQuotaBar(t("pws.windowWeeklyLabel"), analyzed.genericWeekly?.percent, analyzed.genericWeekly?.resetAt)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/provider-workspace/ProviderAccountsToolbar.tsx b/gui/src/components/provider-workspace/ProviderAccountsToolbar.tsx
new file mode 100644
index 0000000000..f5cca5968c
--- /dev/null
+++ b/gui/src/components/provider-workspace/ProviderAccountsToolbar.tsx
@@ -0,0 +1,621 @@
+/**
+ * ProviderAccountsToolbar.tsx — Top statistics summary, global quota refresh,
+ * unified single dropdown filter button, email/alias/masked toggle, card/compact
+ * view switch, and sorting control.
+ */
+import { useState, useRef, useEffect } from "react";
+import { useT } from "../../i18n/shared";
+import { IconRefresh, IconSearch, IconX } from "../../icons";
+import type {
+  AccountDisplayKey,
+  AccountFilterKey,
+  AccountSortKey,
+  AccountViewModeKey,
+  AnalyzedAccountQuota,
+} from "./account-quota-analysis";
+
+export interface ProviderAccountsToolbarProps {
+  analyzedList: AnalyzedAccountQuota[];
+  showModelFamilies?: boolean;
+  filter: AccountFilterKey;
+  onFilterChange: (next: AccountFilterKey) => void;
+  sortKey: AccountSortKey;
+  onSortChange: (next: AccountSortKey) => void;
+  titleMode: AccountDisplayKey;
+  onTitleModeChange: (next: AccountDisplayKey) => void;
+  viewMode: AccountViewModeKey;
+  onViewModeChange: (next: AccountViewModeKey) => void;
+  searchQuery: string;
+  onSearchQueryChange: (next: string) => void;
+  refreshingAll: boolean;
+  onRefreshAll?: () => void;
+  quotaRefreshResultText?: string | null;
+  quotaRefreshResultOk?: boolean;
+}
+
+export default function ProviderAccountsToolbar({
+  analyzedList,
+  showModelFamilies = false,
+  filter,
+  onFilterChange,
+  sortKey,
+  onSortChange,
+  titleMode,
+  onTitleModeChange,
+  viewMode,
+  onViewModeChange,
+  searchQuery,
+  onSearchQueryChange,
+  refreshingAll,
+  onRefreshAll,
+  quotaRefreshResultText,
+  quotaRefreshResultOk,
+}: ProviderAccountsToolbarProps) {
+  const t = useT();
+  const [limitsMenuOpen, setLimitsMenuOpen] = useState(false);
+  const limitsMenuRef = useRef<HTMLDivElement>(null);
+  const [sortMenuOpen, setSortMenuOpen] = useState(false);
+  const sortMenuRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const hasSearch = searchQuery.trim().length > 0;
+
+  useEffect(() => {
+    if (searchInputRef.current) {
+      searchInputRef.current.style.setProperty("padding-left", "32px", "important");
+      searchInputRef.current.style.setProperty(
+        "padding-right",
+        hasSearch ? "28px" : "10px",
+        "important"
+      );
+    }
+  }, [hasSearch]);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (limitsMenuRef.current && !limitsMenuRef.current.contains(event.target as Node)) {
+        setLimitsMenuOpen(false);
+      }
+      if (sortMenuRef.current && !sortMenuRef.current.contains(event.target as Node)) {
+        setSortMenuOpen(false);
+      }
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setLimitsMenuOpen(false);
+        setSortMenuOpen(false);
+      }
+    };
+    if (limitsMenuOpen || sortMenuOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+      window.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("mousedown", handleClickOutside);
+        window.removeEventListener("keydown", handleKeyDown);
+      };
+    }
+  }, [limitsMenuOpen, sortMenuOpen]);
+
+  let activeSortLabel: string;
+  let activeSortIcon: string;
+  switch (sortKey) {
+    case "less_headroom":
+      activeSortLabel = t("pws.sortLessHeadroom");
+      activeSortIcon = "🔻";
+      break;
+    case "reset_5h_soonest":
+      activeSortLabel = t("pws.sortReset5h");
+      activeSortIcon = "⏱️";
+      break;
+    case "reset_7d_soonest":
+      activeSortLabel = t("pws.sortReset7d");
+      activeSortIcon = "📅";
+      break;
+    case "more_headroom":
+    default:
+      activeSortLabel = t("pws.sortMoreHeadroom");
+      activeSortIcon = "⚡";
+      break;
+  }
+
+  const totalCount = analyzedList.length;
+  const withLimitsCount = analyzedList.filter(a => a.hasAnyLimitsLeft).length;
+  const withLimitsGeminiCount = analyzedList.filter(a => Boolean(a.gemini5h || a.geminiWeekly) && !a.geminiExhausted).length;
+  const withLimitsClaudeCount = analyzedList.filter(a => Boolean(a.claude5h || a.claudeWeekly) && !a.claudeExhausted).length;
+  const geminiExhaustedCount = analyzedList.filter(a => a.geminiExhausted).length;
+  const claudeExhaustedCount = analyzedList.filter(a => a.claudeExhausted).length;
+  const fullyExhaustedCount = analyzedList.filter(a => a.fullyExhausted).length;
+
+  let activeFilterLabel: string;
+  let activeFilterIcon: string;
+  let activeFilterCount: number;
+
+  switch (filter) {
+    case "with_limits_gemini":
+      activeFilterLabel = t("pws.filterWithLimitsGemini");
+      activeFilterIcon = "⚡";
+      activeFilterCount = withLimitsGeminiCount;
+      break;
+    case "with_limits_claude":
+      activeFilterLabel = t("pws.filterWithLimitsClaude");
+      activeFilterIcon = "⚡";
+      activeFilterCount = withLimitsClaudeCount;
+      break;
+    case "all":
+      activeFilterLabel = t("pws.filterAllAccounts");
+      activeFilterIcon = "📋";
+      activeFilterCount = totalCount;
+      break;
+    case "gemini_exhausted":
+      activeFilterLabel = t("pws.filterGeminiExhausted");
+      activeFilterIcon = "⚠️";
+      activeFilterCount = geminiExhaustedCount;
+      break;
+    case "claude_exhausted":
+      activeFilterLabel = t("pws.filterClaudeExhausted");
+      activeFilterIcon = "⚠️";
+      activeFilterCount = claudeExhaustedCount;
+      break;
+    case "fully_exhausted":
+      activeFilterLabel = t("pws.filterFullyExhausted");
+      activeFilterIcon = "⛔";
+      activeFilterCount = fullyExhaustedCount;
+      break;
+    case "with_limits":
+    default:
+      activeFilterLabel = t("pws.filterWithLimits");
+      activeFilterIcon = "⚡";
+      activeFilterCount = withLimitsCount;
+      break;
+  }
+
+  return (
+    <div className="pwi-accounts-controls-wrapper">
+      {/* 1. Summary Stats Hub */}
+      <div className="pwi-accounts-stats-card">
+        <div className="pwi-stats-items-row">
+          <div className="pwi-stat-unit">
+            <span className="pwi-stat-lbl">{t("pws.statsTotal")}</span>
+            <div className="pwi-stat-val-line">
+              <span className="pwi-stat-num">{totalCount}</span>
+              <span className="pwi-stat-subtag">{t("pws.statsInPool")}</span>
+            </div>
+          </div>
+
+          <div className="pwi-stat-sep" />
+
+          {showModelFamilies ? (
+            <>
+              <div className="pwi-stat-unit">
+                <span className="pwi-stat-lbl">{t("pws.statsClaudeAvailable")}</span>
+                <div className="pwi-stat-val-line">
+                  <span className="pwi-stat-num pwi-text-orange">{withLimitsClaudeCount}</span>
+                  <span className="pwi-stat-tag-orange">✓ {t("pws.statsReady")}</span>
+                </div>
+              </div>
+
+              <div className="pwi-stat-sep" />
+
+              <div className="pwi-stat-unit">
+                <span className="pwi-stat-lbl">{t("pws.statsGeminiAvailable")}</span>
+                <div className="pwi-stat-val-line">
+                  <span className="pwi-stat-num pwi-text-blue">{withLimitsGeminiCount}</span>
+                  <span className="pwi-stat-tag-blue">✓ {t("pws.statsReady")}</span>
+                </div>
+              </div>
+            </>
+          ) : (
+            <div className="pwi-stat-unit">
+              <span className="pwi-stat-lbl">{t("pws.statsAvailable")}</span>
+              <div className="pwi-stat-val-line">
+                <span className="pwi-stat-num pwi-text-orange">{withLimitsCount}</span>
+                <span className="pwi-stat-tag-orange">✓ {t("pws.statsReady")}</span>
+              </div>
+            </div>
+          )}
+
+          <div className="pwi-stat-sep" />
+
+          <div className="pwi-stat-unit">
+            <span className="pwi-stat-lbl">{t("pws.statsExhausted")}</span>
+            <div className="pwi-stat-val-line">
+              <span className="pwi-stat-num pwi-text-warn">{fullyExhaustedCount}</span>
+              <span className="pwi-stat-tag-warn">{t("pws.statsAwaitingReset")}</span>
+            </div>
+          </div>
+        </div>
+
+        {onRefreshAll && (
+          <div className="pwi-global-refresh-box">
+            {quotaRefreshResultText && (
+              <span className={quotaRefreshResultOk ? "pws-status-ok" : "pws-status-warn"}>
+                {quotaRefreshResultText}
+              </span>
+            )}
+            <button
+              type="button"
+              className="btn btn-ghost btn-sm pwi-btn-refresh-all"
+              disabled={refreshingAll}
+              onClick={onRefreshAll}
+            >
+              <IconRefresh width={14} height={14} className={refreshingAll ? "pwi-spin-inline" : ""} aria-hidden="true" />
+              {" "}
+              {refreshingAll ? t("codexAuth.refreshingQuota") : t("pws.refreshAllQuotas")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* 2. Balanced 2-Row Controls Panel */}
+      <div className="pwi-toolbar-card">
+        {/* Row 1: Data Selection (Filter + Sort + Search) */}
+        <div className="pwi-toolbar-row-top">
+          {/* Left: Filter and Sort side by side */}
+          <div className="pwi-toolbar-cluster">
+            {/* Filter */}
+            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+              <span className="pwi-filter-caption" style={{ fontSize: "11.5px", fontWeight: 700, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.5px", whiteSpace: "nowrap" }}>{t("pws.filterLabel")}:</span>
+              <div className="pwi-dropdown-filter-wrap" ref={limitsMenuRef} style={{ position: "relative", display: "inline-block" }}>
+                <button
+                  type="button"
+                  className="pwi-filter-btn pwi-filter-btn--natural active"
+                  onClick={() => setLimitsMenuOpen(prev => !prev)}
+                  aria-haspopup="true"
+                  aria-expanded={limitsMenuOpen}
+                  style={{
+                    height: "32px",
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: "8px",
+                    boxSizing: "border-box",
+                    padding: "0 12px",
+                    whiteSpace: "nowrap",
+                  }}
+                >
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: "6px" }}>
+                    <span>{activeFilterIcon}</span>
+                    <span>{activeFilterLabel}</span>
+                  </span>
+                  <span className="pwi-filter-count" style={{ marginLeft: "4px" }}>{activeFilterCount}</span>
+                  <span className="pwi-filter-chevron" style={{ marginLeft: "4px" }}>▾</span>
+                </button>
+
+                {limitsMenuOpen && (
+                  <div
+                    className="pwi-filter-dropdown-menu"
+                  >
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "with_limits" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("with_limits"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "with_limits" ? "rgba(78, 203, 157, 0.18)" : "transparent",
+                        color: filter === "with_limits" ? "#4ecb9d" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon">⚡</span>
+                        <span style={{ fontWeight: filter === "with_limits" ? "700" : "500" }}>{t("pws.filterWithLimits")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(255,255,255,0.08)", fontSize: "11px", fontWeight: "700" }}>{withLimitsCount}</span>
+                    </button>
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "all" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("all"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "all" ? "rgba(255, 255, 255, 0.12)" : "transparent",
+                        color: filter === "all" ? "#ffffff" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon">📋</span>
+                        <span style={{ fontWeight: filter === "all" ? "700" : "500" }}>{t("pws.filterAllAccounts")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(255,255,255,0.08)", fontSize: "11px", fontWeight: "700" }}>{totalCount}</span>
+                    </button>
+
+                    {showModelFamilies && (
+                    <>
+                    <div className="pwi-dropdown-divider" />
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "with_limits_gemini" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("with_limits_gemini"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "with_limits_gemini" ? "rgba(96, 165, 250, 0.18)" : "transparent",
+                        color: filter === "with_limits_gemini" ? "#93c5fd" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon" style={{ color: "#60a5fa" }}>●</span>
+                        <span style={{ fontWeight: filter === "with_limits_gemini" ? "700" : "500" }}>{t("pws.filterWithLimitsGemini")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(255,255,255,0.08)", fontSize: "11px", fontWeight: "700" }}>{withLimitsGeminiCount}</span>
+                    </button>
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "with_limits_claude" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("with_limits_claude"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "with_limits_claude" ? "rgba(192, 132, 252, 0.18)" : "transparent",
+                        color: filter === "with_limits_claude" ? "#e9d5ff" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon" style={{ color: "#f97316" }}>●</span>
+                        <span style={{ fontWeight: filter === "with_limits_claude" ? "700" : "500" }}>{t("pws.filterWithLimitsClaude")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(255,255,255,0.08)", fontSize: "11px", fontWeight: "700" }}>{withLimitsClaudeCount}</span>
+                    </button>
+
+                    <div className="pwi-dropdown-divider" />
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "gemini_exhausted" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("gemini_exhausted"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "gemini_exhausted" ? "rgba(96, 165, 250, 0.18)" : "transparent",
+                        color: filter === "gemini_exhausted" ? "#93c5fd" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon">⚠️</span>
+                        <span style={{ fontWeight: filter === "gemini_exhausted" ? "700" : "500" }}>{t("pws.filterGeminiExhausted")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(96,165,250,0.15)", color: "#93c5fd", fontSize: "11px", fontWeight: "700" }}>{geminiExhaustedCount}</span>
+                    </button>
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "claude_exhausted" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("claude_exhausted"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "claude_exhausted" ? "rgba(192, 132, 252, 0.18)" : "transparent",
+                        color: filter === "claude_exhausted" ? "#e9d5ff" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon">⚠️</span>
+                        <span style={{ fontWeight: filter === "claude_exhausted" ? "700" : "500" }}>{t("pws.filterClaudeExhausted")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(249, 115, 22, 0.15)", color: "#f97316", fontSize: "11px", fontWeight: "700" }}>{claudeExhaustedCount}</span>
+                    </button>
+
+                    </>
+                    )}
+
+                    <div className="pwi-dropdown-divider" />
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${filter === "fully_exhausted" ? " active" : ""}`}
+                      onClick={() => { onFilterChange("fully_exhausted"); setLimitsMenuOpen(false); }}
+                      style={{
+                        display: "flex", width: "100%", justifyContent: "space-between", alignItems: "center",
+                        padding: "8px 12px", borderRadius: "6px", border: "none", cursor: "pointer",
+                        backgroundColor: filter === "fully_exhausted" ? "rgba(251, 191, 36, 0.18)" : "transparent",
+                        color: filter === "fully_exhausted" ? "#fbbf24" : "#ececec",
+                      }}
+                    >
+                      <span className="pwi-dropdown-item-left" style={{ display: "inline-flex", alignItems: "center", gap: "9px" }}>
+                        <span className="pwi-dropdown-item-icon">⛔</span>
+                        <span style={{ fontWeight: filter === "fully_exhausted" ? "700" : "500" }}>{t("pws.filterFullyExhausted")}</span>
+                      </span>
+                      <span className="pwi-dropdown-badge" style={{ padding: "2px 7px", borderRadius: "999px", background: "rgba(251,191,36,0.15)", color: "#fbbf24", fontSize: "11px", fontWeight: "700" }}>{fullyExhaustedCount}</span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* Sort with custom dropdown matching filter */}
+            <div className="pwi-sort-wrapper" style={{ display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 }}>
+              <span className="pwi-filter-caption">{t("pws.sortLabel")}:</span>
+              <div className="pwi-dropdown-filter-wrap" ref={sortMenuRef}>
+                <button
+                  type="button"
+                  className="pwi-filter-btn pwi-filter-btn--natural active"
+                  onClick={() => setSortMenuOpen(prev => !prev)}
+                  aria-haspopup="true"
+                  aria-expanded={sortMenuOpen}
+                >
+                  <span style={{ display: "inline-flex", alignItems: "center", gap: "6px" }}>
+                    <span>{activeSortIcon}</span>
+                    <span>{activeSortLabel}</span>
+                  </span>
+                  <span className="pwi-filter-chevron">▾</span>
+                </button>
+
+                {sortMenuOpen && (
+                  <div className="pwi-filter-dropdown-menu" >
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${sortKey === "more_headroom" ? " active" : ""}`}
+                      onClick={() => { onSortChange("more_headroom"); setSortMenuOpen(false); }}
+                    >
+                      <span className="pwi-dropdown-item-left">
+                        <span className="pwi-dropdown-item-icon">⚡</span>
+                        <span>{t("pws.sortMoreHeadroom")}</span>
+                      </span>
+                    </button>
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${sortKey === "less_headroom" ? " active" : ""}`}
+                      onClick={() => { onSortChange("less_headroom"); setSortMenuOpen(false); }}
+                    >
+                      <span className="pwi-dropdown-item-left">
+                        <span className="pwi-dropdown-item-icon">🔻</span>
+                        <span>{t("pws.sortLessHeadroom")}</span>
+                      </span>
+                    </button>
+
+                    <div className="pwi-dropdown-divider" />
+
+                    {analyzedList.some(a => Boolean(a.generic5h || a.gemini5h || a.claude5h)) && (
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${sortKey === "reset_5h_soonest" ? " active" : ""}`}
+                      onClick={() => { onSortChange("reset_5h_soonest"); setSortMenuOpen(false); }}
+                    >
+                      <span className="pwi-dropdown-item-left">
+                        <span className="pwi-dropdown-item-icon">⏱️</span>
+                        <span>{t("pws.sortReset5h")}</span>
+                      </span>
+                    </button>
+                    )}
+
+                    <button
+                      type="button"
+
+                      className={`pwi-dropdown-item${sortKey === "reset_7d_soonest" ? " active" : ""}`}
+                      onClick={() => { onSortChange("reset_7d_soonest"); setSortMenuOpen(false); }}
+                    >
+                      <span className="pwi-dropdown-item-left">
+                        <span className="pwi-dropdown-item-icon">📅</span>
+                        <span>{t("pws.sortReset7d")}</span>
+                      </span>
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {/* Right: Prominent Search Box */}
+          <div className="pwi-prominent-search-box">
+            <IconSearch className="pwi-search-prominent-icon" width={14} height={14} aria-hidden="true" />
+            <input
+              ref={searchInputRef}
+              type="text"
+              role="searchbox"
+              inputMode="search"
+              className="input input-sm pwi-search-prominent-input"
+              placeholder={t("pws.searchAccountField")}
+              value={searchQuery}
+              onChange={e => onSearchQueryChange(e.target.value)}
+              onKeyDown={e => {
+                if (e.key === "Escape" && hasSearch) {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onSearchQueryChange("");
+                }
+              }}
+              aria-label={t("pws.searchAccountField")}
+            />
+            {hasSearch && (
+              <button
+                type="button"
+                className="pwi-search-clear-btn"
+                onClick={() => {
+                  onSearchQueryChange("");
+                  searchInputRef.current?.focus();
+                }}
+                aria-label={t("usage.range.clear")}
+                title={t("usage.range.clear")}
+                style={{
+                  position: "absolute",
+                  right: "6px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                  width: "20px",
+                  height: "20px",
+                  display: "inline-flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "4px",
+                  padding: 0,
+                  color: "#a0a0a0",
+                  cursor: "pointer",
+                }}
+              >
+                <IconX width={12} height={12} aria-hidden="true" />
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Row 2: Display Presentation (Title Mode + View Mode) */}
+        <div className="pwi-toolbar-row-bottom">
+          {/* Title Mode */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <span className="pwi-filter-caption" style={{ fontSize: "11.5px", fontWeight: 700, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.5px", whiteSpace: "nowrap" }}>{t("pws.titleModeLabel")}:</span>
+            <div className="pwi-segmented">
+              <button
+                type="button"
+                className={`pwi-seg-opt${titleMode === "login" ? " active" : ""}`}
+                onClick={() => onTitleModeChange("login")}
+              >
+                ✉️ {t("pws.loginShort")}
+              </button>
+              <button
+                type="button"
+                className={`pwi-seg-opt${titleMode === "masked" ? " active" : ""}`}
+                onClick={() => onTitleModeChange("masked")}
+              >
+                🔒 {t("pws.maskedShort")}
+              </button>
+              <button
+                type="button"
+                className={`pwi-seg-opt${titleMode === "alias" ? " active" : ""}`}
+                onClick={() => onTitleModeChange("alias")}
+              >
+                👤 {t("pws.aliasShort")}
+              </button>
+            </div>
+          </div>
+
+          {/* View Mode */}
+          <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+            <span className="pwi-filter-caption" style={{ fontSize: "11.5px", fontWeight: 700, color: "var(--muted)", textTransform: "uppercase", letterSpacing: "0.5px", whiteSpace: "nowrap" }}>{t("pws.viewModeLabel")}:</span>
+            <div className="pwi-segmented">
+              <button
+                type="button"
+                className={`pwi-seg-opt${viewMode === "cards" ? " active" : ""}`}
+                onClick={() => onViewModeChange("cards")}
+              >
+                ▦ {t("pws.viewCards")}
+              </button>
+              <button
+                type="button"
+                className={`pwi-seg-opt${viewMode === "compact" ? " active" : ""}`}
+                onClick={() => onViewModeChange("compact")}
+              >
+                ≡ {t("pws.viewCompact")}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/provider-workspace/ProviderAuthPanel.tsx b/gui/src/components/provider-workspace/ProviderAuthPanel.tsx
index 72b3ccb4cc..c5f49964bd 100644
--- a/gui/src/components/provider-workspace/ProviderAuthPanel.tsx
+++ b/gui/src/components/provider-workspace/ProviderAuthPanel.tsx
@@ -8,12 +8,7 @@ import { useT } from "../../i18n/shared";
 import { IconLock, IconRefresh, IconTrash } from "../../icons";
 import type { WorkspaceItem } from "../../provider-workspace/catalog";
 import { oauthAccountDisplayLabel, providerAuthSurface } from "../../provider-workspace/auth";
-import { displayAccountId } from "../../lib/privacy";
 import {
-  formatOAuthHealthLabel,
-  formatOAuthHealthSummary,
-  oauthHealthBadgeClass,
-  oauthHealthIsCooldown,
   oauthHealthShowsReauth,
 } from "../../oauth-health-display";
 import CodexAccountPool from "../CodexAccountPool";
@@ -21,7 +16,19 @@ import AnthropicAccountPoolSettings from "./AnthropicAccountPoolSettings";
 import { LoginHint as LoginHintView } from "../login-url-block";
 import { OpenBrowserPrefToggle } from "../open-browser-pref-toggle";
 import ProviderAccountQuota from "./ProviderAccountQuota";
-import { GrokCouponBadge, GrokResetCouponModal } from "./GrokResetCoupons";
+import ProviderAccountsToolbar from "./ProviderAccountsToolbar";
+import ProviderAccountCard from "./ProviderAccountCard";
+import {
+  analyzeAccountQuota,
+  filterAccounts,
+  sortAccounts,
+  type AccountFilterKey,
+  type AccountSortKey,
+  type AccountDisplayKey,
+  type AccountViewModeKey,
+} from "./account-quota-analysis";
+import { GrokResetCouponModal } from "./GrokResetCoupons";
+import { RemoveAccountConfirmDialog } from "./ProviderDialogs";
 import type { CodexAccountPoolController } from "../../hooks/useCodexAccountPool";
 import { useGrokResetCoupons } from "../../hooks/useGrokResetCoupons";
 import { Switch } from "../../ui";
@@ -35,7 +42,6 @@ import type {
   ProviderUpdateResult,
 } from "./types";
 
-const COCKPIT_IMPORT_MAX_BYTES = 256 * 1024;
 const EMPTY_OAUTH_ACCOUNTS: OAuthAccountRow[] = [];
 const EMPTY_API_KEYS: ApiKeyRow[] = [];
 
@@ -106,73 +112,6 @@ function XaiChatOptInControl({
   );
 }
 
-type CockpitImportResult = {
-  importedCount: number;
-  updatedCount: number;
-  failedCount: number;
-  unsupportedCount: number;
-};
-
-const COCKPIT_RESULT_KEYS = new Set([
-  "totalCount", "importedCount", "updatedCount", "failedCount", "unsupportedCount", "results",
-]);
-const COCKPIT_RESULT_STATUSES = new Set(["imported", "updated", "failed", "unsupported"]);
-const COCKPIT_STATUS_CODES: Record<string, ReadonlySet<string>> = {
-  imported: new Set(["imported"]),
-  updated: new Set(["updated"]),
-  failed: new Set([
-    "invalid_record",
-    "credential_rejected",
-    "identity_mismatch",
-    "missing_project",
-    "persist_failed",
-  ]),
-  unsupported: new Set(["unsupported_provider", "unsupported_format"]),
-};
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
-  const prototype = Object.getPrototypeOf(value);
-  return prototype === Object.prototype || prototype === null;
-}
-
-function isSafeCount(value: unknown): value is number {
-  return typeof value === "number" && Number.isSafeInteger(value) && value >= 0;
-}
-
-function safeCockpitImportResult(value: unknown): CockpitImportResult | null {
-  if (!isPlainObject(value) || Object.keys(value).some(key => !COCKPIT_RESULT_KEYS.has(key))) return null;
-  const { totalCount, importedCount, updatedCount, failedCount, unsupportedCount, results } = value;
-  if (
-    !isSafeCount(totalCount)
-    || !isSafeCount(importedCount)
-    || !isSafeCount(updatedCount)
-    || !isSafeCount(failedCount)
-    || !isSafeCount(unsupportedCount)
-    || !Array.isArray(results)
-    || results.length !== totalCount
-    || importedCount + updatedCount + failedCount + unsupportedCount !== totalCount
-  ) return null;
-
-  const observed = { imported: 0, updated: 0, failed: 0, unsupported: 0 };
-  for (const [index, result] of results.entries()) {
-    if (!isPlainObject(result) || Object.keys(result).some(key => !["index", "status", "code"].includes(key))) return null;
-    const status = String(result.status);
-    const code = String(result.code);
-    if (result.index !== index || !COCKPIT_RESULT_STATUSES.has(status)) return null;
-    const allowedCodes = COCKPIT_STATUS_CODES[status];
-    if (!allowedCodes?.has(code)) return null;
-    observed[status as keyof typeof observed] += 1;
-  }
-  if (
-    observed.imported !== importedCount
-    || observed.updated !== updatedCount
-    || observed.failed !== failedCount
-    || observed.unsupported !== unsupportedCount
-  ) return null;
-  return { importedCount, updatedCount, failedCount, unsupportedCount };
-}
-
 export default function ProviderAuthPanel({
   item, apiBase, oauth, accounts = EMPTY_OAUTH_ACCOUNTS, keys = EMPTY_API_KEYS, accountLoadState = "ready",
   switchingAccountId = null, busy = false, loginHint, authHandlers, onCodexActiveNeedsReauthChange,
@@ -197,10 +136,6 @@ export default function ProviderAuthPanel({
   const [addingKey, setAddingKey] = useState(false);
   const [newKey, setNewKey] = useState("");
   const [keyBusy, setKeyBusy] = useState(false);
-  const [importBusy, setImportBusy] = useState(false);
-  const [importStatus, setImportStatus] = useState<"idle" | "invalid" | "failed" | "complete">("idle");
-  const [importResult, setImportResult] = useState<CockpitImportResult | null>(null);
-  const importFileRef = useRef<HTMLInputElement>(null);
   const [manualCode, setManualCode] = useState("");
   const [manualCodeBusy, setManualCodeBusy] = useState(false);
   const [manualCodeMsg, setManualCodeMsg] = useState("");
@@ -234,6 +169,88 @@ export default function ProviderAuthPanel({
   );
   const grokCoupons = useGrokResetCoupons({ apiBase, accountIds: grokAccountIds, enabled: grokCouponsEnabled });
   const [couponAccount, setCouponAccount] = useState<OAuthAccountRow | null>(null);
+  const [accountToRemove, setAccountToRemove] = useState<OAuthAccountRow | null>(null);
+  const [removingAccount, setRemovingAccount] = useState(false);
+  const [accountFilter, setAccountFilter] = useState<AccountFilterKey>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_account_filter");
+      const valid = ["with_limits", "with_limits_gemini", "with_limits_claude", "all", "gemini_exhausted", "claude_exhausted", "fully_exhausted"];
+      if (saved && valid.includes(saved)) return saved as AccountFilterKey;
+    } catch { /* localStorage unavailable */ }
+    return "with_limits";
+  });
+
+  const [accountSort, setAccountSort] = useState<AccountSortKey>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_account_sort");
+      const valid = ["more_headroom", "less_headroom", "reset_5h_soonest", "reset_7d_soonest"];
+      if (saved && valid.includes(saved)) return saved as AccountSortKey;
+    } catch { /* localStorage unavailable */ }
+    return "more_headroom";
+  });
+
+  const [accountTitleMode, setAccountTitleMode] = useState<AccountDisplayKey>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_account_title_mode");
+      const valid = ["login", "masked", "alias"];
+      if (saved && valid.includes(saved)) return saved as AccountDisplayKey;
+    } catch { /* localStorage unavailable */ }
+    return "login";
+  });
+
+  const [accountViewMode, setAccountViewMode] = useState<AccountViewModeKey>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_account_view_mode");
+      const valid = ["cards", "compact"];
+      if (saved && valid.includes(saved)) return saved as AccountViewModeKey;
+    } catch { /* localStorage unavailable */ }
+    return "cards";
+  });
+
+  const handleFilterChange = (next: AccountFilterKey) => {
+    setAccountFilter(next);
+    try { localStorage.setItem("ocx_account_filter", next); } catch { /* ignore */ }
+  };
+
+  const handleSortChange = (next: AccountSortKey) => {
+    setAccountSort(next);
+    try { localStorage.setItem("ocx_account_sort", next); } catch { /* ignore */ }
+  };
+
+  const handleTitleModeChange = (next: AccountDisplayKey) => {
+    setAccountTitleMode(next);
+    try { localStorage.setItem("ocx_account_title_mode", next); } catch { /* ignore */ }
+  };
+
+  const handleViewModeChange = (next: AccountViewModeKey) => {
+    setAccountViewMode(next);
+    try { localStorage.setItem("ocx_account_view_mode", next); } catch { /* ignore */ }
+  };
+  const [accountSearch, setAccountSearch] = useState("");
+  const [refreshingAccountId, setRefreshingAccountId] = useState<string | null>(null);
+
+  const showModelFamilies = item.name === "google-antigravity";
+
+  const effectiveAccountFilter = useMemo(() => {
+    if (!showModelFamilies && (
+      accountFilter === "with_limits_gemini"
+      || accountFilter === "with_limits_claude"
+      || accountFilter === "gemini_exhausted"
+      || accountFilter === "claude_exhausted"
+    )) {
+      return "with_limits";
+    }
+    return accountFilter;
+  }, [showModelFamilies, accountFilter]);
+
+  const analyzedAccounts = useMemo(() => {
+    return accounts.map(a => analyzeAccountQuota(a, item.name));
+  }, [accounts, item.name]);
+
+  const filteredAndSortedAccounts = useMemo(() => {
+    const filtered = filterAccounts(analyzedAccounts, effectiveAccountFilter, accountSearch);
+    return sortAccounts(filtered, accountSort, effectiveAccountFilter);
+  }, [analyzedAccounts, effectiveAccountFilter, accountSearch, accountSort]);
   const refreshQuota = async () => {
     if (!onRefreshQuota || refreshingQuota) return;
     const generation = ++quotaRefreshGeneration.current;
@@ -249,6 +266,19 @@ export default function ProviderAuthPanel({
     }
   };
 
+  const autoProbedKeyRef = useRef<string | null>(null);
+  useEffect(() => {
+    const key = `${item.name}:${accounts.map(a => a.id).join(",")}`;
+    if (autoProbedKeyRef.current === key) return;
+    if (isOauth && accounts.length > 0 && accounts.some(a => !a.quota && a.quotaMode !== "unsupported") && onRefreshQuota) {
+      autoProbedKeyRef.current = key;
+      const timer = setTimeout(() => {
+        void onRefreshQuota(item.name);
+      }, 50);
+      return () => { clearTimeout(timer); };
+    }
+  }, [item.name, isOauth, accounts, onRefreshQuota]);
+
   if (surface === "codex-accounts") {
     return (
       <section className="pwi-section pwi-auth-section" aria-label={t("pws.availableAccounts")}>
@@ -317,54 +347,6 @@ export default function ProviderAuthPanel({
     }
   };
 
-  const importCockpitFile = async (file: File | undefined) => {
-    if (!file || importBusy) return;
-    setImportBusy(true);
-    setImportStatus("idle");
-    setImportResult(null);
-    try {
-      if (!file.name.toLowerCase().endsWith(".json") || file.size > COCKPIT_IMPORT_MAX_BYTES) {
-        setImportStatus("invalid");
-        return;
-      }
-      let document: unknown;
-      try {
-        document = JSON.parse(await file.text()) as unknown;
-      } catch {
-        setImportStatus("invalid");
-        return;
-      }
-      const response = await fetch(`${apiBase}/api/oauth/accounts/import`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ provider: "google-antigravity", format: "cockpit-tools", document }),
-      });
-      if (!response.ok) {
-        setImportStatus("failed");
-        return;
-      }
-      const result = safeCockpitImportResult(await response.json().catch(() => null));
-      if (!result) {
-        setImportStatus("failed");
-        return;
-      }
-      setImportResult(result);
-      setImportStatus("complete");
-      // The validated import is complete independently of the best-effort list refresh.
-      // The account-pool owner reports refresh failure through accountLoadState, which
-      // remains visible beside this completed import result.
-      try {
-        await authHandlers.onRetryAccounts?.(item.name);
-      } catch {
-        /* Preserve the completed import state; accountLoadState owns refresh errors. */
-      }
-    } catch {
-      setImportStatus("failed");
-    } finally {
-      if (importFileRef.current) importFileRef.current.value = "";
-      setImportBusy(false);
-    }
-  };
 
   return (
     <section className="pwi-section pwi-auth-section" aria-label={isOauth ? t("pws.availableAccounts") : t("pws.apiKeys")}>
@@ -378,7 +360,7 @@ export default function ProviderAuthPanel({
       */}
       <div className="pwi-auth-head">
         <h3 className="pwi-section-title">{isOauth ? t("pws.availableAccounts") : t("pws.apiKeys")}</h3>
-        {((isOauth && loggedIn) || isKeyAuth) && canRefreshQuota && (
+        {(isKeyAuth || (isOauth && accounts.length === 0 && loggedIn)) && canRefreshQuota && (
           <div className="pwi-auth-head-actions">
             {quotaRefreshResult && (
               <span role="status" className={quotaRefreshResult.ok ? "pws-status-ok" : "pws-status-warn"}>
@@ -410,63 +392,33 @@ export default function ProviderAuthPanel({
             {item.name === "anthropic" && (
               <AnthropicAccountPoolSettings apiBase={apiBase} accountCount={accounts.length} />
             )}
-            {item.name === "google-antigravity" && (
-              <div className="pwi-auth-add-key">
-                <div>
-                  <div id="cockpit-import-description" className="pwi-auth-row-secondary">
-                    {t("pws.cockpitImportDescription")}
-                  </div>
-                  <label className="sr-only" htmlFor="cockpit-import-file">{t("pws.cockpitImportFileLabel")}</label>
-                  <input
-                    ref={importFileRef}
-                    id="cockpit-import-file"
-                    type="file"
-                    accept="application/json,.json"
-                    className="sr-only"
-                    aria-describedby="cockpit-import-description cockpit-import-status"
-                    disabled={importBusy}
-                    onChange={event => { void importCockpitFile(event.currentTarget.files?.[0]); }}
-                  />
-                </div>
-                <button type="button" className="btn btn-ghost btn-sm" disabled={importBusy}
-                  onClick={() => importFileRef.current?.click()}>
-                  {importBusy ? t("pws.cockpitImporting") : t("pws.cockpitImportChooseFile")}
-                </button>
-                <div id="cockpit-import-status" role="status" aria-live="polite">
-                  {importStatus === "invalid" && t("pws.cockpitImportInvalid")}
-                  {importStatus === "failed" && t("pws.cockpitImportFailed")}
-                  {importStatus === "complete" && importResult && t("pws.cockpitImportComplete", {
-                    imported: importResult.importedCount,
-                    updated: importResult.updatedCount,
-                    failed: importResult.failedCount,
-                    unsupported: importResult.unsupportedCount,
-                  })}
-                </div>
+
+            {/* Only show initial login row when no accounts exist yet */}
+            {accounts.length === 0 && (
+              <div className="pwi-auth-status-row">
+                <span className={`pwi-auth-dot ${activeNeedsReauth ? "pwi-auth-dot--warn" : loggedIn ? "pwi-auth-dot--ok" : "pwi-auth-dot--off"}`} aria-hidden="true" />
+                <span className="pwi-auth-status-text">
+                  {loggedIn
+                    ? (oauth?.email ?? t("pws.loggedInTitle"))
+                    : (oauth?.error || t("pws.notLoggedInTitle"))}
+                </span>
+                <span className="pwi-auth-actions">
+                  {activeReauthAccount && (
+                    <button type="button" className="btn btn-primary btn-sm" disabled={busy} onClick={() => void authHandlers.onReauth(item.name, activeReauthAccount.id)}>
+                      {t("pws.reauthenticate")}
+                    </button>
+                  )}
+                  {loggedIn ? (
+                    <button type="button" className="btn btn-ghost btn-sm" onClick={() => void authHandlers.onLogout(item.name)}>{t("prov.logout")}</button>
+                  ) : (
+                    <button type="button" className="btn btn-primary btn-sm" disabled={busy} onClick={() => void authHandlers.onLogin(item.name, false)}>
+                      {busy ? <span className="pwi-spin-inline" aria-hidden="true" /> : <IconLock style={{ width: 13, height: 13 }} aria-hidden="true" />}
+                      {busy ? t("prov.waitingBrowser") : t("prov.login")}
+                    </button>
+                  )}
+                </span>
               </div>
             )}
-            <div className="pwi-auth-status-row">
-              <span className={`pwi-auth-dot ${activeNeedsReauth ? "pwi-auth-dot--warn" : loggedIn ? "pwi-auth-dot--ok" : "pwi-auth-dot--off"}`} aria-hidden="true" />
-              <span className="pwi-auth-status-text">
-                {loggedIn
-                  ? (accounts.length > 0 ? t("pws.loggedInTitle") : (oauth?.email ?? t("pws.loggedInTitle")))
-                  : (oauth?.error || t("pws.notLoggedInTitle"))}
-              </span>
-              <span className="pwi-auth-actions">
-                {activeReauthAccount && (
-                  <button type="button" className="btn btn-primary btn-sm" disabled={busy} onClick={() => void authHandlers.onReauth(item.name, activeReauthAccount.id)}>
-                    {t("pws.reauthenticate")}
-                  </button>
-                )}
-                {loggedIn ? (
-                  <button type="button" className="btn btn-ghost btn-sm" onClick={() => void authHandlers.onLogout(item.name)}>{t("prov.logout")}</button>
-                ) : (
-                  <button type="button" className="btn btn-primary btn-sm" disabled={busy} onClick={() => void authHandlers.onLogin(item.name, false)}>
-                    {busy ? <span className="pwi-spin-inline" aria-hidden="true" /> : <IconLock style={{ width: 13, height: 13 }} aria-hidden="true" />}
-                    {busy ? t("prov.waitingBrowser") : t("prov.login")}
-                  </button>
-                )}
-              </span>
-            </div>
             {!busy && <OpenBrowserPrefToggle />}
             {busy && hintForThis && (
               <div className="pwi-auth-wait">
@@ -513,79 +465,76 @@ export default function ProviderAuthPanel({
               </div>
             )}
             {accounts.length > 0 && (
-              <ul className="pwi-auth-list">
-                {accounts.map(account => {
-                  const label = oauthAccountDisplayLabel(accounts, account, t);
-                  const switching = switchingAccountId === account.id;
-                  const healthStatus = account.health?.status;
-                  const showReauth = accountShowsReauth(account);
-                  const inCooldown = oauthHealthIsCooldown(healthStatus);
-                  const maskedId = displayAccountId(account.id);
-                  const healthLabel = formatOAuthHealthLabel(t, account.health);
-                  const healthSummary = formatOAuthHealthSummary(t, item.name, account.id, account.health);
-                  return (
-                  <li key={account.id} className={`pwi-auth-acct${account.active ? " pwi-auth-acct--active" : ""}`}>
-                    <div className={`pwi-auth-row${account.active ? " pwi-auth-row--active" : ""}`}>
-                    <button type="button" className="pwi-auth-row-main"
-                      onClick={() => { if (!account.active && !showReauth && !inCooldown && !switchingAccountId) void authHandlers.onSwitchAccount(item.name, account); }}
-                      aria-current={account.active ? "true" : undefined}
-                      aria-label={`${label}${account.active ? ` — ${t("pws.accountCurrent")}` : ""}`}
-                      disabled={Boolean(showReauth || inCooldown || (switchingAccountId && !switching))}>
-                      <span className={`pwi-auth-dot ${showReauth ? "pwi-auth-dot--warn" : account.active ? "pwi-auth-dot--ok" : "pwi-auth-dot--off"}`} aria-hidden="true" />
-                      <span className="pwi-auth-row-copy">
-                        <span className="pwi-auth-row-label">{label}</span>
-                        <span className="pwi-auth-row-secondary">{[account.email, `${t("prov.accountId")}: ${maskedId}`].filter(Boolean).join(" · ")}</span>
-                        {healthSummary && (
-                          <span className="pwi-auth-row-secondary faint">{healthSummary}</span>
-                        )}
-                        {inCooldown && (
-                          <span className="pwi-auth-row-secondary faint">{t("pws.healthCooldownHint")}</span>
-                        )}
-                      </span>
-                      {healthLabel && (
-                        <span className={oauthHealthBadgeClass(healthStatus)}>{healthLabel}</span>
-                      )}
-                      {showReauth && !healthLabel && <span className="badge badge-amber">{t("pws.reauth")}</span>}
-                      {account.active && <span className="badge badge-primary">{t("prov.accountActive")}</span>}
-                      {switching && <span className="badge badge-muted">{t("pws.accountSwitching")}</span>}
-                    </button>
-                    {showReauth && (
-                      <button
-                        type="button"
-                        className="btn btn-ghost btn-sm"
-                        disabled={busy || Boolean(switchingAccountId)}
-                        onClick={() => void authHandlers.onReauth(item.name, account.id)}
-                      >
-                        {t("pws.reauthenticate")}
-                      </button>
-                    )}
-                    {grokCouponsEnabled && !showReauth && (
-                      <GrokCouponBadge
-                        entry={grokCoupons.entries[account.id]}
-                        t={t}
-                        onClick={() => setCouponAccount(account)}
+              <>
+                <ProviderAccountsToolbar
+                  analyzedList={analyzedAccounts}
+                  showModelFamilies={showModelFamilies}
+                  filter={accountFilter}
+                  onFilterChange={handleFilterChange}
+                  sortKey={accountSort}
+                  onSortChange={handleSortChange}
+                  titleMode={accountTitleMode}
+                  onTitleModeChange={handleTitleModeChange}
+                  viewMode={accountViewMode}
+                  onViewModeChange={handleViewModeChange}
+                  searchQuery={accountSearch}
+                  onSearchQueryChange={setAccountSearch}
+                  refreshingAll={refreshingQuota}
+                  onRefreshAll={canRefreshQuota ? () => { void refreshQuota(); } : undefined}
+                  quotaRefreshResultText={quotaRefreshResult?.text}
+                  quotaRefreshResultOk={quotaRefreshResult?.ok}
+                />
+
+                {filteredAndSortedAccounts.length > 0 ? (
+                  <div className={accountViewMode === "compact" ? "compact-dense-grid" : "pwi-accounts-grid-2col"}>
+                    {filteredAndSortedAccounts.map(analyzed => (
+                      <ProviderAccountCard
+                        key={analyzed.account.id}
+                        analyzed={analyzed}
+                        viewMode={accountViewMode}
+                        titleMode={accountTitleMode}
+                        switching={switchingAccountId === analyzed.account.id}
+                        disabled={busy || Boolean(switchingAccountId && switchingAccountId !== analyzed.account.id)}
+                        refreshing={refreshingQuota && (refreshingAccountId === analyzed.account.id || !refreshingAccountId)}
+                        onSwitch={acc => void authHandlers.onSwitchAccount(item.name, acc)}
+                        onRefreshSingle={canRefreshQuota ? acc => {
+                          setRefreshingAccountId(acc.id);
+                          void refreshQuota().finally(() => setRefreshingAccountId(null));
+                        } : undefined}
+                        onEditAlias={acc => void authHandlers.onEditAlias(item.name, "oauth", acc.id, acc.alias)}
+                        onRemove={acc => setAccountToRemove(acc)}
+                        onReauth={acc => void authHandlers.onReauth(item.name, acc.id)}
                       />
+                    ))}
+                  </div>
+                ) : (
+                  <div className="pwi-auth-state pwi-auth-state--empty" style={{ justifyContent: "center", gap: 12 }}>
+                    <span>{t("modal.noMatch")}</span>
+                    {accountFilter !== "all" && (
+                      <button type="button" className="btn btn-ghost btn-sm" onClick={() => handleFilterChange("all")}>
+                        {t("pws.filterAllAccounts")}
+                      </button>
                     )}
-                    <button type="button" className="btn btn-ghost btn-sm"
-                      onClick={() => void authHandlers.onEditAlias(item.name, "oauth", account.id, account.alias)}>
-                      {t("prov.editAlias")}
-                    </button>
-                    <button type="button" className="btn btn-ghost btn-sm pwi-auth-row-remove"
-                      aria-label={`${t("common.remove")} — ${label}`}
-                      title={`${t("common.remove")} — ${label}`}
-                      disabled={Boolean(switchingAccountId)}
-                      onClick={() => void authHandlers.onRemoveAccount(item.name, account)}>
-                      <IconTrash style={{ width: 13, height: 13 }} aria-hidden="true" />
-                    </button>
-                    </div>
-                    <div className="pwi-auth-acct-quota">
-                      <ProviderAccountQuota quotaMode={account.quotaMode} quota={account.quota}
-                        quotaUnavailable={account.quotaUnavailable} quotaPending={account.quotaPending} quotaFailure={account.quotaFailure} />
-                    </div>
-                  </li>
-                  );
-                })}
-              </ul>
+                  </div>
+                )}
+              </>
+            )}
+            {accountToRemove && (
+              <RemoveAccountConfirmDialog
+                accountLabel={oauthAccountDisplayLabel(accounts, accountToRemove, t)}
+                removing={removingAccount}
+                onCancel={() => { if (!removingAccount) setAccountToRemove(null); }}
+                onConfirm={async () => {
+                  if (removingAccount || !accountToRemove) return;
+                  setRemovingAccount(true);
+                  try {
+                    await authHandlers.onRemoveAccount(item.name, accountToRemove);
+                    setAccountToRemove(null);
+                  } finally {
+                    setRemovingAccount(false);
+                  }
+                }}
+              />
             )}
             {couponAccount && (
               <GrokResetCouponModal
diff --git a/gui/src/components/provider-workspace/ProviderDetails.tsx b/gui/src/components/provider-workspace/ProviderDetails.tsx
index aa843b86fc..dba8605eb6 100644
--- a/gui/src/components/provider-workspace/ProviderDetails.tsx
+++ b/gui/src/components/provider-workspace/ProviderDetails.tsx
@@ -107,7 +107,17 @@ export default function ProviderDetails({
   onRefreshQuota?: () => Promise<boolean>;
 }) {
   const t = useT();
-  const [tab, setTab] = useState<Tab>("overview");
+  const [tab, setTab] = useState<Tab>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_provider_tab_" + item.name) || localStorage.getItem("ocx_provider_active_tab");
+      const valid = ["overview", "models", "usage", "accounts", "settings"];
+      if (saved && valid.includes(saved)) {
+        if (saved === "accounts" && providerAuthSurface(item) === null) return "overview";
+        return saved as Tab;
+      }
+    } catch { /* localStorage unavailable */ }
+    return "overview";
+  });
   const [settingsDirty, setSettingsDirty] = useState(false);
   const [pendingLeave, setPendingLeave] = useState<Tab | "deselect" | null>(null);
   const [leaveSaving, setLeaveSaving] = useState(false);
@@ -149,7 +159,11 @@ export default function ProviderDetails({
       return;
     }
     setTab(next);
-  }, [tab, settingsDirty]);
+    try {
+      localStorage.setItem("ocx_provider_tab_" + item.name, next);
+      localStorage.setItem("ocx_provider_active_tab", next);
+    } catch { /* ignore */ }
+  }, [tab, settingsDirty, item.name, setPendingLeave, setTab]);
 
   // Adjust related state when accountsFocusToken changes during render (not in an
   // effect) so the Accounts tab is selected without a one-frame stale paint.
@@ -173,7 +187,7 @@ export default function ProviderDetails({
       return;
     }
     onDeselect();
-  }, [settingsDirty, tab, onDeselect]);
+  }, [settingsDirty, tab, onDeselect, setPendingLeave]);
 
   const onTabKeyDown = useCallback((event: React.KeyboardEvent<HTMLButtonElement>, index: number) => {
     let next: number;
@@ -370,7 +384,7 @@ export default function ProviderDetails({
             setPendingLeave(null);
             setSettingsDirty(false);
             if (next === "deselect") onDeselect();
-            else setTab(next);
+            else switchTab(next);
           }}
           onSave={() => {
             void (async () => {
@@ -383,7 +397,7 @@ export default function ProviderDetails({
                 setPendingLeave(null);
                 setSettingsDirty(false);
                 if (next === "deselect") onDeselect();
-                else if (next) setTab(next);
+                else if (next) switchTab(next);
               } finally {
                 setLeaveSaving(false);
               }
diff --git a/gui/src/components/provider-workspace/ProviderDialogs.tsx b/gui/src/components/provider-workspace/ProviderDialogs.tsx
index c28dcd3cee..066fda8e54 100644
--- a/gui/src/components/provider-workspace/ProviderDialogs.tsx
+++ b/gui/src/components/provider-workspace/ProviderDialogs.tsx
@@ -2,6 +2,7 @@
  * ProviderDialogs — confirmation and warning dialogs for the workspace
  * Settings tab (WP091): remove provider, unsaved-leave, JSON save-before-leave.
  */
+import { useEffect, useRef } from "react";
 import { useT } from "../../i18n/shared";
 
 export function RemoveConfirmDialog({
@@ -55,3 +56,53 @@ export function UnsavedLeaveDialog({
     </div>
   );
 }
+
+
+export function RemoveAccountConfirmDialog({
+  accountLabel,
+  onConfirm,
+  onCancel,
+  removing = false,
+}: {
+  accountLabel: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+  removing?: boolean;
+}) {
+  const t = useT();
+  const cancelBtnRef = useRef<HTMLButtonElement>(null);
+
+  const onCancelRef = useRef(onCancel);
+  useEffect(() => { onCancelRef.current = onCancel; });
+
+  useEffect(() => {
+    cancelBtnRef.current?.focus();
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && !removing) {
+        e.preventDefault();
+        onCancelRef.current();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [removing]);
+
+  return (
+    <div className="dialog-backdrop" onClick={onCancel}>
+      <div className="dialog" role="alertdialog" aria-modal="true" aria-label={t("pws.removeAccountConfirmTitle")} onClick={e => e.stopPropagation()}>
+        <h3>{t("pws.removeAccountConfirmTitle")}</h3>
+        <p>
+          {t("prov.accountRemoveConfirm", { email: accountLabel })}
+        </p>
+        <div className="dialog-actions">
+          <button ref={cancelBtnRef} type="button" className="btn btn-ghost btn-sm" onClick={onCancel} disabled={removing}>
+            {t("common.cancel")}
+          </button>
+          <button type="button" className="btn btn-danger btn-sm" onClick={onConfirm} disabled={removing}>
+            {t("common.remove")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/gui/src/components/provider-workspace/ProviderWorkspaceShell.tsx b/gui/src/components/provider-workspace/ProviderWorkspaceShell.tsx
index e478656baa..3f7810076e 100644
--- a/gui/src/components/provider-workspace/ProviderWorkspaceShell.tsx
+++ b/gui/src/components/provider-workspace/ProviderWorkspaceShell.tsx
@@ -138,6 +138,23 @@ export default function ProviderWorkspaceShell({
 }) {
   const t = useT();
   const [search, setSearch] = useState("");
+  const [railCollapsed, setRailCollapsed] = useState<boolean>(() => {
+    try {
+      return localStorage.getItem("ocx_pws_rail_collapsed") === "true";
+    } catch {
+      return false;
+    }
+  });
+
+  const toggleRailCollapsed = useCallback(() => {
+    setRailCollapsed(prev => {
+      const next = !prev;
+      try {
+        localStorage.setItem("ocx_pws_rail_collapsed", String(next));
+      } catch { /* ignore */ }
+      return next;
+    });
+  }, []);
   const [statusFilter, setStatusFilter] = useState<StatusFilter>({ ready: true, needsSetup: true, disabled: true });
   const [pricingFilter, setPricingFilter] = useState<PricingFilter>({ free: true, paid: true });
   const [typeFilter, setTypeFilter] = useState<TypeFilter>({ cloud: true, local: true, selfHosted: true, login: true });
@@ -396,8 +413,21 @@ export default function ProviderWorkspaceShell({
 
   return (
     <div className="pws-shell-container">
-      <div className="pws-root">
-        <aside className="pws-rail" aria-label={t("pws.providerList")}>
+      <div className={`pws-root${railCollapsed ? " pws-root--rail-collapsed" : ""}`}>
+        <aside className={`pws-rail${railCollapsed ? " pws-rail--collapsed" : ""}`} aria-label={t("pws.providerList")}>
+        {railCollapsed ? (
+          <div className="pws-rail-collapsed-head">
+            <button
+              type="button"
+              className="pws-rail-toggle-btn pws-rail-toggle-btn--expand"
+              onClick={toggleRailCollapsed}
+              title={t("pws.rail.expand")}
+              aria-label={t("pws.rail.expand")}
+            >
+              ▶
+            </button>
+          </div>
+        ) : (
         <div className="pws-search-row">
           <div className="pws-search-wrap">
             <IconSearch className="pws-search-icon" width={14} height={14} aria-hidden="true" />
@@ -487,7 +517,17 @@ export default function ProviderWorkspaceShell({
               </div>
             )}
           </div>
+          <button
+            type="button"
+            className="pws-rail-toggle-btn pws-rail-toggle-btn--collapse"
+            onClick={toggleRailCollapsed}
+            title={t("pws.rail.collapse")}
+            aria-label={t("pws.rail.collapse")}
+          >
+            ◀
+          </button>
         </div>
+        )}
         <div
           className="pws-rail-list"
           role="listbox"
@@ -538,7 +578,7 @@ export default function ProviderWorkspaceShell({
                       onClick={() => onSelect(item.name)}
                       onFocus={() => setRailFocusName(item.name)}
                     />
-                    {onRemoveProvider && (
+                    {onRemoveProvider && !railCollapsed && (
                       <button
                         type="button"
                         className="pws-rail-row-remove"
diff --git a/gui/src/components/provider-workspace/account-quota-analysis.ts b/gui/src/components/provider-workspace/account-quota-analysis.ts
new file mode 100644
index 0000000000..7ae8c61ea4
--- /dev/null
+++ b/gui/src/components/provider-workspace/account-quota-analysis.ts
@@ -0,0 +1,410 @@
+
+export function roundPercent(val: number): number {
+  return Math.round(val);
+}
+
+export function isWindowExhausted(percent?: number): boolean {
+  if (percent === undefined) return false;
+  return Math.round(percent) >= 100 || percent >= 99.5;
+}
+
+/**
+ * account-quota-analysis.ts — Pure quota window extraction, readiness calculation,
+ * email login formatting, and sorting for OAuth provider accounts (WP-Antigravity-UX).
+ */
+import type { OAuthAccountRow } from "./types";
+import { displayAccountId } from "../../lib/privacy";
+
+export interface QuotaWindowInfo {
+  label: string;
+  percent: number;
+  resetAt?: number;
+}
+
+export type AccountReadinessStatus =
+  | "both_ready"       // Gemini and Claude are both available (< 100%)
+  | "claude_only"      // Gemini is exhausted (100%), Claude is available
+  | "gemini_only"      // Claude is exhausted (100%), Gemini is available
+  | "fully_exhausted"  // Both models (or all available windows) are exhausted (>= 100%)
+  | "ready"            // Generic non-Antigravity ready
+  | "exhausted";       // Generic non-Antigravity exhausted
+
+export interface AnalyzedAccountQuota {
+  account: OAuthAccountRow;
+  emailLogin: string;
+  maskedLogin: string;
+  isAntigravity: boolean;
+
+  // Extracted specific model windows
+  gemini5h?: QuotaWindowInfo;
+  geminiWeekly?: QuotaWindowInfo;
+  claude5h?: QuotaWindowInfo;
+  claudeWeekly?: QuotaWindowInfo;
+
+  // Generic windows if not antigravity
+  generic5h?: QuotaWindowInfo;
+  genericWeekly?: QuotaWindowInfo;
+
+  // Calculations
+  geminiUsedMax: number;
+  claudeUsedMax: number;
+  overallUsedMax: number;
+  freeHeadroom: number; // 0..100%
+
+  geminiExhausted: boolean;
+  claudeExhausted: boolean;
+  fullyExhausted: boolean;
+  hasAnyLimitsLeft: boolean;
+
+  readinessStatus: AccountReadinessStatus;
+}
+
+/**
+ * Extract clean login name from email without domain (e.g. "user@example.com" -> "g***1").
+ */
+
+export function maskLocalEmail(value: string | null | undefined): string | null {
+  if (!value) return null;
+  const at = value.indexOf("@");
+  if (at <= 0) return value;
+  const local = value.slice(0, at);
+  const domain = value.slice(at + 1);
+  if (!domain) return value;
+  if (local.length === 1) return `*@${domain}`;
+  if (local.length === 2) return `${local[0]}*@${domain}`;
+  return `${local[0]}***${local[local.length - 1]}@${domain}`;
+}
+
+export function extractMaskedLogin(
+  maskedEmail?: string,
+  email?: string,
+  rawEmail?: string,
+  alias?: string,
+  id?: string,
+): string {
+  const candidate = (maskedEmail && maskedEmail.trim()) || (email && email.includes("*") ? email.trim() : null);
+  if (candidate) {
+    const atIndex = candidate.indexOf("@");
+    if (atIndex > 0) return candidate.slice(0, atIndex);
+    return candidate;
+  }
+  const source = (rawEmail && rawEmail.trim() && !rawEmail.includes("*") ? rawEmail.trim() : null)
+    || (email && email.trim() && !email.includes("*") ? email.trim() : null)
+    || (rawEmail && rawEmail.trim())
+    || (email && email.trim());
+  if (source) {
+    const masked = maskLocalEmail(source);
+    if (masked) {
+      const atIndex = masked.indexOf("@");
+      if (atIndex > 0) return masked.slice(0, atIndex);
+      return masked;
+    }
+  }
+  if (alias && alias.trim()) return alias.trim();
+  if (id) return displayAccountId(id);
+  return "";
+}
+
+export function extractEmailLogin(
+  email?: string,
+  alias?: string,
+  id?: string,
+): string {
+  // Display follows the management-API projection: never prefer a side-channel
+  // rawEmail over the masked `email` the privacy SSOT already chose.
+  const source = email && email.trim() ? email.trim() : null;
+  if (source) {
+    const atIndex = source.indexOf("@");
+    if (atIndex > 0) return source.slice(0, atIndex);
+    return source;
+  }
+  if (alias && alias.trim()) return alias.trim();
+  if (id) return displayAccountId(id);
+  return "";
+}
+
+/**
+ * Check whether a window label represents a 5-hour window.
+ */
+function is5hWindow(label: string): boolean {
+  const l = label.toLowerCase();
+  return l === "gem" || l === "cla" || l === "5h" || l.includes("5h") || l.includes("5-hour") || l.includes("five");
+}
+
+/**
+ * Check whether a window label represents a weekly window.
+ */
+function isWeeklyWindow(label: string): boolean {
+  const l = label.toLowerCase();
+  return l.includes("week");
+}
+
+export function analyzeAccountQuota(account: OAuthAccountRow, providerName = "google-antigravity"): AnalyzedAccountQuota {
+  const emailLogin = extractEmailLogin(account.email, account.alias, account.id);
+  const maskedLogin = extractMaskedLogin(account.maskedEmail, account.email, account.rawEmail, account.alias, account.id);
+  const quota = account.quota;
+
+  let gemini5h: QuotaWindowInfo | undefined;
+  let geminiWeekly: QuotaWindowInfo | undefined;
+  let claude5h: QuotaWindowInfo | undefined;
+  let claudeWeekly: QuotaWindowInfo | undefined;
+
+  let generic5h: QuotaWindowInfo | undefined;
+  let genericWeekly: QuotaWindowInfo | undefined;
+
+  const customWindows = quota?.customWindows ?? [];
+
+  for (const w of customWindows) {
+    if (typeof w.percent !== "number") continue;
+    const l = w.label.trim();
+    const lLower = l.toLowerCase();
+    const isGem = lLower === "gem" || lLower.startsWith("gem ") || lLower.startsWith("gemini");
+    const isCla = lLower === "cla" || lLower.startsWith("cla ") || lLower.startsWith("claude");
+
+    if (isGem) {
+      if (isWeeklyWindow(l)) {
+        if (!geminiWeekly) geminiWeekly = { label: l, percent: w.percent, resetAt: w.resetAt };
+      } else if (is5hWindow(l) || !gemini5h) {
+        gemini5h = { label: l, percent: w.percent, resetAt: w.resetAt };
+      }
+    } else if (isCla) {
+      if (isWeeklyWindow(l)) {
+        if (!claudeWeekly) claudeWeekly = { label: l, percent: w.percent, resetAt: w.resetAt };
+      } else if (is5hWindow(l) || !claude5h) {
+        claude5h = { label: l, percent: w.percent, resetAt: w.resetAt };
+      }
+    }
+  }
+
+  // Standard fiveHour/weekly fallbacks
+  if (typeof quota?.fiveHourPercent === "number") {
+    generic5h = { label: "5-Hour", percent: quota.fiveHourPercent, resetAt: quota.fiveHourResetAt };
+  }
+  if (typeof quota?.weeklyPercent === "number") {
+    genericWeekly = { label: "7-Day", percent: quota.weeklyPercent, resetAt: quota.weeklyResetAt };
+  }
+
+  const isAntigravity = providerName === "google-antigravity" || Boolean(gemini5h || geminiWeekly || claude5h || claudeWeekly);
+
+  // Compute model max utilization
+  const gemVals: number[] = [];
+  if (gemini5h) gemVals.push(gemini5h.percent);
+  if (geminiWeekly) gemVals.push(geminiWeekly.percent);
+  const geminiUsedMax = gemVals.length > 0 ? roundPercent(Math.max(...gemVals)) : 0;
+
+  const claVals: number[] = [];
+  if (claude5h) claVals.push(claude5h.percent);
+  if (claudeWeekly) claVals.push(claudeWeekly.percent);
+  const claudeUsedMax = claVals.length > 0 ? roundPercent(Math.max(...claVals)) : 0;
+
+  const allPercents: number[] = [];
+  if (gemVals.length > 0) allPercents.push(...gemVals);
+  if (claVals.length > 0) allPercents.push(...claVals);
+  if (generic5h) allPercents.push(generic5h.percent);
+  if (genericWeekly) allPercents.push(genericWeekly.percent);
+  for (const w of customWindows) {
+    if (typeof w.percent === "number") allPercents.push(w.percent);
+  }
+
+  const overallUsedMax = allPercents.length > 0 ? roundPercent(Math.max(...allPercents)) : 0;
+  const freeHeadroom = roundPercent(Math.max(0, 100 - overallUsedMax));
+
+  // Model-specific exhaustion
+  const hasGemini = gemVals.length > 0;
+  const hasClaude = claVals.length > 0;
+  const geminiExhausted = hasGemini && gemVals.some(p => isWindowExhausted(p));
+  const claudeExhausted = hasClaude && claVals.some(p => isWindowExhausted(p));
+
+  let fullyExhausted: boolean;
+  let readinessStatus: AccountReadinessStatus;
+
+  if (isAntigravity && (hasGemini || hasClaude)) {
+    if (hasGemini && hasClaude) {
+      if (geminiExhausted && claudeExhausted) {
+        fullyExhausted = true;
+        readinessStatus = "fully_exhausted";
+      } else if (geminiExhausted) {
+        fullyExhausted = false;
+        readinessStatus = "claude_only";
+      } else if (claudeExhausted) {
+        fullyExhausted = false;
+        readinessStatus = "gemini_only";
+      } else {
+        fullyExhausted = false;
+        readinessStatus = "both_ready";
+      }
+    } else if (hasGemini) {
+      fullyExhausted = geminiExhausted;
+      readinessStatus = geminiExhausted ? "fully_exhausted" : "gemini_only";
+    } else {
+      fullyExhausted = claudeExhausted;
+      readinessStatus = claudeExhausted ? "fully_exhausted" : "claude_only";
+    }
+  } else {
+    fullyExhausted = overallUsedMax >= 100;
+    readinessStatus = fullyExhausted ? "exhausted" : "ready";
+  }
+
+  const hasAnyLimitsLeft = isAntigravity && (hasGemini || hasClaude)
+    ? (!geminiExhausted && hasGemini) || (!claudeExhausted && hasClaude)
+    : freeHeadroom > 0;
+
+  return {
+    account,
+    emailLogin,
+    maskedLogin,
+    isAntigravity,
+    gemini5h,
+    geminiWeekly,
+    claude5h,
+    claudeWeekly,
+    generic5h,
+    genericWeekly,
+    geminiUsedMax,
+    claudeUsedMax,
+    overallUsedMax,
+    freeHeadroom,
+    geminiExhausted,
+    claudeExhausted,
+    fullyExhausted,
+    hasAnyLimitsLeft,
+    readinessStatus,
+  };
+}
+
+export type AccountFilterKey =
+  | "with_limits"
+  | "with_limits_gemini"
+  | "with_limits_claude"
+  | "all"
+  | "gemini_exhausted"
+  | "claude_exhausted"
+  | "fully_exhausted";
+
+export type AccountSortKey =
+  | "more_headroom"
+  | "less_headroom"
+  | "reset_5h_soonest"
+  | "reset_7d_soonest";
+
+export type AccountDisplayKey = "login" | "masked" | "alias";
+
+export type AccountViewModeKey = "cards" | "compact";
+
+export function filterAccounts(
+  items: AnalyzedAccountQuota[],
+  filter: AccountFilterKey,
+  searchQuery: string,
+): AnalyzedAccountQuota[] {
+  const query = searchQuery.trim().toLowerCase();
+
+  return items.filter(item => {
+    // 1. Search text filter
+    if (query) {
+      const matchLogin = item.emailLogin.toLowerCase().includes(query);
+      const matchMasked = item.maskedLogin.toLowerCase().includes(query) || (item.account.maskedEmail ?? "").toLowerCase().includes(query);
+      const matchEmail = (item.account.email ?? "").toLowerCase().includes(query);
+      const matchAlias = (item.account.alias ?? "").toLowerCase().includes(query);
+      const matchId = item.account.id.toLowerCase().includes(query);
+      if (!matchLogin && !matchMasked && !matchEmail && !matchAlias && !matchId) return false;
+    }
+
+    // 2. Status filter
+    switch (filter) {
+      case "with_limits":
+        return item.hasAnyLimitsLeft;
+      case "with_limits_gemini":
+        return Boolean(item.gemini5h || item.geminiWeekly) && !item.geminiExhausted;
+      case "with_limits_claude":
+        return Boolean(item.claude5h || item.claudeWeekly) && !item.claudeExhausted;
+      case "gemini_exhausted":
+        return item.geminiExhausted;
+      case "claude_exhausted":
+        return item.claudeExhausted;
+      case "fully_exhausted":
+        return item.fullyExhausted;
+      case "all":
+      default:
+        return true;
+    }
+  });
+}
+
+export function sortAccounts(
+  items: AnalyzedAccountQuota[],
+  sortKey: AccountSortKey,
+  activeFilter: AccountFilterKey = "with_limits",
+): AnalyzedAccountQuota[] {
+  const isGeminiFilter = activeFilter === "with_limits_gemini" || activeFilter === "gemini_exhausted";
+  const isClaudeFilter = activeFilter === "with_limits_claude" || activeFilter === "claude_exhausted";
+
+  return [...items].sort((a, b) => {
+    switch (sortKey) {
+      case "more_headroom": {
+        if (isGeminiFilter) {
+          const aGem = Math.max(0, 100 - a.geminiUsedMax);
+          const bGem = Math.max(0, 100 - b.geminiUsedMax);
+          if (bGem !== aGem) return bGem - aGem;
+        } else if (isClaudeFilter) {
+          const aCla = Math.max(0, 100 - a.claudeUsedMax);
+          const bCla = Math.max(0, 100 - b.claudeUsedMax);
+          if (bCla !== aCla) return bCla - aCla;
+        } else {
+          if (b.freeHeadroom !== a.freeHeadroom) {
+            return b.freeHeadroom - a.freeHeadroom;
+          }
+        }
+        if (a.account.active !== b.account.active) return a.account.active ? -1 : 1;
+        return a.emailLogin.localeCompare(b.emailLogin);
+      }
+      case "less_headroom": {
+        if (isGeminiFilter) {
+          const aGem = Math.max(0, 100 - a.geminiUsedMax);
+          const bGem = Math.max(0, 100 - b.geminiUsedMax);
+          if (aGem !== bGem) return aGem - bGem;
+        } else if (isClaudeFilter) {
+          const aCla = Math.max(0, 100 - a.claudeUsedMax);
+          const bCla = Math.max(0, 100 - b.claudeUsedMax);
+          if (aCla !== bCla) return aCla - bCla;
+        } else {
+          if (a.freeHeadroom !== b.freeHeadroom) {
+            return a.freeHeadroom - b.freeHeadroom;
+          }
+        }
+        return a.emailLogin.localeCompare(b.emailLogin);
+      }
+      case "reset_5h_soonest": {
+        const get5hReset = (item: AnalyzedAccountQuota) => {
+          if (isGeminiFilter && item.gemini5h?.resetAt) return item.gemini5h.resetAt;
+          if (isClaudeFilter && item.claude5h?.resetAt) return item.claude5h.resetAt;
+          const resets: number[] = [];
+          if (item.gemini5h?.resetAt) resets.push(item.gemini5h.resetAt);
+          if (item.claude5h?.resetAt) resets.push(item.claude5h.resetAt);
+          if (item.generic5h?.resetAt) resets.push(item.generic5h.resetAt);
+          return resets.length > 0 ? Math.min(...resets) : Number.MAX_SAFE_INTEGER;
+        };
+        const aReset = get5hReset(a);
+        const bReset = get5hReset(b);
+        if (aReset !== bReset) return aReset - bReset;
+        return b.freeHeadroom - a.freeHeadroom || a.emailLogin.localeCompare(b.emailLogin);
+      }
+      case "reset_7d_soonest": {
+        const get7dReset = (item: AnalyzedAccountQuota) => {
+          if (isGeminiFilter && item.geminiWeekly?.resetAt) return item.geminiWeekly.resetAt;
+          if (isClaudeFilter && item.claudeWeekly?.resetAt) return item.claudeWeekly.resetAt;
+          const resets: number[] = [];
+          if (item.geminiWeekly?.resetAt) resets.push(item.geminiWeekly.resetAt);
+          if (item.claudeWeekly?.resetAt) resets.push(item.claudeWeekly.resetAt);
+          if (item.genericWeekly?.resetAt) resets.push(item.genericWeekly.resetAt);
+          return resets.length > 0 ? Math.min(...resets) : Number.MAX_SAFE_INTEGER;
+        };
+        const aReset = get7dReset(a);
+        const bReset = get7dReset(b);
+        if (aReset !== bReset) return aReset - bReset;
+        return b.freeHeadroom - a.freeHeadroom || a.emailLogin.localeCompare(b.emailLogin);
+      }
+      default:
+        return 0;
+    }
+  });
+}
diff --git a/gui/src/components/provider-workspace/types.ts b/gui/src/components/provider-workspace/types.ts
index 6f913e1bcf..9b8a34f587 100644
--- a/gui/src/components/provider-workspace/types.ts
+++ b/gui/src/components/provider-workspace/types.ts
@@ -56,6 +56,8 @@ export type OAuthAccountRow = AccountQuotaReading & {
   id: string;
   alias?: string;
   email?: string;
+  rawEmail?: string;
+  maskedEmail?: string;
   active: boolean;
   needsReauth?: boolean;
   health?: { status: OAuthAccountHealthStatus; reason?: string; until?: string };
diff --git a/gui/src/i18n/de.ts b/gui/src/i18n/de.ts
index 70b62515d9..c81d3a4690 100644
--- a/gui/src/i18n/de.ts
+++ b/gui/src/i18n/de.ts
@@ -1121,6 +1121,8 @@ export const de: Record<TKey, string> = {
   "nav.integrations": "Integrationen",
   "nav.openMenu": "Menü öffnen",
   "nav.closeMenu": "Menü schließen",
+  "nav.collapseSidebar": "Seitenleiste einklappen",
+  "nav.expandSidebar": "Seitenleiste ausklappen",
   "nav.goHome": "Zum Dashboard",
   "pws.refreshAllQuotas": "Alle Kontingente aktualisieren",
   "pws.quotaRefreshDone": "Kontingentprüfung abgeschlossen",
@@ -2037,6 +2039,8 @@ export const de: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · lokal",
   "pws.rail.suffixFree": " · kostenlos",
   "pws.rail.selectAria": "{name} auswählen — {status}{suffix}",
+  "pws.rail.collapse": "Anbieterliste einklappen",
+  "pws.rail.expand": "Anbieterliste ausklappen",
   "pws.searchPlaceholder": "Provider durchsuchen…",
   "pws.filterAria": "Provider filtern",
   "pws.providerFiltersAria": "Provider-Filter",
@@ -2159,6 +2163,21 @@ export const de: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "Die ausgewählte Datei ist kein gültiger JSON-Export oder zu groß.",
   "pws.cockpitImportFailed": "Der Kontoimport konnte nicht abgeschlossen werden.",
   "pws.cockpitImportComplete": "Import abgeschlossen: {imported} importiert, {updated} aktualisiert, {failed} fehlgeschlagen, {unsupported} nicht unterstützt.",
+    "pws.cockpitImportPasteClipboard": "Aus Zwischenablage einfügen",
+  "pws.cockpitImportPasteManual": "Text einfügen",
+  "pws.cockpitImportPastePlaceholder": "Cockpit Tools JSON-Export hier einfügen…",
+  "pws.cockpitImportSubmit": "Importieren",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "Konten-Token und Abonnements ohne Browser-Login importieren",
+  "pws.cockpitCardFootnote": "Lokale Verschlüsselung: Refresh-Token werden nur auf diesem Gerät sicher gespeichert",
+  "pws.cockpitImportFileShort": "Aus Datei",
+  "pws.antigravityChoiceTitle": "Google Antigravity verbinden",
+  "pws.antigravityChoiceSubtitle": "Wählen Sie, wie Sie Ihr Konto verbinden möchten",
+  "pws.antigravityOauthTitle": "Browser-Anmeldung (Google OAuth)",
+  "pws.antigravityOauthDesc": "Standard-Anmeldung für persönliche Konten über ein Google-Browserfenster",
+  "pws.antigravityOauthAction": "Über Browser anmelden",
+  "pws.authChoiceModalTitle": "{provider} verbinden",
+  "pws.authChoiceModalSubtitle": "Wählen Sie, wie Sie Ihr Konto verbinden möchten",
   "pws.accountSwitching": "Wechsel läuft…",
   "pws.accountCurrent": "Aktuelles Konto",
   "pws.defaultModelNone": "Keins (Standard des Anbieters verwenden)",
@@ -2840,4 +2859,71 @@ export const de: Record<TKey, string> = {
   "remote.event.status": "Status",
   "remote.event.tool": "Remote-Werkzeug",
   "remote.event.error": "Fehler",
+  "pws.filterLabel": "Filter",
+  "pws.filterWithLimits": "Mit Limits (beliebig)",
+  "pws.filterAllAccounts": "Alle Konten",
+  "pws.filterGeminiExhausted": "Gemini erschöpft",
+  "pws.filterClaudeExhausted": "Claude erschöpft",
+  "pws.filterFullyExhausted": "Vollständig erschöpft",
+  "pws.statsTotal": "Gesamt",
+  "pws.statsInPool": "im Pool",
+  "pws.statsBothReady": "Beide bereit",
+  "pws.statsReady": "bereit",
+  "pws.statsClaudeOnly": "Nur Claude",
+  "pws.statsGeminiOnly": "Nur Gemini",
+  "pws.statsExhausted": "Erschöpft",
+  "pws.statsAwaitingReset": "wartet auf Reset",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "Titel",
+  "pws.titleEmailLogin": "E-Mail-Login",
+  "pws.titleAlias": "Alias",
+  "pws.viewModeLabel": "Ansicht",
+  "pws.viewCards": "Karten",
+  "pws.viewCompact": "Kompakt",
+  "pws.sortLabel": "Sortieren",
+  "pws.sortMoreHeadroom": "Mehr freie Limits",
+  "pws.sortLessHeadroom": "Weniger freie Limits",
+  "pws.sortActiveFirst": "Aktive zuerst",
+  "pws.sortLogin": "Nach Login",
+  "pws.freeHeadroom": "{percent}% frei",
+  "pws.limitExhaustedBadge": "Limit erschöpft",
+  "pws.refreshAccountQuota": "Quote dieses Kontos aktualisieren",
+  "pws.switchToAccount": "Zu diesem Konto wechseln",
+  "pws.accountSelect": "Auswählen",
+  "prov.editAliasShort": "Alias",
+  "pws.geminiLimits": "Gemini-Limits",
+  "pws.claudeLimits": "Claude-Limits",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "Gesamtguthaben",
+  "pws.sortGroupGemini": "Gemini-Limits",
+  "pws.sortGroupClaude": "Claude-Limits",
+  "pws.sortGroupOther": "Sonstiges",
+  "pws.sortGeminiMore": "Gemini: mehr freie Limits",
+  "pws.sortGeminiLess": "Gemini: weniger freie Limits",
+  "pws.sortClaudeMore": "Claude: mehr freie Limits",
+  "pws.sortClaudeLess": "Claude: weniger freie Limits",
+  "pws.sortResetSoonest": "Früheste Quoten-Zurücksetzung",
+  "pws.titleMaskedLogin": "Versteckt (***)",
+  "pws.filterWithLimitsGemini": "Mit Gemini-Limits",
+  "pws.filterWithLimitsClaude": "Mit Claude-Limits",
+  "pws.sortReset5h": "Früheste Zurücksetzung (5 Stunden)",
+  "pws.sortReset7d": "Früheste Zurücksetzung (7 Tage)",
+  "pws.searchAccountsPlaceholder": "Nach Login, E-Mail suchen...",
+    "pws.window5hLabel": "5 Stunden",
+  "pws.windowWeeklyLabel": "Wöchentlich",
+  "pws.gemini5hLabel": "5 Stunden",
+  "pws.geminiWeeklyLabel": "Wöchentlich",
+  "pws.claude5hLabel": "5 Stunden",
+  "pws.claudeWeeklyLabel": "Wöchentlich",
+  "pws.loginShort": "Login",
+  "pws.maskedShort": "Versteckt",
+  "pws.aliasShort": "Alias",
+  "pws.searchAccountField": "Konto suchen...",
+  "pws.removeAccountConfirmTitle": "Konto entfernen",
+  "pws.removeAccountTooltip": "Konto entfernen",
+  "pws.statsClaudeAvailable": "Für Claude verfügbar",
+  "pws.statsGeminiAvailable": "Für Gemini verfügbar",
+  "pws.statsAvailable": "Verfügbar",
 };
diff --git a/gui/src/i18n/en.ts b/gui/src/i18n/en.ts
index de2b8906f8..35a42816b4 100644
--- a/gui/src/i18n/en.ts
+++ b/gui/src/i18n/en.ts
@@ -1243,6 +1243,8 @@ export const en = {
   "pws.rail.suffixLocal": " · local",
   "pws.rail.suffixFree": " · free",
   "pws.rail.selectAria": "Select {name} — {status}{suffix}",
+  "pws.rail.collapse": "Collapse provider list",
+  "pws.rail.expand": "Expand provider list",
   "pws.searchPlaceholder": "Search providers…",
   "pws.filterAria": "Filter providers",
   "pws.providerFiltersAria": "Provider filters",
@@ -1365,6 +1367,21 @@ export const en = {
   "pws.cockpitImportInvalid": "The selected file is not a valid JSON export or is too large.",
   "pws.cockpitImportFailed": "The account import could not be completed.",
   "pws.cockpitImportComplete": "Import complete: {imported} imported, {updated} updated, {failed} failed, {unsupported} unsupported.",
+    "pws.cockpitImportPasteClipboard": "Paste from clipboard",
+  "pws.cockpitImportPasteManual": "Paste text",
+  "pws.cockpitImportPastePlaceholder": "Paste Cockpit Tools JSON export here…",
+  "pws.cockpitImportSubmit": "Import",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "Import account tokens and subscriptions without browser login",
+  "pws.cockpitCardFootnote": "Local encryption: refresh tokens are stored only on this device in secure storage",
+  "pws.cockpitImportFileShort": "From file",
+  "pws.antigravityChoiceTitle": "Connect Google Antigravity",
+  "pws.antigravityChoiceSubtitle": "Choose how you want to connect your account",
+  "pws.antigravityOauthTitle": "Browser Login (Google OAuth)",
+  "pws.antigravityOauthDesc": "Standard personal account login through a Google browser window",
+  "pws.antigravityOauthAction": "Log in via browser",
+  "pws.authChoiceModalTitle": "Connect {provider}",
+  "pws.authChoiceModalSubtitle": "Choose how you want to connect your account",
   "pws.accountSwitching": "Switching…",
   "pws.accountCurrent": "Current account",
   "pws.defaultModelNone": "None (use provider default)",
@@ -1666,6 +1683,8 @@ export const en = {
   "nav.integrations": "Integrations",
   "nav.openMenu": "Open menu",
   "nav.closeMenu": "Close menu",
+  "nav.collapseSidebar": "Collapse sidebar",
+  "nav.expandSidebar": "Expand sidebar",
   "nav.goHome": "Go to dashboard",
   "pws.refreshAllQuotas": "Refresh all quotas",
   "pws.quotaRefreshDone": "Quota check complete",
@@ -2874,6 +2893,73 @@ export const en = {
   "remote.event.status": "Status",
   "remote.event.tool": "Remote tool",
   "remote.event.error": "Error",
+  "pws.filterLabel": "Filter",
+  "pws.filterWithLimits": "With limits (any)",
+  "pws.filterAllAccounts": "All accounts",
+  "pws.filterGeminiExhausted": "Gemini exhausted",
+  "pws.filterClaudeExhausted": "Claude exhausted",
+  "pws.filterFullyExhausted": "Fully exhausted",
+  "pws.statsTotal": "Total",
+  "pws.statsInPool": "in pool",
+  "pws.statsBothReady": "Both ready",
+  "pws.statsReady": "ready",
+  "pws.statsClaudeOnly": "Claude only",
+  "pws.statsGeminiOnly": "Gemini only",
+  "pws.statsExhausted": "Exhausted",
+  "pws.statsAwaitingReset": "awaiting reset",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "Title",
+  "pws.titleEmailLogin": "Email login",
+  "pws.titleAlias": "Alias",
+  "pws.viewModeLabel": "View",
+  "pws.viewCards": "Cards",
+  "pws.viewCompact": "Compact",
+  "pws.sortLabel": "Sort",
+  "pws.sortMoreHeadroom": "More free limits",
+  "pws.sortLessHeadroom": "Less free limits",
+  "pws.sortActiveFirst": "Active first",
+  "pws.sortLogin": "By login",
+  "pws.freeHeadroom": "{percent}% free",
+  "pws.limitExhaustedBadge": "Limit exhausted",
+  "pws.refreshAccountQuota": "Refresh this account's quota",
+  "pws.switchToAccount": "Switch to this account",
+  "pws.accountSelect": "Select",
+  "prov.editAliasShort": "Alias",
+  "pws.geminiLimits": "Gemini Limits",
+  "pws.claudeLimits": "Claude Limits",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "Overall limits",
+  "pws.sortGroupGemini": "Gemini limits",
+  "pws.sortGroupClaude": "Claude limits",
+  "pws.sortGroupOther": "Other",
+  "pws.sortGeminiMore": "Gemini: more free limits",
+  "pws.sortGeminiLess": "Gemini: less free limits",
+  "pws.sortClaudeMore": "Claude: more free limits",
+  "pws.sortClaudeLess": "Claude: less free limits",
+  "pws.sortResetSoonest": "Soonest quota reset",
+  "pws.titleMaskedLogin": "Hidden (***)",
+  "pws.filterWithLimitsGemini": "With Gemini limits",
+  "pws.filterWithLimitsClaude": "With Claude limits",
+  "pws.sortReset5h": "Soonest reset (5 hours)",
+  "pws.sortReset7d": "Soonest reset (7 days)",
+  "pws.searchAccountsPlaceholder": "Search by login, email...",
+    "pws.window5hLabel": "5-Hour",
+  "pws.windowWeeklyLabel": "Weekly",
+  "pws.gemini5hLabel": "5-Hour",
+  "pws.geminiWeeklyLabel": "Weekly",
+  "pws.claude5hLabel": "5-Hour",
+  "pws.claudeWeeklyLabel": "Weekly",
+  "pws.loginShort": "Login",
+  "pws.maskedShort": "Hidden",
+  "pws.aliasShort": "Alias",
+  "pws.searchAccountField": "Search account...",
+  "pws.removeAccountConfirmTitle": "Remove account",
+  "pws.removeAccountTooltip": "Remove account",
+  "pws.statsClaudeAvailable": "Available for Claude",
+  "pws.statsGeminiAvailable": "Available for Gemini",
+  "pws.statsAvailable": "Available",
 } as const;
 
 export type TKey = keyof typeof en;
diff --git a/gui/src/i18n/fr.ts b/gui/src/i18n/fr.ts
index 5b9a38a588..4022489a65 100644
--- a/gui/src/i18n/fr.ts
+++ b/gui/src/i18n/fr.ts
@@ -1216,6 +1216,8 @@ export const fr: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · local",
   "pws.rail.suffixFree": " · gratuit",
   "pws.rail.selectAria": "Sélectionner {name} — {status}{suffix}",
+  "pws.rail.collapse": "Réduire la liste des fournisseurs",
+  "pws.rail.expand": "Développer la liste des fournisseurs",
   "pws.searchPlaceholder": "Rechercher des fournisseurs…",
   "pws.filterAria": "Filtrer les fournisseurs",
   "pws.providerFiltersAria": "Filtres des fournisseurs",
@@ -1338,6 +1340,21 @@ export const fr: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "Le fichier sélectionné n’est pas une exportation JSON valide ou est trop volumineux.",
   "pws.cockpitImportFailed": "Impossible de terminer l’importation du compte.",
   "pws.cockpitImportComplete": "Importation terminée : {imported} importés, {updated} mis à jour, {failed} en échec, {unsupported} non pris en charge.",
+    "pws.cockpitImportPasteClipboard": "Coller depuis le presse-papiers",
+  "pws.cockpitImportPasteManual": "Coller le texte",
+  "pws.cockpitImportPastePlaceholder": "Collez l'export JSON de Cockpit Tools ici…",
+  "pws.cockpitImportSubmit": "Importer",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "Importer des jetons de compte et des abonnements sans connexion au navigateur",
+  "pws.cockpitCardFootnote": "Chiffrement local : les jetons d'actualisation sont stockés uniquement sur cet appareil",
+  "pws.cockpitImportFileShort": "Fichier",
+  "pws.antigravityChoiceTitle": "Connecter Google Antigravity",
+  "pws.antigravityChoiceSubtitle": "Choisissez comment connecter votre compte",
+  "pws.antigravityOauthTitle": "Connexion par navigateur (Google OAuth)",
+  "pws.antigravityOauthDesc": "Connexion standard au compte personnel via une fenêtre de navigateur Google",
+  "pws.antigravityOauthAction": "Se connecter via le navigateur",
+  "pws.authChoiceModalTitle": "Connecter {provider}",
+  "pws.authChoiceModalSubtitle": "Choisissez comment connecter votre compte",
   "pws.accountSwitching": "Changement…",
   "pws.accountCurrent": "Compte actuel",
   "pws.defaultModelNone": "Aucun (utiliser la valeur par défaut du fournisseur)",
@@ -1639,6 +1656,8 @@ export const fr: Record<TKey, string> = {
   "nav.integrations": "Intégrations",
   "nav.openMenu": "Ouvrir le menu",
   "nav.closeMenu": "Fermer le menu",
+  "nav.collapseSidebar": "Réduire la barre latérale",
+  "nav.expandSidebar": "Développer la barre latérale",
   "nav.goHome": "Aller au tableau de bord",
   "pws.refreshAllQuotas": "Actualiser tous les quotas",
   "pws.quotaRefreshDone": "Vérification des quotas terminée",
@@ -2828,4 +2847,71 @@ export const fr: Record<TKey, string> = {
   "remote.event.status": "État",
   "remote.event.tool": "Outil distant",
   "remote.event.error": "Erreur",
+  "pws.filterLabel": "Filtre",
+  "pws.filterWithLimits": "Avec limites (toutes)",
+  "pws.filterAllAccounts": "Tous les comptes",
+  "pws.filterGeminiExhausted": "Gemini épuisé",
+  "pws.filterClaudeExhausted": "Claude épuisé",
+  "pws.filterFullyExhausted": "Totalement épuisés",
+  "pws.statsTotal": "Total",
+  "pws.statsInPool": "dans le pool",
+  "pws.statsBothReady": "Les deux prêts",
+  "pws.statsReady": "prêts",
+  "pws.statsClaudeOnly": "Claude uniquement",
+  "pws.statsGeminiOnly": "Gemini uniquement",
+  "pws.statsExhausted": "Épuisés",
+  "pws.statsAwaitingReset": "en attente de réinitialisation",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "Titre",
+  "pws.titleEmailLogin": "Identifiant email",
+  "pws.titleAlias": "Alias",
+  "pws.viewModeLabel": "Affichage",
+  "pws.viewCards": "Cartes",
+  "pws.viewCompact": "Compact",
+  "pws.sortLabel": "Trier",
+  "pws.sortMoreHeadroom": "Plus de limites libres",
+  "pws.sortLessHeadroom": "Moins de limites libres",
+  "pws.sortActiveFirst": "Actif en premier",
+  "pws.sortLogin": "Par identifiant",
+  "pws.freeHeadroom": "{percent}% libre",
+  "pws.limitExhaustedBadge": "Limite épuisée",
+  "pws.refreshAccountQuota": "Actualiser le quota de ce compte",
+  "pws.switchToAccount": "Basculer vers ce compte",
+  "pws.accountSelect": "Sélectionner",
+  "prov.editAliasShort": "Alias",
+  "pws.geminiLimits": "Limites Gemini",
+  "pws.claudeLimits": "Limites Claude",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "Limites globales",
+  "pws.sortGroupGemini": "Limites Gemini",
+  "pws.sortGroupClaude": "Limites Claude",
+  "pws.sortGroupOther": "Autre",
+  "pws.sortGeminiMore": "Gemini: plus de limites libres",
+  "pws.sortGeminiLess": "Gemini: moins de limites libres",
+  "pws.sortClaudeMore": "Claude: plus de limites libres",
+  "pws.sortClaudeLess": "Claude: moins de limites libres",
+  "pws.sortResetSoonest": "Réinitialisation la plus proche",
+  "pws.titleMaskedLogin": "Masqué (***)",
+  "pws.filterWithLimitsGemini": "Avec limites Gemini",
+  "pws.filterWithLimitsClaude": "Avec limites Claude",
+  "pws.sortReset5h": "Réinitialisation la plus proche (5h)",
+  "pws.sortReset7d": "Réinitialisation la plus proche (7j)",
+  "pws.searchAccountsPlaceholder": "Rechercher par identifiant, email...",
+    "pws.window5hLabel": "5 heures",
+  "pws.windowWeeklyLabel": "Hebdomadaire",
+  "pws.gemini5hLabel": "5 heures",
+  "pws.geminiWeeklyLabel": "Hebdomadaire",
+  "pws.claude5hLabel": "5 heures",
+  "pws.claudeWeeklyLabel": "Hebdomadaire",
+  "pws.loginShort": "Identifiant",
+  "pws.maskedShort": "Masqué",
+  "pws.aliasShort": "Alias",
+  "pws.searchAccountField": "Rechercher compte...",
+  "pws.removeAccountConfirmTitle": "Supprimer le compte",
+  "pws.removeAccountTooltip": "Supprimer le compte",
+  "pws.statsClaudeAvailable": "Disponibles pour Claude",
+  "pws.statsGeminiAvailable": "Disponibles pour Gemini",
+  "pws.statsAvailable": "Disponibles",
 };
diff --git a/gui/src/i18n/ja.ts b/gui/src/i18n/ja.ts
index b21d4d59b7..cca60cfc5d 100644
--- a/gui/src/i18n/ja.ts
+++ b/gui/src/i18n/ja.ts
@@ -1156,6 +1156,8 @@ export const ja: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · ローカル",
   "pws.rail.suffixFree": " · 無料",
   "pws.rail.selectAria": "{name} を選択 — {status}{suffix}",
+  "pws.rail.collapse": "プロバイダーリストを折りたたむ",
+  "pws.rail.expand": "プロバイダーリストを展開する",
   "pws.searchPlaceholder": "プロバイダーを検索…",
   "pws.filterAria": "プロバイダーを絞り込み",
   "pws.providerFiltersAria": "プロバイダーフィルタ",
@@ -1263,6 +1265,21 @@ export const ja: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "選択したファイルは有効な JSON エクスポートではないか、大きすぎます。",
   "pws.cockpitImportFailed": "アカウントのインポートを完了できませんでした。",
   "pws.cockpitImportComplete": "インポート完了: インポート {imported}、更新 {updated}、失敗 {failed}、未対応 {unsupported}。",
+    "pws.cockpitImportPasteClipboard": "クリップボードから貼り付け",
+  "pws.cockpitImportPasteManual": "テキストを貼り付け",
+  "pws.cockpitImportPastePlaceholder": "ここに Cockpit Tools JSON エクスポートを貼り付け…",
+  "pws.cockpitImportSubmit": "インポート",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "ブラウザログインなしでアカウントトークンとサブスクリプションをインポート",
+  "pws.cockpitCardFootnote": "ローカル暗号化: リフレッシュトークンはこのデバイスの安全なストレージにのみ保存されます",
+  "pws.cockpitImportFileShort": "ファイルから",
+  "pws.antigravityChoiceTitle": "Google Antigravity を接続",
+  "pws.antigravityChoiceSubtitle": "アカウントの接続方法を選択してください",
+  "pws.antigravityOauthTitle": "ブラウザログイン (Google OAuth)",
+  "pws.antigravityOauthDesc": "Google のブラウザウィンドウを介した標準的な個人アカウントログイン",
+  "pws.antigravityOauthAction": "ブラウザでログイン",
+  "pws.authChoiceModalTitle": "{provider} を接続",
+  "pws.authChoiceModalSubtitle": "アカウントの接続方法を選択してください",
   "pws.accountSwitching": "切り替え中…",
   "pws.accountCurrent": "現在のアカウント",
   "pws.defaultModelNone": "なし(プロバイダーのデフォルトを使用)",
@@ -1564,6 +1581,8 @@ export const ja: Record<TKey, string> = {
   "nav.integrations": "連携",
   "nav.openMenu": "メニューを開く",
   "nav.closeMenu": "メニューを閉じる",
+  "nav.collapseSidebar": "サイドバーを折りたたむ",
+  "nav.expandSidebar": "サイドバーを展開する",
   "nav.goHome": "ダッシュボードへ移動",
   "pws.refreshAllQuotas": "すべてのクォータを更新",
   "pws.quotaRefreshDone": "クォータの確認が完了しました",
@@ -2861,4 +2880,71 @@ export const ja: Record<TKey, string> = {
   "remote.event.status": "状態",
   "remote.event.tool": "リモートツール",
   "remote.event.error": "エラー",
+  "pws.filterLabel": "フィルター",
+  "pws.filterWithLimits": "制限あり（いずれか）",
+  "pws.filterAllAccounts": "すべてのアカウント",
+  "pws.filterGeminiExhausted": "Gemini制限到達",
+  "pws.filterClaudeExhausted": "Claude制限到達",
+  "pws.filterFullyExhausted": "すべて制限到達",
+  "pws.statsTotal": "合計",
+  "pws.statsInPool": "プール内",
+  "pws.statsBothReady": "両方利用可能",
+  "pws.statsReady": "利用可能",
+  "pws.statsClaudeOnly": "Claudeのみ",
+  "pws.statsGeminiOnly": "Geminiのみ",
+  "pws.statsExhausted": "制限到達",
+  "pws.statsAwaitingReset": "リセット待ち",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "表示名",
+  "pws.titleEmailLogin": "メールログイン",
+  "pws.titleAlias": "エイリアス",
+  "pws.viewModeLabel": "表示形式",
+  "pws.viewCards": "カード",
+  "pws.viewCompact": "コンパクト",
+  "pws.sortLabel": "並び替え",
+  "pws.sortMoreHeadroom": "空き枠が多い順",
+  "pws.sortLessHeadroom": "空き枠が少ない順",
+  "pws.sortActiveFirst": "有効を優先",
+  "pws.sortLogin": "ログイン名順",
+  "pws.freeHeadroom": "{percent}% 空き",
+  "pws.limitExhaustedBadge": "制限到達",
+  "pws.refreshAccountQuota": "このアカウントのクォータを更新",
+  "pws.switchToAccount": "このアカウントに切り替え",
+  "pws.accountSelect": "選択",
+  "prov.editAliasShort": "エイリアス",
+  "pws.geminiLimits": "Gemini制限",
+  "pws.claudeLimits": "Claude制限",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "全体枠",
+  "pws.sortGroupGemini": "Gemini制限",
+  "pws.sortGroupClaude": "Claude制限",
+  "pws.sortGroupOther": "その他",
+  "pws.sortGeminiMore": "Gemini: 空き枠が多い順",
+  "pws.sortGeminiLess": "Gemini: 空き枠が少ない順",
+  "pws.sortClaudeMore": "Claude: 空き枠が多い順",
+  "pws.sortClaudeLess": "Claude: 空き枠が少ない順",
+  "pws.sortResetSoonest": "リセットが最も近い順",
+  "pws.titleMaskedLogin": "マスク (***)",
+  "pws.filterWithLimitsGemini": "Gemini枠あり",
+  "pws.filterWithLimitsClaude": "Claude枠あり",
+  "pws.sortReset5h": "最短リセット（5時間枠）",
+  "pws.sortReset7d": "最短リセット（7日間枠）",
+  "pws.searchAccountsPlaceholder": "ログイン名、メールで検索...",
+    "pws.window5hLabel": "5時間",
+  "pws.windowWeeklyLabel": "週間",
+  "pws.gemini5hLabel": "5時間",
+  "pws.geminiWeeklyLabel": "週間",
+  "pws.claude5hLabel": "5時間",
+  "pws.claudeWeeklyLabel": "週間",
+  "pws.loginShort": "ログイン",
+  "pws.maskedShort": "マスク",
+  "pws.aliasShort": "別名",
+  "pws.searchAccountField": "アカウント検索...",
+  "pws.removeAccountConfirmTitle": "アカウントの削除",
+  "pws.removeAccountTooltip": "アカウントを削除",
+  "pws.statsClaudeAvailable": "Claude利用可能",
+  "pws.statsGeminiAvailable": "Gemini利用可能",
+  "pws.statsAvailable": "利用可能",
 };
diff --git a/gui/src/i18n/ko.ts b/gui/src/i18n/ko.ts
index a6e76eb7b1..33a689b09b 100644
--- a/gui/src/i18n/ko.ts
+++ b/gui/src/i18n/ko.ts
@@ -1157,6 +1157,8 @@ export const ko: Record<TKey, string> = {
   "codexSet.base.externalBlocked": "model_instructions_file이 이미 {path}를 가리키고 있고, opencodex가 쓴 값이 아닙니다. 직접 지운 뒤 여기서 선택하세요.",
   "nav.openMenu": "메뉴 열기",
   "nav.closeMenu": "메뉴 닫기",
+  "nav.collapseSidebar": "사이드바 접기",
+  "nav.expandSidebar": "사이드바 펼치기",
   "nav.goHome": "대시보드로 이동",
   "pws.refreshAllQuotas": "전체 할당량 갱신",
   "pws.quotaRefreshDone": "할당량 조회를 마쳤습니다",
@@ -2076,6 +2078,8 @@ export const ko: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · 로컬",
   "pws.rail.suffixFree": " · 무료",
   "pws.rail.selectAria": "{name} 선택 — {status}{suffix}",
+  "pws.rail.collapse": "제공자 목록 접기",
+  "pws.rail.expand": "제공자 목록 펼치기",
   "pws.searchPlaceholder": "프로바이더 검색…",
   "pws.filterAria": "프로바이더 필터",
   "pws.providerFiltersAria": "프로바이더 필터",
@@ -2198,6 +2202,21 @@ export const ko: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "선택한 파일은 유효한 JSON 내보내기가 아니거나 너무 큽니다.",
   "pws.cockpitImportFailed": "계정 가져오기를 완료할 수 없습니다.",
   "pws.cockpitImportComplete": "가져오기 완료: 가져옴 {imported}, 업데이트 {updated}, 실패 {failed}, 지원되지 않음 {unsupported}.",
+    "pws.cockpitImportPasteClipboard": "클립보드에서 붙여넣기",
+  "pws.cockpitImportPasteManual": "텍스트 붙여넣기",
+  "pws.cockpitImportPastePlaceholder": "여기에 Cockpit Tools JSON 내보내기를 붙여넣으세요…",
+  "pws.cockpitImportSubmit": "가져오기",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "브라우저 로그인 없이 계정 토큰 및 구독 가져오기",
+  "pws.cockpitCardFootnote": "로컬 암호화: 리프레시 토큰은 이 장치의 보안 저장소에만 저장됩니다",
+  "pws.cockpitImportFileShort": "파일에서",
+  "pws.antigravityChoiceTitle": "Google Antigravity 연결",
+  "pws.antigravityChoiceSubtitle": "계정 연결 방법을 선택하세요",
+  "pws.antigravityOauthTitle": "브라우저 로그인 (Google OAuth)",
+  "pws.antigravityOauthDesc": "Google 브라우저 창을 통한 표준 개인 계정 로그인",
+  "pws.antigravityOauthAction": "브라우저로 로그인",
+  "pws.authChoiceModalTitle": "{provider} 연결",
+  "pws.authChoiceModalSubtitle": "계정 연결 방법을 선택하세요",
   "pws.accountSwitching": "전환 중…",
   "pws.accountCurrent": "현재 계정",
   "pws.defaultModelNone": "없음 (프로바이더 기본값 사용)",
@@ -2862,4 +2881,71 @@ export const ko: Record<TKey, string> = {
   "remote.event.status": "상태",
   "remote.event.tool": "원격 도구",
   "remote.event.error": "오류",
+  "pws.filterLabel": "필터",
+  "pws.filterWithLimits": "한도 여유 있음",
+  "pws.filterAllAccounts": "모든 계정",
+  "pws.filterGeminiExhausted": "Gemini 소진됨",
+  "pws.filterClaudeExhausted": "Claude 소진됨",
+  "pws.filterFullyExhausted": "전체 소진됨",
+  "pws.statsTotal": "총 계정",
+  "pws.statsInPool": "풀 내",
+  "pws.statsBothReady": "모두 사용 가능",
+  "pws.statsReady": "사용 가능",
+  "pws.statsClaudeOnly": "Claude만 가능",
+  "pws.statsGeminiOnly": "Gemini만 가능",
+  "pws.statsExhausted": "소진됨",
+  "pws.statsAwaitingReset": "초기화 대기 중",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "표시 제목",
+  "pws.titleEmailLogin": "이메일 로그인",
+  "pws.titleAlias": "별칭",
+  "pws.viewModeLabel": "보기",
+  "pws.viewCards": "카드형",
+  "pws.viewCompact": "컴팩트",
+  "pws.sortLabel": "정렬",
+  "pws.sortMoreHeadroom": "남은 한도 많은 순",
+  "pws.sortLessHeadroom": "남은 한도 적은 순",
+  "pws.sortActiveFirst": "활성 계정 우선",
+  "pws.sortLogin": "로그인명 순",
+  "pws.freeHeadroom": "{percent}% 여유",
+  "pws.limitExhaustedBadge": "한도 소진됨",
+  "pws.refreshAccountQuota": "이 계정 한도 새로고침",
+  "pws.switchToAccount": "이 계정으로 전환",
+  "pws.accountSelect": "선택",
+  "prov.editAliasShort": "별칭",
+  "pws.geminiLimits": "Gemini 한도",
+  "pws.claudeLimits": "Claude 한도",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "전체 한도",
+  "pws.sortGroupGemini": "Gemini 한도",
+  "pws.sortGroupClaude": "Claude 한도",
+  "pws.sortGroupOther": "기타",
+  "pws.sortGeminiMore": "Gemini: 남은 한도 많은 순",
+  "pws.sortGeminiLess": "Gemini: 남은 한도 적은 순",
+  "pws.sortClaudeMore": "Claude: 남은 한도 많은 순",
+  "pws.sortClaudeLess": "Claude: 남은 한도 적은 순",
+  "pws.sortResetSoonest": "가장 빠른 초기화 순",
+  "pws.titleMaskedLogin": "마스킹 (***)",
+  "pws.filterWithLimitsGemini": "Gemini 한도 있음",
+  "pws.filterWithLimitsClaude": "Claude 한도 있음",
+  "pws.sortReset5h": "가장 빠른 초기화 (5시간)",
+  "pws.sortReset7d": "가장 빠른 초기화 (7일)",
+  "pws.searchAccountsPlaceholder": "로그인, 이메일 검색...",
+    "pws.window5hLabel": "5시간",
+  "pws.windowWeeklyLabel": "주간",
+  "pws.gemini5hLabel": "5시간",
+  "pws.geminiWeeklyLabel": "주간",
+  "pws.claude5hLabel": "5시간",
+  "pws.claudeWeeklyLabel": "주간",
+  "pws.loginShort": "로그인",
+  "pws.maskedShort": "마스킹",
+  "pws.aliasShort": "별칭",
+  "pws.searchAccountField": "계정 검색...",
+  "pws.removeAccountConfirmTitle": "계정 삭제",
+  "pws.removeAccountTooltip": "계정 삭제",
+  "pws.statsClaudeAvailable": "Claude 사용 가능",
+  "pws.statsGeminiAvailable": "Gemini 사용 가능",
+  "pws.statsAvailable": "사용 가능",
 };
diff --git a/gui/src/i18n/ru.ts b/gui/src/i18n/ru.ts
index c28f4464c3..5cb735a3bc 100644
--- a/gui/src/i18n/ru.ts
+++ b/gui/src/i18n/ru.ts
@@ -1211,6 +1211,8 @@ export const ru: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · локальный",
   "pws.rail.suffixFree": " · бесплатный",
   "pws.rail.selectAria": "Выбрать {name} — {status}{suffix}",
+  "pws.rail.collapse": "Свернуть список провайдеров",
+  "pws.rail.expand": "Развернуть список провайдеров",
   "pws.searchPlaceholder": "Поиск провайдеров…",
   "pws.filterAria": "Фильтр провайдеров",
   "pws.providerFiltersAria": "Фильтры провайдеров",
@@ -1333,6 +1335,21 @@ export const ru: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "Выбранный файл не является корректным JSON-экспортом или слишком велик.",
   "pws.cockpitImportFailed": "Не удалось завершить импорт аккаунтов.",
   "pws.cockpitImportComplete": "Импорт завершён: импортировано — {imported}, обновлено — {updated}, ошибок — {failed}, неподдерживаемых — {unsupported}.",
+    "pws.cockpitImportPasteClipboard": "Вставить из буфера",
+  "pws.cockpitImportPasteManual": "Вставить текст",
+  "pws.cockpitImportPastePlaceholder": "Вставьте JSON-экспорт Cockpit Tools сюда…",
+  "pws.cockpitImportSubmit": "Импортировать",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "Импорт токенов и подписок без входа в браузер",
+  "pws.cockpitCardFootnote": "Локальное шифрование: refresh token сохраняется только на вашем устройстве в защищённом хранилище",
+  "pws.cockpitImportFileShort": "Из файла",
+  "pws.antigravityChoiceTitle": "Подключение Google Antigravity",
+  "pws.antigravityChoiceSubtitle": "Выберите способ авторизации аккаунта",
+  "pws.antigravityOauthTitle": "Вход через браузер (Google OAuth)",
+  "pws.antigravityOauthDesc": "Стандартный вход в личный аккаунт через браузерное окно Google",
+  "pws.antigravityOauthAction": "Войти через браузер",
+  "pws.authChoiceModalTitle": "Подключение {provider}",
+  "pws.authChoiceModalSubtitle": "Выберите способ авторизации аккаунта",
   "pws.accountSwitching": "Переключение…",
   "pws.accountCurrent": "Текущий аккаунт",
   "pws.defaultModelNone": "Нет (использовать значение провайдера)",
@@ -1634,6 +1651,8 @@ export const ru: Record<TKey, string> = {
   "nav.integrations": "Интеграции",
   "nav.openMenu": "Открыть меню",
   "nav.closeMenu": "Закрыть меню",
+  "nav.collapseSidebar": "Свернуть меню",
+  "nav.expandSidebar": "Развернуть меню",
   "nav.goHome": "Перейти к панели",
   "pws.refreshAllQuotas": "Обновить все квоты",
   "pws.quotaRefreshDone": "Проверка квот завершена",
@@ -2863,4 +2882,71 @@ export const ru: Record<TKey, string> = {
   "remote.event.status": "Состояние",
   "remote.event.tool": "Удалённый инструмент",
   "remote.event.error": "Ошибка",
+  "pws.filterLabel": "Фильтр",
+  "pws.filterWithLimits": "С лимитами (любыми)",
+  "pws.filterAllAccounts": "Все аккаунты",
+  "pws.filterGeminiExhausted": "Gemini исчерпан",
+  "pws.filterClaudeExhausted": "Claude исчерпан",
+  "pws.filterFullyExhausted": "Полностью исчерпаны",
+  "pws.statsTotal": "Всего",
+  "pws.statsInPool": "в пуле",
+  "pws.statsBothReady": "Готовы оба",
+  "pws.statsReady": "готовы",
+  "pws.statsClaudeOnly": "Только Claude",
+  "pws.statsGeminiOnly": "Только Gemini",
+  "pws.statsExhausted": "Исчерпаны",
+  "pws.statsAwaitingReset": "ждут сброса",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "Заголовок",
+  "pws.titleEmailLogin": "Логин email",
+  "pws.titleAlias": "Псевдоним",
+  "pws.viewModeLabel": "Вид",
+  "pws.viewCards": "Карточки",
+  "pws.viewCompact": "Компактный",
+  "pws.sortLabel": "Сортировка",
+  "pws.sortMoreHeadroom": "Больше свободных лимитов",
+  "pws.sortLessHeadroom": "Меньше свободных лимитов",
+  "pws.sortActiveFirst": "Сначала активный",
+  "pws.sortLogin": "По логину",
+  "pws.freeHeadroom": "{percent}% свободно",
+  "pws.limitExhaustedBadge": "Лимит исчерпан",
+  "pws.refreshAccountQuota": "Обновить квоту этого аккаунта",
+  "pws.switchToAccount": "Выбрать этот аккаунт",
+  "pws.accountSelect": "Выбрать",
+  "prov.editAliasShort": "Псевдоним",
+  "pws.geminiLimits": "Лимиты Gemini",
+  "pws.claudeLimits": "Лимиты Claude",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "Общий остаток",
+  "pws.sortGroupGemini": "Лимиты Gemini",
+  "pws.sortGroupClaude": "Лимиты Claude",
+  "pws.sortGroupOther": "Другое",
+  "pws.sortGeminiMore": "Gemini: больше свободных лимитов",
+  "pws.sortGeminiLess": "Gemini: меньше свободных лимитов",
+  "pws.sortClaudeMore": "Claude: больше свободных лимитов",
+  "pws.sortClaudeLess": "Claude: меньше свободных лимитов",
+  "pws.sortResetSoonest": "Ближайший сброс квоты",
+  "pws.titleMaskedLogin": "Скрытый (***)",
+  "pws.filterWithLimitsGemini": "С лимитами Gemini",
+  "pws.filterWithLimitsClaude": "С лимитами Claude",
+  "pws.sortReset5h": "Ближайший сброс (5 часов)",
+  "pws.sortReset7d": "Ближайший сброс (7 дней)",
+  "pws.searchAccountsPlaceholder": "Поиск по логину, email...",
+    "pws.window5hLabel": "5 часов",
+  "pws.windowWeeklyLabel": "Неделя",
+  "pws.gemini5hLabel": "5 часов",
+  "pws.geminiWeeklyLabel": "Неделя",
+  "pws.claude5hLabel": "5 часов",
+  "pws.claudeWeeklyLabel": "Неделя",
+  "pws.loginShort": "Логин",
+  "pws.maskedShort": "Скрытый",
+  "pws.aliasShort": "Псевдоним",
+  "pws.searchAccountField": "Поиск аккаунта...",
+  "pws.removeAccountConfirmTitle": "Удалить аккаунт",
+  "pws.removeAccountTooltip": "Удалить аккаунт",
+  "pws.statsClaudeAvailable": "Доступны Claude",
+  "pws.statsGeminiAvailable": "Доступны Gemini",
+  "pws.statsAvailable": "Доступны",
 };
diff --git a/gui/src/i18n/tr.ts b/gui/src/i18n/tr.ts
index c6671c3e28..94e63bd4d8 100644
--- a/gui/src/i18n/tr.ts
+++ b/gui/src/i18n/tr.ts
@@ -1230,6 +1230,8 @@ export const tr: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · yerel",
   "pws.rail.suffixFree": " · ücretsiz",
   "pws.rail.selectAria": "{name} seç — {status}{suffix}",
+  "pws.rail.collapse": "Sağlayıcı listesini daralt",
+  "pws.rail.expand": "Sağlayıcı listesini genişlet",
   "pws.searchPlaceholder": "Sağlayıcılarda ara…",
   "pws.filterAria": "Sağlayıcıları filtrele",
   "pws.providerFiltersAria": "Sağlayıcı filtreleri",
@@ -1352,6 +1354,21 @@ export const tr: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "Seçilen dosya geçerli bir JSON dışa aktarımı değil veya çok büyük.",
   "pws.cockpitImportFailed": "Hesap içe aktarımı tamamlanamadı.",
   "pws.cockpitImportComplete": "İçe aktarma tamamlandı: {imported} içe aktarıldı, {updated} güncellendi, {failed} başarısız, {unsupported} desteklenmiyor.",
+    "pws.cockpitImportPasteClipboard": "Panodan yapıştır",
+  "pws.cockpitImportPasteManual": "Metin yapıştır",
+  "pws.cockpitImportPastePlaceholder": "Cockpit Tools JSON dışa aktarımını buraya yapıştırın…",
+  "pws.cockpitImportSubmit": "İçe aktar",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "Tarayıcı girişi olmadan hesap belirteçlerini ve abonelikleri içe aktarın",
+  "pws.cockpitCardFootnote": "Yerel şifreleme: yenileme belirteçleri yalnızca bu cihazda güvenli depolama alanında saklanır",
+  "pws.cockpitImportFileShort": "Dosyadan",
+  "pws.antigravityChoiceTitle": "Google Antigravity'ye bağlan",
+  "pws.antigravityChoiceSubtitle": "Hesabınızı nasıl bağlamak istediğinizi seçin",
+  "pws.antigravityOauthTitle": "Tarayıcı ile giriş (Google OAuth)",
+  "pws.antigravityOauthDesc": "Bir Google tarayıcı penceresi üzerinden standart kişisel hesap girişi",
+  "pws.antigravityOauthAction": "Tarayıcı ile giriş yap",
+  "pws.authChoiceModalTitle": "{provider} bağla",
+  "pws.authChoiceModalSubtitle": "Hesabınızı nasıl bağlamak istediğinizi seçin",
   "pws.accountSwitching": "Değiştiriliyor…",
   "pws.accountCurrent": "Mevcut hesap",
   "pws.defaultModelNone": "Yok (sağlayıcı varsayılanını kullan)",
@@ -1653,6 +1670,8 @@ export const tr: Record<TKey, string> = {
   "nav.integrations": "Entegrasyonlar",
   "nav.openMenu": "Menüyü aç",
   "nav.closeMenu": "Menüyü kapat",
+  "nav.collapseSidebar": "Kenar çubuğunu daralt",
+  "nav.expandSidebar": "Kenar çubuğunu genişlet",
   "nav.goHome": "Panoya git",
   "pws.refreshAllQuotas": "Tüm kotaları yenile",
   "pws.quotaRefreshDone": "Kota kontrolü tamamlandı",
@@ -2863,4 +2882,71 @@ export const tr: Record<TKey, string> = {
   "remote.event.status": "Durum",
   "remote.event.tool": "Uzak araç",
   "remote.event.error": "Hata",
+  "pws.filterLabel": "Filtre",
+  "pws.filterWithLimits": "Limiti olanlar",
+  "pws.filterAllAccounts": "Tüm hesaplar",
+  "pws.filterGeminiExhausted": "Gemini tükendi",
+  "pws.filterClaudeExhausted": "Claude tükendi",
+  "pws.filterFullyExhausted": "Tamamen tükendi",
+  "pws.statsTotal": "Toplam",
+  "pws.statsInPool": "havuzda",
+  "pws.statsBothReady": "İkisi de hazır",
+  "pws.statsReady": "hazır",
+  "pws.statsClaudeOnly": "Yalnızca Claude",
+  "pws.statsGeminiOnly": "Yalnızca Gemini",
+  "pws.statsExhausted": "Tükendi",
+  "pws.statsAwaitingReset": "sıfırlama bekleniyor",
+  "pws.geminiExhaustedShort": "Gemini %0",
+  "pws.claudeExhaustedShort": "Claude %0",
+  "pws.titleModeLabel": "Başlık",
+  "pws.titleEmailLogin": "E-posta girişi",
+  "pws.titleAlias": "Takma ad",
+  "pws.viewModeLabel": "Görünüm",
+  "pws.viewCards": "Kartlar",
+  "pws.viewCompact": "Kompakt",
+  "pws.sortLabel": "Sırala",
+  "pws.sortMoreHeadroom": "Daha fazla boş limit",
+  "pws.sortLessHeadroom": "Daha az boş limit",
+  "pws.sortActiveFirst": "Önce aktif olan",
+  "pws.sortLogin": "Giriş adına göre",
+  "pws.freeHeadroom": "%{percent} boş",
+  "pws.limitExhaustedBadge": "Limit tükendi",
+  "pws.refreshAccountQuota": "Bu hesabın kotasını yenile",
+  "pws.switchToAccount": "Bu hesaba geç",
+  "pws.accountSelect": "Seç",
+  "prov.editAliasShort": "Takma ad",
+  "pws.geminiLimits": "Gemini Limitleri",
+  "pws.claudeLimits": "Claude Limitleri",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "Genel limitler",
+  "pws.sortGroupGemini": "Gemini limitleri",
+  "pws.sortGroupClaude": "Claude limitleri",
+  "pws.sortGroupOther": "Diğer",
+  "pws.sortGeminiMore": "Gemini: daha fazla boş limit",
+  "pws.sortGeminiLess": "Gemini: daha az boş limit",
+  "pws.sortClaudeMore": "Claude: daha fazla boş limit",
+  "pws.sortClaudeLess": "Claude: daha az boş limit",
+  "pws.sortResetSoonest": "En yakın sıfırlama",
+  "pws.titleMaskedLogin": "Gizli (***)",
+  "pws.filterWithLimitsGemini": "Gemini limiti olanlar",
+  "pws.filterWithLimitsClaude": "Claude limiti olanlar",
+  "pws.sortReset5h": "En yakın sıfırlama (5 saat)",
+  "pws.sortReset7d": "En yakın sıfırlama (7 gün)",
+  "pws.searchAccountsPlaceholder": "Giriş adı, e-posta ara...",
+    "pws.window5hLabel": "5 saat",
+  "pws.windowWeeklyLabel": "Haftalık",
+  "pws.gemini5hLabel": "5 saat",
+  "pws.geminiWeeklyLabel": "Haftalık",
+  "pws.claude5hLabel": "5 saat",
+  "pws.claudeWeeklyLabel": "Haftalık",
+  "pws.loginShort": "Giriş",
+  "pws.maskedShort": "Gizli",
+  "pws.aliasShort": "Takma ad",
+  "pws.searchAccountField": "Hesap ara...",
+  "pws.removeAccountConfirmTitle": "Hesabı kaldır",
+  "pws.removeAccountTooltip": "Hesabı kaldır",
+  "pws.statsClaudeAvailable": "Claude için uygun",
+  "pws.statsGeminiAvailable": "Gemini için uygun",
+  "pws.statsAvailable": "Kullanılabilir",
 };
diff --git a/gui/src/i18n/zh-TW.ts b/gui/src/i18n/zh-TW.ts
index 9e154fa1b2..e2e63f5008 100644
--- a/gui/src/i18n/zh-TW.ts
+++ b/gui/src/i18n/zh-TW.ts
@@ -1008,6 +1008,8 @@ export const zhTW: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · 本地",
   "pws.rail.suffixFree": " · 免費",
   "pws.rail.selectAria": "選擇 {name} — {status}{suffix}",
+  "pws.rail.collapse": "摺疊提供者清單",
+  "pws.rail.expand": "展開提供者清單",
   "pws.searchPlaceholder": "搜尋供應商…",
   "pws.filterAria": "篩選供應商",
   "pws.providerFiltersAria": "供應商篩選",
@@ -1123,6 +1125,21 @@ export const zhTW: Record<TKey, string> = {
   "pws.accountsLoadFailed": "無法載入帳號。",
   "pws.retryAccounts": "重試",
   "pws.noAccounts": "尚未連線任何帳號。",
+    "pws.cockpitImportPasteClipboard": "從剪貼簿貼上",
+  "pws.cockpitImportPasteManual": "貼上文字",
+  "pws.cockpitImportPastePlaceholder": "在此處貼上 Cockpit Tools JSON 匯出…",
+  "pws.cockpitImportSubmit": "匯入",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "無需瀏覽器登入即可匯入帳號權杖與訂閱",
+  "pws.cockpitCardFootnote": "本機加密：重新整理權杖僅儲存在此裝置的安全儲存區中",
+  "pws.cockpitImportFileShort": "從檔案",
+  "pws.antigravityChoiceTitle": "連接 Google Antigravity",
+  "pws.antigravityChoiceSubtitle": "選擇連接帳號的方式",
+  "pws.antigravityOauthTitle": "瀏覽器登入 (Google OAuth)",
+  "pws.antigravityOauthDesc": "透過 Google 瀏覽器視窗進行標準的個人帳號登入",
+  "pws.antigravityOauthAction": "透過瀏覽器登入",
+  "pws.authChoiceModalTitle": "連接 {provider}",
+  "pws.authChoiceModalSubtitle": "選擇連接帳號的方式",
   "pws.accountSwitching": "切換中…",
   "pws.accountCurrent": "當前帳號",
   "pws.defaultModelNone": "無（使用供應商預設值）",
@@ -1409,6 +1426,8 @@ export const zhTW: Record<TKey, string> = {
   "nav.api": "API",
   "nav.openMenu": "開啟選單",
   "nav.closeMenu": "關閉選單",
+  "nav.collapseSidebar": "摺疊側邊欄",
+  "nav.expandSidebar": "展開側邊欄",
   "nav.goHome": "前往儀表板",
   "pws.refreshAllQuotas": "重新整理所有額度",
   "pws.quotaRefreshDone": "額度檢查完成",
@@ -2826,4 +2845,71 @@ export const zhTW: Record<TKey, string> = {
   "remote.event.status": "狀態",
   "remote.event.tool": "遠端工具",
   "remote.event.error": "錯誤",
+  "pws.filterLabel": "篩選",
+  "pws.filterWithLimits": "有剩餘額度",
+  "pws.filterAllAccounts": "全部帳號",
+  "pws.filterGeminiExhausted": "Gemini已耗盡",
+  "pws.filterClaudeExhausted": "Claude已耗盡",
+  "pws.filterFullyExhausted": "全部耗盡",
+  "pws.statsTotal": "總計",
+  "pws.statsInPool": "池中",
+  "pws.statsBothReady": "雙可用",
+  "pws.statsReady": "可用",
+  "pws.statsClaudeOnly": "僅Claude可用",
+  "pws.statsGeminiOnly": "僅Gemini可用",
+  "pws.statsExhausted": "已耗盡",
+  "pws.statsAwaitingReset": "等待重設",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "標題顯示",
+  "pws.titleEmailLogin": "信箱帳號",
+  "pws.titleAlias": "別名",
+  "pws.viewModeLabel": "檢視",
+  "pws.viewCards": "卡片",
+  "pws.viewCompact": "緊湊",
+  "pws.sortLabel": "排序",
+  "pws.sortMoreHeadroom": "剩餘額度最多",
+  "pws.sortLessHeadroom": "剩餘額度最少",
+  "pws.sortActiveFirst": "目前啟動優先",
+  "pws.sortLogin": "依帳號名稱",
+  "pws.freeHeadroom": "剩餘 {percent}%",
+  "pws.limitExhaustedBadge": "額度耗盡",
+  "pws.refreshAccountQuota": "重新整理此帳號額度",
+  "pws.switchToAccount": "切換至此帳號",
+  "pws.accountSelect": "選擇",
+  "prov.editAliasShort": "別名",
+  "pws.geminiLimits": "Gemini 額度",
+  "pws.claudeLimits": "Claude 額度",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "全域額度",
+  "pws.sortGroupGemini": "Gemini 額度",
+  "pws.sortGroupClaude": "Claude 額度",
+  "pws.sortGroupOther": "其他",
+  "pws.sortGeminiMore": "Gemini: 剩餘最多",
+  "pws.sortGeminiLess": "Gemini: 剩餘最少",
+  "pws.sortClaudeMore": "Claude: 剩餘最多",
+  "pws.sortClaudeLess": "Claude: 剩餘最少",
+  "pws.sortResetSoonest": "最近重設時間",
+  "pws.titleMaskedLogin": "脫敏 (***)",
+  "pws.filterWithLimitsGemini": "有 Gemini 額度",
+  "pws.filterWithLimitsClaude": "有 Claude 額度",
+  "pws.sortReset5h": "最近重設時間（5小時）",
+  "pws.sortReset7d": "最近重設時間（7天）",
+  "pws.searchAccountsPlaceholder": "依帳號或信箱搜尋...",
+    "pws.window5hLabel": "5小時",
+  "pws.windowWeeklyLabel": "每週",
+  "pws.gemini5hLabel": "5小時",
+  "pws.geminiWeeklyLabel": "每週",
+  "pws.claude5hLabel": "5小時",
+  "pws.claudeWeeklyLabel": "每週",
+  "pws.loginShort": "帳號",
+  "pws.maskedShort": "脫敏",
+  "pws.aliasShort": "別名",
+  "pws.searchAccountField": "搜尋帳號...",
+  "pws.removeAccountConfirmTitle": "移除帳號",
+  "pws.removeAccountTooltip": "移除帳號",
+  "pws.statsClaudeAvailable": "Claude 可用",
+  "pws.statsGeminiAvailable": "Gemini 可用",
+  "pws.statsAvailable": "可用",
 };
diff --git a/gui/src/i18n/zh.ts b/gui/src/i18n/zh.ts
index 018f6e251b..58aef945d6 100644
--- a/gui/src/i18n/zh.ts
+++ b/gui/src/i18n/zh.ts
@@ -1138,6 +1138,8 @@ export const zh: Record<TKey, string> = {
   "codexSet.base.externalBlocked": "model_instructions_file 已指向 {path}，且不是 opencodex 写的。请先自行清除，再在此处选择。",
   "nav.openMenu": "打开菜单",
   "nav.closeMenu": "关闭菜单",
+  "nav.collapseSidebar": "折叠侧边栏",
+  "nav.expandSidebar": "展开侧边栏",
   "nav.goHome": "前往仪表板",
   "pws.refreshAllQuotas": "刷新全部额度",
   "pws.quotaRefreshDone": "额度检查完成",
@@ -2057,6 +2059,8 @@ export const zh: Record<TKey, string> = {
   "pws.rail.suffixLocal": " · 本地",
   "pws.rail.suffixFree": " · 免费",
   "pws.rail.selectAria": "选择 {name} — {status}{suffix}",
+  "pws.rail.collapse": "折叠提供商列表",
+  "pws.rail.expand": "展开提供商列表",
   "pws.searchPlaceholder": "搜索提供商…",
   "pws.filterAria": "筛选提供商",
   "pws.providerFiltersAria": "提供商筛选",
@@ -2179,6 +2183,21 @@ export const zh: Record<TKey, string> = {
   "pws.cockpitImportInvalid": "所选文件不是有效的 JSON 导出文件或文件过大。",
   "pws.cockpitImportFailed": "无法完成账户导入。",
   "pws.cockpitImportComplete": "导入完成：已导入 {imported}，已更新 {updated}，失败 {failed}，不支持 {unsupported}。",
+    "pws.cockpitImportPasteClipboard": "从剪贴板粘贴",
+  "pws.cockpitImportPasteManual": "粘贴文本",
+  "pws.cockpitImportPastePlaceholder": "在此处粘贴 Cockpit Tools JSON 导出…",
+  "pws.cockpitImportSubmit": "导入",
+  "pws.cockpitCardTitle": "Cockpit Tools Antigravity",
+  "pws.cockpitCardSubtitle": "无需浏览器登录即可导入账户令牌和订阅",
+  "pws.cockpitCardFootnote": "本地加密：刷新令牌仅保存在此设备的安全存储中",
+  "pws.cockpitImportFileShort": "从文件",
+  "pws.antigravityChoiceTitle": "连接 Google Antigravity",
+  "pws.antigravityChoiceSubtitle": "选择连接账户的方式",
+  "pws.antigravityOauthTitle": "浏览器登录 (Google OAuth)",
+  "pws.antigravityOauthDesc": "通过 Google 浏览器窗口进行标准的个人账户登录",
+  "pws.antigravityOauthAction": "通过浏览器登录",
+  "pws.authChoiceModalTitle": "连接 {provider}",
+  "pws.authChoiceModalSubtitle": "选择连接账户的方式",
   "pws.accountSwitching": "切换中…",
   "pws.accountCurrent": "当前账户",
   "pws.defaultModelNone": "无（使用提供商默认值）",
@@ -2861,4 +2880,71 @@ export const zh: Record<TKey, string> = {
   "remote.event.status": "状态",
   "remote.event.tool": "远程工具",
   "remote.event.error": "错误",
+  "pws.filterLabel": "筛选",
+  "pws.filterWithLimits": "有剩余额度",
+  "pws.filterAllAccounts": "全部账号",
+  "pws.filterGeminiExhausted": "Gemini已耗尽",
+  "pws.filterClaudeExhausted": "Claude已耗尽",
+  "pws.filterFullyExhausted": "全部耗尽",
+  "pws.statsTotal": "总计",
+  "pws.statsInPool": "池中",
+  "pws.statsBothReady": "双可用",
+  "pws.statsReady": "可用",
+  "pws.statsClaudeOnly": "仅Claude可用",
+  "pws.statsGeminiOnly": "仅Gemini可用",
+  "pws.statsExhausted": "已耗尽",
+  "pws.statsAwaitingReset": "等待重置",
+  "pws.geminiExhaustedShort": "Gemini 0%",
+  "pws.claudeExhaustedShort": "Claude 0%",
+  "pws.titleModeLabel": "标题显示",
+  "pws.titleEmailLogin": "邮箱账号",
+  "pws.titleAlias": "别名",
+  "pws.viewModeLabel": "视图",
+  "pws.viewCards": "卡片",
+  "pws.viewCompact": "紧凑",
+  "pws.sortLabel": "排序",
+  "pws.sortMoreHeadroom": "剩余额度最多",
+  "pws.sortLessHeadroom": "剩余额度最少",
+  "pws.sortActiveFirst": "当前激活优先",
+  "pws.sortLogin": "按账号名称",
+  "pws.freeHeadroom": "剩余 {percent}%",
+  "pws.limitExhaustedBadge": "额度耗尽",
+  "pws.refreshAccountQuota": "刷新该账号额度",
+  "pws.switchToAccount": "切换到此账号",
+  "pws.accountSelect": "选择",
+  "prov.editAliasShort": "别名",
+  "pws.geminiLimits": "Gemini 额度",
+  "pws.claudeLimits": "Claude 额度",
+  "pws.modelGemini": "Gemini",
+  "pws.modelClaude": "Claude",
+  "pws.sortGroupGeneral": "全局额度",
+  "pws.sortGroupGemini": "Gemini 额度",
+  "pws.sortGroupClaude": "Claude 额度",
+  "pws.sortGroupOther": "其他",
+  "pws.sortGeminiMore": "Gemini: 剩余最多",
+  "pws.sortGeminiLess": "Gemini: 剩余最少",
+  "pws.sortClaudeMore": "Claude: 剩余最多",
+  "pws.sortClaudeLess": "Claude: 剩余最少",
+  "pws.sortResetSoonest": "最近重置时间",
+  "pws.titleMaskedLogin": "脱敏 (***)",
+  "pws.filterWithLimitsGemini": "有 Gemini 额度",
+  "pws.filterWithLimitsClaude": "有 Claude 额度",
+  "pws.sortReset5h": "最近重置时间（5小时）",
+  "pws.sortReset7d": "最近重置时间（7天）",
+  "pws.searchAccountsPlaceholder": "按账号或邮箱搜索...",
+    "pws.window5hLabel": "5小时",
+  "pws.windowWeeklyLabel": "周度",
+  "pws.gemini5hLabel": "5小时",
+  "pws.geminiWeeklyLabel": "周度",
+  "pws.claude5hLabel": "5小时",
+  "pws.claudeWeeklyLabel": "周度",
+  "pws.loginShort": "账号",
+  "pws.maskedShort": "脱敏",
+  "pws.aliasShort": "别名",
+  "pws.searchAccountField": "搜索账号...",
+  "pws.removeAccountConfirmTitle": "移除账户",
+  "pws.removeAccountTooltip": "移除账户",
+  "pws.statsClaudeAvailable": "Claude 可用",
+  "pws.statsGeminiAvailable": "Gemini 可用",
+  "pws.statsAvailable": "可用",
 };
diff --git a/gui/src/icons.tsx b/gui/src/icons.tsx
index 70afe03db9..e35c143d4a 100644
--- a/gui/src/icons.tsx
+++ b/gui/src/icons.tsx
@@ -21,6 +21,7 @@ export const IconCheck = (p: P) => (<svg {...S(p)}><path d="m20 6-11 11-5-5"/></
 export const IconX = (p: P) => (<svg {...S(p)}><path d="M18 6 6 18M6 6l12 12"/></svg>);
 export const IconPlus = (p: P) => (<svg {...S(p)}><path d="M12 5v14M5 12h14"/></svg>);
 export const IconRefresh = (p: P) => (<svg {...S(p)}><path d="M21 12a9 9 0 0 1-9 9 9.8 9.8 0 0 1-6.7-2.7L3 16M3 21v-5h5M3 12a9 9 0 0 1 9-9 9.8 9.8 0 0 1 6.7 2.7L21 8M21 3v5h-5"/></svg>);
+export const IconClipboard = (p: P) => (<svg {...S(p)}><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>);
 export const IconPause = (p: P) => (<svg {...S(p)}><path d="M8 5v14M16 5v14"/></svg>);
 export const IconPlay = (p: P) => (<svg {...S(p)}><path d="m7 4 13 8-13 8Z"/></svg>);
 export const IconTrash = (p: P) => (<svg {...S(p)}><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>);
diff --git a/gui/src/main.tsx b/gui/src/main.tsx
index 024e29626e..b02165c98e 100644
--- a/gui/src/main.tsx
+++ b/gui/src/main.tsx
@@ -3,6 +3,7 @@ import ReactDOM from "react-dom/client";
 import App from "./App";
 import { LanguageProvider } from "./i18n/provider";
 import "./styles.css";
+import "./styles/sidebar-collapsed.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
diff --git a/gui/src/pages/Providers.tsx b/gui/src/pages/Providers.tsx
index 88cb0b6f79..c93dcb3d3c 100644
--- a/gui/src/pages/Providers.tsx
+++ b/gui/src/pages/Providers.tsx
@@ -223,7 +223,22 @@ export default function Providers({ apiBase }: { apiBase: string }) {
   const [oauthStatus, setOauthStatus] = useState<Record<string, import("./providers-shared").OAuthStatus>>({});
   const [busy, setBusy] = useState<string | null>(null);
   const [loginInfo, setLoginInfo] = useState<{ provider: string; url?: string; instructions?: string; deviceCode?: string } | null>(null);
-  const [workspaceSelected, setWorkspaceSelected] = useState<string | null>(null);
+  const [workspaceSelected, setWorkspaceSelectedState] = useState<string | null>(() => {
+    try {
+      const saved = localStorage.getItem("ocx_workspace_selected_provider");
+      return saved && saved.trim() ? saved.trim() : null;
+    } catch {
+      return null;
+    }
+  });
+
+  const setWorkspaceSelected = useCallback((name: string | null) => {
+    setWorkspaceSelectedState(name);
+    try {
+      if (name) localStorage.setItem("ocx_workspace_selected_provider", name);
+      else localStorage.removeItem("ocx_workspace_selected_provider");
+    } catch { /* localStorage unavailable */ }
+  }, []);
   const [addIntent, setAddIntent] = useState<AddProviderIntent | null>(null);
   const [removeConfirmName, setRemoveConfirmName] = useState<string | null>(null);
   /** ChatGPT/Codex login from Add Provider → Accounts (uses /api/codex-auth, not /api/oauth). */
@@ -235,6 +250,7 @@ export default function Providers({ apiBase }: { apiBase: string }) {
   const [oauthTosPending, setOauthTosPending] = useState<
     { provider: string; addAccount: boolean; accountId?: string } | null
   >(null);
+  const [antigravityChoicePending, setAntigravityChoicePending] = useState<{ addAccount: boolean } | null>(null);
   /** Bumped after OAuth login so ProviderDetails switches to the Accounts tab. */
   const [accountsFocus, setAccountsFocus] = useState<{ token: number; provider: string | null }>({
     token: 0,
@@ -284,7 +300,7 @@ export default function Providers({ apiBase }: { apiBase: string }) {
     setAddIntent(null);
     setWorkspaceSelected(provider);
     setAccountsFocus(previous => ({ token: previous.token + 1, provider }));
-  }, []);
+  }, [setWorkspaceSelected]);
   // Providers hash sync is owned by App (passive replaceHash / deliberate navigateHash).
 
   // Warm the Add Provider catalog cache while the page is open so opening the
@@ -483,6 +499,10 @@ export default function Providers({ apiBase }: { apiBase: string }) {
    */
   const requestLoginOAuth = (provider: string, addAccount = false, accountId?: string) => {
     if (busy === provider) return;
+    if (provider === "google-antigravity" && !accountId) {
+      setAntigravityChoicePending({ addAccount });
+      return;
+    }
     if (oauthTosRisk(provider)) {
       setOauthTosPending({ provider, addAccount, ...(accountId ? { accountId } : {}) });
       return;
@@ -490,6 +510,22 @@ export default function Providers({ apiBase }: { apiBase: string }) {
     void loginOAuth(provider, addAccount, accountId);
   };
 
+  const onContinueAntigravityOAuth = () => {
+    const addAccount = antigravityChoicePending?.addAccount ?? false;
+    setAntigravityChoicePending(null);
+    if (oauthTosRisk("google-antigravity")) {
+      setOauthTosPending({ provider: "google-antigravity", addAccount });
+      return;
+    }
+    void loginOAuth("google-antigravity", addAccount);
+  };
+
+  const onAntigravityImportSuccess = () => {
+    setAntigravityChoicePending(null);
+    void fetchOauth();
+    bumpModelsRefresh();
+  };
+
   if (!config) {
     return (
       <>
@@ -728,6 +764,10 @@ export default function Providers({ apiBase }: { apiBase: string }) {
           setOauthTosPending(null);
           void loginOAuth(pending.provider, pending.addAccount, pending.accountId);
         }}
+        antigravityChoicePending={antigravityChoicePending}
+        onCancelAntigravityChoice={() => setAntigravityChoicePending(null)}
+        onContinueAntigravityOAuth={onContinueAntigravityOAuth}
+        onAntigravityImportSuccess={onAntigravityImportSuccess}
       />
     </>
   );
diff --git a/gui/src/pages/providers-page-modals.tsx b/gui/src/pages/providers-page-modals.tsx
index ba5964675e..e904f44cef 100644
--- a/gui/src/pages/providers-page-modals.tsx
+++ b/gui/src/pages/providers-page-modals.tsx
@@ -2,6 +2,7 @@ import AddProviderModal from "../components/AddProviderModal";
 import ProviderModelsNotice, { type ProviderModelsNoticeProps } from "../components/ProviderModelsNotice";
 import AddCodexAccountModal from "../components/AddCodexAccountModal";
 import OAuthTosWarningModal from "../components/OAuthTosWarningModal";
+import AccountAuthChoiceModal from "../components/AccountAuthChoiceModal";
 import { RemoveConfirmDialog, UnsavedLeaveDialog } from "../components/provider-workspace/ProviderDialogs";
 import type { AddProviderIntent } from "../components/provider-workspace/ProviderWorkspaceShell";
 import type { AccountLoginRow, AccountLoginStatus } from "../components/provider-catalog/ProviderCatalog";
@@ -25,6 +26,7 @@ export function ProvidersPageModals({
   jsonLeaveOpen,
   jsonSaving,
   oauthTosPending,
+  antigravityChoicePending,
   onCloseAdd,
   onAdded,
   onAccountLogin,
@@ -41,6 +43,9 @@ export function ProvidersPageModals({
   onSaveJson,
   onCancelOauthTos,
   onContinueOauthTos,
+  onCancelAntigravityChoice,
+  onContinueAntigravityOAuth,
+  onAntigravityImportSuccess,
 }: {
   apiBase: string;
   config: ProvidersConfig;
@@ -57,6 +62,7 @@ export function ProvidersPageModals({
   jsonLeaveOpen?: boolean;
   jsonSaving?: boolean;
   oauthTosPending: { provider: string; addAccount: boolean } | null;
+  antigravityChoicePending?: { addAccount: boolean } | null;
   onCloseAdd: () => void;
   onAdded: (name: string) => void;
   onAccountLogin: (provider: string, addAccount?: boolean) => void;
@@ -73,6 +79,9 @@ export function ProvidersPageModals({
   onSaveJson?: () => void;
   onCancelOauthTos: () => void;
   onContinueOauthTos: () => void;
+  onCancelAntigravityChoice?: () => void;
+  onContinueAntigravityOAuth?: () => void;
+  onAntigravityImportSuccess?: () => void;
 }) {
   return (
     <>
@@ -128,6 +137,18 @@ export function ProvidersPageModals({
           onContinue={onContinueOauthTos}
         />
       )}
+      {antigravityChoicePending && onCancelAntigravityChoice && onContinueAntigravityOAuth && (
+        <AccountAuthChoiceModal
+          provider="google-antigravity"
+          providerLabel={oauthLabel("google-antigravity")}
+          apiBase={apiBase}
+          isOpen={true}
+          isBusy={busy === "google-antigravity"}
+          onClose={onCancelAntigravityChoice}
+          onContinueOAuth={onContinueAntigravityOAuth}
+          onImportSuccess={onAntigravityImportSuccess}
+        />
+      )}
     </>
   );
 }
diff --git a/gui/src/styles/provider-catalog.css b/gui/src/styles/provider-catalog.css
index 53460445f6..391ba5caf1 100644
--- a/gui/src/styles/provider-catalog.css
+++ b/gui/src/styles/provider-catalog.css
@@ -282,3 +282,179 @@
   gap: 8px;
   align-items: center;
 }
+
+.provider-catalog-choice-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 4px 0;
+}
+
+.provider-catalog-choice-head {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.provider-catalog-choice-back {
+  align-self: flex-start;
+  margin-bottom: 4px;
+}
+
+.provider-catalog-choice-title {
+  font-size: var(--text-md, 16px);
+  font-weight: 600;
+  color: var(--text, #ffffff);
+}
+
+.provider-catalog-choice-subtitle {
+  font-size: var(--text-xs, 12px);
+  color: var(--muted, #888898);
+}
+
+.provider-catalog-choice-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.provider-catalog-choice-card,
+.auth-choice-card {
+  background: var(--glass-rail);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--border, #2e2e36);
+  border-radius: var(--radius-md, 12px);
+  padding: 14px 18px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  transition: border-color var(--motion-fast, 0.15s ease);
+}
+
+.provider-catalog-choice-card:hover,
+.auth-choice-card:hover {
+  border-color: var(--border-hover, #3c3c46);
+}
+
+.provider-catalog-choice-card-info,
+.auth-choice-card-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.provider-catalog-choice-card-text,
+.auth-choice-card-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.auth-choice-modal {
+  max-width: 680px;
+  width: 100%;
+}
+
+.auth-choice-body {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-top: 14px;
+}
+
+.auth-choice-card-title {
+  font-size: var(--text-sm, 14px);
+  font-weight: 600;
+  color: var(--text, #ffffff);
+  line-height: 1.25;
+}
+
+.auth-choice-card-desc {
+  font-size: var(--text-xs, 12px);
+  color: var(--muted, #8a8a9a);
+  line-height: 1.3;
+}
+
+.antigravity-dropdown-anchor,
+.auth-dropdown-anchor {
+  position: relative;
+  display: inline-block;
+}
+
+.antigravity-dropdown-menu,
+.auth-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 120;
+  background: var(--bg-surface-elevated, #1c1c20);
+  border: 1px solid var(--border, #33333e);
+  border-radius: var(--radius-md, 10px);
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.3);
+  min-width: 270px;
+  padding: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.antigravity-dropdown-item,
+.auth-dropdown-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 9px 12px;
+  border-radius: var(--radius-sm, 7px);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  width: 100%;
+  color: var(--text, #ffffff);
+  transition: background var(--motion-fast, 0.12s ease);
+}
+
+.antigravity-dropdown-item:hover,
+.auth-dropdown-item:hover {
+  background: var(--accent-soft, rgba(255, 255, 255, 0.08));
+}
+
+.antigravity-dropdown-item:focus-visible,
+.auth-dropdown-item:focus-visible {
+  outline: 2px solid var(--accent-ring, #fff);
+  outline-offset: -1px;
+}
+
+.antigravity-dropdown-item-icon,
+.auth-dropdown-item-icon {
+  font-size: 16px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.antigravity-dropdown-item-titles,
+.auth-dropdown-item-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.antigravity-dropdown-item-title,
+.auth-dropdown-item-title {
+  font-size: var(--text-sm, 13px);
+  font-weight: 600;
+  color: var(--text, #ffffff);
+  line-height: 1.2;
+}
+
+.antigravity-dropdown-item-desc,
+.auth-dropdown-item-desc {
+  font-size: var(--text-xs, 11px);
+  color: var(--muted, #8a8a9a);
+  line-height: 1.25;
+}
diff --git a/gui/src/styles/provider-workspace-settings.css b/gui/src/styles/provider-workspace-settings.css
index 34a9e80897..bd7fd5224d 100644
--- a/gui/src/styles/provider-workspace-settings.css
+++ b/gui/src/styles/provider-workspace-settings.css
@@ -198,3 +198,1289 @@
   box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
 }
 .dialog-actions { display: flex; gap: 8px; justify-content: flex-end; }
+
+/* ── Two-Column Accounts Grid & Enhanced Controls (WP-Antigravity-UX) ── */
+
+:root {
+  --orange: light-dark(#c2410c, #f97316);
+  --orange-soft: light-dark(rgba(194, 65, 12, 0.10), rgba(249, 115, 22, 0.16));
+}
+
+.pwi-accounts-controls-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  margin-bottom: var(--space-4);
+}
+
+/* 1. Stats Overview Hub */
+.pwi-accounts-stats-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.pwi-stats-items-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.pwi-stat-unit {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  min-width: max-content;
+  flex-shrink: 0;
+}
+
+.pwi-stat-lbl {
+  font-size: 11px;
+  color: var(--muted);
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+
+
+.pwi-stat-val-line {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1-5);
+}
+
+.pwi-stat-num {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1;
+}
+
+.pwi-text-green { color: var(--green); }
+.pwi-text-warn { color: var(--amber); }
+.pwi-text-blue { color: var(--blue); }
+.pwi-text-orange { color: var(--orange); }
+
+.pwi-stat-subtag {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.pwi-stat-tag-green {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--green-soft);
+  color: var(--green);
+}
+
+.pwi-stat-tag-blue {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--blue-soft);
+  color: var(--blue);
+}
+
+.pwi-stat-tag-orange {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--orange-soft);
+  color: var(--orange);
+}
+
+.pwi-stat-tag-warn {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--amber-soft);
+  color: var(--amber);
+}
+
+.pwi-stat-sep {
+  width: 1px;
+  height: 28px;
+  background: var(--border-soft);
+  flex-shrink: 0;
+}
+
+@container provider-workspace (max-width: 960px) {
+  .pwi-accounts-stats-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+  }
+  .pwi-stats-items-row {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 14px 24px !important;
+    width: 100% !important;
+  }
+  .pwi-stat-sep {
+    display: none !important;
+  }
+  .pwi-stat-unit {
+    min-width: 0 !important;
+  }
+  .pwi-global-refresh-box {
+    width: 100%;
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-soft);
+  }
+}
+
+@media (max-width: 960px) {
+  .pwi-accounts-stats-card {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 14px;
+  }
+  .pwi-stats-items-row {
+    display: grid !important;
+    grid-template-columns: repeat(2, 1fr) !important;
+    gap: 14px 24px !important;
+    width: 100% !important;
+  }
+  .pwi-stat-sep {
+    display: none !important;
+  }
+  .pwi-stat-unit {
+    min-width: 0 !important;
+  }
+  .pwi-global-refresh-box {
+    width: 100%;
+    display: flex !important;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 12px;
+    border-top: 1px solid var(--border-soft);
+  }
+}
+
+.pwi-global-refresh-box {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.pwi-btn-refresh-all {
+  background: var(--raised);
+  border: 1px solid var(--border);
+  font-weight: 600;
+}
+
+/* 2. Controls Toolbar (Balanced 2 Rows) */
+.pwi-toolbar-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  background: var(--raised);
+  padding: 12px 16px;
+  border-radius: var(--radius);
+  border: 1px solid var(--border-soft);
+}
+
+.pwi-toolbar-row-top,
+.pwi-toolbar-row-bottom {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  flex-wrap: wrap;
+}
+
+.pwi-toolbar-row-bottom {
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--border-soft);
+}
+
+.pwi-toolbar-cluster {
+  display: flex;
+  align-items: center;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+}
+
+.pwi-control-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  flex-shrink: 0;
+}
+
+.pwi-filter-caption {
+  font-size: 11.5px;
+  font-weight: 700;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  white-space: nowrap;
+}
+
+/* Unified Dropdown filter button */
+.pwi-dropdown-filter-wrap {
+  position: relative;
+  display: inline-block;
+}
+
+.pwi-filter-btn {
+  appearance: none;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  height: 32px;
+  padding: 0 12px;
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: background var(--motion-fast), border-color var(--motion-fast);
+}
+
+.pwi-filter-btn:hover {
+  background: var(--raised-hover);
+  border-color: var(--border);
+}
+
+.pwi-filter-count {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  background: var(--raised);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  margin-left: var(--space-1);
+}
+
+.pwi-filter-chevron {
+  font-size: 11px;
+  line-height: 1;
+  color: var(--muted);
+  pointer-events: none;
+  margin-left: var(--space-1);
+}
+
+/* Dropdown Menu Overlay */
+.pwi-filter-dropdown-menu {
+  position: absolute;
+  top: calc(100% + var(--space-1));
+  left: 0;
+  z-index: 9999;
+  min-width: 290px;
+  width: max-content;
+  max-width: min(94vw, 380px);
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: var(--space-1-5);
+  box-shadow: var(--shadow), 0 0 0 1px var(--border-soft);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0-5);
+  box-sizing: border-box;
+  animation: pwi-fade-in 0.12s ease-out;
+}
+
+@keyframes pwi-fade-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+.pwi-dropdown-item {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--text);
+  padding: 8px 12px;
+  border-radius: var(--radius-xs);
+  font-size: 12.5px;
+  font-weight: 500;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  white-space: nowrap;
+  box-sizing: border-box;
+  transition: background var(--motion-fast), color var(--motion-fast);
+  text-align: left;
+}
+
+.pwi-dropdown-item:hover {
+  background: var(--hover);
+  color: var(--text);
+}
+
+.pwi-dropdown-item.active {
+  background: var(--green-soft);
+  color: var(--green);
+  font-weight: 700;
+}
+
+.pwi-dropdown-item.active-blue {
+  background: var(--blue-soft);
+  color: var(--blue);
+  font-weight: 700;
+}
+
+.pwi-dropdown-item.active-orange {
+  background: var(--orange-soft);
+  color: var(--orange);
+  font-weight: 700;
+}
+
+.pwi-dropdown-item.active-neutral {
+  background: var(--raised-hover);
+  color: var(--text);
+  font-weight: 700;
+}
+
+.pwi-dropdown-item.active-warn {
+  background: var(--amber-soft);
+  color: var(--amber);
+  font-weight: 700;
+}
+
+.pwi-dropdown-item-left {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.pwi-dropdown-item-icon {
+  font-size: 13px;
+  width: 16px;
+  text-align: center;
+  flex-shrink: 0;
+}
+
+.pwi-dropdown-badge {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 7px;
+  border-radius: var(--radius-pill);
+  background: var(--raised);
+  color: var(--muted);
+  font-variant-numeric: tabular-nums;
+  margin-left: auto;
+}
+
+.pwi-dropdown-badge--blue {
+  background: var(--blue-soft);
+  color: var(--blue);
+}
+
+.pwi-dropdown-badge--orange {
+  background: var(--orange-soft);
+  color: var(--orange);
+}
+
+.pwi-dropdown-badge--warn {
+  background: var(--amber-soft);
+  color: var(--amber);
+}
+
+.pwi-dropdown-divider {
+  height: 1px;
+  background: var(--border-soft);
+  margin: var(--space-1) var(--space-1-5);
+}
+
+/* Custom Stable Select */
+.pwi-sort-custom-select-box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pwi-sort-custom-select-box .pwi-sort-select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  height: 32px;
+  padding: 0 28px 0 10px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.pwi-sort-custom-select-box .pwi-sort-select:hover {
+  background: var(--raised-hover);
+  border-color: var(--border);
+}
+
+.pwi-sort-custom-select-box .pwi-sort-select:focus-visible {
+  outline: 2px solid var(--accent-ring);
+  outline-offset: 2px;
+}
+
+.pwi-sort-chevron-icon {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1;
+}
+
+/* High-Contrast Search Input */
+.pwi-prominent-search-box {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  flex: 1 1 220px;
+  min-width: 180px;
+  max-width: 260px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 520px) {
+  .pwi-prominent-search-box {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.pwi-search-prominent-icon {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--muted);
+  pointer-events: none;
+  transition: color var(--motion-fast);
+}
+
+.pwi-prominent-search-box:focus-within .pwi-search-prominent-icon {
+  color: var(--green);
+}
+
+.pwi-search-prominent-input {
+  width: 100%;
+  height: 32px;
+  background: var(--surface) !important;
+  color: var(--text);
+  border: 1px solid var(--border) !important;
+  border-radius: var(--radius-xs);
+  padding: 0 28px 0 32px !important;
+  font-size: 12.5px;
+  box-sizing: border-box;
+  transition: border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);
+}
+
+.pwi-search-prominent-input::placeholder {
+  color: var(--muted);
+  opacity: 1;
+}
+
+.pwi-search-prominent-input:hover {
+  border-color: var(--border-hover, #4d4d4d) !important;
+}
+
+.pwi-search-prominent-input:focus {
+  border-color: var(--accent-ring) !important;
+  background: var(--surface) !important;
+  box-shadow: 0 0 0 2px var(--green-soft);
+  outline: none;
+}
+
+.pwi-search-clear-btn {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-2xs);
+  padding: 0;
+  color: var(--muted);
+  cursor: pointer;
+  transition: color var(--motion-fast), background-color var(--motion-fast);
+}
+
+.pwi-search-clear-btn:hover {
+  color: var(--text);
+  background: var(--hover);
+}
+
+/* Segmented Toggle */
+.pwi-segmented {
+  display: flex;
+  background: var(--surface);
+  padding: 2px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-soft);
+}
+
+.pwi-seg-opt {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 4px 9px;
+  border-radius: var(--radius-2xs);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all var(--motion-fast);
+  white-space: nowrap;
+}
+
+.pwi-seg-opt:hover {
+  color: var(--text);
+}
+
+.pwi-seg-opt.active {
+  background: var(--raised);
+  color: var(--text);
+  font-weight: 600;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+}
+
+/* 3. Responsive Accounts Grid (2-Column on wide screens, 1-Column when cramped) */
+.pwi-accounts-grid-2col {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--space-3);
+}
+
+@container provider-workspace (max-width: 820px) {
+  .pwi-accounts-grid-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 960px) {
+  .pwi-accounts-grid-2col {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Account Card (Detailed View) */
+.pwi-account-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 11px;
+  transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
+}
+
+.pwi-account-card:hover {
+  border-color: var(--border);
+}
+
+.pwi-account-card--active {
+  border-color: color-mix(in srgb, var(--green) 50%, var(--border));
+  background: linear-gradient(180deg, var(--green-soft) 0%, var(--surface) 100%);
+  box-shadow: 0 0 0 1px var(--green-soft);
+}
+
+.pwi-account-card--exhausted {
+  border-color: color-mix(in srgb, var(--amber) 40%, var(--border));
+}
+
+.pwi-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.pwi-card-id-row {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1;
+}
+
+.pwi-card-select-trigger {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  text-align: left;
+  cursor: pointer;
+  color: inherit;
+  min-width: 0;
+  flex: 1;
+}
+
+.pwi-card-select-trigger:disabled {
+  cursor: default;
+}
+
+.pwi-card-title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.pwi-card-title-line {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+
+.pwi-card-title {
+  font-size: 14.5px;
+  font-weight: 700;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pwi-card-sub {
+  font-size: 11.5px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pwi-card-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.pwi-icon-btn {
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pwi-action-alias {
+  white-space: nowrap;
+  font-size: 11.5px;
+  padding: 0 var(--space-2);
+}
+
+.pwi-action-alias-text {
+  display: inline;
+}
+
+@container provider-workspace (max-width: 780px) {
+  .pwi-action-alias-text {
+    display: none;
+  }
+}
+
+@media (max-width: 780px) {
+  .pwi-action-alias-text {
+    display: none;
+  }
+}
+
+.pwi-remove-btn:hover {
+  color: var(--red);
+  background: var(--red-soft);
+}
+
+/* Status Pill Strip */
+.pwi-card-status-strip {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--raised);
+  padding: 6px 10px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-soft);
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.pwi-model-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  font-weight: 700;
+}
+
+.pwi-badge-dot {
+  font-size: 9px;
+  line-height: 1;
+}
+
+.pwi-badge-green { color: var(--green); }
+.pwi-badge-orange { color: var(--orange); }
+.pwi-badge-blue { color: var(--blue); }
+.pwi-badge-warn { color: var(--amber); }
+
+.pwi-card-headroom {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.pwi-card-headroom strong {
+  color: var(--text);
+}
+
+/* 2-Column Quotas inside Card (Always side-by-side on PC/tablet, stacks only on small phones) */
+.pwi-card-quotas-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+  background: var(--raised);
+  padding: 10px 12px;
+  border-radius: var(--radius-xs);
+  border: 1px solid var(--border-soft);
+}
+
+@media (max-width: 480px) {
+  .pwi-card-quotas-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pwi-quota-col {
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pwi-quota-col-head {
+  font-size: 11px;
+  font-weight: 800;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-soft);
+  padding-bottom: 4px;
+}
+
+.pwi-brand-badge-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 700;
+  color: var(--text);
+  font-size: 11.5px;
+  letter-spacing: 0.2px;
+  text-transform: none;
+}
+
+.pwi-brand-dot {
+  font-size: 8px;
+  line-height: 1;
+}
+.pwi-brand-dot.blue { color: var(--blue); }
+.pwi-brand-dot.orange { color: var(--orange); }
+
+.pwi-headroom-pill {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 7px;
+  border-radius: var(--radius-pill);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+
+.pwi-headroom-pill.ok {
+  background: var(--green-soft);
+  color: var(--green);
+}
+
+.pwi-headroom-pill.warn {
+  background: var(--amber-soft);
+  color: var(--amber);
+}
+
+.pwi-headroom-pill-mini {
+  font-size: 10px;
+  font-weight: 700;
+  padding: 1px 6px;
+  border-radius: var(--radius-pill);
+  text-transform: none;
+  font-variant-numeric: tabular-nums;
+}
+.pwi-headroom-pill-mini.ok {
+  background: var(--green-soft);
+  color: var(--green);
+}
+.pwi-headroom-pill-mini.warn {
+  background: var(--amber-soft);
+  color: var(--amber);
+}
+
+.pwi-quota-item {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+
+.pwi-quota-item-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.pwi-quota-title {
+  color: var(--text);
+  font-weight: 500;
+  font-size: 11px;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.pwi-quota-reset {
+  color: var(--muted);
+  font-size: 10px;
+  margin-left: auto;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pwi-quota-track {
+  height: 5px;
+  background: var(--surface);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.pwi-quota-fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--green);
+  transition: width 0.2s ease;
+}
+
+.pwi-fill-warn {
+  background: var(--amber);
+}
+
+.pwi-quota-item-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 3px;
+  min-width: 0;
+}
+
+.pwi-quota-title {
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.pwi-quota-reset {
+  font-size: 10.5px;
+  color: var(--muted);
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.pwi-quota-item-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  font-size: 10.5px;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.pwi-quota-used {
+  color: var(--muted);
+  white-space: nowrap;
+}
+
+.pwi-quota-free {
+  color: var(--green);
+  font-weight: 600;
+  white-space: nowrap;
+  margin-left: auto;
+}
+
+/* One-click copy button & badge */
+.pwi-copy-mini-btn {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--muted);
+  padding: 2px 4px;
+  border-radius: var(--radius-2xs);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color var(--motion-fast), background var(--motion-fast);
+}
+
+.pwi-copy-mini-btn:hover {
+  color: var(--text);
+  background: var(--hover);
+}
+
+.pwi-copied-mini-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--green);
+  background: var(--green-soft);
+  padding: 1px 5px;
+  border-radius: var(--radius-pill);
+  animation: pwi-fade-in 0.15s ease-out;
+}
+
+/* Active account pulsating green dot */
+.pwi-auth-dot--active-pulse {
+  box-shadow: 0 0 0 0 var(--green);
+  animation: pwi-dot-pulse 2s infinite cubic-bezier(0.66, 0, 0, 1);
+}
+
+@keyframes pwi-dot-pulse {
+  to {
+    box-shadow: 0 0 0 7px transparent;
+  }
+}
+
+/* 4. Dense Compact Card Layout (2-Column on wide screens, 1-Column when cramped) */
+.compact-dense-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+@container provider-workspace (max-width: 820px) {
+  .compact-dense-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 960px) {
+  .compact-dense-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pwi-card-dense {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  padding: 10px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  transition: border-color var(--motion-fast);
+}
+
+.pwi-card-dense:hover {
+  border-color: var(--border);
+}
+
+.pwi-card-dense--active {
+  border-color: color-mix(in srgb, var(--green) 50%, var(--border));
+  background: linear-gradient(180deg, var(--green-soft) 0%, var(--surface) 100%);
+}
+
+.pwi-dense-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--space-2);
+  flex-wrap: wrap;
+}
+
+.pwi-dense-id-group {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  flex: 1 1 auto;
+  position: relative;
+}
+
+.pwi-dense-select-btn {
+  appearance: none;
+  background: transparent;
+  border: none;
+  padding: 2px 4px;
+  border-radius: var(--radius-2xs);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  cursor: pointer;
+  color: inherit;
+  min-width: 0;
+  flex: 1 1 auto;
+  text-align: left;
+  transition: background var(--motion-fast);
+}
+
+.pwi-dense-select-btn:hover:not(:disabled) {
+  background: var(--hover);
+}
+
+.pwi-dense-select-btn:disabled {
+  cursor: default;
+}
+
+.pwi-dense-click-target-fill {
+  flex: 1 1 auto;
+  min-width: 20px;
+  height: 100%;
+}
+
+.pwi-dense-select-btn:disabled {
+  cursor: default;
+}
+
+.pwi-dense-title {
+  font-size: 13.5px;
+  font-weight: 700;
+  color: var(--text);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pwi-dense-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+.pwi-dense-bars-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+  background: var(--raised);
+  padding: 6px 10px;
+  border-radius: var(--radius-2xs);
+  border: 1px solid var(--border-soft);
+}
+
+@media (max-width: 480px) {
+  .pwi-dense-bars-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.pwi-dense-col {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.pwi-dense-col-title {
+  font-size: 10.5px;
+  font-weight: 800;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-soft);
+  padding-bottom: 2px;
+}
+
+.pwi-dense-mini-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.pwi-dense-mini-label {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--space-2);
+  font-size: 10px;
+  color: var(--muted);
+}
+
+.pwi-dense-window-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pwi-dense-reset-time {
+  margin-left: auto;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pwi-dense-mini-track {
+  height: 4px;
+  background: var(--surface);
+  border-radius: var(--radius-pill);
+  overflow: hidden;
+}
+
+.pwi-dense-mini-fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--green);
+}
+
+.pwi-cockpit-card {
+  background: var(--glass-rail);
+  backdrop-filter: var(--glass-blur);
+  -webkit-backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--border, #2e2e36);
+  border-radius: var(--radius-md, 12px);
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin: 10px 0;
+  transition: border-color var(--motion-fast, 0.15s ease);
+}
+.pwi-cockpit-card:hover {
+  border-color: var(--border-hover, #3c3c46);
+}
+.pwi-cockpit-card-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.pwi-cockpit-card-brand {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.pwi-cockpit-card-icon {
+  width: 42px;
+  height: 42px;
+  border-radius: 9px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  flex-shrink: 0;
+  object-fit: contain;
+}
+.pwi-cockpit-card-titles {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.pwi-cockpit-card-title {
+  font-size: var(--text-base, 15px);
+  font-weight: 600;
+  color: var(--text, #ffffff);
+  line-height: 1.2;
+}
+.pwi-cockpit-card-subtitle {
+  font-size: var(--text-xs, 12px);
+  color: var(--muted, #8f93a4);
+  line-height: 1.3;
+}
+.pwi-cockpit-card-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.pwi-cockpit-card-divider {
+  height: 1px;
+  background: var(--border-subtle, #25252d);
+  width: 100%;
+}
+.pwi-cockpit-card-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: var(--text-xs, 12px);
+  color: var(--faint, #7d8194);
+}
+.pwi-cockpit-card-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #30d158;
+  flex-shrink: 0;
+}
+.pwi-cockpit-card-manual {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin-top: 4px;
+}
+.pwi-cockpit-card-textarea {
+  width: 100%;
+  box-sizing: border-box;
+  font-family: var(--font-mono, monospace);
+  font-size: var(--text-xs, 12px);
+  resize: vertical;
+  min-height: 72px;
+  padding: 8px 10px;
+  border-radius: var(--radius-sm, 6px);
+  border: 1px solid var(--border, #333);
+  background: var(--bg-surface, #141416);
+  color: var(--text, #fff);
+}
+.pwi-cockpit-card-textarea:focus {
+  outline: 2px solid var(--accent-ring, #fff);
+  outline-offset: 1px;
+}
+.pwi-cockpit-card-manual-actions {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
diff --git a/gui/src/styles/provider-workspace-shell.css b/gui/src/styles/provider-workspace-shell.css
index 45f9b4d16b..15e28a8620 100644
--- a/gui/src/styles/provider-workspace-shell.css
+++ b/gui/src/styles/provider-workspace-shell.css
@@ -1153,3 +1153,147 @@
     gap: 16px;
   }
 }
+
+
+/* Collapsed Rail (Icon-Only Mode) */
+.pws-root.pws-root--rail-collapsed {
+  grid-template-columns: 58px minmax(0, 1fr) !important;
+  transition: grid-template-columns var(--motion-fast) ease;
+}
+
+.pws-rail.pws-rail--collapsed {
+  width: 58px;
+  padding-right: 0;
+  align-items: center;
+  overflow: visible;
+}
+
+.pws-rail-collapsed-head {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  padding-bottom: var(--space-2);
+}
+
+.pws-rail-toggle-btn {
+  appearance: none;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--muted);
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-xs);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all var(--motion-fast);
+}
+
+.pws-rail-toggle-btn:hover {
+  color: var(--text);
+  border-color: var(--border-soft);
+  background: var(--raised);
+}
+
+.pws-rail--collapsed .pws-rail-group-head {
+  display: none;
+}
+
+.pws-rail--collapsed .providers-workspace-rail-copy,
+.pws-rail--collapsed .pws-rail-row-remove {
+  display: none;
+}
+
+.pws-rail--collapsed .pws-rail-group {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.pws-rail--collapsed .pws-rail-row-wrap {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.pws-rail--collapsed .pws-rail-row-wrap > button {
+  width: 44px;
+  height: 44px;
+  min-height: 44px;
+  padding: 0;
+  margin: 2px auto;
+  border-radius: var(--radius-xs);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.pws-rail--collapsed .providers-workspace-rail-icon {
+  margin: 0;
+}
+
+.pws-rail--collapsed .providers-workspace-rail-trail {
+  position: absolute;
+  right: 4px;
+  bottom: 4px;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+}
+
+.pws-rail--collapsed .pwi-default-star {
+  display: none;
+}
+
+
+/* On mobile (<=768px), collapsed rail is a clean horizontal icon bar, never a left-docked column */
+@media (max-width: 768px) {
+  .pws-root.pws-root--rail-collapsed {
+    grid-template-columns: 1fr !important;
+  }
+
+  .pws-rail.pws-rail--collapsed {
+    width: 100% !important;
+    border-right: none !important;
+    border-bottom: 1px solid var(--border) !important;
+    padding: 6px 8px !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    gap: 8px !important;
+    overflow-x: auto !important;
+    max-height: none !important;
+  }
+
+  .pws-rail--collapsed .pws-rail-collapsed-head {
+    width: auto !important;
+    padding-bottom: 0 !important;
+    flex-shrink: 0 !important;
+  }
+
+  .pws-rail--collapsed .pws-rail-list {
+    display: flex !important;
+    flex-direction: row !important;
+    align-items: center !important;
+    gap: 6px !important;
+    overflow-x: auto !important;
+    width: auto !important;
+    flex: 1 1 auto !important;
+  }
+
+  .pws-rail--collapsed .pws-rail-group {
+    flex-direction: row !important;
+    width: auto !important;
+    gap: 6px !important;
+  }
+
+  .pws-rail--collapsed .pws-rail-row-wrap {
+    width: auto !important;
+  }
+}
diff --git a/gui/src/styles/sidebar-collapsed.css b/gui/src/styles/sidebar-collapsed.css
new file mode 100644
index 0000000000..ccfad8a5e7
--- /dev/null
+++ b/gui/src/styles/sidebar-collapsed.css
@@ -0,0 +1,144 @@
+/* Collapsed Global Sidebar (Desktop Icon-Only Mode) */
+@media (min-width: 761px) {
+  .app.app--sidebar-collapsed {
+    grid-template-columns: 68px 1fr;
+    transition: grid-template-columns var(--motion-fast) ease;
+  }
+
+  .sidebar.sidebar--collapsed {
+    width: 68px;
+    padding: 16px 8px;
+    align-items: center;
+  }
+
+  .sidebar.sidebar--collapsed .brand {
+    justify-content: center;
+    padding: 6px 0 14px;
+  }
+
+  .sidebar.sidebar--collapsed .brand .name,
+  .sidebar.sidebar--collapsed .brand .ver {
+    display: none;
+  }
+
+  .sidebar.sidebar--collapsed nav {
+    align-items: center;
+  }
+
+  .sidebar.sidebar--collapsed .nav-entry {
+    justify-content: center;
+    width: 100%;
+  }
+
+  .sidebar.sidebar--collapsed .nav-item {
+    justify-content: center;
+    padding: 10px 0;
+    width: 44px;
+    height: 44px;
+    margin: 2px auto;
+  }
+
+  .sidebar.sidebar--collapsed .nav-item .nav-item-text {
+    display: none;
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-foot {
+    align-items: center;
+    width: 100%;
+  }
+
+  .sidebar.sidebar--collapsed .lang-toggle {
+    justify-content: center;
+    padding: 8px 0;
+    width: 44px;
+    height: 44px;
+    margin: 2px auto;
+    position: relative;
+  }
+
+  .sidebar.sidebar--collapsed .lang-toggle .custom-select {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+    opacity: 0 !important;
+  }
+
+  .sidebar.sidebar--collapsed .lang-toggle .select-trigger {
+    width: 100% !important;
+    height: 100% !important;
+    padding: 0 !important;
+    cursor: pointer !important;
+  }
+
+  .sidebar.sidebar--collapsed .lang-toggle .select-trigger > span,
+  .sidebar.sidebar--collapsed .lang-toggle .select-trigger > svg {
+    display: none !important;
+  }
+
+  .sidebar.sidebar--collapsed .theme-toggle {
+    justify-content: center;
+    padding: 8px 0;
+    width: 44px;
+  }
+
+  .sidebar.sidebar--collapsed .theme-toggle .mode {
+    display: none;
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-action-row {
+    flex-direction: column;
+    align-items: center;
+    gap: 6px;
+    padding-top: 6px;
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-action-label {
+    display: none;
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-action-orbs {
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-github-row {
+    display: none;
+  }
+
+  .sidebar-collapse-toggle-btn {
+    appearance: none;
+    background: transparent;
+    border: 1px solid var(--border);
+    color: var(--muted);
+    width: 26px;
+    height: 26px;
+    border-radius: var(--radius-xs);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 10px;
+    flex-shrink: 0;
+    transition: all var(--motion-fast);
+    margin-top: 4px;
+  }
+
+  .sidebar-collapse-toggle-btn:hover {
+    color: var(--text);
+    border-color: var(--border-soft);
+    background: var(--raised);
+  }
+
+  .sidebar.sidebar--collapsed .drawer-head {
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+@media (max-width: 760px) {
+  .sidebar-collapse-toggle-btn {
+    display: none;
+  }
+}
diff --git a/gui/tests/locale-parity.test.ts b/gui/tests/locale-parity.test.ts
index cc602a8a9c..cecdb64b68 100644
--- a/gui/tests/locale-parity.test.ts
+++ b/gui/tests/locale-parity.test.ts
@@ -42,6 +42,7 @@ const ZH_TW_KEEP_ENGLISH: ReadonlySet<string> = new Set([
   "api.responsesEndpoint",
   // Provider proper nouns (Taiwan keeps the English brand; "火山方舟" is Mainland usage)
   "provider.name.volcengine",
+  "pws.cockpitCardTitle",
   // A literal filename, not prose: AGENTS.md is the file Codex reads from the
   // working directory, and Taiwan renders it the same way every other locale does.
   "codexSet.layer.agents-md",
@@ -177,6 +178,13 @@ const ZH_TW_KEEP_ENGLISH: ReadonlySet<string> = new Set([
   "integrations.cursor.title",
   "integrations.cursor.privateInference",
   "integrations.cursor.baseUrl",
+  "integrations.tab.cline",
+  "api.clientConfig.clientCline",
+  "pws.geminiExhaustedShort",
+  "pws.claudeExhaustedShort",
+  "pws.modelGemini",
+  "pws.modelClaude",
+  "pws.titleMaskedLogin",
   // Cost cells are a fixed `$0.1401` / `≥$0.1401` in every locale (the column header is the
   // untranslated `~$`); the templates are pure placeholders on purpose.
   "logs.cost.approximate",
diff --git a/gui/tests/provider-account-import.test.tsx b/gui/tests/provider-account-import.test.tsx
index 23cc245202..a9b20ce3dd 100644
--- a/gui/tests/provider-account-import.test.tsx
+++ b/gui/tests/provider-account-import.test.tsx
@@ -3,7 +3,7 @@ import { Window } from "happy-dom";
 import { act } from "react";
 import type { Root } from "react-dom/client";
 import { LanguageProvider } from "../src/i18n/provider";
-import ProviderAuthPanel from "../src/components/provider-workspace/ProviderAuthPanel";
+import CockpitToolsCard from "../src/components/provider-workspace/CockpitToolsCard";
 import type { WorkspaceItem } from "../src/provider-workspace/catalog";
 import type { ProviderAuthHandlers } from "../src/components/provider-workspace/types";
 
@@ -60,7 +60,11 @@ async function mount() {
   const { createRoot } = await import("react-dom/client");
   await act(async () => {
     root = createRoot(host);
-    root.render(<LanguageProvider><ProviderAuthPanel item={ITEM} apiBase="/proxy" authHandlers={handlers()} /></LanguageProvider>);
+    root.render(
+      <LanguageProvider>
+        <CockpitToolsCard apiBase="/proxy" onImportSuccess={() => retryAccounts("google-antigravity")} />
+      </LanguageProvider>
+    );
   });
 }
 
@@ -196,3 +200,121 @@ test("rejects contradictory status/code pairs without exposing backend codes or
     expect(retryAccounts).not.toHaveBeenCalled();
   }
 });
+
+test("imports account from clipboard and never renders canary token", async () => {
+  const readText = mock(async () => JSON.stringify([{ email: "clipboard@example.test", refresh_token: CANARY }]));
+  Object.defineProperty(win.navigator, "clipboard", {
+    configurable: true,
+    value: { readText },
+  });
+
+  await mount();
+  const clipboardBtn = host.querySelector("#cockpit-import-clipboard-btn");
+  expect(clipboardBtn).toBeTruthy();
+
+  await act(async () => {
+    clipboardBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  expect(readText).toHaveBeenCalledTimes(1);
+  expect(fetchMock).toHaveBeenCalledTimes(1);
+  const [url, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+  expect(url).toBe("/proxy/api/oauth/accounts/import");
+  expect(JSON.parse(String(init.body))).toEqual({
+    provider: "google-antigravity", format: "cockpit-tools",
+    document: [{ email: "clipboard@example.test", refresh_token: CANARY }],
+  });
+  expect(retryAccounts).toHaveBeenCalledWith("google-antigravity");
+  expect(host.textContent).toContain("Import complete: 1 imported, 0 updated, 0 failed, 0 unsupported.");
+  expect(host.textContent).not.toContain(CANARY);
+});
+
+test("normalizes a single object from clipboard into an array", async () => {
+  const readText = mock(async () => JSON.stringify({ email: "single@example.test", refresh_token: CANARY }));
+  Object.defineProperty(win.navigator, "clipboard", {
+    configurable: true,
+    value: { readText },
+  });
+
+  await mount();
+  const clipboardBtn = host.querySelector("#cockpit-import-clipboard-btn");
+  await act(async () => {
+    clipboardBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  expect(fetchMock).toHaveBeenCalledTimes(1);
+  const [, init] = fetchMock.mock.calls[0] as [string, RequestInit];
+  expect(JSON.parse(String(init.body))).toEqual({
+    provider: "google-antigravity", format: "cockpit-tools",
+    document: [{ email: "single@example.test", refresh_token: CANARY }],
+  });
+});
+
+test("falls back to manual paste textarea when clipboard read fails, then imports successfully", async () => {
+  const readText = mock(async () => { throw new Error("Permission denied"); });
+  Object.defineProperty(win.navigator, "clipboard", {
+    configurable: true,
+    value: { readText },
+  });
+
+  await mount();
+  const clipboardBtn = host.querySelector("#cockpit-import-clipboard-btn");
+  await act(async () => {
+    clipboardBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  const textarea = host.querySelector("#cockpit-import-manual-text") as HTMLTextAreaElement;
+  expect(textarea).toBeTruthy();
+  const submitBtn = host.querySelector("#cockpit-import-submit-btn");
+  expect(submitBtn).toBeTruthy();
+
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(win.HTMLTextAreaElement.prototype, "value")!
+      .set!.call(textarea, JSON.stringify([{ email: "manual@example.test", refresh_token: CANARY }]));
+    textarea.dispatchEvent(new win.Event("input", { bubbles: true }));
+  });
+
+  await act(async () => {
+    submitBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  expect(fetchMock).toHaveBeenCalledTimes(1);
+  expect(host.textContent).toContain("Import complete: 1 imported, 0 updated, 0 failed, 0 unsupported.");
+  expect(host.textContent).not.toContain(CANARY);
+});
+
+test("toggles manual paste textarea directly and imports account", async () => {
+  await mount();
+  const manualBtn = host.querySelector("#cockpit-import-manual-btn");
+  expect(manualBtn).toBeTruthy();
+  expect(host.querySelector("#cockpit-import-manual-text")).toBeFalsy();
+
+  await act(async () => {
+    manualBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  const textarea = host.querySelector("#cockpit-import-manual-text") as HTMLTextAreaElement;
+  expect(textarea).toBeTruthy();
+
+  await act(async () => {
+    Object.getOwnPropertyDescriptor(win.HTMLTextAreaElement.prototype, "value")!
+      .set!.call(textarea, JSON.stringify([{ email: "toggle@example.test", refresh_token: CANARY }]));
+    textarea.dispatchEvent(new win.Event("input", { bubbles: true }));
+  });
+
+  const submitBtn = host.querySelector("#cockpit-import-submit-btn");
+  await act(async () => {
+    submitBtn?.dispatchEvent(new win.Event("click", { bubbles: true }));
+    await new Promise(resolve => setTimeout(resolve, 0));
+  });
+
+  expect(fetchMock).toHaveBeenCalledTimes(1);
+  expect(host.textContent).toContain("Import complete: 1 imported, 0 updated, 0 failed, 0 unsupported.");
+  expect(host.textContent).not.toContain(CANARY);
+  expect(host.querySelector("#cockpit-import-manual-text")).toBeFalsy();
+});
diff --git a/scripts/test-layout/layout.json b/scripts/test-layout/layout.json
index 885d2abcd4..9f8dd7e9ea 100644
--- a/scripts/test-layout/layout.json
+++ b/scripts/test-layout/layout.json
@@ -1456,7 +1456,8 @@
     "execution-budget-permits.test.ts": "lib",
     "spend-instrumentation-log.test.ts": "server",
     "codex-pool-refresh-backoff.test.ts": "codex-integration",
-    "responses-account-change-scrub.test.ts": "responses"
+    "responses-account-change-scrub.test.ts": "responses",
+    "gui-account-quota-analysis.test.ts": "gui"
   },
   "migrated": [
     "adapters",
diff --git a/tests/fixtures/test-layout-expected.json b/tests/fixtures/test-layout-expected.json
index d2eb5d244b..902afe3214 100644
--- a/tests/fixtures/test-layout-expected.json
+++ b/tests/fixtures/test-layout-expected.json
@@ -1288,5 +1288,6 @@
   "execution-budget-permits.test.ts": "lib",
   "spend-instrumentation-log.test.ts": "server",
   "codex-pool-refresh-backoff.test.ts": "codex-integration",
-  "responses-account-change-scrub.test.ts": "responses"
+  "responses-account-change-scrub.test.ts": "responses",
+  "gui-account-quota-analysis.test.ts": "gui"
 }
diff --git a/tests/gui/gui-account-quota-analysis.test.ts b/tests/gui/gui-account-quota-analysis.test.ts
new file mode 100644
index 0000000000..57791a39f3
--- /dev/null
+++ b/tests/gui/gui-account-quota-analysis.test.ts
@@ -0,0 +1,232 @@
+import { describe, expect, test } from "bun:test";
+import {
+  analyzeAccountQuota,
+  extractMaskedLogin,
+  extractEmailLogin,
+  filterAccounts,
+  sortAccounts,
+  type AccountFilterKey,
+} from "../../gui/src/components/provider-workspace/account-quota-analysis";
+import type { OAuthAccountRow } from "../../gui/src/components/provider-workspace/types";
+
+describe("account-quota-analysis", () => {
+  test("extractMaskedLogin formats masked username with asterisks", () => {
+    expect(extractMaskedLogin("z***2@example.com")).toBe("z***2");
+    expect(extractMaskedLogin(undefined, "testuser26@example.com")).toBe("t***6");
+    expect(extractMaskedLogin(undefined, undefined, "alphauser@example.com")).toBe("a***r");
+  });
+
+  test("extractEmailLogin strips @domain and keeps username", () => {
+    expect(extractEmailLogin("g***1@example.com")).toBe("g***1");
+    expect(extractEmailLogin("alphauser@example.com")).toBe("alphauser");
+    expect(extractEmailLogin("admin@example.com")).toBe("admin");
+    expect(extractEmailLogin("z***2@example.com")).toBe("z***2");
+    expect(extractEmailLogin(undefined, "my-alias")).toBe("my-alias");
+    expect(extractEmailLogin("", "only-alias")).toBe("only-alias");
+    expect(extractEmailLogin(undefined, undefined, "account-12345678")).toBe("account-…5678");
+  });
+
+  const makeAccount = (
+    id: string,
+    email: string,
+    customWindows: { label: string; percent: number; resetAt?: number }[],
+    active = false,
+  ): OAuthAccountRow => ({
+    id,
+    email,
+    active,
+    quotaMode: "probe",
+    quota: {
+      updatedAt: Date.now(),
+      customWindows,
+    },
+  });
+
+  test("analyzeAccountQuota extracts both 5h and weekly windows for Gemini and Claude", () => {
+    const acc = makeAccount("acc-1", "user1@example.com", [
+      { label: "Gem", percent: 0, resetAt: 1700000000 },
+      { label: "Gem (Weekly)", percent: 51, resetAt: 1700500000 },
+      { label: "Cla", percent: 0, resetAt: 1700000000 },
+      { label: "Cla (Weekly)", percent: 6, resetAt: 1700600000 },
+    ]);
+
+    const analyzed = analyzeAccountQuota(acc);
+    expect(analyzed.emailLogin).toBe("user1");
+    expect(analyzed.gemini5h?.percent).toBe(0);
+    expect(analyzed.geminiWeekly?.percent).toBe(51);
+    expect(analyzed.claude5h?.percent).toBe(0);
+    expect(analyzed.claudeWeekly?.percent).toBe(6);
+    expect(analyzed.geminiUsedMax).toBe(51);
+    expect(analyzed.claudeUsedMax).toBe(6);
+    expect(analyzed.overallUsedMax).toBe(51);
+    expect(analyzed.freeHeadroom).toBe(49);
+    expect(analyzed.readinessStatus).toBe("both_ready");
+    expect(analyzed.hasAnyLimitsLeft).toBe(true);
+  });
+
+  test("detects when Gemini is exhausted but Claude is available", () => {
+    const acc = makeAccount("acc-gem-exhausted", "z***s@example.com", [
+      { label: "Gem", percent: 0 },
+      { label: "Gem (Weekly)", percent: 100 },
+      { label: "Cla", percent: 0 },
+      { label: "Cla (Weekly)", percent: 0 },
+    ]);
+
+    const analyzed = analyzeAccountQuota(acc);
+    expect(analyzed.geminiExhausted).toBe(true);
+    expect(analyzed.claudeExhausted).toBe(false);
+    expect(analyzed.readinessStatus).toBe("claude_only");
+    expect(analyzed.hasAnyLimitsLeft).toBe(true);
+    expect(analyzed.fullyExhausted).toBe(false);
+  });
+
+  test("detects when Claude is exhausted but Gemini is available", () => {
+    const acc = makeAccount("acc-cla-exhausted", "d***0@example.com", [
+      { label: "Gem", percent: 0 },
+      { label: "Gem (Weekly)", percent: 0 },
+      { label: "Cla", percent: 0 },
+      { label: "Cla (Weekly)", percent: 100 },
+    ]);
+
+    const analyzed = analyzeAccountQuota(acc);
+    expect(analyzed.geminiExhausted).toBe(false);
+    expect(analyzed.claudeExhausted).toBe(true);
+    expect(analyzed.readinessStatus).toBe("gemini_only");
+    expect(analyzed.hasAnyLimitsLeft).toBe(true);
+    expect(analyzed.fullyExhausted).toBe(false);
+  });
+
+  test("detects when 5-hour window is exhausted", () => {
+    const acc = makeAccount("acc-5h-exhausted", "fast-user@example.com", [
+      { label: "Gem", percent: 100 },
+      { label: "Gem (Weekly)", percent: 20 },
+      { label: "Cla", percent: 0 },
+      { label: "Cla (Weekly)", percent: 0 },
+    ]);
+
+    const analyzed = analyzeAccountQuota(acc);
+    expect(analyzed.geminiExhausted).toBe(true);
+    expect(analyzed.readinessStatus).toBe("claude_only");
+  });
+
+  test("detects fully exhausted account when both Gemini and Claude are 100%", () => {
+    const acc = makeAccount("acc-both-exhausted", "spent@example.com", [
+      { label: "Gem", percent: 100 },
+      { label: "Gem (Weekly)", percent: 100 },
+      { label: "Cla", percent: 100 },
+      { label: "Cla (Weekly)", percent: 100 },
+    ]);
+
+    const analyzed = analyzeAccountQuota(acc);
+    expect(analyzed.geminiExhausted).toBe(true);
+    expect(analyzed.claudeExhausted).toBe(true);
+    expect(analyzed.fullyExhausted).toBe(true);
+    expect(analyzed.hasAnyLimitsLeft).toBe(false);
+    expect(analyzed.readinessStatus).toBe("fully_exhausted");
+  });
+
+  test("filterAccounts respects model-specific filters and with_limits default", () => {
+    const a1 = analyzeAccountQuota(makeAccount("a1", "both@example.com", [
+      { label: "Gem", percent: 10 }, { label: "Cla", percent: 20 },
+    ]));
+    const a2 = analyzeAccountQuota(makeAccount("a2", "cla-only@example.com", [
+      { label: "Gem", percent: 100 }, { label: "Cla", percent: 0 },
+    ]));
+    const a3 = analyzeAccountQuota(makeAccount("a3", "gem-only@example.com", [
+      { label: "Gem", percent: 0 }, { label: "Cla", percent: 100 },
+    ]));
+    const a4 = analyzeAccountQuota(makeAccount("a4", "dead@example.com", [
+      { label: "Gem", percent: 100 }, { label: "Cla", percent: 100 },
+    ]));
+
+    const pool = [a1, a2, a3, a4];
+
+    // with_limits (default): includes a1, a2, a3 (has some limit left) and excludes a4
+    expect(filterAccounts(pool, "with_limits", "").map(x => x.emailLogin)).toEqual(["both", "cla-only", "gem-only"]);
+
+    // with_limits_gemini: only accounts where Gemini is not exhausted
+    expect(filterAccounts(pool, "with_limits_gemini", "").map(x => x.emailLogin)).toEqual(["both", "gem-only"]);
+
+    // with_limits_claude: only accounts where Claude is not exhausted
+    expect(filterAccounts(pool, "with_limits_claude", "").map(x => x.emailLogin)).toEqual(["both", "cla-only"]);
+
+    // all: includes all 4
+    expect(filterAccounts(pool, "all", "").map(x => x.emailLogin)).toEqual(["both", "cla-only", "gem-only", "dead"]);
+
+    // gemini_exhausted: a2 and a4
+    expect(filterAccounts(pool, "gemini_exhausted", "").map(x => x.emailLogin)).toEqual(["cla-only", "dead"]);
+
+    // claude_exhausted: a3 and a4
+    expect(filterAccounts(pool, "claude_exhausted", "").map(x => x.emailLogin)).toEqual(["gem-only", "dead"]);
+
+    // fully_exhausted: only a4
+    expect(filterAccounts(pool, "fully_exhausted", "").map(x => x.emailLogin)).toEqual(["dead"]);
+
+    // search query filter
+    expect(filterAccounts(pool, "all", "cla-only").map(x => x.emailLogin)).toEqual(["cla-only"]);
+  });
+
+  test("sortAccounts sorts by headroom and active status", () => {
+    const a1 = analyzeAccountQuota(makeAccount("a1", "low-free@example.com", [{ label: "Gem", percent: 80 }]));
+    const a2 = analyzeAccountQuota(makeAccount("a2", "high-free@example.com", [{ label: "Gem", percent: 10 }]));
+    const a3 = analyzeAccountQuota(makeAccount("a3", "full-free@example.com", [{ label: "Gem", percent: 0 }]));
+
+    const sorted = sortAccounts([a1, a2, a3], "more_headroom");
+    expect(sorted.map(x => x.emailLogin)).toEqual(["full-free", "high-free", "low-free"]);
+
+    const sortedAsc = sortAccounts([a1, a2, a3], "less_headroom");
+    expect(sortedAsc.map(x => x.emailLogin)).toEqual(["low-free", "high-free", "full-free"]);
+  });
+
+  test("sortAccounts supports simplified 4 options with smart filter context and 5h/7d reset", () => {
+    const acc1 = analyzeAccountQuota({
+      id: "a1", email: "gem-full@example.com", active: false, quotaMode: "probe",
+      quota: { updatedAt: 1, customWindows: [
+        { label: "Gem", percent: 0, resetAt: 2000 },
+        { label: "Gem (Weekly)", percent: 20, resetAt: 5000 },
+        { label: "Cla", percent: 100, resetAt: 1000 },
+        { label: "Cla (Weekly)", percent: 100, resetAt: 9000 }
+      ] },
+    });
+    const acc2 = analyzeAccountQuota({
+      id: "a2", email: "cla-full@example.com", active: false, quotaMode: "probe",
+      quota: { updatedAt: 1, customWindows: [
+        { label: "Gem", percent: 100, resetAt: 1500 },
+        { label: "Gem (Weekly)", percent: 100, resetAt: 8000 },
+        { label: "Cla", percent: 0, resetAt: 3000 },
+        { label: "Cla (Weekly)", percent: 0, resetAt: 4000 }
+      ] },
+    });
+
+    // When Gemini filter is active, more_headroom ranks by Gemini
+    const byGemini = sortAccounts([acc1, acc2], "more_headroom", "with_limits_gemini");
+    expect(byGemini[0].emailLogin).toBe("gem-full");
+
+    // When Claude filter is active, more_headroom ranks by Claude
+    const byClaude = sortAccounts([acc1, acc2], "more_headroom", "with_limits_claude");
+    expect(byClaude[0].emailLogin).toBe("cla-full");
+
+    // 5-hour reset soonest: acc1 (1000) vs acc2 (1500)
+    const by5h = sortAccounts([acc1, acc2], "reset_5h_soonest");
+    expect(by5h[0].emailLogin).toBe("gem-full");
+
+    // 7-day reset soonest: acc1 (5000) vs acc2 (4000)
+    const by7d = sortAccounts([acc1, acc2], "reset_7d_soonest");
+    expect(by7d[0].emailLogin).toBe("cla-full");
+  });
+  test("xai weekly quota stays generic and is not treated as Antigravity families", () => {
+    const analyzed = analyzeAccountQuota({
+      id: "xai-1",
+      email: "grok@example.com",
+      active: true,
+      quotaMode: "probe",
+      quota: { weeklyPercent: 10, weeklyResetAt: 1_800_000_000 },
+    }, "xai");
+    expect(analyzed.isAntigravity).toBe(false);
+    expect(analyzed.genericWeekly?.percent).toBe(10);
+    expect(analyzed.gemini5h).toBeUndefined();
+    expect(analyzed.claude5h).toBeUndefined();
+    expect(analyzed.readinessStatus).toBe("ready");
+    expect(analyzed.hasAnyLimitsLeft).toBe(true);
+  });
+});