@lastbrain/ai-ui-react 1.0.43 → 1.0.44

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;AAetD,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,2CA41BrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAetD,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,2CAk2BrB"}

package/dist/components/AiStatusButton.js

@@ -194,7 +194,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                                 gap: "8px",
                                                 borderTop: "1px solid var(--ai-border-primary, #374151)",
                                                 paddingTop: "12px",
-                                            }, children: [_jsx("button", { onClick: () => window.open("https://lastbrain.io/metrics", "_blank"), style: {
+                                            }, children: [_jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/metrics", "_blank"), style: {
                                                         flex: 1,
                                                         background: "transparent",
                                                         border: "none",
@@ -213,7 +213,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                                         Object.assign(e.currentTarget.style, {
                                                             background: "transparent",
                                                         });
-                                                    }, title: "View Metrics", children: _jsx(BarChart3, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://lastbrain.io/settings", "_blank"), style: {
+                                                    }, title: "View Metrics", children: _jsx(BarChart3, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/settings", "_blank"), style: {
                                                         flex: 1,
                                                         background: "transparent",
                                                         border: "none",

package/dist/components/LBApiKeySelector.d.ts

@@ -0,0 +1,10 @@
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
+interface LBApiKeySelectorProps {
+    apiKeys: LBApiKey[];
+    onSelect: (apiKeyId: string) => Promise<void>;
+    onCancel: () => void;
+    isOpen: boolean;
+}
+export declare function LBApiKeySelector({ apiKeys, onSelect, onCancel, isOpen, }: LBApiKeySelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=LBApiKeySelector.d.ts.map

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

@@ -0,0 +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,kDA2TvB"}

package/dist/components/LBApiKeySelector.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+export function LBApiKeySelector({ apiKeys, onSelect, onCancel, isOpen, }) {
+    const [selectedKeyId, setSelectedKeyId] = useState(apiKeys.find((k) => k.isActive)?.id || apiKeys[0]?.id || "");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    if (!isOpen)
+        return null;
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!selectedKeyId) {
+            setError("Veuillez sélectionner une clé API");
+            return;
+        }
+        setLoading(true);
+        setError("");
+        try {
+            await onSelect(selectedKeyId);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Erreur lors de la sélection");
+            setLoading(false);
+        }
+    };
+    return (_jsxs("div", { style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 10000,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "16px",
+        }, onClick: onCancel, children: [_jsx("div", { style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: "var(--ai-overlay-bg, rgba(0, 0, 0, 0.75))",
+                    backdropFilter: "blur(8px)",
+                } }), _jsxs("div", { style: {
+                    position: "relative",
+                    background: "var(--ai-modal-bg, #1f2937)",
+                    border: "1px solid var(--ai-border-primary, #374151)",
+                    borderRadius: "12px",
+                    padding: "24px",
+                    maxWidth: "500px",
+                    width: "100%",
+                    boxShadow: "0 20px 50px rgba(0, 0, 0, 0.5)",
+                }, onClick: (e) => e.stopPropagation(), children: [_jsx("h2", { style: {
+                            margin: "0 0 8px 0",
+                            fontSize: "20px",
+                            fontWeight: 600,
+                            color: "var(--ai-text-primary, #f9fafb)",
+                            textAlign: "center",
+                        }, children: "S\u00E9lectionnez une cl\u00E9 API" }), _jsx("p", { style: {
+                            margin: "0 0 24px 0",
+                            fontSize: "14px",
+                            color: "var(--ai-text-secondary, #9ca3af)",
+                            textAlign: "center",
+                            lineHeight: "1.5",
+                        }, children: "Choisissez la cl\u00E9 API \u00E0 utiliser pour vos requ\u00EAtes IA" }), _jsxs("form", { onSubmit: handleSubmit, children: [_jsx("div", { style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "8px",
+                                    marginBottom: "24px",
+                                    maxHeight: "300px",
+                                    overflowY: "auto",
+                                }, children: apiKeys.map((key) => {
+                                    const isSelected = key.id === selectedKeyId;
+                                    const isActive = key.isActive;
+                                    return (_jsxs("label", { style: {
+                                            display: "flex",
+                                            alignItems: "center",
+                                            padding: "12px 16px",
+                                            background: isSelected
+                                                ? "var(--ai-input-bg-focus, #374151)"
+                                                : "var(--ai-input-bg, #111827)",
+                                            border: `2px solid ${isSelected
+                                                ? "var(--ai-accent-primary, #8b5cf6)"
+                                                : "var(--ai-border-primary, #374151)"}`,
+                                            borderRadius: "8px",
+                                            cursor: isActive ? "pointer" : "not-allowed",
+                                            opacity: isActive ? 1 : 0.5,
+                                            transition: "all 0.2s ease",
+                                        }, onMouseEnter: (e) => {
+                                            if (isActive && !isSelected) {
+                                                e.currentTarget.style.borderColor =
+                                                    "var(--ai-border-hover, #4b5563)";
+                                                e.currentTarget.style.background =
+                                                    "var(--ai-input-bg-focus, #374151)";
+                                            }
+                                        }, onMouseLeave: (e) => {
+                                            if (isActive && !isSelected) {
+                                                e.currentTarget.style.borderColor =
+                                                    "var(--ai-border-primary, #374151)";
+                                                e.currentTarget.style.background =
+                                                    "var(--ai-input-bg, #111827)";
+                                            }
+                                        }, children: [_jsx("input", { type: "radio", name: "apiKey", value: key.id, checked: isSelected, disabled: !isActive, onChange: (e) => setSelectedKeyId(e.target.value), style: {
+                                                    marginRight: "12px",
+                                                    accentColor: "var(--ai-accent-primary, #8b5cf6)",
+                                                    cursor: isActive ? "pointer" : "not-allowed",
+                                                } }), _jsxs("div", { style: { flex: 1 }, children: [_jsx("div", { style: {
+                                                            fontSize: "14px",
+                                                            fontWeight: 500,
+                                                            color: "var(--ai-text-primary, #f9fafb)",
+                                                            marginBottom: "4px",
+                                                        }, children: key.name }), _jsx("div", { style: {
+                                                            fontSize: "12px",
+                                                            color: "var(--ai-text-secondary, #9ca3af)",
+                                                            fontFamily: "monospace",
+                                                        }, children: key.keyPrefix || key.id.substring(0, 12) + "..." })] }), isActive ? (_jsx("div", { style: {
+                                                    fontSize: "11px",
+                                                    padding: "4px 8px",
+                                                    borderRadius: "4px",
+                                                    background: "rgba(16, 185, 129, 0.1)",
+                                                    color: "#10b981",
+                                                    fontWeight: 600,
+                                                }, children: "Active" })) : (_jsx("div", { style: {
+                                                    fontSize: "11px",
+                                                    padding: "4px 8px",
+                                                    borderRadius: "4px",
+                                                    background: "rgba(239, 68, 68, 0.1)",
+                                                    color: "#ef4444",
+                                                    fontWeight: 600,
+                                                }, children: "Inactive" }))] }, key.id));
+                                }) }), error && (_jsx("div", { style: {
+                                    padding: "12px",
+                                    background: "rgba(239, 68, 68, 0.1)",
+                                    border: "1px solid rgba(239, 68, 68, 0.3)",
+                                    borderRadius: "6px",
+                                    marginBottom: "16px",
+                                }, children: _jsx("p", { style: {
+                                        margin: 0,
+                                        fontSize: "13px",
+                                        color: "#ef4444",
+                                        lineHeight: "1.5",
+                                    }, children: error }) })), _jsxs("div", { style: { display: "flex", gap: "12px" }, children: [_jsx("button", { type: "button", onClick: onCancel, disabled: loading, style: {
+                                            flex: 1,
+                                            padding: "12px",
+                                            background: "transparent",
+                                            border: "1px solid var(--ai-border-primary, #374151)",
+                                            borderRadius: "8px",
+                                            color: "var(--ai-text-secondary, #9ca3af)",
+                                            fontSize: "14px",
+                                            fontWeight: 600,
+                                            cursor: loading ? "not-allowed" : "pointer",
+                                            opacity: loading ? 0.5 : 1,
+                                            transition: "all 0.2s ease",
+                                        }, onMouseEnter: (e) => {
+                                            if (!loading) {
+                                                e.currentTarget.style.background =
+                                                    "var(--ai-input-bg, #111827)";
+                                                e.currentTarget.style.borderColor =
+                                                    "var(--ai-border-hover, #4b5563)";
+                                            }
+                                        }, onMouseLeave: (e) => {
+                                            if (!loading) {
+                                                e.currentTarget.style.background = "transparent";
+                                                e.currentTarget.style.borderColor =
+                                                    "var(--ai-border-primary, #374151)";
+                                            }
+                                        }, children: "Annuler" }), _jsx("button", { type: "submit", disabled: loading || !selectedKeyId, style: {
+                                            flex: 1,
+                                            padding: "12px",
+                                            background: loading
+                                                ? "var(--ai-input-bg, #111827)"
+                                                : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
+                                            border: "none",
+                                            borderRadius: "8px",
+                                            color: "#ffffff",
+                                            fontSize: "14px",
+                                            fontWeight: 600,
+                                            cursor: loading || !selectedKeyId ? "not-allowed" : "pointer",
+                                            opacity: loading || !selectedKeyId ? 0.5 : 1,
+                                            transition: "all 0.2s ease",
+                                        }, onMouseEnter: (e) => {
+                                            if (!loading && selectedKeyId) {
+                                                e.currentTarget.style.transform = "translateY(-1px)";
+                                                e.currentTarget.style.boxShadow =
+                                                    "0 8px 20px rgba(139, 92, 246, 0.4)";
+                                            }
+                                        }, onMouseLeave: (e) => {
+                                            if (!loading && selectedKeyId) {
+                                                e.currentTarget.style.transform = "none";
+                                                e.currentTarget.style.boxShadow = "none";
+                                            }
+                                        }, children: loading ? "Connexion..." : "Continuer" })] })] })] })] }));
+}

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

@@ -1 +1 @@
-{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAKA,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,kDAoYpE"}
+{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAMA,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,kDA0bpE"}

package/dist/components/LBSigninModal.js

@@ -1,13 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLB } from "../context/LBAuthProvider";
+import { LBApiKeySelector } from "./LBApiKeySelector";
 export function LBSigninModal({ isOpen, onClose }) {
     // Vérifier si LBProvider est disponible
     let login;
+    let selectApiKeyWithToken;
+    let apiKeys = [];
+    let lbStatus;
     try {
         const lbContext = useLB();
         login = lbContext.login;
+        selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+        apiKeys = lbContext.apiKeys || [];
+        lbStatus = lbContext.status;
     }
     catch {
         // LBProvider n'est pas disponible, ne pas rendre le modal
@@ -17,6 +24,13 @@ export function LBSigninModal({ isOpen, onClose }) {
     const [password, setPassword] = useState("");
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState("");
+    const [showKeySelector, setShowKeySelector] = useState(false);
+    // Si le status est "needs_key_selection", afficher le sélecteur
+    useEffect(() => {
+        if (lbStatus === "needs_key_selection" && apiKeys.length > 0) {
+            setShowKeySelector(true);
+        }
+    }, [lbStatus, apiKeys.length]);
     if (!isOpen || !login)
         return null;
     const handleSubmit = async (e) => {
@@ -26,7 +40,14 @@ export function LBSigninModal({ isOpen, onClose }) {
         try {
             const result = await login(email, password);
             if (result.success) {
-                onClose();
+                if (result.needsKeySelection) {
+                    // L'utilisateur doit choisir une clé API
+                    setShowKeySelector(true);
+                }
+                else {
+                    // Connexion réussie, fermer le modal
+                    onClose();
+                }
             }
             else {
                 setError(result.error || "Échec de la connexion");
@@ -39,6 +60,29 @@ export function LBSigninModal({ isOpen, onClose }) {
             setLoading(false);
         }
     };
+    const handleKeySelect = async (apiKeyId) => {
+        if (!selectApiKeyWithToken)
+            return;
+        try {
+            await selectApiKeyWithToken(apiKeyId);
+            setShowKeySelector(false);
+            onClose();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Erreur lors de la sélection");
+            setShowKeySelector(false);
+        }
+    };
+    const handleCancelKeySelection = () => {
+        setShowKeySelector(false);
+        setEmail("");
+        setPassword("");
+        setError("");
+    };
+    // 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 }));
+    }
     const handleKeyDown = (e) => {
         if (e.key === "Escape") {
             onClose();

package/dist/context/LBAuthProvider.d.ts

@@ -18,13 +18,16 @@ interface LBContextValue extends LBAuthState {
     login: (email: string, password: string) => Promise<{
         success: boolean;
         error?: string;
+        needsKeySelection?: boolean;
     }>;
     /** Fonction de déconnexion */
     logout: () => Promise<void>;
     /** Récupère les clés API de l'utilisateur */
     fetchApiKeys: (accessToken: string) => Promise<LBApiKey[]>;
-    /** Sélectionne une clé API et crée une session */
+    /** Sélectionne une clé API et crée une session (après login) */
     selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
+    /** Sélectionne une clé API avec le token stocké */
+    selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
     /** Recharge l'état de la session */
     refreshSession: () => Promise<void>;
     /** Clés API disponibles */

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,EAIT,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;CAC1D;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,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,kDAAkD;IAClD,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,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;CACtB;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,GACf,EAAE,eAAe,2CA+OjB;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,EAIT,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;CAC1D;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAChF,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;CACtB;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,GACf,EAAE,eAAe,2CAkSjB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}

package/dist/context/LBAuthProvider.js

@@ -51,16 +51,22 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
      */
     const fetchApiKeys = useCallback(async (token) => {
         try {
+            console.log("[LBProvider] Fetching API keys with token:", token.substring(0, 20) + "...");
             const response = await fetch(`${proxyUrl}/public/user/api-keys`, {
                 headers: {
                     Authorization: `Bearer ${token}`,
+                    "Content-Type": "application/json",
                 },
                 credentials: "include",
             });
+            console.log("[LBProvider] API keys response status:", response.status);
             if (!response.ok) {
-                throw new Error("Failed to fetch API keys");
+                const errorData = await response.json().catch(() => ({}));
+                console.error("[LBProvider] Failed to fetch API keys:", errorData);
+                throw new Error(errorData.message || "Failed to fetch API keys");
             }
             const data = await response.json();
+            console.log("[LBProvider] API keys received:", data);
             const keys = data.apiKeys || data;
             setApiKeys(keys);
             return keys;
@@ -75,6 +81,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
      */
     const selectApiKey = useCallback(async (token, apiKeyId) => {
         try {
+            console.log("[LBProvider] Selecting API key:", apiKeyId);
             setState((prev) => ({ ...prev, status: "loading" }));
             const response = await fetch(`${proxyUrl}/auth/session`, {
                 method: "POST",
@@ -85,10 +92,14 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                 body: JSON.stringify({ api_key_id: apiKeyId }),
                 credentials: "include",
             });
+            console.log("[LBProvider] Session response status:", response.status);
             if (!response.ok) {
-                throw new Error("Failed to create session");
+                const errorData = await response.json().catch(() => ({}));
+                console.error("[LBProvider] Failed to create session:", errorData);
+                throw new Error(errorData.message || "Failed to create session");
             }
             const sessionResult = await response.json();
+            console.log("[LBProvider] Session created successfully:", sessionResult);
             setState({
                 status: "ready",
                 user: state.user,
@@ -101,6 +112,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                 },
             });
             setAccessToken(undefined); // Nettoyer l'access token temporaire
+            setApiKeys([]); // Nettoyer les clés API temporaires
             onStatusChange?.("ready");
         }
         catch (error) {
@@ -113,10 +125,12 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         }
     }, [proxyUrl, state.user, onStatusChange]);
     /**
-     * Connexion utilisateur
+     * Connexion utilisateur (étape 1 : login)
+     * Retourne le token et les clés API sans créer de session
      */
     const login = useCallback(async (email, password) => {
         try {
+            console.log("[LBProvider] Login attempt:", email);
             setState((prev) => ({ ...prev, status: "loading" }));
             const response = await fetch(`${proxyUrl}/auth/login`, {
                 method: "POST",
@@ -124,9 +138,11 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                 body: JSON.stringify({ email, password }),
                 credentials: "include",
             });
+            console.log("[LBProvider] Login response status:", response.status);
             if (!response.ok) {
                 const error = await response.json();
                 const errorMessage = error.message || "Login failed";
+                console.error("[LBProvider] Login failed:", errorMessage);
                 setState({
                     status: "needs_auth",
                     error: errorMessage,
@@ -134,41 +150,53 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                 return { success: false, error: errorMessage };
             }
             const result = await response.json();
+            console.log("[LBProvider] Login successful:", result.user?.email);
             const token = result.accessToken;
             setAccessToken(token);
             setState({
                 status: "loading",
                 user: result.user,
             });
-            // Récupérer les clés API et sélectionner automatiquement la première active
+            // Récupérer les clés API
             try {
                 const keys = await fetchApiKeys(token);
-                const activeKey = keys.find((k) => k.isActive);
-                if (activeKey) {
-                    // Créer une session avec la première clé active
-                    await selectApiKey(token, activeKey.id);
-                }
-                else {
-                    // Aucune clé active trouvée
+                console.log("[LBProvider] Fetched keys:", keys.length);
+                if (keys.length === 0) {
+                    console.warn("[LBProvider] No API keys found for user");
                     setState({
                         status: "ready",
                         user: result.user,
+                        error: "Aucune clé API disponible",
                     });
+                    return { success: true, needsKeySelection: false };
+                }
+                // Si une seule clé active, la sélectionner automatiquement
+                const activeKeys = keys.filter((k) => k.isActive);
+                if (activeKeys.length === 1) {
+                    console.log("[LBProvider] Auto-selecting single active key");
+                    await selectApiKey(token, activeKeys[0].id);
+                    return { success: true, needsKeySelection: false };
                 }
-                return { success: true };
+                // Sinon, laisser l'utilisateur choisir
+                console.log("[LBProvider] Multiple keys available, user needs to select");
+                setState({
+                    status: "needs_key_selection",
+                    user: result.user,
+                });
+                return { success: true, needsKeySelection: true };
             }
             catch (keyError) {
-                console.error("[LBProvider] Failed to fetch/select API key:", keyError);
-                // Login réussi mais impossible de récupérer les clés
+                console.error("[LBProvider] Failed to fetch API keys:", keyError);
                 setState({
-                    status: "ready",
-                    user: result.user,
+                    status: "needs_auth",
+                    error: "Impossible de récupérer les clés API",
                 });
-                return { success: true };
+                return { success: false, error: "Impossible de récupérer les clés API" };
             }
         }
         catch (error) {
             const message = error instanceof Error ? error.message : "Une erreur s'est produite";
+            console.error("[LBProvider] Login error:", message);
             setState({
                 status: "error",
                 error: message,
@@ -176,6 +204,15 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             return { success: false, error: message };
         }
     }, [proxyUrl, fetchApiKeys, selectApiKey]);
+    /**
+     * Sélectionne une clé API avec le token déjà stocké (après login)
+     */
+    const selectApiKeyWithToken = useCallback(async (apiKeyId) => {
+        if (!accessToken) {
+            throw new Error("No access token available");
+        }
+        await selectApiKey(accessToken, apiKeyId);
+    }, [accessToken, selectApiKey]);
     /**
      * Déconnexion
      */
@@ -208,6 +245,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         logout,
         fetchApiKeys,
         selectApiKey,
+        selectApiKeyWithToken,
         refreshSession,
         apiKeys,
         accessToken,

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
 export * from "./components/LBConnectButton";
 export * from "./components/LBSigninModal";
+export * from "./components/LBApiKeySelector";
 export * from "./components/LBKeyPicker";
 export * from "./components/ErrorToast";
 export * from "./components/UsageToast";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAG9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAG9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}

package/dist/index.js

@@ -25,6 +25,7 @@ export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
 export * from "./components/LBConnectButton";
 export * from "./components/LBSigninModal";
+export * from "./components/LBApiKeySelector";
 export * from "./components/LBKeyPicker";
 // Toast system
 export * from "./components/ErrorToast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.43",
+  "version": "1.0.44",
   "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.31"
+    "@lastbrain/ai-ui-core": "1.0.32"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiStatusButton.tsx

@@ -394,7 +394,10 @@ export function AiStatusButton({
                     >
                       <button
                         onClick={() =>
-                          window.open("https://lastbrain.io/metrics", "_blank")
+                          window.open(
+                            "https://prompt.lastbrain.io/metrics",
+                            "_blank"
+                          )
                         }
                         style={{
                           flex: 1,
@@ -424,7 +427,10 @@ export function AiStatusButton({
                       </button>
                       <button
                         onClick={() =>
-                          window.open("https://lastbrain.io/settings", "_blank")
+                          window.open(
+                            "https://prompt.lastbrain.io/settings",
+                            "_blank"
+                          )
                         }
                         style={{
                           flex: 1,

package/src/components/LBApiKeySelector.tsx

@@ -0,0 +1,331 @@
+import React, { useState } from "react";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
+
+interface LBApiKeySelectorProps {
+  apiKeys: LBApiKey[];
+  onSelect: (apiKeyId: string) => Promise<void>;
+  onCancel: () => void;
+  isOpen: boolean;
+}
+
+export function LBApiKeySelector({
+  apiKeys,
+  onSelect,
+  onCancel,
+  isOpen,
+}: LBApiKeySelectorProps) {
+  const [selectedKeyId, setSelectedKeyId] = useState<string>(
+    apiKeys.find((k) => k.isActive)?.id || apiKeys[0]?.id || ""
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedKeyId) {
+      setError("Veuillez sélectionner une clé API");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      await onSelect(selectedKeyId);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Erreur lors de la sélection"
+      );
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 10000,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "16px",
+      }}
+      onClick={onCancel}
+    >
+      {/* Backdrop */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          background: "var(--ai-overlay-bg, rgba(0, 0, 0, 0.75))",
+          backdropFilter: "blur(8px)",
+        }}
+      />
+
+      {/* Modal */}
+      <div
+        style={{
+          position: "relative",
+          background: "var(--ai-modal-bg, #1f2937)",
+          border: "1px solid var(--ai-border-primary, #374151)",
+          borderRadius: "12px",
+          padding: "24px",
+          maxWidth: "500px",
+          width: "100%",
+          boxShadow: "0 20px 50px rgba(0, 0, 0, 0.5)",
+        }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2
+          style={{
+            margin: "0 0 8px 0",
+            fontSize: "20px",
+            fontWeight: 600,
+            color: "var(--ai-text-primary, #f9fafb)",
+            textAlign: "center",
+          }}
+        >
+          Sélectionnez une clé API
+        </h2>
+
+        <p
+          style={{
+            margin: "0 0 24px 0",
+            fontSize: "14px",
+            color: "var(--ai-text-secondary, #9ca3af)",
+            textAlign: "center",
+            lineHeight: "1.5",
+          }}
+        >
+          Choisissez la clé API à utiliser pour vos requêtes IA
+        </p>
+
+        <form onSubmit={handleSubmit}>
+          {/* Liste des clés API */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "8px",
+              marginBottom: "24px",
+              maxHeight: "300px",
+              overflowY: "auto",
+            }}
+          >
+            {apiKeys.map((key) => {
+              const isSelected = key.id === selectedKeyId;
+              const isActive = key.isActive;
+
+              return (
+                <label
+                  key={key.id}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    padding: "12px 16px",
+                    background: isSelected
+                      ? "var(--ai-input-bg-focus, #374151)"
+                      : "var(--ai-input-bg, #111827)",
+                    border: `2px solid ${
+                      isSelected
+                        ? "var(--ai-accent-primary, #8b5cf6)"
+                        : "var(--ai-border-primary, #374151)"
+                    }`,
+                    borderRadius: "8px",
+                    cursor: isActive ? "pointer" : "not-allowed",
+                    opacity: isActive ? 1 : 0.5,
+                    transition: "all 0.2s ease",
+                  }}
+                  onMouseEnter={(e) => {
+                    if (isActive && !isSelected) {
+                      e.currentTarget.style.borderColor =
+                        "var(--ai-border-hover, #4b5563)";
+                      e.currentTarget.style.background =
+                        "var(--ai-input-bg-focus, #374151)";
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    if (isActive && !isSelected) {
+                      e.currentTarget.style.borderColor =
+                        "var(--ai-border-primary, #374151)";
+                      e.currentTarget.style.background =
+                        "var(--ai-input-bg, #111827)";
+                    }
+                  }}
+                >
+                  <input
+                    type="radio"
+                    name="apiKey"
+                    value={key.id}
+                    checked={isSelected}
+                    disabled={!isActive}
+                    onChange={(e) => setSelectedKeyId(e.target.value)}
+                    style={{
+                      marginRight: "12px",
+                      accentColor: "var(--ai-accent-primary, #8b5cf6)",
+                      cursor: isActive ? "pointer" : "not-allowed",
+                    }}
+                  />
+                  <div style={{ flex: 1 }}>
+                    <div
+                      style={{
+                        fontSize: "14px",
+                        fontWeight: 500,
+                        color: "var(--ai-text-primary, #f9fafb)",
+                        marginBottom: "4px",
+                      }}
+                    >
+                      {key.name}
+                    </div>
+                    <div
+                      style={{
+                        fontSize: "12px",
+                        color: "var(--ai-text-secondary, #9ca3af)",
+                        fontFamily: "monospace",
+                      }}
+                    >
+                      {key.keyPrefix || key.id.substring(0, 12) + "..."}
+                    </div>
+                  </div>
+                  {isActive ? (
+                    <div
+                      style={{
+                        fontSize: "11px",
+                        padding: "4px 8px",
+                        borderRadius: "4px",
+                        background: "rgba(16, 185, 129, 0.1)",
+                        color: "#10b981",
+                        fontWeight: 600,
+                      }}
+                    >
+                      Active
+                    </div>
+                  ) : (
+                    <div
+                      style={{
+                        fontSize: "11px",
+                        padding: "4px 8px",
+                        borderRadius: "4px",
+                        background: "rgba(239, 68, 68, 0.1)",
+                        color: "#ef4444",
+                        fontWeight: 600,
+                      }}
+                    >
+                      Inactive
+                    </div>
+                  )}
+                </label>
+              );
+            })}
+          </div>
+
+          {error && (
+            <div
+              style={{
+                padding: "12px",
+                background: "rgba(239, 68, 68, 0.1)",
+                border: "1px solid rgba(239, 68, 68, 0.3)",
+                borderRadius: "6px",
+                marginBottom: "16px",
+              }}
+            >
+              <p
+                style={{
+                  margin: 0,
+                  fontSize: "13px",
+                  color: "#ef4444",
+                  lineHeight: "1.5",
+                }}
+              >
+                {error}
+              </p>
+            </div>
+          )}
+
+          {/* Boutons */}
+          <div style={{ display: "flex", gap: "12px" }}>
+            <button
+              type="button"
+              onClick={onCancel}
+              disabled={loading}
+              style={{
+                flex: 1,
+                padding: "12px",
+                background: "transparent",
+                border: "1px solid var(--ai-border-primary, #374151)",
+                borderRadius: "8px",
+                color: "var(--ai-text-secondary, #9ca3af)",
+                fontSize: "14px",
+                fontWeight: 600,
+                cursor: loading ? "not-allowed" : "pointer",
+                opacity: loading ? 0.5 : 1,
+                transition: "all 0.2s ease",
+              }}
+              onMouseEnter={(e) => {
+                if (!loading) {
+                  e.currentTarget.style.background =
+                    "var(--ai-input-bg, #111827)";
+                  e.currentTarget.style.borderColor =
+                    "var(--ai-border-hover, #4b5563)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!loading) {
+                  e.currentTarget.style.background = "transparent";
+                  e.currentTarget.style.borderColor =
+                    "var(--ai-border-primary, #374151)";
+                }
+              }}
+            >
+              Annuler
+            </button>
+            <button
+              type="submit"
+              disabled={loading || !selectedKeyId}
+              style={{
+                flex: 1,
+                padding: "12px",
+                background: loading
+                  ? "var(--ai-input-bg, #111827)"
+                  : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
+                border: "none",
+                borderRadius: "8px",
+                color: "#ffffff",
+                fontSize: "14px",
+                fontWeight: 600,
+                cursor:
+                  loading || !selectedKeyId ? "not-allowed" : "pointer",
+                opacity: loading || !selectedKeyId ? 0.5 : 1,
+                transition: "all 0.2s ease",
+              }}
+              onMouseEnter={(e) => {
+                if (!loading && selectedKeyId) {
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow =
+                    "0 8px 20px rgba(139, 92, 246, 0.4)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!loading && selectedKeyId) {
+                  e.currentTarget.style.transform = "none";
+                  e.currentTarget.style.boxShadow = "none";
+                }
+              }}
+            >
+              {loading ? "Connexion..." : "Continuer"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/src/components/LBSigninModal.tsx

@@ -1,7 +1,8 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useLB } from "../context/LBAuthProvider";
+import { LBApiKeySelector } from "./LBApiKeySelector";
 
 export interface LBSigninModalProps {
   isOpen: boolean;
@@ -14,12 +15,18 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     | ((
         email: string,
         password: string
-      ) => Promise<{ success: boolean; error?: string }>)
+      ) => Promise<{ success: boolean; error?: string; needsKeySelection?: boolean }>)
     | undefined;
+  let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let apiKeys: any[] = [];
+  let lbStatus: string | undefined;
 
   try {
     const lbContext = useLB();
     login = lbContext.login;
+    selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    apiKeys = lbContext.apiKeys || [];
+    lbStatus = lbContext.status;
   } catch {
     // LBProvider n'est pas disponible, ne pas rendre le modal
     return null;
@@ -29,6 +36,14 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
+  const [showKeySelector, setShowKeySelector] = useState(false);
+
+  // Si le status est "needs_key_selection", afficher le sélecteur
+  useEffect(() => {
+    if (lbStatus === "needs_key_selection" && apiKeys.length > 0) {
+      setShowKeySelector(true);
+    }
+  }, [lbStatus, apiKeys.length]);
 
   if (!isOpen || !login) return null;
 
@@ -40,7 +55,13 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     try {
       const result = await login(email, password);
       if (result.success) {
-        onClose();
+        if (result.needsKeySelection) {
+          // L'utilisateur doit choisir une clé API
+          setShowKeySelector(true);
+        } else {
+          // Connexion réussie, fermer le modal
+          onClose();
+        }
       } else {
         setError(result.error || "Échec de la connexion");
       }
@@ -53,6 +74,40 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     }
   };
 
+  const handleKeySelect = async (apiKeyId: string) => {
+    if (!selectApiKeyWithToken) return;
+
+    try {
+      await selectApiKeyWithToken(apiKeyId);
+      setShowKeySelector(false);
+      onClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Erreur lors de la sélection"
+      );
+      setShowKeySelector(false);
+    }
+  };
+
+  const handleCancelKeySelection = () => {
+    setShowKeySelector(false);
+    setEmail("");
+    setPassword("");
+    setError("");
+  };
+
+  // Si on doit afficher le sélecteur de clés
+  if (showKeySelector && apiKeys.length > 0) {
+    return (
+      <LBApiKeySelector
+        apiKeys={apiKeys}
+        onSelect={handleKeySelect}
+        onCancel={handleCancelKeySelection}
+        isOpen={true}
+      />
+    );
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Escape") {
       onClose();

package/src/context/LBAuthProvider.tsx

@@ -36,13 +36,15 @@ interface LBContextValue extends LBAuthState {
   login: (
     email: string,
     password: string
-  ) => Promise<{ success: boolean; error?: string }>;
+  ) => Promise<{ success: boolean; error?: string; needsKeySelection?: boolean }>;
   /** Fonction de déconnexion */
   logout: () => Promise<void>;
   /** Récupère les clés API de l'utilisateur */
   fetchApiKeys: (accessToken: string) => Promise<LBApiKey[]>;
-  /** Sélectionne une clé API et crée une session */
+  /** Sélectionne une clé API et crée une session (après login) */
   selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
+  /** Sélectionne une clé API avec le token stocké */
+  selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
   /** Recharge l'état de la session */
   refreshSession: () => Promise<void>;
   /** Clés API disponibles */
@@ -106,18 +108,27 @@ export function LBProvider({
   const fetchApiKeys = useCallback(
     async (token: string): Promise<LBApiKey[]> => {
       try {
+        console.log("[LBProvider] Fetching API keys with token:", token.substring(0, 20) + "...");
+        
         const response = await fetch(`${proxyUrl}/public/user/api-keys`, {
           headers: {
             Authorization: `Bearer ${token}`,
+            "Content-Type": "application/json",
           },
           credentials: "include",
         });
 
+        console.log("[LBProvider] API keys response status:", response.status);
+
         if (!response.ok) {
-          throw new Error("Failed to fetch API keys");
+          const errorData = await response.json().catch(() => ({}));
+          console.error("[LBProvider] Failed to fetch API keys:", errorData);
+          throw new Error(errorData.message || "Failed to fetch API keys");
         }
 
         const data = await response.json();
+        console.log("[LBProvider] API keys received:", data);
+        
         const keys: LBApiKey[] = data.apiKeys || data;
         setApiKeys(keys);
         return keys;
@@ -135,6 +146,7 @@ export function LBProvider({
   const selectApiKey = useCallback(
     async (token: string, apiKeyId: string): Promise<void> => {
       try {
+        console.log("[LBProvider] Selecting API key:", apiKeyId);
         setState((prev: LBAuthState) => ({ ...prev, status: "loading" }));
 
         const response = await fetch(`${proxyUrl}/auth/session`, {
@@ -147,11 +159,16 @@ export function LBProvider({
           credentials: "include",
         });
 
+        console.log("[LBProvider] Session response status:", response.status);
+
         if (!response.ok) {
-          throw new Error("Failed to create session");
+          const errorData = await response.json().catch(() => ({}));
+          console.error("[LBProvider] Failed to create session:", errorData);
+          throw new Error(errorData.message || "Failed to create session");
         }
 
         const sessionResult: LBSessionResult = await response.json();
+        console.log("[LBProvider] Session created successfully:", sessionResult);
 
         setState({
           status: "ready",
@@ -166,6 +183,7 @@ export function LBProvider({
         });
 
         setAccessToken(undefined); // Nettoyer l'access token temporaire
+        setApiKeys([]); // Nettoyer les clés API temporaires
         onStatusChange?.("ready");
       } catch (error) {
         const message =
@@ -181,14 +199,16 @@ export function LBProvider({
   );
 
   /**
-   * Connexion utilisateur
+   * Connexion utilisateur (étape 1 : login)
+   * Retourne le token et les clés API sans créer de session
    */
   const login = useCallback(
     async (
       email: string,
       password: string
-    ): Promise<{ success: boolean; error?: string }> => {
+    ): Promise<{ success: boolean; error?: string; needsKeySelection?: boolean }> => {
       try {
+        console.log("[LBProvider] Login attempt:", email);
         setState((prev: LBAuthState) => ({ ...prev, status: "loading" }));
 
         const response = await fetch(`${proxyUrl}/auth/login`, {
@@ -198,9 +218,12 @@ export function LBProvider({
           credentials: "include",
         });
 
+        console.log("[LBProvider] Login response status:", response.status);
+
         if (!response.ok) {
           const error = await response.json();
           const errorMessage = error.message || "Login failed";
+          console.error("[LBProvider] Login failed:", errorMessage);
           setState({
             status: "needs_auth",
             error: errorMessage,
@@ -209,6 +232,8 @@ export function LBProvider({
         }
 
         const result: LBLoginResult = await response.json();
+        console.log("[LBProvider] Login successful:", result.user?.email);
+        
         const token = result.accessToken;
         setAccessToken(token);
 
@@ -217,38 +242,52 @@ export function LBProvider({
           user: result.user,
         });
 
-        // Récupérer les clés API et sélectionner automatiquement la première active
+        // Récupérer les clés API
         try {
           const keys = await fetchApiKeys(token);
-          const activeKey = keys.find((k) => k.isActive);
+          console.log("[LBProvider] Fetched keys:", keys.length);
 
-          if (activeKey) {
-            // Créer une session avec la première clé active
-            await selectApiKey(token, activeKey.id);
-          } else {
-            // Aucune clé active trouvée
+          if (keys.length === 0) {
+            console.warn("[LBProvider] No API keys found for user");
             setState({
               status: "ready",
               user: result.user,
+              error: "Aucune clé API disponible",
             });
+            return { success: true, needsKeySelection: false };
           }
 
-          return { success: true };
+          // Si une seule clé active, la sélectionner automatiquement
+          const activeKeys = keys.filter((k) => k.isActive);
+          if (activeKeys.length === 1) {
+            console.log("[LBProvider] Auto-selecting single active key");
+            await selectApiKey(token, activeKeys[0].id);
+            return { success: true, needsKeySelection: false };
+          }
+
+          // Sinon, laisser l'utilisateur choisir
+          console.log("[LBProvider] Multiple keys available, user needs to select");
+          setState({
+            status: "needs_key_selection",
+            user: result.user,
+          });
+          return { success: true, needsKeySelection: true };
+          
         } catch (keyError) {
           console.error(
-            "[LBProvider] Failed to fetch/select API key:",
+            "[LBProvider] Failed to fetch API keys:",
             keyError
           );
-          // Login réussi mais impossible de récupérer les clés
           setState({
-            status: "ready",
-            user: result.user,
+            status: "needs_auth",
+            error: "Impossible de récupérer les clés API",
           });
-          return { success: true };
+          return { success: false, error: "Impossible de récupérer les clés API" };
         }
       } catch (error) {
         const message =
           error instanceof Error ? error.message : "Une erreur s'est produite";
+        console.error("[LBProvider] Login error:", message);
         setState({
           status: "error",
           error: message,
@@ -259,6 +298,19 @@ export function LBProvider({
     [proxyUrl, fetchApiKeys, selectApiKey]
   );
 
+  /**
+   * Sélectionne une clé API avec le token déjà stocké (après login)
+   */
+  const selectApiKeyWithToken = useCallback(
+    async (apiKeyId: string): Promise<void> => {
+      if (!accessToken) {
+        throw new Error("No access token available");
+      }
+      await selectApiKey(accessToken, apiKeyId);
+    },
+    [accessToken, selectApiKey]
+  );
+
   /**
    * Déconnexion
    */
@@ -291,6 +343,7 @@ export function LBProvider({
     logout,
     fetchApiKeys,
     selectApiKey,
+    selectApiKeyWithToken,
     refreshSession,
     apiKeys,
     accessToken,

package/src/index.ts

@@ -28,6 +28,7 @@ export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
 export * from "./components/LBConnectButton";
 export * from "./components/LBSigninModal";
+export * from "./components/LBApiKeySelector";
 export * from "./components/LBKeyPicker";
 
 // Toast system