@lastbrain/ai-ui-react 1.0.38 → 1.0.39

package/dist/components/AiPromptPanel.js

@@ -279,7 +279,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             position: "sticky",
                             top: 0,
                             zIndex: 5,
-                            background: "var(--ai-bg-primary, #1f2937)",
                             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: {
@@ -530,7 +529,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             position: "sticky",
                             bottom: 0,
                             zIndex: 5,
-                            background: "var(--ai-bg-primary, #1f2937)",
                             borderTop: "1px solid var(--ai-border-primary, #374151)",
                             backdropFilter: "blur(8px)",
                         }, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
@@ -561,7 +559,6 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             overflow: "hidden",
                             display: "flex",
                             flexDirection: "column",
-                            background: "var(--ai-bg-primary, #1f2937)",
                             boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
                         }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => {
                                             setIsModelManagementOpen(false);
@@ -662,9 +659,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                                             }, children: [_jsx("span", { style: {
                                                                                         fontWeight: "600",
                                                                                         fontSize: "15px",
-                                                                                        color: isActive
-                                                                                            ? "#10b981"
-                                                                                            : "var(--ai-text-primary, #f3f4f6)",
+                                                                                        color: "var(--ai-text-secondary, #6b7280)",
                                                                                         letterSpacing: "-0.01em",
                                                                                     }, children: modelData.name }), modelData.isPro && (_jsx("span", { style: {
                                                                                         padding: "3px 10px",

package/dist/components/LBConnectButton.d.ts

@@ -0,0 +1,20 @@
+interface LBConnectButtonProps {
+    /** Texte du bouton */
+    label?: string;
+    /** Classe CSS personnalisée */
+    className?: string;
+    /** Callback après connexion réussie */
+    onConnected?: () => void;
+    /** Callback à l'ouverture de la modal */
+    onOpenModal?: () => void;
+}
+export declare function LBConnectButton({ label, className, onConnected, onOpenModal, }: LBConnectButtonProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Modal d'authentification LastBrain
+ */
+interface LBAuthModalProps {
+    onClose: (success: boolean) => void;
+}
+declare function LBAuthModal({ onClose }: LBAuthModalProps): import("react/jsx-runtime").JSX.Element;
+export { LBAuthModal };
+//# sourceMappingURL=LBConnectButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LBConnectButton.d.ts","sourceRoot":"","sources":["../../src/components/LBConnectButton.tsx"],"names":[],"mappings":"AAUA,UAAU,oBAAoB;IAC5B,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAkC,EAClC,SAAc,EACd,WAAW,EACX,WAAW,GACZ,EAAE,oBAAoB,2CA0CtB;AAED;;GAEG;AACH,UAAU,gBAAgB;IACxB,OAAO,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,iBAAS,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAsJjD;AAED,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/LBConnectButton.js

@@ -0,0 +1,87 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Bouton de connexion LastBrain
+ * Ouvre la modal d'authentification
+ */
+import React from "react";
+import { useLB } from "../context/LBAuthProvider";
+export function LBConnectButton({ label = "Se connecter à LastBrain", className = "", onConnected, onOpenModal, }) {
+    const { status, user, logout } = useLB();
+    const [showModal, setShowModal] = React.useState(false);
+    const handleClick = () => {
+        if (status === "ready" && user) {
+            // Déjà connecté, proposer de se déconnecter
+            logout();
+        }
+        else {
+            // Pas connecté, ouvrir la modal
+            setShowModal(true);
+            onOpenModal?.();
+        }
+    };
+    const handleModalClose = (success) => {
+        setShowModal(false);
+        if (success) {
+            onConnected?.();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleClick, className: className ||
+                    "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700", disabled: status === "loading", children: status === "loading"
+                    ? "Chargement..."
+                    : status === "ready" && user
+                        ? `Connecté (${user.email})`
+                        : label }), showModal && _jsx(LBAuthModal, { onClose: handleModalClose })] }));
+}
+function LBAuthModal({ onClose }) {
+    const { login, fetchApiKeys, selectApiKey, status } = useLB();
+    const [step, setStep] = React.useState("login");
+    const [email, setEmail] = React.useState("");
+    const [password, setPassword] = React.useState("");
+    const [error, setError] = React.useState("");
+    const [loading, setLoading] = React.useState(false);
+    const [accessToken, setAccessToken] = React.useState("");
+    const [apiKeys, setApiKeys] = React.useState([]);
+    const handleLogin = async (e) => {
+        e.preventDefault();
+        setError("");
+        setLoading(true);
+        try {
+            const result = await login(email, password);
+            setAccessToken(result.accessToken);
+            // Récupérer les clés API
+            const keys = await fetchApiKeys(result.accessToken);
+            setApiKeys(keys);
+            if (keys.length === 0) {
+                setError("Aucune clé API active trouvée. Créez-en une dans votre dashboard LastBrain.");
+                return;
+            }
+            // Passer à l'étape de sélection
+            setStep("select-key");
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Échec de la connexion");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSelectKey = async (apiKeyId) => {
+        setError("");
+        setLoading(true);
+        try {
+            await selectApiKey(accessToken, apiKeyId);
+            onClose(true); // Succès
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Échec de la sélection");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsx("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: _jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h2", { className: "text-xl font-bold", children: step === "login"
+                                ? "Connexion LastBrain"
+                                : "Sélectionner une clé API" }), _jsx("button", { onClick: () => onClose(false), className: "text-gray-500 hover:text-gray-700", children: "\u2715" })] }), step === "login" ? (_jsxs("form", { onSubmit: handleLogin, className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-1", children: "Email" }), _jsx("input", { type: "email", value: email, onChange: (e) => setEmail(e.target.value), className: "w-full px-3 py-2 border rounded dark:bg-gray-700", required: true, autoFocus: true })] }), _jsxs("div", { children: [_jsx("label", { className: "block text-sm font-medium mb-1", children: "Mot de passe" }), _jsx("input", { type: "password", value: password, onChange: (e) => setPassword(e.target.value), className: "w-full px-3 py-2 border rounded dark:bg-gray-700", required: true })] }), error && _jsx("div", { className: "text-red-600 text-sm", children: error }), _jsx("button", { type: "submit", disabled: loading, className: "w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50", children: loading ? "Connexion..." : "Se connecter" }), _jsxs("p", { className: "text-sm text-gray-600 dark:text-gray-400 text-center", children: ["Pas encore de compte ?", " ", _jsx("a", { href: "https://lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", className: "text-blue-600 hover:underline", children: "Cr\u00E9er un compte" })] })] })) : (_jsxs("div", { className: "space-y-4", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: "S\u00E9lectionnez une cl\u00E9 API pour cr\u00E9er une session de 72h" }), _jsx("div", { className: "space-y-2", children: apiKeys.map((key) => (_jsxs("button", { onClick: () => handleSelectKey(key.id), disabled: !key.isActive || loading, className: "w-full text-left px-4 py-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed", children: [_jsx("div", { className: "font-medium", children: key.name }), _jsxs("div", { className: "text-sm text-gray-500", children: [key.keyPrefix, "..."] }), !key.isActive && (_jsx("div", { className: "text-xs text-red-600", children: "Inactive" }))] }, key.id))) }), error && _jsx("div", { className: "text-red-600 text-sm", children: error })] }))] }) }));
+}
+export { LBAuthModal };

package/dist/components/LBKeyPicker.d.ts

@@ -0,0 +1,10 @@
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
+interface LBKeyPickerProps {
+    /** Classe CSS personnalisée */
+    className?: string;
+    /** Callback après changement de clé */
+    onKeyChanged?: (key: LBApiKey) => void;
+}
+export declare function LBKeyPicker({ className, onKeyChanged, }: LBKeyPickerProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=LBKeyPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LBKeyPicker.d.ts","sourceRoot":"","sources":["../../src/components/LBKeyPicker.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEtD,UAAU,gBAAgB;IACxB,+BAA+B;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAc,EACd,YAAY,GACb,EAAE,gBAAgB,kDA2HlB"}

package/dist/components/LBKeyPicker.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Composant LBKeyPicker
+ * Permet de changer de clé API sans se reconnecter
+ */
+import { useEffect, useState } from "react";
+import { useLB } from "../hooks/useLB";
+export function LBKeyPicker({ className = "", onKeyChanged, }) {
+    const { status, selectedKey, fetchApiKeys, selectApiKey, accessToken } = useLB();
+    const [apiKeys, setApiKeys] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [showDropdown, setShowDropdown] = useState(false);
+    useEffect(() => {
+        if (status === "ready" && accessToken) {
+            loadKeys();
+        }
+    }, [status, accessToken]);
+    const loadKeys = async () => {
+        if (!accessToken)
+            return;
+        try {
+            setLoading(true);
+            const keys = await fetchApiKeys(accessToken);
+            setApiKeys(keys);
+        }
+        catch (err) {
+            setError("Impossible de charger les clés API");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const handleSelectKey = async (keyId) => {
+        if (!accessToken)
+            return;
+        try {
+            setLoading(true);
+            setError("");
+            await selectApiKey(accessToken, keyId);
+            const selectedApiKey = apiKeys.find((k) => k.id === keyId);
+            if (selectedApiKey) {
+                onKeyChanged?.(selectedApiKey);
+            }
+            setShowDropdown(false);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : "Échec du changement de clé");
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    if (status !== "ready" || !selectedKey) {
+        return null;
+    }
+    return (_jsxs("div", { className: `relative ${className}`, children: [_jsxs("button", { onClick: () => setShowDropdown(!showDropdown), disabled: loading, className: "px-4 py-2 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 flex items-center gap-2", children: [_jsxs("span", { className: "font-mono text-sm", children: [selectedKey.keyPrefix, "..."] }), _jsx("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), showDropdown && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-10", onClick: () => setShowDropdown(false) }), _jsxs("div", { className: "absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 border rounded-lg shadow-lg z-20", children: [_jsxs("div", { className: "p-2", children: [_jsx("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300 px-3 py-2", children: "Changer de cl\u00E9 API" }), _jsx("div", { className: "space-y-1", children: apiKeys.map((key) => (_jsxs("button", { onClick: () => handleSelectKey(key.id), disabled: !key.isActive || loading || key.id === selectedKey.id, className: `w-full text-left px-3 py-2 rounded text-sm ${key.id === selectedKey.id
+                                                ? "bg-blue-100 dark:bg-blue-900"
+                                                : "hover:bg-gray-100 dark:hover:bg-gray-700"} disabled:opacity-50 disabled:cursor-not-allowed`, children: [_jsx("div", { className: "font-medium", children: key.name }), _jsxs("div", { className: "text-xs text-gray-500 font-mono", children: [key.keyPrefix, "..."] }), !key.isActive && (_jsx("div", { className: "text-xs text-red-600", children: "Inactive" }))] }, key.id))) })] }), error && (_jsx("div", { className: "px-3 py-2 text-xs text-red-600 border-t", children: error }))] })] }))] }));
+}

package/dist/context/LBAuthProvider.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Provider d'authentification LastBrain
+ * Gère l'état de connexion, la session et les appels IA
+ */
+import { type ReactNode } from "react";
+import type { LBAuthState, LBApiKey, LBLoginResult } from "@lastbrain/ai-ui-core";
+interface LBProviderProps {
+    children: ReactNode;
+    /** URL de l'API LastBrain (ex: https://api.lastbrain.io) */
+    baseUrl?: string;
+    /** URL du proxy local (ex: /api/lb) */
+    proxyUrl?: string;
+    /** Fonction appelée lors des changements d'état */
+    onStatusChange?: (status: LBAuthState["status"]) => void;
+}
+interface LBContextValue extends LBAuthState {
+    /** Fonction de connexion */
+    login: (email: string, password: string) => Promise<LBLoginResult>;
+    /** 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 */
+    selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
+    /** Recharge l'état de la session */
+    refreshSession: () => Promise<void>;
+    /** Clés API disponibles */
+    apiKeys: LBApiKey[];
+    /** Access token temporaire (après login) */
+    accessToken?: string;
+}
+export declare function LBProvider({ children, baseUrl: _baseUrl, proxyUrl, onStatusChange, }: LBProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook pour accéder au contexte LastBrain
+ */
+export declare function useLB(): LBContextValue;
+export {};
+//# sourceMappingURL=LBAuthProvider.d.ts.map

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

@@ -0,0 +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,EAER,aAAa,EAEd,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,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACnE,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,QAAoB,EAC7B,QAAoB,EACpB,cAAc,GACf,EAAE,eAAe,2CAwMjB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}

package/dist/context/LBAuthProvider.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Provider d'authentification LastBrain
+ * Gère l'état de connexion, la session et les appels IA
+ */
+import { createContext, useContext, useEffect, useCallback, useState, } from "react";
+const LBContext = createContext(undefined);
+export function LBProvider({ children, baseUrl: _baseUrl = "/api/lb", proxyUrl = "/api/lb", onStatusChange, }) {
+    const [state, setState] = useState({
+        status: "loading",
+    });
+    const [apiKeys, setApiKeys] = useState([]);
+    const [accessToken, setAccessToken] = useState();
+    /**
+     * Vérifie si une session existe au chargement
+     */
+    const checkSession = useCallback(async () => {
+        try {
+            const response = await fetch(`${proxyUrl}/auth/session/verify`, {
+                credentials: "include",
+            });
+            if (response.ok) {
+                const session = await response.json();
+                setState({
+                    status: "ready",
+                    session,
+                    user: {
+                        id: session.userId,
+                        email: "", // Sera rempli par une autre requête si nécessaire
+                    },
+                });
+                onStatusChange?.("ready");
+            }
+            else {
+                setState({ status: "needs_auth" });
+                onStatusChange?.("needs_auth");
+            }
+        }
+        catch (error) {
+            console.error("[LBProvider] Session check failed:", error);
+            setState({ status: "needs_auth" });
+            onStatusChange?.("needs_auth");
+        }
+    }, [proxyUrl, onStatusChange]);
+    useEffect(() => {
+        checkSession();
+    }, [checkSession]);
+    /**
+     * Connexion utilisateur
+     */
+    const login = useCallback(async (email, password) => {
+        try {
+            setState((prev) => ({ ...prev, status: "loading" }));
+            const response = await fetch(`${proxyUrl}/auth/login`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ email, password }),
+                credentials: "include",
+            });
+            if (!response.ok) {
+                const error = await response.json();
+                throw new Error(error.message || "Login failed");
+            }
+            const result = await response.json();
+            setAccessToken(result.accessToken);
+            setState({
+                status: "ready",
+                user: result.user,
+            });
+            return result;
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Login failed";
+            setState({
+                status: "error",
+                error: message,
+            });
+            throw error;
+        }
+    }, [proxyUrl]);
+    /**
+     * Récupère les clés API de l'utilisateur
+     */
+    const fetchApiKeys = useCallback(async (token) => {
+        try {
+            const response = await fetch(`${proxyUrl}/user/api-keys`, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+                credentials: "include",
+            });
+            if (!response.ok) {
+                throw new Error("Failed to fetch API keys");
+            }
+            const keys = await response.json();
+            setApiKeys(keys);
+            return keys;
+        }
+        catch (error) {
+            console.error("[LBProvider] Failed to fetch API keys:", error);
+            throw error;
+        }
+    }, [proxyUrl]);
+    /**
+     * Sélectionne une clé API et crée une session
+     */
+    const selectApiKey = useCallback(async (token, apiKeyId) => {
+        try {
+            setState((prev) => ({ ...prev, status: "loading" }));
+            const response = await fetch(`${proxyUrl}/auth/session`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${token}`,
+                },
+                body: JSON.stringify({ api_key_id: apiKeyId }),
+                credentials: "include",
+            });
+            if (!response.ok) {
+                throw new Error("Failed to create session");
+            }
+            const sessionResult = await response.json();
+            setState({
+                status: "ready",
+                user: state.user,
+                selectedKey: sessionResult.apiKey,
+                session: {
+                    sessionToken: sessionResult.sessionToken,
+                    userId: state.user?.id || "",
+                    apiKeyId,
+                    expiresAt: Date.now() + sessionResult.expiresIn * 1000,
+                },
+            });
+            setAccessToken(undefined); // Nettoyer l'access token temporaire
+            onStatusChange?.("ready");
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : "Failed to select API key";
+            setState({
+                status: "error",
+                error: message,
+            });
+            throw error;
+        }
+    }, [proxyUrl, state.user, onStatusChange]);
+    /**
+     * Déconnexion
+     */
+    const logout = useCallback(async () => {
+        try {
+            await fetch(`${proxyUrl}/auth/session/logout`, {
+                method: "POST",
+                credentials: "include",
+            });
+        }
+        catch (error) {
+            console.error("[LBProvider] Logout failed:", error);
+        }
+        finally {
+            setState({ status: "needs_auth" });
+            setApiKeys([]);
+            setAccessToken(undefined);
+            onStatusChange?.("needs_auth");
+        }
+    }, [proxyUrl, onStatusChange]);
+    /**
+     * Recharge la session
+     */
+    const refreshSession = useCallback(async () => {
+        await checkSession();
+    }, [checkSession]);
+    const value = {
+        ...state,
+        login,
+        logout,
+        fetchApiKeys,
+        selectApiKey,
+        refreshSession,
+        apiKeys,
+        accessToken,
+    };
+    return _jsx(LBContext.Provider, { value: value, children: children });
+}
+/**
+ * Hook pour accéder au contexte LastBrain
+ */
+export function useLB() {
+    const context = useContext(LBContext);
+    if (!context) {
+        throw new Error("useLB must be used within LBProvider");
+    }
+    return context;
+}

package/dist/hooks/useLB.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Hook useLB - Export du hook depuis LBAuthProvider
+ */
+export { useLB } from "../context/LBAuthProvider";
+//# sourceMappingURL=useLB.d.ts.map

package/dist/hooks/useLB.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLB.d.ts","sourceRoot":"","sources":["../../src/hooks/useLB.ts"],"names":[],"mappings":"AAEA;;GAEG;AAEH,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/hooks/useLB.js

@@ -0,0 +1,5 @@
+"use client";
+/**
+ * Hook useLB - Export du hook depuis LBAuthProvider
+ */
+export { useLB } from "../context/LBAuthProvider";

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./types";
 export * from "./context/AiProvider";
+export * from "./context/LBAuthProvider";
 export * from "./hooks/useAiClient";
 export * from "./hooks/useAiModels";
 export * from "./hooks/useAiStatus";
@@ -7,6 +8,7 @@ export * from "./hooks/useAiCallText";
 export * from "./hooks/useAiCallImage";
 export * from "./hooks/usePrompts";
 export * from "./hooks/useModelManagement";
+export * from "./hooks/useLB";
 export * from "./components/AiPromptPanel";
 export * from "./components/AiModelSelect";
 export * from "./components/AiInput";
@@ -17,6 +19,8 @@ export * from "./components/AiImageButton";
 export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
+export * from "./components/LBConnectButton";
+export * from "./components/LBKeyPicker";
 export * from "./components/ErrorToast";
 export * from "./components/UsageToast";
 export * from "./utils/modelManagement";

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;AAGrC,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;AAG3C,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;AAG5C,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,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

@@ -2,6 +2,7 @@
 export * from "./types";
 // Context
 export * from "./context/AiProvider";
+export * from "./context/LBAuthProvider";
 // Hooks
 export * from "./hooks/useAiClient";
 export * from "./hooks/useAiModels";
@@ -10,6 +11,7 @@ export * from "./hooks/useAiCallText";
 export * from "./hooks/useAiCallImage";
 export * from "./hooks/usePrompts";
 export * from "./hooks/useModelManagement";
+export * from "./hooks/useLB";
 // Components
 export * from "./components/AiPromptPanel";
 export * from "./components/AiModelSelect";
@@ -21,6 +23,8 @@ export * from "./components/AiImageButton";
 export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
+export * from "./components/LBConnectButton";
+export * from "./components/LBKeyPicker";
 // Toast system
 export * from "./components/ErrorToast";
 export * from "./components/UsageToast";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "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.28"
+    "@lastbrain/ai-ui-core": "1.0.29"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiPromptPanel.tsx

@@ -424,7 +424,7 @@ function AiPromptPanelInternal({
             position: "sticky",
             top: 0,
             zIndex: 5,
-            background: "var(--ai-bg-primary, #1f2937)",
+
             borderBottom: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
@@ -1003,7 +1003,7 @@ function AiPromptPanelInternal({
             position: "sticky",
             bottom: 0,
             zIndex: 5,
-            background: "var(--ai-bg-primary, #1f2937)",
+
             borderTop: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
@@ -1066,7 +1066,7 @@ function AiPromptPanelInternal({
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              background: "var(--ai-bg-primary, #1f2937)",
+
               boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
             }}
           >
@@ -1250,9 +1250,8 @@ function AiPromptPanelInternal({
                                 style={{
                                   fontWeight: "600",
                                   fontSize: "15px",
-                                  color: isActive
-                                    ? "#10b981"
-                                    : "var(--ai-text-primary, #f3f4f6)",
+                                  color: "var(--ai-text-secondary, #6b7280)",
+
                                   letterSpacing: "-0.01em",
                                 }}
                               >

package/src/components/LBConnectButton.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+/**
+ * Bouton de connexion LastBrain
+ * Ouvre la modal d'authentification
+ */
+
+import React from "react";
+import { useLB } from "../context/LBAuthProvider";
+
+interface LBConnectButtonProps {
+  /** Texte du bouton */
+  label?: string;
+  /** Classe CSS personnalisée */
+  className?: string;
+  /** Callback après connexion réussie */
+  onConnected?: () => void;
+  /** Callback à l'ouverture de la modal */
+  onOpenModal?: () => void;
+}
+
+export function LBConnectButton({
+  label = "Se connecter à LastBrain",
+  className = "",
+  onConnected,
+  onOpenModal,
+}: LBConnectButtonProps) {
+  const { status, user, logout } = useLB();
+  const [showModal, setShowModal] = React.useState(false);
+
+  const handleClick = () => {
+    if (status === "ready" && user) {
+      // Déjà connecté, proposer de se déconnecter
+      logout();
+    } else {
+      // Pas connecté, ouvrir la modal
+      setShowModal(true);
+      onOpenModal?.();
+    }
+  };
+
+  const handleModalClose = (success: boolean) => {
+    setShowModal(false);
+    if (success) {
+      onConnected?.();
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleClick}
+        className={
+          className ||
+          "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        }
+        disabled={status === "loading"}
+      >
+        {status === "loading"
+          ? "Chargement..."
+          : status === "ready" && user
+            ? `Connecté (${user.email})`
+            : label}
+      </button>
+
+      {showModal && <LBAuthModal onClose={handleModalClose} />}
+    </>
+  );
+}
+
+/**
+ * Modal d'authentification LastBrain
+ */
+interface LBAuthModalProps {
+  onClose: (success: boolean) => void;
+}
+
+function LBAuthModal({ onClose }: LBAuthModalProps) {
+  const { login, fetchApiKeys, selectApiKey, status } = useLB();
+  const [step, setStep] = React.useState<"login" | "select-key">("login");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [error, setError] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [accessToken, setAccessToken] = React.useState("");
+  const [apiKeys, setApiKeys] = React.useState<any[]>([]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const result = await login(email, password);
+      setAccessToken(result.accessToken);
+
+      // Récupérer les clés API
+      const keys = await fetchApiKeys(result.accessToken);
+      setApiKeys(keys);
+
+      if (keys.length === 0) {
+        setError(
+          "Aucune clé API active trouvée. Créez-en une dans votre dashboard LastBrain."
+        );
+        return;
+      }
+
+      // Passer à l'étape de sélection
+      setStep("select-key");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Échec de la connexion");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectKey = async (apiKeyId: string) => {
+    setError("");
+    setLoading(true);
+
+    try {
+      await selectApiKey(accessToken, apiKeyId);
+      onClose(true); // Succès
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Échec de la sélection");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold">
+            {step === "login"
+              ? "Connexion LastBrain"
+              : "Sélectionner une clé API"}
+          </h2>
+          <button
+            onClick={() => onClose(false)}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        {step === "login" ? (
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2 border rounded dark:bg-gray-700"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">
+                Mot de passe
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border rounded dark:bg-gray-700"
+                required
+              />
+            </div>
+
+            {error && <div className="text-red-600 text-sm">{error}</div>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {loading ? "Connexion..." : "Se connecter"}
+            </button>
+
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">
+              Pas encore de compte ?{" "}
+              <a
+                href="https://lastbrain.io/signup"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                Créer un compte
+              </a>
+            </p>
+          </form>
+        ) : (
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Sélectionnez une clé API pour créer une session de 72h
+            </p>
+
+            <div className="space-y-2">
+              {apiKeys.map((key) => (
+                <button
+                  key={key.id}
+                  onClick={() => handleSelectKey(key.id)}
+                  disabled={!key.isActive || loading}
+                  className="w-full text-left px-4 py-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <div className="font-medium">{key.name}</div>
+                  <div className="text-sm text-gray-500">
+                    {key.keyPrefix}...
+                  </div>
+                  {!key.isActive && (
+                    <div className="text-xs text-red-600">Inactive</div>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {error && <div className="text-red-600 text-sm">{error}</div>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { LBAuthModal };

package/src/components/LBKeyPicker.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+/**
+ * Composant LBKeyPicker
+ * Permet de changer de clé API sans se reconnecter
+ */
+
+import { useEffect, useState } from "react";
+import { useLB } from "../hooks/useLB";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
+
+interface LBKeyPickerProps {
+  /** Classe CSS personnalisée */
+  className?: string;
+  /** Callback après changement de clé */
+  onKeyChanged?: (key: LBApiKey) => void;
+}
+
+export function LBKeyPicker({
+  className = "",
+  onKeyChanged,
+}: LBKeyPickerProps) {
+  const { status, selectedKey, fetchApiKeys, selectApiKey, accessToken } =
+    useLB();
+  const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    if (status === "ready" && accessToken) {
+      loadKeys();
+    }
+  }, [status, accessToken]);
+
+  const loadKeys = async () => {
+    if (!accessToken) return;
+
+    try {
+      setLoading(true);
+      const keys = await fetchApiKeys(accessToken);
+      setApiKeys(keys);
+    } catch (err) {
+      setError("Impossible de charger les clés API");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectKey = async (keyId: string) => {
+    if (!accessToken) return;
+
+    try {
+      setLoading(true);
+      setError("");
+      await selectApiKey(accessToken, keyId);
+      const selectedApiKey = apiKeys.find((k) => k.id === keyId);
+      if (selectedApiKey) {
+        onKeyChanged?.(selectedApiKey);
+      }
+      setShowDropdown(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Échec du changement de clé"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (status !== "ready" || !selectedKey) {
+    return null;
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        onClick={() => setShowDropdown(!showDropdown)}
+        disabled={loading}
+        className="px-4 py-2 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 flex items-center gap-2"
+      >
+        <span className="font-mono text-sm">{selectedKey.keyPrefix}...</span>
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {showDropdown && (
+        <>
+          <div
+            className="fixed inset-0 z-10"
+            onClick={() => setShowDropdown(false)}
+          />
+          <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 border rounded-lg shadow-lg z-20">
+            <div className="p-2">
+              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 px-3 py-2">
+                Changer de clé API
+              </div>
+              <div className="space-y-1">
+                {apiKeys.map((key) => (
+                  <button
+                    key={key.id}
+                    onClick={() => handleSelectKey(key.id)}
+                    disabled={
+                      !key.isActive || loading || key.id === selectedKey.id
+                    }
+                    className={`w-full text-left px-3 py-2 rounded text-sm ${
+                      key.id === selectedKey.id
+                        ? "bg-blue-100 dark:bg-blue-900"
+                        : "hover:bg-gray-100 dark:hover:bg-gray-700"
+                    } disabled:opacity-50 disabled:cursor-not-allowed`}
+                  >
+                    <div className="font-medium">{key.name}</div>
+                    <div className="text-xs text-gray-500 font-mono">
+                      {key.keyPrefix}...
+                    </div>
+                    {!key.isActive && (
+                      <div className="text-xs text-red-600">Inactive</div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {error && (
+              <div className="px-3 py-2 text-xs text-red-600 border-t">
+                {error}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/context/LBAuthProvider.tsx

@@ -0,0 +1,269 @@
+"use client";
+
+/**
+ * Provider d'authentification LastBrain
+ * Gère l'état de connexion, la session et les appels IA
+ */
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useCallback,
+  useState,
+  type ReactNode,
+} from "react";
+import type {
+  LBAuthState,
+  LBApiKey,
+  LBSession,
+  LBLoginResult,
+  LBSessionResult,
+} from "@lastbrain/ai-ui-core";
+
+interface LBProviderProps {
+  children: ReactNode;
+  /** URL de l'API LastBrain (ex: https://api.lastbrain.io) */
+  baseUrl?: string;
+  /** URL du proxy local (ex: /api/lb) */
+  proxyUrl?: string;
+  /** Fonction appelée lors des changements d'état */
+  onStatusChange?: (status: LBAuthState["status"]) => void;
+}
+
+interface LBContextValue extends LBAuthState {
+  /** Fonction de connexion */
+  login: (email: string, password: string) => Promise<LBLoginResult>;
+  /** 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 */
+  selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
+  /** Recharge l'état de la session */
+  refreshSession: () => Promise<void>;
+  /** Clés API disponibles */
+  apiKeys: LBApiKey[];
+  /** Access token temporaire (après login) */
+  accessToken?: string;
+}
+
+const LBContext = createContext<LBContextValue | undefined>(undefined);
+
+export function LBProvider({
+  children,
+  baseUrl: _baseUrl = "/api/lb",
+  proxyUrl = "/api/lb",
+  onStatusChange,
+}: LBProviderProps) {
+  const [state, setState] = useState<LBAuthState>({
+    status: "loading",
+  });
+  const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
+  const [accessToken, setAccessToken] = useState<string>();
+
+  /**
+   * Vérifie si une session existe au chargement
+   */
+  const checkSession = useCallback(async () => {
+    try {
+      const response = await fetch(`${proxyUrl}/auth/session/verify`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const session: LBSession = await response.json();
+        setState({
+          status: "ready",
+          session,
+          user: {
+            id: session.userId,
+            email: "", // Sera rempli par une autre requête si nécessaire
+          },
+        });
+        onStatusChange?.("ready");
+      } else {
+        setState({ status: "needs_auth" });
+        onStatusChange?.("needs_auth");
+      }
+    } catch (error) {
+      console.error("[LBProvider] Session check failed:", error);
+      setState({ status: "needs_auth" });
+      onStatusChange?.("needs_auth");
+    }
+  }, [proxyUrl, onStatusChange]);
+
+  useEffect(() => {
+    checkSession();
+  }, [checkSession]);
+
+  /**
+   * Connexion utilisateur
+   */
+  const login = useCallback(
+    async (email: string, password: string): Promise<LBLoginResult> => {
+      try {
+        setState((prev: LBAuthState) => ({ ...prev, status: "loading" }));
+
+        const response = await fetch(`${proxyUrl}/auth/login`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          const error = await response.json();
+          throw new Error(error.message || "Login failed");
+        }
+
+        const result: LBLoginResult = await response.json();
+        setAccessToken(result.accessToken);
+
+        setState({
+          status: "ready",
+          user: result.user,
+        });
+
+        return result;
+      } catch (error) {
+        const message = error instanceof Error ? error.message : "Login failed";
+        setState({
+          status: "error",
+          error: message,
+        });
+        throw error;
+      }
+    },
+    [proxyUrl]
+  );
+
+  /**
+   * Récupère les clés API de l'utilisateur
+   */
+  const fetchApiKeys = useCallback(
+    async (token: string): Promise<LBApiKey[]> => {
+      try {
+        const response = await fetch(`${proxyUrl}/user/api-keys`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to fetch API keys");
+        }
+
+        const keys: LBApiKey[] = await response.json();
+        setApiKeys(keys);
+        return keys;
+      } catch (error) {
+        console.error("[LBProvider] Failed to fetch API keys:", error);
+        throw error;
+      }
+    },
+    [proxyUrl]
+  );
+
+  /**
+   * Sélectionne une clé API et crée une session
+   */
+  const selectApiKey = useCallback(
+    async (token: string, apiKeyId: string): Promise<void> => {
+      try {
+        setState((prev: LBAuthState) => ({ ...prev, status: "loading" }));
+
+        const response = await fetch(`${proxyUrl}/auth/session`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify({ api_key_id: apiKeyId }),
+          credentials: "include",
+        });
+
+        if (!response.ok) {
+          throw new Error("Failed to create session");
+        }
+
+        const sessionResult: LBSessionResult = await response.json();
+
+        setState({
+          status: "ready",
+          user: state.user,
+          selectedKey: sessionResult.apiKey,
+          session: {
+            sessionToken: sessionResult.sessionToken,
+            userId: state.user?.id || "",
+            apiKeyId,
+            expiresAt: Date.now() + sessionResult.expiresIn * 1000,
+          },
+        });
+
+        setAccessToken(undefined); // Nettoyer l'access token temporaire
+        onStatusChange?.("ready");
+      } catch (error) {
+        const message =
+          error instanceof Error ? error.message : "Failed to select API key";
+        setState({
+          status: "error",
+          error: message,
+        });
+        throw error;
+      }
+    },
+    [proxyUrl, state.user, onStatusChange]
+  );
+
+  /**
+   * Déconnexion
+   */
+  const logout = useCallback(async (): Promise<void> => {
+    try {
+      await fetch(`${proxyUrl}/auth/session/logout`, {
+        method: "POST",
+        credentials: "include",
+      });
+    } catch (error) {
+      console.error("[LBProvider] Logout failed:", error);
+    } finally {
+      setState({ status: "needs_auth" });
+      setApiKeys([]);
+      setAccessToken(undefined);
+      onStatusChange?.("needs_auth");
+    }
+  }, [proxyUrl, onStatusChange]);
+
+  /**
+   * Recharge la session
+   */
+  const refreshSession = useCallback(async (): Promise<void> => {
+    await checkSession();
+  }, [checkSession]);
+
+  const value: LBContextValue = {
+    ...state,
+    login,
+    logout,
+    fetchApiKeys,
+    selectApiKey,
+    refreshSession,
+    apiKeys,
+    accessToken,
+  };
+
+  return <LBContext.Provider value={value}>{children}</LBContext.Provider>;
+}
+
+/**
+ * Hook pour accéder au contexte LastBrain
+ */
+export function useLB(): LBContextValue {
+  const context = useContext(LBContext);
+  if (!context) {
+    throw new Error("useLB must be used within LBProvider");
+  }
+  return context;
+}

package/src/hooks/useLB.ts

@@ -0,0 +1,7 @@
+"use client";
+
+/**
+ * Hook useLB - Export du hook depuis LBAuthProvider
+ */
+
+export { useLB } from "../context/LBAuthProvider";

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./types";
 
 // Context
 export * from "./context/AiProvider";
+export * from "./context/LBAuthProvider";
 
 // Hooks
 export * from "./hooks/useAiClient";
@@ -12,6 +13,7 @@ export * from "./hooks/useAiCallText";
 export * from "./hooks/useAiCallImage";
 export * from "./hooks/usePrompts";
 export * from "./hooks/useModelManagement";
+export * from "./hooks/useLB";
 
 // Components
 export * from "./components/AiPromptPanel";
@@ -24,6 +26,8 @@ export * from "./components/AiImageButton";
 export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
+export * from "./components/LBConnectButton";
+export * from "./components/LBKeyPicker";
 
 // Toast system
 export * from "./components/ErrorToast";