feat(gui): redesign provider accounts workspace with adaptive grid, collapsible rails, and quota controls

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>
             );

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>
+  );
+}

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}
+    />
+  );
+}