@lastbrain/ai-ui-react 1.0.67 → 1.0.69

package/dist/components/AiStatusButton.js

@@ -1,21 +1,72 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useLayoutEffect } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { BarChart3, Settings, FileText, History as HistoryIcon, FolderPlus, Power, LogOut, ArrowRightLeft, } from "lucide-react";
-import { aiStyles, calculateTooltipPosition } from "../styles/inline";
+import { ArrowRightLeft, BarChart3, FileText, Folder, History, Loader2, LogOut, Settings, Shield, } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { useAiContext } from "../context/AiProvider";
-import { LBSigninModal } from "./LBSigninModal";
 import { LBApiKeySelector } from "./LBApiKeySelector";
-export function AiStatusButton({ status, loading = false, className = "", }) {
-    // Rendre l'authentification optionnelle
+import { LBSigninModal } from "./LBSigninModal";
+const QUICK_LINKS = [
+    {
+        href: "https://prompt.lastbrain.io/auth/ai/tokens",
+        title: "Dashboard",
+        icon: BarChart3,
+    },
+    {
+        href: "https://prompt.lastbrain.io/auth/ai/history",
+        title: "Historique",
+        icon: History,
+    },
+    {
+        href: "https://prompt.lastbrain.io/auth/ai/settings",
+        title: "Settings",
+        icon: Settings,
+    },
+    {
+        href: "https://prompt.lastbrain.io/auth/ai/prompts",
+        title: "Prompts",
+        icon: FileText,
+    },
+    {
+        href: "https://prompt.lastbrain.io/auth/folder",
+        title: "Dossiers",
+        icon: Folder,
+    },
+];
+const clamp = (value) => Math.min(100, Math.max(0, value || 0));
+const num = (value) => (typeof value === "number" ? value : 0);
+const fixed = (value, digits) => num(value).toFixed(digits);
+function formatStorage(mb) {
+    const value = num(mb);
+    if (value >= 1024) {
+        return `${(value / 1024).toFixed(2)} GB`;
+    }
+    return `${value.toFixed(2)} MB`;
+}
+function UsageCircle({ percentage }) {
+    const safe = clamp(percentage);
+    const toneClass = safe > 90
+        ? "ai-usage-circle-value--high"
+        : safe > 75
+            ? "ai-usage-circle-value--warn"
+            : "ai-usage-circle-value--low";
+    const size = 28;
+    const stroke = 3;
+    const radius = (size - stroke) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference - (safe / 100) * circumference;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, className: "ai-usage-circle-track", strokeWidth: stroke, fill: "transparent" }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, className: toneClass, strokeWidth: stroke, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: dashOffset, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})` }), _jsxs("text", { x: size / 2, y: size / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: "7px", className: toneClass === "ai-usage-circle-value--high"
+                    ? "ai-usage-circle-text--high"
+                    : toneClass === "ai-usage-circle-value--warn"
+                        ? "ai-usage-circle-text--warn"
+                        : "ai-usage-circle-text--low", fontWeight: "700", children: [safe.toFixed(0), "%"] })] }));
+}
+export function AiStatusButton({ status, loading = false, className = "", size = "md", radius = "full", }) {
     let lbStatus;
     let user;
     let logout;
     let apiKeys = [];
-    let accessToken;
-    let selectApiKeyWithToken;
     let switchApiKey;
     let lbApiStatus = null;
     let lbBasicStatus = null;
@@ -31,8 +82,6 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         user = lbContext.user;
         logout = lbContext.logout;
         apiKeys = lbContext.apiKeys || [];
-        accessToken = lbContext.accessToken;
-        selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
         switchApiKey = lbContext.switchApiKey;
         lbApiStatus = lbContext.apiStatus;
         lbBasicStatus = lbContext.basicStatus;
@@ -44,177 +93,76 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         lbRefreshStorageStatus = lbContext.refreshStorageStatus;
     }
     catch {
-        // LBProvider n'est pas disponible, ignorer
         lbStatus = undefined;
-        user = undefined;
-        logout = undefined;
     }
-    // Toujours prioriser les données du contexte LB quand disponibles
-    // pour éviter d'afficher un status externe obsolète (Unknown/0).
-    const lbEffectiveStatus = lbStatus === "ready"
-        ? {
-            ...(lbApiStatus || {}),
-            ...(lbBasicStatus || {}),
-            storage: lbStorageStatus?.storage || lbApiStatus?.storage,
-        }
-        : null;
-    const effectiveStatus = lbEffectiveStatus || status || null;
-    // Récupérer refetchProviders depuis AiProvider si disponible
     let refetchProviders;
     try {
-        const aiContext = useAiContext();
-        refetchProviders = aiContext.refetchProviders;
+        refetchProviders = useAiContext().refetchProviders;
     }
     catch {
-        // AiProvider n'est pas disponible, ignorer
         refetchProviders = undefined;
     }
     const [showSigninModal, setShowSigninModal] = useState(false);
     const [showApiKeySelector, setShowApiKeySelector] = useState(false);
-    const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
-    const [isLoadingStatus, setIsLoadingStatus] = useState(false);
-    const formatFixed = (value, digits) => typeof value === "number" ? value.toFixed(digits) : "0.00";
-    const formatStorage = (valueMb) => {
-        const mb = typeof valueMb === "number" ? valueMb : 0;
-        if (mb >= 1024) {
-            const gb = mb / 1024;
-            return `${gb.toFixed(2)} GB`;
-        }
-        return `${mb.toFixed(2)} MB`;
-    };
-    const safeNumber = (value) => typeof value === "number" ? value : 0;
-    const clampPercentage = (value) => Math.min(100, Math.max(0, safeNumber(value)));
-    const getUsageColor = (percentage) => {
-        if (percentage > 90) {
-            return aiStyles.tooltipValueWarning.color;
-        }
-        if (percentage > 75) {
-            return aiStyles.tooltipValueWarning.color;
-        }
-        return aiStyles.tooltipValueSuccess.color;
-    };
-    const renderUsageCircle = (percentageValue) => {
-        const percentage = clampPercentage(percentageValue);
-        const size = 28;
-        const stroke = 3;
-        const radius = (size - stroke) / 2;
-        const circumference = 2 * Math.PI * radius;
-        const offset = circumference - (percentage / 100) * circumference;
-        const color = getUsageColor(percentage);
-        return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: aiStyles.tooltipLabel.color, strokeWidth: stroke, fill: "transparent", opacity: 0.3 }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: color, strokeWidth: stroke, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})` }), _jsxs("text", { x: size / 2, y: size / 2, textAnchor: "middle", dominantBaseline: "central", fontSize: "7px", fill: color, fontWeight: "600", children: [percentage.toFixed(0), "%"] })] }));
-    };
-    const balanceUsage = effectiveStatus?.balance;
-    const storageUsage = effectiveStatus?.storage;
-    const balanceUsed = safeNumber(balanceUsage?.used);
-    const balanceRemaining = safeNumber(balanceUsage?.remaining);
-    const rawBalanceTotal = balanceUsage?.total ??
-        safeNumber(balanceUsage?.purchased) + safeNumber(balanceUsage?.quota);
-    const balanceTotal = rawBalanceTotal > 0 ? rawBalanceTotal : balanceUsed + balanceRemaining;
-    const balancePercentage = balanceUsage?.percentage ??
-        (balanceTotal > 0 ? Math.round((balanceUsed / balanceTotal) * 100) : 0);
-    const storageAllocated = storageUsage?.allocated_mb ?? storageUsage?.total_mb ?? 0;
-    const storageUsed = storageUsage?.used_mb ?? storageUsage?.total_mb ?? 0;
-    const storagePercentage = storageUsage?.percentage ??
-        (storageAllocated > 0
-            ? Math.round((storageUsed / storageAllocated) * 100)
-            : 0);
-    const showFastStatusSkeleton = lbStatus === "ready" &&
-        (lbIsLoadingStatus || isLoadingStatus) &&
-        !lbBasicStatus &&
-        !effectiveStatus;
     const [showTooltip, setShowTooltip] = useState(false);
-    const [isHovered, setIsHovered] = useState(false);
-    const [tooltipPosition, setTooltipPosition] = useState({});
+    const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
     const buttonRef = useRef(null);
     const tooltipRef = useRef(null);
     const canPortal = typeof document !== "undefined";
-    const hasApiKeySelected = Boolean(effectiveStatus?.apiKey?.id || effectiveStatus?.api_key?.id || lbSelectedKey?.id);
+    const effectiveStatus = lbStatus === "ready"
+        ? {
+            ...(lbApiStatus || {}),
+            ...(lbBasicStatus || {}),
+            storage: lbStorageStatus?.storage || lbApiStatus?.storage,
+        }
+        : status || null;
+    const hasApiKeySelected = Boolean(effectiveStatus?.apiKey?.id ||
+        effectiveStatus?.api_key?.id ||
+        lbSelectedKey?.id);
     const requiresApiKeySelection = lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
+    const isApiKeyAuthMode = effectiveStatus?.authType === "api_key";
+    const [tooltipStyle, setTooltipStyle] = useState({});
     useLayoutEffect(() => {
-        if (!showTooltip || !buttonRef.current) {
+        if (!showTooltip || !buttonRef.current || !canPortal) {
             return;
         }
-        const updatePosition = () => {
-            if (!buttonRef.current) {
+        const update = () => {
+            if (!buttonRef.current)
                 return;
-            }
-            const buttonRect = buttonRef.current.getBoundingClientRect();
-            if (canPortal) {
-                const tooltipRect = tooltipRef.current?.getBoundingClientRect();
-                const tooltipWidth = tooltipRect?.width ?? 360;
-                const tooltipHeight = tooltipRect?.height ?? 520;
-                const viewportWidth = window.innerWidth;
-                const viewportHeight = window.innerHeight;
-                const margin = 8;
-                const spaceBelow = viewportHeight - buttonRect.bottom;
-                const spaceAbove = buttonRect.top;
-                const spaceRight = viewportWidth - buttonRect.right;
-                const spaceLeft = buttonRect.left;
-                const preferBelow = spaceBelow >= spaceAbove;
-                const preferRight = spaceRight >= spaceLeft;
-                let top = preferBelow
-                    ? buttonRect.bottom + margin
-                    : buttonRect.top - tooltipHeight - margin;
-                if (top < margin) {
-                    top = margin;
-                }
-                if (top + tooltipHeight > viewportHeight - margin) {
-                    top = Math.max(margin, viewportHeight - tooltipHeight - margin);
-                }
-                let left = preferRight
-                    ? buttonRect.left
-                    : buttonRect.right - tooltipWidth;
-                if (left < margin) {
-                    left = margin;
-                }
-                if (left + tooltipWidth > viewportWidth - margin) {
-                    left = Math.max(margin, viewportWidth - tooltipWidth - margin);
-                }
-                setTooltipPosition({
-                    top: `${top}px`,
-                    left: `${left}px`,
-                    position: "fixed",
-                });
-            }
-            else {
-                const position = calculateTooltipPosition(buttonRect);
-                setTooltipPosition(position);
-            }
+            const rect = buttonRef.current.getBoundingClientRect();
+            const tipRect = tooltipRef.current?.getBoundingClientRect();
+            const tipWidth = tipRect?.width ?? 360;
+            const tipHeight = tipRect?.height ?? 520;
+            const margin = 8;
+            const viewportW = window.innerWidth;
+            const viewportH = window.innerHeight;
+            const placeBelow = viewportH - rect.bottom >= rect.top;
+            let top = placeBelow
+                ? rect.bottom + margin
+                : rect.top - tipHeight - margin;
+            top = Math.max(margin, Math.min(top, viewportH - tipHeight - margin));
+            const placeRight = viewportW - rect.right >= rect.left;
+            let left = placeRight ? rect.left : rect.right - tipWidth;
+            left = Math.max(margin, Math.min(left, viewportW - tipWidth - margin));
+            setTooltipStyle({
+                position: "fixed",
+                top: `${top}px`,
+                left: `${left}px`,
+            });
         };
-        const rafId = requestAnimationFrame(updatePosition);
-        const rafId2 = requestAnimationFrame(updatePosition);
-        const handleResize = () => updatePosition();
-        window.addEventListener("resize", handleResize);
-        window.addEventListener("scroll", handleResize, true);
+        const raf1 = requestAnimationFrame(update);
+        const raf2 = requestAnimationFrame(update);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
         return () => {
-            cancelAnimationFrame(rafId);
-            cancelAnimationFrame(rafId2);
-            window.removeEventListener("resize", handleResize);
-            window.removeEventListener("scroll", handleResize, true);
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
         };
     }, [showTooltip, canPortal]);
-    const handleMouseEnter = () => {
-        if (requiresApiKeySelection) {
-            return;
-        }
-        setShowTooltip(true);
-        setIsHovered(true);
-    };
-    const handleMouseLeave = () => {
-        if (requiresApiKeySelection) {
-            return;
-        }
-        // Keep tooltip visible if hovering over it
-        setTimeout(() => {
-            if (!tooltipRef.current?.matches(":hover") &&
-                !buttonRef.current?.matches(":hover")) {
-                setShowTooltip(false);
-                setIsHovered(false);
-            }
-        }, 100);
-    };
     useLayoutEffect(() => {
-        if (!showTooltip || requiresApiKeySelection || lbStatus !== "ready") {
+        if (!showTooltip || lbStatus !== "ready" || requiresApiKeySelection) {
             return;
         }
         if (!lbBasicStatus && !lbIsLoadingStatus && lbRefreshBasicStatus) {
@@ -227,8 +175,8 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         }
     }, [
         showTooltip,
-        requiresApiKeySelection,
         lbStatus,
+        requiresApiKeySelection,
         lbBasicStatus,
         lbStorageStatus,
         lbIsLoadingStatus,
@@ -236,454 +184,88 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         lbRefreshBasicStatus,
         lbRefreshStorageStatus,
     ]);
-    if (loading || isSelectingApiKey) {
-        return (_jsx("button", { ref: buttonRef, style: {
-                ...aiStyles.statusButton,
-                ...aiStyles.statusButtonDisabled,
-            }, className: className, disabled: true, children: _jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) }) }));
-    }
-    if (requiresApiKeySelection) {
-        return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
-                        ...aiStyles.statusButton,
-                        color: "#f59e0b",
-                        ...(isHovered && aiStyles.statusButtonHover),
-                    }, className: className, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onClick: () => setShowApiKeySelector(true), title: "Select an API key to enable AI status and generation", children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showApiKeySelector && apiKeys.length > 0 && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
-                        setIsSelectingApiKey(true);
-                        try {
-                            if (switchApiKey) {
-                                await switchApiKey(keyId);
-                            }
-                            setShowApiKeySelector(false);
-                            if (refetchProviders) {
-                                await refetchProviders();
-                            }
-                        }
-                        catch (error) {
-                            console.error("Failed to select API key:", error);
-                        }
-                        finally {
-                            setIsSelectingApiKey(false);
-                        }
-                    }, onCancel: () => setShowApiKeySelector(false) }))] }));
-    }
-    if (!effectiveStatus) {
-        // Si pas de statut API et pas de LBProvider, afficher message simple
-        if (!lbStatus && lbStatus !== "ready") {
-            return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
-                            ...aiStyles.statusButton,
-                            color: "#ef4444",
-                            ...(isHovered && aiStyles.statusButtonHover),
-                        }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip &&
-                        canPortal &&
-                        createPortal(_jsx("div", { ref: tooltipRef, style: {
-                                ...aiStyles.tooltip,
-                                ...tooltipPosition,
-                                zIndex: 50,
-                            }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: "No status available" }), document.body)] }));
+    const balance = (effectiveStatus?.balance || {});
+    const storage = (effectiveStatus?.storage || {});
+    const balanceUsed = num(balance.used);
+    const balanceRemaining = num(balance.remaining);
+    const rawBalanceTotal = balance.total ?? num(balance.purchased) + num(balance.quota);
+    const balanceTotal = rawBalanceTotal > 0 ? rawBalanceTotal : balanceUsed + balanceRemaining;
+    const balancePct = balance.percentage ??
+        (balanceTotal > 0 ? Math.round((balanceUsed / balanceTotal) * 100) : 0);
+    const storageUsed = storage.used_mb ?? storage.total_mb ?? 0;
+    const storageTotal = storage.allocated_mb ?? storage.total_mb ?? 0;
+    const storagePct = storage.percentage ??
+        (storageTotal > 0 ? Math.round((storageUsed / storageTotal) * 100) : 0);
+    const showFastSkeleton = lbStatus === "ready" &&
+        lbIsLoadingStatus &&
+        !lbBasicStatus &&
+        !effectiveStatus;
+    const showCornerLoading = lbStatus === "ready" &&
+        (showFastSkeleton || lbIsLoadingStatus || lbIsLoadingStorage);
+    const triggerTone = useMemo(() => {
+        if (requiresApiKeySelection)
+            return "warning";
+        if (lbStatus && lbStatus !== "ready")
+            return "danger";
+        if (effectiveStatus)
+            return "success";
+        return "neutral";
+    }, [requiresApiKeySelection, lbStatus, effectiveStatus]);
+    const openTooltip = () => {
+        if (requiresApiKeySelection) {
+            return;
         }
-        return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
-                                ...aiStyles.statusButton,
-                                color: lbStatus === "ready" ? "#10b981" : "#ef4444",
-                                ...(isHovered && aiStyles.statusButtonHover),
-                            }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: () => {
-                                if (lbStatus !== "ready") {
-                                    setShowSigninModal(true);
-                                }
-                            }, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip &&
-                            canPortal &&
-                            createPortal(_jsx("div", { ref: tooltipRef, style: {
-                                    ...aiStyles.tooltip,
-                                    ...tooltipPosition,
-                                    zIndex: 50,
-                                }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: lbStatus === "ready" && user ? (_jsxs(_Fragment, { children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsx("div", { style: {
-                                                ...aiStyles.tooltipSection,
-                                                ...aiStyles.tooltipSectionFirst,
-                                            }, children: _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "User:" }), _jsx("span", { style: aiStyles.tooltipValue, children: user.email })] }) }), showFastStatusSkeleton && (_jsxs(_Fragment, { children: [_jsxs("div", { style: aiStyles.tooltipSection, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("div", { style: {
-                                                                        height: "16px",
-                                                                        width: "110px",
-                                                                        background: "rgba(139, 92, 246, 0.12)",
-                                                                        borderRadius: "4px",
-                                                                        animation: "pulse 2s ease-in-out infinite",
-                                                                    } })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("div", { style: {
-                                                                        height: "16px",
-                                                                        width: "48px",
-                                                                        background: "rgba(139, 92, 246, 0.12)",
-                                                                        borderRadius: "4px",
-                                                                        animation: "pulse 2s ease-in-out infinite",
-                                                                    } })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsx("div", { style: {
-                                                                        height: "16px",
-                                                                        width: "84px",
-                                                                        background: "rgba(139, 92, 246, 0.12)",
-                                                                        borderRadius: "4px",
-                                                                        animation: "pulse 2s ease-in-out infinite",
-                                                                    } })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Auth:" }), _jsx("div", { style: {
-                                                                        height: "16px",
-                                                                        width: "72px",
-                                                                        background: "rgba(139, 92, 246, 0.12)",
-                                                                        borderRadius: "4px",
-                                                                        animation: "pulse 2s ease-in-out infinite",
-                                                                    } })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Wallet" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsx("div", { style: {
-                                                                        height: "16px",
-                                                                        width: "120px",
-                                                                        background: "rgba(139, 92, 246, 0.12)",
-                                                                        borderRadius: "4px",
-                                                                        animation: "pulse 2s ease-in-out infinite",
-                                                                    } })] })] })] })), _jsxs("div", { style: {
-                                                display: "flex",
-                                                gap: "8px",
-                                                borderTop: "1px solid var(--ai-border-primary, #374151)",
-                                                paddingTop: "12px",
-                                            }, children: [_jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/dashboard", "_blank"), style: {
-                                                        flex: 1,
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        padding: "14px",
-                                                        cursor: "pointer",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        color: "#8b5cf6",
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "rgba(139, 92, 246, 0.1)",
-                                                        });
-                                                    }, onMouseLeave: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "transparent",
-                                                        });
-                                                    }, title: "View Metrics", children: _jsx(BarChart3, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/settings", "_blank"), style: {
-                                                        flex: 1,
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        padding: "14px",
-                                                        cursor: "pointer",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        color: "#8b5cf6",
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "rgba(139, 92, 246, 0.1)",
-                                                        });
-                                                    }, onMouseLeave: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "transparent",
-                                                        });
-                                                    }, title: "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/prompts", "_blank"), style: {
-                                                        flex: 1,
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        padding: "14px",
-                                                        cursor: "pointer",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        color: "#8b5cf6",
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "rgba(139, 92, 246, 0.1)",
-                                                        });
-                                                    }, onMouseLeave: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "transparent",
-                                                        });
-                                                    }, title: "My Prompts", children: _jsx(FileText, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/folder", "_blank"), style: {
-                                                        flex: 1,
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        padding: "14px",
-                                                        cursor: "pointer",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        color: "#8b5cf6",
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "rgba(139, 92, 246, 0.1)",
-                                                        });
-                                                    }, onMouseLeave: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "transparent",
-                                                        });
-                                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), _jsx("button", { onClick: async () => {
-                                                        if (logout) {
-                                                            await logout();
-                                                            // Refresh provider data after logout
-                                                            if (refetchProviders) {
-                                                                await refetchProviders();
-                                                            }
-                                                        }
-                                                        setShowTooltip(false);
-                                                    }, style: {
-                                                        flex: 1,
-                                                        background: "transparent",
-                                                        border: "none",
-                                                        padding: "14px",
-                                                        cursor: "pointer",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        color: "#ef4444",
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "rgba(239, 68, 68, 0.1)",
-                                                        });
-                                                    }, onMouseLeave: (e) => {
-                                                        Object.assign(e.currentTarget.style, {
-                                                            background: "transparent",
-                                                        });
-                                                    }, title: "Logout", children: _jsx(Power, { size: 18 }) })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "LastBrain Authentication" }), _jsx("div", { style: {
-                                                paddingBottom: "12px",
-                                            }, children: _jsx("p", { style: {
-                                                    margin: 0,
-                                                    fontSize: "13px",
-                                                    color: "var(--ai-text-secondary, #9ca3af)",
-                                                    lineHeight: "1.5",
-                                                }, children: "Connectez-vous pour acc\u00E9der aux fonctionnalit\u00E9s IA" }) }), _jsx("button", { onClick: () => {
-                                                setShowSigninModal(true);
-                                                setShowTooltip(false);
-                                            }, style: {
-                                                width: "100%",
-                                                padding: "10px",
-                                                background: "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-                                                border: "none",
-                                                borderRadius: "6px",
-                                                color: "#ffffff",
-                                                fontSize: "13px",
-                                                fontWeight: 600,
-                                                cursor: "pointer",
-                                                transition: "all 0.2s ease",
-                                            }, onMouseEnter: (e) => {
-                                                e.currentTarget.style.transform = "translateY(-1px)";
-                                                e.currentTarget.style.boxShadow =
-                                                    "0 4px 12px rgba(139, 92, 246, 0.3)";
-                                            }, onMouseLeave: (e) => {
-                                                e.currentTarget.style.transform = "translateY(0)";
-                                                e.currentTarget.style.boxShadow = "none";
-                                            }, children: "\uD83D\uDD10 Se connecter" })] })) }), document.body)] }), _jsx(LBSigninModal, { isOpen: showSigninModal, onClose: () => setShowSigninModal(false) })] }));
-    }
-    return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
-                    ...aiStyles.statusButton,
-                    color: "#10b981",
-                    ...(isHovered && aiStyles.statusButtonHover),
-                }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip &&
-                canPortal &&
-                createPortal(_jsxs("div", { ref: tooltipRef, style: {
-                        ...aiStyles.tooltip,
-                        ...tooltipPosition,
-                        zIndex: 50,
-                    }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), effectiveStatus.user?.email && (_jsx("div", { style: {
-                                ...aiStyles.tooltipSection,
-                                ...aiStyles.tooltipSectionFirst,
-                            }, children: _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "User:" }), _jsx("span", { style: {
-                                            ...aiStyles.tooltipValue,
-                                            fontSize: "12px",
-                                            maxWidth: "200px",
-                                            overflow: "hidden",
-                                            textOverflow: "ellipsis",
-                                        }, children: effectiveStatus.user.email })] }) })), _jsxs("div", { style: {
-                                ...aiStyles.tooltipSection,
-                                ...(effectiveStatus.user?.email
-                                    ? {}
-                                    : aiStyles.tooltipSectionFirst),
-                            }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsxs("div", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                            }, children: [_jsx("span", { style: aiStyles.tooltipValue, children: lbIsLoadingStatus ? (_jsx("div", { style: {
-                                                            height: "16px",
-                                                            width: "100px",
-                                                            background: "rgba(139, 92, 246, 0.1)",
-                                                            borderRadius: "4px",
-                                                            animation: "pulse 2s ease-in-out infinite",
-                                                        } })) : (effectiveStatus?.apiKey?.name ||
+        setShowTooltip(true);
+    };
+    const closeTooltip = () => {
+        if (requiresApiKeySelection) {
+            return;
+        }
+        setTimeout(() => {
+            if (!tooltipRef.current?.matches(":hover") &&
+                !buttonRef.current?.matches(":hover")) {
+                setShowTooltip(false);
+            }
+        }, 100);
+    };
+    const renderTriggerIcon = () => {
+        if (loading || isSelectingApiKey) {
+            return _jsx(Loader2, { size: 14, className: "ai-spinner" });
+        }
+        return _jsx(Shield, { size: 14 });
+    };
+    const triggerClass = [
+        "ai-status-trigger",
+        `ai-size-${size}`,
+        `ai-radius-${radius}`,
+        triggerTone === "warning" ? "ai-status-trigger--warning" : "",
+        triggerTone === "danger" ? "ai-status-trigger--danger" : "",
+        triggerTone === "success" ? "ai-status-trigger--success" : "",
+        className,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    const tooltipNode = showTooltip && canPortal
+        ? createPortal(_jsx("div", { ref: tooltipRef, className: "ai-popover ai-tooltip ai-status-tooltip", style: tooltipStyle, onMouseEnter: () => setShowTooltip(true), onMouseLeave: closeTooltip, children: lbStatus === "ready" && user ? (_jsx(_Fragment, { children: _jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: "API Status" }), _jsx("div", { className: "ai-popover-section ai-popover-section--first", children: _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "User" }), _jsx("span", { className: "ai-popover-value ai-truncate max-w-[200px]", children: user.email })] }) }), _jsxs("div", { className: "ai-popover-section", children: [_jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "API Key" }), _jsxs("div", { className: "ai-row", children: [lbIsLoadingStatus ? (_jsx("div", { className: "ai-kv-skeleton w-[110px]" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.name ||
                                                         effectiveStatus?.api_key?.name ||
-                                                        "Unknown") }), switchApiKey && (_jsx("button", { onClick: (e) => {
+                                                        "Unknown" })), switchApiKey ? (_jsx("button", { type: "button", className: "ai-icon-btn", onClick: (e) => {
                                                         e.stopPropagation();
                                                         setShowTooltip(false);
                                                         setShowApiKeySelector(true);
-                                                    }, style: {
-                                                        background: "rgba(139, 92, 246, 0.1)",
-                                                        border: "1px solid rgba(139, 92, 246, 0.3)",
-                                                        borderRadius: "50%",
-                                                        width: "24px",
-                                                        height: "24px",
-                                                        display: "flex",
-                                                        alignItems: "center",
-                                                        justifyContent: "center",
-                                                        cursor: "pointer",
-                                                        padding: 0,
-                                                        transition: "all 0.2s ease",
-                                                    }, onMouseEnter: (e) => {
-                                                        e.currentTarget.style.background =
-                                                            "rgba(139, 92, 246, 0.2)";
-                                                        e.currentTarget.style.borderColor =
-                                                            "rgba(139, 92, 246, 0.5)";
-                                                    }, onMouseLeave: (e) => {
-                                                        e.currentTarget.style.background =
-                                                            "rgba(139, 92, 246, 0.1)";
-                                                        e.currentTarget.style.borderColor =
-                                                            "rgba(139, 92, 246, 0.3)";
-                                                    }, title: "Change API Key", children: _jsx(ArrowRightLeft, { size: 12, style: { color: "rgba(139, 92, 246, 1)" } }) }))] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), lbIsLoadingStatus && !effectiveStatus?.apiKey?.env ? (_jsx("div", { style: {
-                                                height: "16px",
-                                                width: "48px",
-                                                background: "rgba(139, 92, 246, 0.1)",
-                                                borderRadius: "4px",
-                                                animation: "pulse 2s ease-in-out infinite",
-                                            } })) : (_jsx("span", { style: aiStyles.tooltipValue, children: effectiveStatus.apiKey?.env ||
-                                                effectiveStatus.api_key?.env ||
-                                                "N/A" }))] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), lbIsLoadingStatus &&
-                                            !effectiveStatus?.apiKey?.rate_limit_rpm &&
-                                            !effectiveStatus?.api_key?.rate_limit_rpm ? (_jsx("div", { style: {
-                                                height: "16px",
-                                                width: "92px",
-                                                background: "rgba(139, 92, 246, 0.1)",
-                                                borderRadius: "4px",
-                                                animation: "pulse 2s ease-in-out infinite",
-                                            } })) : (_jsxs("span", { style: aiStyles.tooltipValue, children: [effectiveStatus.apiKey?.rate_limit_rpm ||
-                                                    effectiveStatus.api_key?.rate_limit_rpm ||
-                                                    0, " ", "req/min"] }))] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Auth:" }), _jsx("span", { style: aiStyles.tooltipValue, children: lbIsLoadingStatus
+                                                    }, title: "Changer de cl\u00E9 API", children: _jsx(ArrowRightLeft, { size: 12 }) })) : null] })] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Env" }), lbIsLoadingStatus && !effectiveStatus?.apiKey?.env ? (_jsx("div", { className: "ai-kv-skeleton w-12" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.env ||
+                                                effectiveStatus?.api_key?.env ||
+                                                "N/A" }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Rate Limit" }), lbIsLoadingStatus &&
+                                            !effectiveStatus?.apiKey?.rate_limit_rpm ? (_jsx("div", { className: "ai-kv-skeleton w-[92px]" })) : (_jsxs("span", { className: "ai-popover-value", children: [effectiveStatus?.apiKey?.rate_limit_rpm ||
+                                                    effectiveStatus?.api_key?.rate_limit_rpm ||
+                                                    0, " ", "req/min"] }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Auth" }), _jsx("span", { className: "ai-popover-value", children: lbIsLoadingStatus
                                                 ? "..."
-                                                : effectiveStatus?.authType || lbStatus || "unknown" })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Wallet" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), lbIsLoadingStatus && !effectiveStatus?.balance ? (_jsxs("div", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                            }, children: [_jsx("div", { style: {
-                                                        height: "16px",
-                                                        width: "120px",
-                                                        background: "rgba(139, 92, 246, 0.1)",
-                                                        borderRadius: "4px",
-                                                        animation: "pulse 2s ease-in-out infinite",
-                                                    } }), _jsx("div", { style: {
-                                                        width: "28px",
-                                                        height: "28px",
-                                                        borderRadius: "50%",
-                                                        background: "rgba(139, 92, 246, 0.1)",
-                                                        animation: "pulse 2s ease-in-out infinite",
-                                                    } })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { style: aiStyles.tooltipValue, children: ["$", formatFixed(balanceUsed, 2), " / $", formatFixed(balanceTotal, 2)] }), renderUsageCircle(balancePercentage)] }))] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), lbIsLoadingStorage ? (_jsxs("div", { style: {
-                                                display: "flex",
-                                                alignItems: "center",
-                                                gap: "8px",
-                                            }, children: [_jsx("div", { style: {
-                                                        height: "16px",
-                                                        width: "120px",
-                                                        background: "rgba(139, 92, 246, 0.1)",
-                                                        borderRadius: "4px",
-                                                        animation: "pulse 2s ease-in-out infinite",
-                                                    } }), _jsx("div", { style: {
-                                                        width: "28px",
-                                                        height: "28px",
-                                                        borderRadius: "50%",
-                                                        background: "rgba(139, 92, 246, 0.1)",
-                                                        animation: "pulse 2s ease-in-out infinite",
-                                                    } })] })) : (_jsxs(_Fragment, { children: [_jsxs("span", { style: aiStyles.tooltipValue, children: [formatStorage(storageUsed), " /", " ", formatStorage(storageAllocated)] }), renderUsageCircle(storagePercentage)] }))] })] }), _jsxs("div", { style: {
-                                ...aiStyles.tooltipActions,
-                                width: "100%",
-                                flexDirection: "row",
-                            }, children: [_jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/tokens", "_blank"), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "Dashboard", children: _jsx(BarChart3, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/history", "_blank"), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "History", children: _jsx(HistoryIcon, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/settings", "_blank"), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "Settings", children: _jsx(Settings, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/ai/prompts", "_blank"), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        borderRadius: "4px",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "New Prompt", children: _jsx(FileText, { size: 18 }) }), _jsx("button", { onClick: () => window.open("https://prompt.lastbrain.io/auth/folder", "_blank"), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), logout && (_jsx("button", { onClick: async () => {
+                                                : effectiveStatus?.authType || lbStatus || "unknown" })] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header text-xs mb-2", children: "Wallet" }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Total" }), lbIsLoadingStatus && !effectiveStatus?.balance ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton w-[120px]" }), _jsx("div", { className: "ai-kv-skeleton w-7 h-7 rounded-full" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: ["$", fixed(balanceUsed, 2), " / $", fixed(balanceTotal, 2)] }), _jsx(UsageCircle, { percentage: balancePct })] }))] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header text-xs mb-2", children: "Storage" }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Total" }), lbIsLoadingStorage ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton w-[120px]" }), _jsx("div", { className: "ai-kv-skeleton w-7 h-7 rounded-full" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: [formatStorage(storageUsed), " /", " ", formatStorage(storageTotal)] }), _jsx(UsageCircle, { percentage: storagePct })] }))] })] }), _jsxs("div", { className: "ai-status-actions", children: [QUICK_LINKS.map((item) => {
+                                    const Icon = item.icon;
+                                    return (_jsx("button", { type: "button", className: "ai-status-action-btn", onClick: () => window.open(item.href, "_blank"), title: item.title, children: _jsx(Icon, { size: 17 }) }, item.href));
+                                }), logout && !isApiKeyAuthMode ? (_jsx("button", { type: "button", className: "ai-status-action-btn ai-status-action-btn--danger", onClick: async () => {
                                         try {
                                             await logout();
                                             setShowTooltip(false);
-                                            // Refresh provider data after logout
                                             if (refetchProviders) {
                                                 await refetchProviders();
                                             }
@@ -691,39 +273,30 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                         catch (error) {
                                             console.error("Logout failed:", error);
                                         }
-                                    }, style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#ef4444",
-                                        transition: "all 0.2s ease",
-                                        borderRadius: "4px",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(239, 68, 68, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "Logout", children: _jsx(LogOut, { size: 18 }) }))] })] }), document.body), showApiKeySelector && apiKeys.length > 0 && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                                    }, title: "Logout", children: _jsx(LogOut, { size: 17 }) })) : null] })] }) })) : (_jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: "LastBrain Authentication" }), _jsx("p", { className: "ai-signin-subtitle mt-0", children: "Connectez-vous pour acc\u00E9der aux fonctionnalit\u00E9s IA." }), _jsx("button", { type: "button", className: "ai-btn ai-btn--auth w-full mt-2", onClick: () => {
+                            setShowSigninModal(true);
+                            setShowTooltip(false);
+                        }, children: "Se connecter" })] })) }), document.body)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative inline-block", children: [_jsx("button", { ref: buttonRef, className: triggerClass, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, onClick: () => {
+                            if (requiresApiKeySelection) {
+                                setShowApiKeySelector(true);
+                                return;
+                            }
+                            if (!effectiveStatus && lbStatus !== "ready") {
+                                setShowSigninModal(true);
+                            }
+                        }, disabled: loading || isSelectingApiKey, title: requiresApiKeySelection
+                            ? "Sélectionnez une clé API"
+                            : "Voir le status", "aria-label": "AI status", children: renderTriggerIcon() }), showCornerLoading ? (_jsx("span", { className: "ai-status-loading-dot", "aria-hidden": "true", children: _jsx(Loader2, { size: 7, className: "ai-spinner text-[var(--ai-primary)]" }) })) : null] }), tooltipNode, showApiKeySelector && apiKeys.length > 0 ? (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
                     setIsSelectingApiKey(true);
                     try {
-                        // Utiliser la nouvelle fonction switchApiKey qui gère automatiquement le contexte
-                        if (switchApiKey) {
-                            await switchApiKey(keyId);
-                        }
-                        else {
+                        if (!switchApiKey) {
                             throw new Error("Switch API key function not available");
                         }
+                        await switchApiKey(keyId);
                         setShowApiKeySelector(false);
                         setShowTooltip(false);
-                        setIsLoadingStatus(true);
-                        // Refresh provider data after API key selection
                         if (refetchProviders) {
                             await refetchProviders();
                         }
@@ -733,7 +306,6 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                     }
                     finally {
                         setIsSelectingApiKey(false);
-                        setIsLoadingStatus(false);
                     }
-                }, onCancel: () => setShowApiKeySelector(false) }))] }));
+                }, onCancel: () => setShowApiKeySelector(false) })) : null, _jsx(LBSigninModal, { isOpen: showSigninModal, onClose: () => setShowSigninModal(false) })] }));
 }