@lastbrain/ai-ui-react 1.0.53 → 1.0.56

package/dist/components/AiPromptPanel.js

@@ -279,7 +279,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             position: "sticky",
                             top: 0,
                             zIndex: 5,
-                            borderBottom: "1px solid var(--ai-border-primary, #374151)",
                             backdropFilter: "blur(8px)",
                         }, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
                                     ...aiStyles.modalCloseButton,
@@ -529,7 +528,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             position: "sticky",
                             bottom: 0,
                             zIndex: 5,
-                            borderTop: "1px solid var(--ai-border-primary, #374151)",
                             backdropFilter: "blur(8px)",
                         }, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
                                     ...aiStyles.button,
@@ -611,30 +609,30 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         alignItems: "center",
                                                         justifyContent: "space-between",
                                                         padding: "16px 18px",
-                                                        border: "2px solid",
-                                                        borderColor: isActive
-                                                            ? "#10b981"
-                                                            : "var(--ai-border-primary, #374151)",
+                                                        // border: "2px solid",
+                                                        // borderColor: isActive
+                                                        //   ? "#10b981"
+                                                        //   : "var(--ai-border-primary, #374151)",
                                                         borderRadius: "10px",
                                                         backgroundColor: isActive
-                                                            ? "rgba(16, 185, 129, 0.08)"
-                                                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.5))",
+                                                            ? "rgba(16, 185, 129, 0.03)"
+                                                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.2))",
                                                         transition: "all 0.2s",
                                                         cursor: "pointer",
                                                         backdropFilter: "blur(8px)",
                                                     }, onClick: () => !isLoading &&
                                                         handleModelToggle(modelData.id, !isActive), onMouseEnter: (e) => {
-                                                        e.currentTarget.style.borderColor = isActive
-                                                            ? "#059669"
-                                                            : "#4b5563";
+                                                        // e.currentTarget.style.borderColor = isActive
+                                                        //   ? "#059669"
+                                                        //   : "#4b5563";
                                                         e.currentTarget.style.transform = "translateY(-2px)";
                                                         e.currentTarget.style.boxShadow = isActive
                                                             ? "0 8px 16px rgba(16, 185, 129, 0.2)"
                                                             : "0 8px 16px rgba(0, 0, 0, 0.15)";
                                                     }, onMouseLeave: (e) => {
-                                                        e.currentTarget.style.borderColor = isActive
-                                                            ? "#10b981"
-                                                            : "var(--ai-border-primary, #374151)";
+                                                        // e.currentTarget.style.borderColor = isActive
+                                                        //   ? "#10b981"
+                                                        //   : "var(--ai-border-primary, #374151)";
                                                         e.currentTarget.style.transform = "translateY(0)";
                                                         e.currentTarget.style.boxShadow = "none";
                                                     }, children: [_jsxs("div", { style: {

package/dist/components/AiStatusButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAoBtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CA8iCrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmBtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CA0iCrB"}

package/dist/components/AiStatusButton.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
-import { BarChart3, Settings, FileText, History as HistoryIcon, FolderPlus, Power, LogOut, Key, ArrowRightLeft, } from "lucide-react";
+import { BarChart3, Settings, FileText, History as HistoryIcon, FolderPlus, Power, LogOut, ArrowRightLeft, } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 import { useLB } from "../context/LBAuthProvider";
 import { useAiContext } from "../context/AiProvider";
@@ -16,7 +16,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
     let apiKeys = [];
     let accessToken;
     let selectApiKeyWithToken;
+    let switchApiKey;
     let lbApiStatus = null;
+    let lbIsLoadingStatus = false;
     try {
         const lbContext = useLB();
         lbStatus = lbContext.status;
@@ -25,7 +27,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         apiKeys = lbContext.apiKeys || [];
         accessToken = lbContext.accessToken;
         selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+        switchApiKey = lbContext.switchApiKey;
         lbApiStatus = lbContext.apiStatus;
+        lbIsLoadingStatus = lbContext.isLoadingStatus || false;
     }
     catch {
         // LBProvider n'est pas disponible, ignorer
@@ -47,6 +51,8 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
     }
     const [showSigninModal, setShowSigninModal] = useState(false);
     const [showApiKeySelector, setShowApiKeySelector] = useState(false);
+    const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
+    const [isLoadingStatus, setIsLoadingStatus] = useState(false);
     const formatNumber = (value) => typeof value === "number" ? value.toLocaleString() : "0";
     const formatFixed = (value, digits) => typeof value === "number" ? value.toFixed(digits) : "0.00";
     const formatStorage = (valueMb) => {
@@ -174,7 +180,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
             }
         }, 100);
     };
-    if (loading) {
+    if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
         return (_jsx("button", { ref: buttonRef, style: {
                 ...aiStyles.statusButton,
                 ...aiStyles.statusButtonDisabled,
@@ -379,9 +385,15 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                                 display: "flex",
                                                 alignItems: "center",
                                                 gap: "8px",
-                                            }, children: [_jsx("span", { style: aiStyles.tooltipValue, children: effectiveStatus.apiKey?.name ||
-                                                        effectiveStatus.api_key?.name ||
-                                                        "Unknown" }), selectApiKeyWithToken && (_jsx("button", { onClick: (e) => {
+                                            }, children: [_jsx("span", { style: aiStyles.tooltipValue, children: lbIsLoadingStatus ? (_jsx("div", { style: {
+                                                            height: "16px",
+                                                            width: "100px",
+                                                            background: "rgba(139, 92, 246, 0.1)",
+                                                            borderRadius: "4px",
+                                                            animation: "pulse 2s ease-in-out infinite",
+                                                        } })) : (effectiveStatus?.apiKey?.name ||
+                                                        effectiveStatus?.api_key?.name ||
+                                                        "Unknown") }), switchApiKey && (_jsx("button", { onClick: (e) => {
                                                         e.stopPropagation();
                                                         setShowTooltip(false);
                                                         setShowApiKeySelector(true);
@@ -509,26 +521,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                         Object.assign(e.currentTarget.style, {
                                             background: "transparent",
                                         });
-                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), selectApiKeyWithToken && apiKeys.length > 1 && (_jsx("button", { onClick: () => setShowApiKeySelector(true), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                        borderRadius: "4px",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "Change API Key", children: _jsx(Key, { size: 18 }) })), logout && (_jsx("button", { onClick: async () => {
+                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), logout && (_jsx("button", { onClick: async () => {
                                         try {
                                             await logout();
                                             setShowTooltip(false);
@@ -559,11 +552,19 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                         Object.assign(e.currentTarget.style, {
                                             background: "transparent",
                                         });
-                                    }, title: "Logout", children: _jsx(LogOut, { size: 18 }) }))] })] }), document.body), showApiKeySelector && selectApiKeyWithToken && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                                    }, title: "Logout", children: _jsx(LogOut, { size: 18 }) }))] })] }), document.body), showApiKeySelector && apiKeys.length > 0 && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                    setIsSelectingApiKey(true);
                     try {
-                        await selectApiKeyWithToken(keyId);
+                        // Utiliser la nouvelle fonction switchApiKey qui gère automatiquement le contexte
+                        if (switchApiKey) {
+                            await switchApiKey(keyId);
+                        }
+                        else {
+                            throw new Error("Switch API key function not available");
+                        }
                         setShowApiKeySelector(false);
                         setShowTooltip(false);
+                        setIsLoadingStatus(true);
                         // Refresh provider data after API key selection
                         if (refetchProviders) {
                             await refetchProviders();
@@ -572,5 +573,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                     catch (error) {
                         console.error("Failed to select API key:", error);
                     }
+                    finally {
+                        setIsSelectingApiKey(false);
+                        setIsLoadingStatus(false);
+                    }
                 }, onCancel: () => setShowApiKeySelector(false) }))] }));
 }

package/dist/components/LBApiKeySelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LBApiKeySelector.d.ts","sourceRoot":"","sources":["../../src/components/LBApiKeySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,qBAAqB,kDAwTvB"}
+{"version":3,"file":"LBApiKeySelector.d.ts","sourceRoot":"","sources":["../../src/components/LBApiKeySelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,MAAM,GACP,EAAE,qBAAqB,kDAyTvB"}

package/dist/components/LBApiKeySelector.js

@@ -41,6 +41,7 @@ export function LBApiKeySelector({ apiKeys, onSelect, onCancel, isOpen, }) {
                     bottom: 0,
                     background: "rgba(0, 0, 0, 0.75)",
                     backdropFilter: "blur(8px)",
+                    height: "110%",
                 } }), _jsxs("div", { style: {
                     position: "relative",
                     background: "light-dark(#ffffff, #1e293b)",

package/dist/components/LBSigninModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,kDAojBpE"}
+{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,kDA8jBpE"}

package/dist/components/LBSigninModal.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
@@ -11,15 +11,19 @@ export function LBSigninModal({ isOpen, onClose }) {
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
     const [showKeySelector, setShowKeySelector] = useState(false);
+    const [currentApiKeys, setCurrentApiKeys] = useState([]); // Stocker les clés API localement
     // Vérifier si LBProvider est disponible
     let login;
     let selectApiKeyWithToken;
+    let fetchApiKeys;
     let apiKeys = [];
     let lbStatus;
+    let lbContext;
     try {
-        const lbContext = useLB();
+        lbContext = useLB();
         login = lbContext.login;
         selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+        fetchApiKeys = lbContext.fetchApiKeys;
         apiKeys = lbContext.apiKeys || [];
         lbStatus = lbContext.status;
     }
@@ -27,12 +31,6 @@ export function LBSigninModal({ isOpen, onClose }) {
         // LBProvider n'est pas disponible, ne pas rendre le modal
         return null;
     }
-    // Si le status est "needs_key_selection", afficher le sélecteur
-    useEffect(() => {
-        if (lbStatus === "needs_key_selection" && apiKeys.length > 0 && !showKeySelector) {
-            setShowKeySelector(true);
-        }
-    }, [lbStatus, apiKeys.length, showKeySelector]);
     if (!isOpen || !login)
         return null;
     const handleSubmit = async (e) => {
@@ -44,7 +42,21 @@ export function LBSigninModal({ isOpen, onClose }) {
             if (result.success) {
                 if (result.needsKeySelection) {
                     // L'utilisateur doit choisir une clé API
-                    setShowKeySelector(true);
+                    // Utiliser l'access token retourné directement par login
+                    if (fetchApiKeys && result.accessToken) {
+                        try {
+                            const keys = await fetchApiKeys(result.accessToken);
+                            setCurrentApiKeys(keys);
+                            setShowKeySelector(true);
+                        }
+                        catch (keyError) {
+                            setError("Erreur lors de la récupération des clés API");
+                            console.error("Failed to fetch API keys:", keyError);
+                        }
+                    }
+                    else {
+                        setError("Token d'accès non disponible");
+                    }
                 }
                 else {
                     // Connexion réussie, fermer le modal
@@ -81,8 +93,8 @@ export function LBSigninModal({ isOpen, onClose }) {
         onClose();
     };
     // Si on doit afficher le sélecteur de clés
-    if (showKeySelector && apiKeys.length > 0) {
-        return (_jsx(LBApiKeySelector, { apiKeys: apiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }));
+    if (showKeySelector && currentApiKeys.length > 0) {
+        return (_jsx(LBApiKeySelector, { apiKeys: currentApiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }));
     }
     const handleKeyDown = (e) => {
         if (e.key === "Escape") {
@@ -307,7 +319,7 @@ export function LBSigninModal({ isOpen, onClose }) {
                                                 fontSize: "14px",
                                                 color: "light-dark(#64748b, #94a3b8)",
                                                 fontWeight: 500,
-                                            }, children: "Pas encore de compte ?" }), _jsxs("a", { href: "https://lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", style: {
+                                            }, children: "Pas encore de compte ?" }), _jsxs("a", { href: "https://prompt.lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", style: {
                                                 display: "inline-flex",
                                                 alignItems: "center",
                                                 gap: "8px",

package/dist/context/LBAuthProvider.d.ts

@@ -21,6 +21,7 @@ interface LBContextValue extends LBAuthState {
         success: boolean;
         error?: string;
         needsKeySelection?: boolean;
+        accessToken?: string;
     }>;
     /** Fonction de déconnexion */
     logout: () => Promise<void>;
@@ -30,6 +31,8 @@ interface LBContextValue extends LBAuthState {
     selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
     /** Sélectionne une clé API avec le token stocké */
     selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
+    /** Change l'API key active (fonctionne avec session ou token) */
+    switchApiKey: (apiKeyId: string) => Promise<void>;
     /** Recharge l'état de la session */
     refreshSession: () => Promise<void>;
     /** Clés API disponibles */
@@ -40,6 +43,8 @@ interface LBContextValue extends LBAuthState {
     apiStatus: AiStatus | null;
     /** Fonction pour rafraîchir le status */
     refreshStatus: () => Promise<void>;
+    /** Indique si le status est en cours de chargement */
+    isLoadingStatus: boolean;
 }
 export declare function LBProvider({ children, baseUrl: _baseUrl, proxyUrl, onStatusChange, onAuthChange, }: LBProviderProps): import("react/jsx-runtime").JSX.Element;
 /**

package/dist/context/LBAuthProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LBAuthProvider.d.ts","sourceRoot":"","sources":["../../src/context/LBAuthProvider.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EAIR,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC,CAAC;IACH,8BAA8B;IAC9B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3D,gEAAgE;IAChE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,oCAAoC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,yCAAyC;IACzC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CAkbjB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}
+{"version":3,"file":"LBAuthProvider.d.ts","sourceRoot":"","sources":["../../src/context/LBAuthProvider.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EAIR,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;QAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC,CAAC;IACH,8BAA8B;IAC9B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3D,gEAAgE;IAChE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,iEAAiE;IACjE,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,oCAAoC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,yCAAyC;IACzC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CA4djB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}

package/dist/context/LBAuthProvider.js

@@ -13,6 +13,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const [apiKeys, setApiKeys] = useState([]);
     const [accessToken, setAccessToken] = useState();
     const [apiStatus, setApiStatus] = useState(null);
+    const [isLoadingStatus, setIsLoadingStatus] = useState(false);
     /**
      * Vérifie si une session existe au chargement
      */
@@ -228,7 +229,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                     status: "needs_key_selection",
                     user: result.user,
                 });
-                return { success: true, needsKeySelection: true };
+                return { success: true, needsKeySelection: true, accessToken: token };
             }
             catch (keyError) {
                 console.error("[LBProvider] Failed to fetch API keys:");
@@ -255,6 +256,36 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             return { success: false, error: message };
         }
     }, [proxyUrl, fetchApiKeys, selectApiKey]);
+    /**
+     * Récupère le status API (balance, storage, API key info)
+     */
+    const refreshStatus = useCallback(async () => {
+        if (state.status !== "ready") {
+            setApiStatus(null);
+            setIsLoadingStatus(false);
+            return;
+        }
+        setIsLoadingStatus(true);
+        try {
+            const response = await fetch(`${proxyUrl}/auth/status`, {
+                credentials: "include",
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setApiStatus(data);
+            }
+            else {
+                setApiStatus(null);
+            }
+        }
+        catch (error) {
+            console.error("[LBProvider] Failed to fetch status:", error);
+            setApiStatus(null);
+        }
+        finally {
+            setIsLoadingStatus(false);
+        }
+    }, [proxyUrl, state.status]);
     /**
      * Sélectionne une clé API avec le token déjà stocké (après login)
      */
@@ -264,6 +295,33 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         }
         await selectApiKey(accessToken, apiKeyId);
     }, [accessToken, selectApiKey]);
+    /**
+     * Change l'API key active - utilise la bonne méthode selon le contexte
+     */
+    const switchApiKey = useCallback(async (apiKeyId) => {
+        if (state.status === "ready") {
+            // Utiliser la route de switch avec session
+            const response = await fetch(`${proxyUrl}/auth/session/switch-api-key`, {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ api_key_id: apiKeyId }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.error || "Failed to switch API key");
+            }
+            // Refresh le status après le changement
+            await refreshStatus();
+        }
+        else if (accessToken) {
+            // Utiliser la méthode avec access token
+            await selectApiKey(accessToken, apiKeyId);
+        }
+        else {
+            throw new Error("No valid authentication method available");
+        }
+    }, [state.status, proxyUrl, accessToken, selectApiKey, refreshStatus]);
     /**
      * Déconnexion
      */
@@ -291,31 +349,6 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const refreshSession = useCallback(async () => {
         await checkSession();
     }, [checkSession]);
-    /**
-     * Récupère le status API (balance, storage, API key info)
-     */
-    const refreshStatus = useCallback(async () => {
-        if (state.status !== "ready") {
-            setApiStatus(null);
-            return;
-        }
-        try {
-            const response = await fetch(`${proxyUrl}/auth/status`, {
-                credentials: "include",
-            });
-            if (response.ok) {
-                const data = await response.json();
-                setApiStatus(data);
-            }
-            else {
-                setApiStatus(null);
-            }
-        }
-        catch (error) {
-            console.error("[LBProvider] Failed to fetch status:", error);
-            setApiStatus(null);
-        }
-    }, [proxyUrl, state.status]);
     /**
      * Récupère les clés API avec la session active
      */
@@ -362,11 +395,13 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         fetchApiKeys,
         selectApiKey,
         selectApiKeyWithToken,
+        switchApiKey,
         refreshSession,
         apiKeys,
         accessToken,
         apiStatus,
         refreshStatus,
+        isLoadingStatus,
     };
     return _jsx(LBContext.Provider, { value: value, children: children });
 }

package/dist/styles/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AAoCF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}

package/dist/styles/inline.js

@@ -489,7 +489,9 @@ export const aiStyles = {
     buttonSecondary: {
         background: themeVars.bgSecondary,
         color: themeVars.text,
-        border: `1px solid ${themeVars.border}`,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: themeVars.border,
     },
     buttonSecondaryHover: {
         background: themeVars.bgTertiary,
@@ -529,6 +531,11 @@ if (typeof document !== "undefined") {
         transform: translateY(0);
       }
     }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   `;
     document.head.appendChild(styleSheet);
 }

package/dist/utils/modelManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAqCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CACR,KAAK,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CACH,CA6CA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CA6CnB"}
+{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAqCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CACR,KAAK,CAAC;IACJ,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC,CACH,CA6CA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CAkDnB"}

package/dist/utils/modelManagement.js

@@ -85,9 +85,15 @@ export async function getUserModels(options = {}) {
                 : `/api/ai/auth/user-models`; // fallback
     console.log("[getUserModels] isExternalProxy:", isExternalProxy, "isPublicApi:", isPublicApi, "endpoint:", endpoint);
     const headers = {};
-    // Ajouter la clé API pour les appels publics directs
-    if (isPublicApi && apiKey) {
-        headers["Authorization"] = `Bearer ${apiKey}`;
+    // Ajouter la clé API pour tous les types d'appels si disponible
+    if (apiKey) {
+        if (isPublicApi) {
+            headers["Authorization"] = `Bearer ${apiKey}`;
+        }
+        else {
+            // Pour les routes auth internes, utiliser aussi le Bearer token si pas de session
+            headers["Authorization"] = `Bearer ${apiKey}`;
+        }
     }
     const response = await fetch(endpoint, {
         method: "GET",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.53",
+  "version": "1.0.56",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.41"
+    "@lastbrain/ai-ui-core": "1.0.43"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiPromptPanel.tsx

@@ -425,7 +425,6 @@ function AiPromptPanelInternal({
             top: 0,
             zIndex: 5,
 
-            borderBottom: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
         >
@@ -1004,7 +1003,6 @@ function AiPromptPanelInternal({
             bottom: 0,
             zIndex: 5,
 
-            borderTop: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
         >
@@ -1183,14 +1181,14 @@ function AiPromptPanelInternal({
                           alignItems: "center",
                           justifyContent: "space-between",
                           padding: "16px 18px",
-                          border: "2px solid",
-                          borderColor: isActive
-                            ? "#10b981"
-                            : "var(--ai-border-primary, #374151)",
+                          // border: "2px solid",
+                          // borderColor: isActive
+                          //   ? "#10b981"
+                          //   : "var(--ai-border-primary, #374151)",
                           borderRadius: "10px",
                           backgroundColor: isActive
-                            ? "rgba(16, 185, 129, 0.08)"
-                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.5))",
+                            ? "rgba(16, 185, 129, 0.03)"
+                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.2))",
                           transition: "all 0.2s",
                           cursor: "pointer",
                           backdropFilter: "blur(8px)",
@@ -1200,18 +1198,18 @@ function AiPromptPanelInternal({
                           handleModelToggle(modelData.id, !isActive)
                         }
                         onMouseEnter={(e) => {
-                          e.currentTarget.style.borderColor = isActive
-                            ? "#059669"
-                            : "#4b5563";
+                          // e.currentTarget.style.borderColor = isActive
+                          //   ? "#059669"
+                          //   : "#4b5563";
                           e.currentTarget.style.transform = "translateY(-2px)";
                           e.currentTarget.style.boxShadow = isActive
                             ? "0 8px 16px rgba(16, 185, 129, 0.2)"
                             : "0 8px 16px rgba(0, 0, 0, 0.15)";
                         }}
                         onMouseLeave={(e) => {
-                          e.currentTarget.style.borderColor = isActive
-                            ? "#10b981"
-                            : "var(--ai-border-primary, #374151)";
+                          // e.currentTarget.style.borderColor = isActive
+                          //   ? "#10b981"
+                          //   : "var(--ai-border-primary, #374151)";
                           e.currentTarget.style.transform = "translateY(0)";
                           e.currentTarget.style.boxShadow = "none";
                         }}

package/src/components/AiStatusButton.tsx

@@ -11,7 +11,6 @@ import {
   FolderPlus,
   Power,
   LogOut,
-  Key,
   ArrowRightLeft,
 } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
@@ -38,7 +37,9 @@ export function AiStatusButton({
   let apiKeys: any[] = [];
   let accessToken: string | undefined;
   let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let switchApiKey: ((apiKeyId: string) => Promise<void>) | undefined;
   let lbApiStatus: any = null;
+  let lbIsLoadingStatus: boolean = false;
 
   try {
     const lbContext = useLB();
@@ -48,7 +49,9 @@ export function AiStatusButton({
     apiKeys = lbContext.apiKeys || [];
     accessToken = lbContext.accessToken;
     selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    switchApiKey = lbContext.switchApiKey;
     lbApiStatus = lbContext.apiStatus;
+    lbIsLoadingStatus = lbContext.isLoadingStatus || false;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
@@ -71,6 +74,8 @@ export function AiStatusButton({
 
   const [showSigninModal, setShowSigninModal] = useState(false);
   const [showApiKeySelector, setShowApiKeySelector] = useState(false);
+  const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
 
   type BalanceUsage = {
     used?: number;
@@ -280,7 +285,7 @@ export function AiStatusButton({
     }, 100);
   };
 
-  if (loading) {
+  if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
     return (
       <button
         ref={buttonRef}
@@ -737,11 +742,23 @@ export function AiStatusButton({
                   }}
                 >
                   <span style={aiStyles.tooltipValue}>
-                    {effectiveStatus.apiKey?.name ||
-                      effectiveStatus.api_key?.name ||
-                      "Unknown"}
+                    {lbIsLoadingStatus ? (
+                      <div
+                        style={{
+                          height: "16px",
+                          width: "100px",
+                          background: "rgba(139, 92, 246, 0.1)",
+                          borderRadius: "4px",
+                          animation: "pulse 2s ease-in-out infinite",
+                        }}
+                      />
+                    ) : (
+                      effectiveStatus?.apiKey?.name ||
+                      effectiveStatus?.api_key?.name ||
+                      "Unknown"
+                    )}
                   </span>
-                  {selectApiKeyWithToken && (
+                  {switchApiKey && (
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -998,38 +1015,6 @@ export function AiStatusButton({
                 <FolderPlus size={18} />
               </button>
 
-              {/* Change API Key Button */}
-              {selectApiKeyWithToken && apiKeys.length > 1 && (
-                <button
-                  onClick={() => setShowApiKeySelector(true)}
-                  style={{
-                    background: "transparent",
-                    border: "none",
-                    padding: "14px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "#8b5cf6",
-                    transition: "all 0.2s ease",
-                    borderRadius: "4px",
-                  }}
-                  onMouseEnter={(e) => {
-                    Object.assign(e.currentTarget.style, {
-                      background: "rgba(139, 92, 246, 0.1)",
-                    });
-                  }}
-                  onMouseLeave={(e) => {
-                    Object.assign(e.currentTarget.style, {
-                      background: "transparent",
-                    });
-                  }}
-                  title="Change API Key"
-                >
-                  <Key size={18} />
-                </button>
-              )}
-
               {/* Logout Button */}
               {logout && (
                 <button
@@ -1078,21 +1063,31 @@ export function AiStatusButton({
         )}
 
       {/* API Key Selector Modal */}
-      {showApiKeySelector && selectApiKeyWithToken && (
+      {showApiKeySelector && apiKeys.length > 0 && (
         <LBApiKeySelector
           isOpen={showApiKeySelector}
           apiKeys={apiKeys}
           onSelect={async (keyId) => {
+            setIsSelectingApiKey(true);
             try {
-              await selectApiKeyWithToken(keyId);
+              // Utiliser la nouvelle fonction switchApiKey qui gère automatiquement le contexte
+              if (switchApiKey) {
+                await switchApiKey(keyId);
+              } else {
+                throw new Error("Switch API key function not available");
+              }
               setShowApiKeySelector(false);
               setShowTooltip(false);
+              setIsLoadingStatus(true);
               // Refresh provider data after API key selection
               if (refetchProviders) {
                 await refetchProviders();
               }
             } catch (error) {
               console.error("Failed to select API key:", error);
+            } finally {
+              setIsSelectingApiKey(false);
+              setIsLoadingStatus(false);
             }
           }}
           onCancel={() => setShowApiKeySelector(false)}

package/src/components/LBApiKeySelector.tsx

@@ -68,6 +68,7 @@ export function LBApiKeySelector({
           bottom: 0,
           background: "rgba(0, 0, 0, 0.75)",
           backdropFilter: "blur(8px)",
+          height: "110%",
         }}
       />
 

package/src/components/LBSigninModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
@@ -17,6 +17,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [showKeySelector, setShowKeySelector] = useState(false);
+  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]); // Stocker les clés API localement
 
   // Vérifier si LBProvider est disponible
   let login:
@@ -27,16 +28,20 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
         success: boolean;
         error?: string;
         needsKeySelection?: boolean;
+        accessToken?: string;
       }>)
     | undefined;
   let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let fetchApiKeys: ((accessToken: string) => Promise<any[]>) | undefined;
   let apiKeys: any[] = [];
   let lbStatus: string | undefined;
 
+  let lbContext: any;
   try {
-    const lbContext = useLB();
+    lbContext = useLB();
     login = lbContext.login;
     selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    fetchApiKeys = lbContext.fetchApiKeys;
     apiKeys = lbContext.apiKeys || [];
     lbStatus = lbContext.status;
   } catch {
@@ -44,13 +49,6 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     return null;
   }
 
-  // Si le status est "needs_key_selection", afficher le sélecteur
-  useEffect(() => {
-    if (lbStatus === "needs_key_selection" && apiKeys.length > 0 && !showKeySelector) {
-      setShowKeySelector(true);
-    }
-  }, [lbStatus, apiKeys.length, showKeySelector]);
-
   if (!isOpen || !login) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -63,7 +61,19 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       if (result.success) {
         if (result.needsKeySelection) {
           // L'utilisateur doit choisir une clé API
-          setShowKeySelector(true);
+          // Utiliser l'access token retourné directement par login
+          if (fetchApiKeys && result.accessToken) {
+            try {
+              const keys = await fetchApiKeys(result.accessToken);
+              setCurrentApiKeys(keys);
+              setShowKeySelector(true);
+            } catch (keyError) {
+              setError("Erreur lors de la récupération des clés API");
+              console.error("Failed to fetch API keys:", keyError);
+            }
+          } else {
+            setError("Token d'accès non disponible");
+          }
         } else {
           // Connexion réussie, fermer le modal
           onClose();
@@ -102,10 +112,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   };
 
   // Si on doit afficher le sélecteur de clés
-  if (showKeySelector && apiKeys.length > 0) {
+  if (showKeySelector && currentApiKeys.length > 0) {
     return (
       <LBApiKeySelector
-        apiKeys={apiKeys}
+        apiKeys={currentApiKeys}
         onSelect={handleKeySelect}
         onCancel={handleCancelKeySelection}
         isOpen={true}
@@ -498,7 +508,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 Pas encore de compte ?
               </p>
               <a
-                href="https://lastbrain.io/signup"
+                href="https://prompt.lastbrain.io/signup"
                 target="_blank"
                 rel="noopener noreferrer"
                 style={{

package/src/context/LBAuthProvider.tsx

@@ -43,6 +43,7 @@ interface LBContextValue extends LBAuthState {
     success: boolean;
     error?: string;
     needsKeySelection?: boolean;
+    accessToken?: string;
   }>;
   /** Fonction de déconnexion */
   logout: () => Promise<void>;
@@ -52,6 +53,8 @@ interface LBContextValue extends LBAuthState {
   selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
   /** Sélectionne une clé API avec le token stocké */
   selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
+  /** Change l'API key active (fonctionne avec session ou token) */
+  switchApiKey: (apiKeyId: string) => Promise<void>;
   /** Recharge l'état de la session */
   refreshSession: () => Promise<void>;
   /** Clés API disponibles */
@@ -62,6 +65,8 @@ interface LBContextValue extends LBAuthState {
   apiStatus: AiStatus | null;
   /** Fonction pour rafraîchir le status */
   refreshStatus: () => Promise<void>;
+  /** Indique si le status est en cours de chargement */
+  isLoadingStatus: boolean;
 }
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
@@ -79,6 +84,7 @@ export function LBProvider({
   const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
   const [accessToken, setAccessToken] = useState<string>();
   const [apiStatus, setApiStatus] = useState<AiStatus | null>(null);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
 
   /**
    * Vérifie si une session existe au chargement
@@ -263,6 +269,7 @@ export function LBProvider({
       success: boolean;
       error?: string;
       needsKeySelection?: boolean;
+      accessToken?: string;
     }> => {
       try {
         console.log("[LBProvider] Login attempt:", email);
@@ -349,7 +356,7 @@ export function LBProvider({
             status: "needs_key_selection",
             user: result.user,
           });
-          return { success: true, needsKeySelection: true };
+          return { success: true, needsKeySelection: true, accessToken: token };
         } catch (keyError) {
           console.error("[LBProvider] Failed to fetch API keys:");
           console.error("[LBProvider] Error details:", keyError);
@@ -385,6 +392,36 @@ export function LBProvider({
     [proxyUrl, fetchApiKeys, selectApiKey]
   );
 
+  /**
+   * Récupère le status API (balance, storage, API key info)
+   */
+  const refreshStatus = useCallback(async (): Promise<void> => {
+    if (state.status !== "ready") {
+      setApiStatus(null);
+      setIsLoadingStatus(false);
+      return;
+    }
+
+    setIsLoadingStatus(true);
+    try {
+      const response = await fetch(`${proxyUrl}/auth/status`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setApiStatus(data);
+      } else {
+        setApiStatus(null);
+      }
+    } catch (error) {
+      console.error("[LBProvider] Failed to fetch status:", error);
+      setApiStatus(null);
+    } finally {
+      setIsLoadingStatus(false);
+    }
+  }, [proxyUrl, state.status]);
+
   /**
    * Sélectionne une clé API avec le token déjà stocké (après login)
    */
@@ -398,6 +435,40 @@ export function LBProvider({
     [accessToken, selectApiKey]
   );
 
+  /**
+   * Change l'API key active - utilise la bonne méthode selon le contexte
+   */
+  const switchApiKey = useCallback(
+    async (apiKeyId: string): Promise<void> => {
+      if (state.status === "ready") {
+        // Utiliser la route de switch avec session
+        const response = await fetch(
+          `${proxyUrl}/auth/session/switch-api-key`,
+          {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ api_key_id: apiKeyId }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to switch API key");
+        }
+
+        // Refresh le status après le changement
+        await refreshStatus();
+      } else if (accessToken) {
+        // Utiliser la méthode avec access token
+        await selectApiKey(accessToken, apiKeyId);
+      } else {
+        throw new Error("No valid authentication method available");
+      }
+    },
+    [state.status, proxyUrl, accessToken, selectApiKey, refreshStatus]
+  );
+
   /**
    * Déconnexion
    */
@@ -425,32 +496,6 @@ export function LBProvider({
     await checkSession();
   }, [checkSession]);
 
-  /**
-   * Récupère le status API (balance, storage, API key info)
-   */
-  const refreshStatus = useCallback(async (): Promise<void> => {
-    if (state.status !== "ready") {
-      setApiStatus(null);
-      return;
-    }
-
-    try {
-      const response = await fetch(`${proxyUrl}/auth/status`, {
-        credentials: "include",
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiStatus(data);
-      } else {
-        setApiStatus(null);
-      }
-    } catch (error) {
-      console.error("[LBProvider] Failed to fetch status:", error);
-      setApiStatus(null);
-    }
-  }, [proxyUrl, state.status]);
-
   /**
    * Récupère les clés API avec la session active
    */
@@ -498,11 +543,13 @@ export function LBProvider({
     fetchApiKeys,
     selectApiKey,
     selectApiKeyWithToken,
+    switchApiKey,
     refreshSession,
     apiKeys,
     accessToken,
     apiStatus,
     refreshStatus,
+    isLoadingStatus,
   };
 
   return <LBContext.Provider value={value}>{children}</LBContext.Provider>;

package/src/styles/inline.ts

@@ -557,7 +557,9 @@ export const aiStyles = {
   buttonSecondary: {
     background: themeVars.bgSecondary,
     color: themeVars.text,
-    border: `1px solid ${themeVars.border}`,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: themeVars.border,
   } as React.CSSProperties,
 
   buttonSecondaryHover: {
@@ -600,6 +602,11 @@ if (typeof document !== "undefined") {
         transform: translateY(0);
       }
     }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   `;
   document.head.appendChild(styleSheet);
 }

package/src/utils/modelManagement.ts

@@ -147,9 +147,14 @@ export async function getUserModels(
 
   const headers: Record<string, string> = {};
 
-  // Ajouter la clé API pour les appels publics directs
-  if (isPublicApi && apiKey) {
-    headers["Authorization"] = `Bearer ${apiKey}`;
+  // Ajouter la clé API pour tous les types d'appels si disponible
+  if (apiKey) {
+    if (isPublicApi) {
+      headers["Authorization"] = `Bearer ${apiKey}`;
+    } else {
+      // Pour les routes auth internes, utiliser aussi le Bearer token si pas de session
+      headers["Authorization"] = `Bearer ${apiKey}`;
+    }
   }
 
   const response = await fetch(endpoint, {