@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/src/components/AiStatusButton.tsx

@@ -1,48 +1,163 @@
 "use client";
 
 import type { AiStatus } from "@lastbrain/ai-ui-core";
-import { useState, useRef, useLayoutEffect, type CSSProperties } from "react";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import {
+  ArrowRightLeft,
   BarChart3,
-  Settings,
   FileText,
-  History as HistoryIcon,
-  FolderPlus,
-  Power,
+  Folder,
+  History,
+  Loader2,
   LogOut,
-  ArrowRightLeft,
+  Settings,
+  Shield,
 } from "lucide-react";
-import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 import { useLB } from "../context/LBAuthProvider";
 import { useAiContext } from "../context/AiProvider";
-import { LBSigninModal } from "./LBSigninModal";
 import { LBApiKeySelector } from "./LBApiKeySelector";
+import { LBSigninModal } from "./LBSigninModal";
+import type { AiRadius, AiSize } from "../types";
 
 export interface AiStatusButtonProps {
   status: AiStatus | null;
   loading?: boolean;
   className?: string;
+  size?: AiSize;
+  radius?: AiRadius;
+}
+
+type BalanceUsage = {
+  used?: number;
+  total?: number;
+  percentage?: number;
+  purchased?: number;
+  quota?: number;
+  remaining?: number;
+};
+
+type StorageUsage = {
+  used_mb?: number;
+  allocated_mb?: number;
+  percentage?: number;
+  total_mb?: number;
+};
+
+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?: number) => Math.min(100, Math.max(0, value || 0));
+const num = (value?: number) => (typeof value === "number" ? value : 0);
+const fixed = (value: number | undefined, digits: number) =>
+  num(value).toFixed(digits);
+
+function formatStorage(mb?: number) {
+  const value = num(mb);
+  if (value >= 1024) {
+    return `${(value / 1024).toFixed(2)} GB`;
+  }
+  return `${value.toFixed(2)} MB`;
+}
+
+function UsageCircle({ percentage }: { percentage?: number }) {
+  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 (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <circle
+        cx={size / 2}
+        cy={size / 2}
+        r={radius}
+        className="ai-usage-circle-track"
+        strokeWidth={stroke}
+        fill="transparent"
+      />
+      <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})`}
+      />
+      <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"
+      >
+        {safe.toFixed(0)}%
+      </text>
+    </svg>
+  );
 }
 
 export function AiStatusButton({
   status,
   loading = false,
   className = "",
+  size = "md",
+  radius = "full",
 }: AiStatusButtonProps) {
-  // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   let user: any;
   let logout: (() => Promise<void>) | undefined;
   let apiKeys: any[] = [];
-  let accessToken: string | undefined;
-  let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
   let switchApiKey: ((apiKeyId: string) => Promise<void>) | undefined;
   let lbApiStatus: any = null;
   let lbBasicStatus: any = null;
   let lbStorageStatus: any = null;
-  let lbIsLoadingStatus: boolean = false;
-  let lbIsLoadingStorage: boolean = false;
+  let lbIsLoadingStatus = false;
+  let lbIsLoadingStorage = false;
   let lbSelectedKey: any = null;
   let lbRefreshBasicStatus: (() => Promise<void>) | undefined;
   let lbRefreshStorageStatus: ((force?: boolean) => Promise<void>) | undefined;
@@ -53,8 +168,6 @@ export function AiStatusButton({
     user = lbContext.user;
     logout = lbContext.logout;
     apiKeys = lbContext.apiKeys || [];
-    accessToken = lbContext.accessToken;
-    selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
     switchApiKey = lbContext.switchApiKey;
     lbApiStatus = lbContext.apiStatus;
     lbBasicStatus = lbContext.basicStatus;
@@ -65,273 +178,97 @@ export function AiStatusButton({
     lbRefreshBasicStatus = lbContext.refreshBasicStatus;
     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: (() => Promise<void>) | undefined;
   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 [showTooltip, setShowTooltip] = useState(false);
   const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
-  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
-
-  type BalanceUsage = {
-    used?: number;
-    total?: number;
-    percentage?: number;
-    purchased?: number;
-    quota?: number;
-    remaining?: number;
-  };
-  type StorageUsage = {
-    used_mb?: number;
-    allocated_mb?: number;
-    percentage?: number;
-    db_mb?: number;
-    files_mb?: number;
-    total_mb?: number;
-  };
-
-  const formatFixed = (value: number | null | undefined, digits: number) =>
-    typeof value === "number" ? value.toFixed(digits) : "0.00";
-  const formatStorage = (valueMb: number | null | undefined) => {
-    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: number | null | undefined) =>
-    typeof value === "number" ? value : 0;
-  const clampPercentage = (value: number | null | undefined) =>
-    Math.min(100, Math.max(0, safeNumber(value)));
-  const getUsageColor = (percentage: number) => {
-    if (percentage > 90) {
-      return aiStyles.tooltipValueWarning.color;
-    }
-    if (percentage > 75) {
-      return aiStyles.tooltipValueWarning.color;
-    }
-    return aiStyles.tooltipValueSuccess.color;
-  };
-  const renderUsageCircle = (percentageValue: number | null | undefined) => {
-    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 (
-      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
-        <circle
-          cx={size / 2}
-          cy={size / 2}
-          r={radius}
-          stroke={aiStyles.tooltipLabel.color}
-          strokeWidth={stroke}
-          fill="transparent"
-          opacity={0.3}
-        />
-        <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})`}
-        />
-        <text
-          x={size / 2}
-          y={size / 2}
-          textAnchor="middle"
-          dominantBaseline="central"
-          fontSize="7px"
-          fill={color}
-          fontWeight="600"
-        >
-          {percentage.toFixed(0)}%
-        </text>
-      </svg>
-    );
-  };
-
-  const balanceUsage = effectiveStatus?.balance as BalanceUsage | undefined;
-  const storageUsage = effectiveStatus?.storage as StorageUsage | undefined;
-
-  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 showCornerLoadingIndicator =
-    lbStatus === "ready" &&
-    (showFastStatusSkeleton || lbIsLoadingStatus || lbIsLoadingStorage);
-
-  const [showTooltip, setShowTooltip] = useState(false);
-  const [isHovered, setIsHovered] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState<CSSProperties>({});
   const buttonRef = useRef<HTMLButtonElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
+
   const canPortal = typeof document !== "undefined";
+
+  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
+    effectiveStatus?.apiKey?.id ||
+    effectiveStatus?.api_key?.id ||
+    lbSelectedKey?.id
   );
-  const isApiKeyAuthMode = effectiveStatus?.authType === "api_key";
   const requiresApiKeySelection =
     lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
+  const isApiKeyAuthMode = effectiveStatus?.authType === "api_key";
+
+  const [tooltipStyle, setTooltipStyle] = useState<Record<string, string>>({});
 
   useLayoutEffect(() => {
-    if (!showTooltip || !buttonRef.current) {
+    if (!showTooltip || !buttonRef.current || !canPortal) {
       return;
     }
 
-    const updatePosition = () => {
-      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 update = () => {
+      if (!buttonRef.current) return;
+      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) {
       lbRefreshBasicStatus().catch(() => undefined);
     }
@@ -344,8 +281,8 @@ export function AiStatusButton({
     }
   }, [
     showTooltip,
-    requiresApiKeySelection,
     lbStatus,
+    requiresApiKeySelection,
     lbBasicStatus,
     lbStorageStatus,
     lbIsLoadingStatus,
@@ -354,1107 +291,330 @@ export function AiStatusButton({
     lbRefreshStorageStatus,
   ]);
 
-  if (loading || isSelectingApiKey) {
-    return (
-      <button
-        ref={buttonRef}
-        style={{
-          ...aiStyles.statusButton,
-          ...aiStyles.statusButtonDisabled,
-        }}
-        className={className}
-        disabled
-      >
-        <svg
-          style={aiStyles.spinner}
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-        >
-          <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" />
-        </svg>
-      </button>
-    );
-  }
+  const balance = (effectiveStatus?.balance || {}) as BalanceUsage;
+  const storage = (effectiveStatus?.storage || {}) as StorageUsage;
 
-  if (requiresApiKeySelection) {
-    return (
-      <div style={{ position: "relative", display: "inline-block" }}>
-        <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"
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-          >
-            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-          </svg>
-        </button>
-        {showCornerLoadingIndicator && (
-          <div
-            style={{
-              position: "absolute",
-              top: -2,
-              right: -2,
-              width: 12,
-              height: 12,
-              borderRadius: "999px",
-              background: "rgba(2, 6, 23, 0.95)",
-              border: "1px solid rgba(139, 92, 246, 0.55)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              pointerEvents: "none",
-            }}
-          >
-            <svg
-              style={aiStyles.spinner}
-              width="8"
-              height="8"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="#8b5cf6"
-              strokeWidth="2"
-            >
-              <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" />
-            </svg>
-          </div>
-        )}
-        {showApiKeySelector && apiKeys.length > 0 && (
-          <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)}
-          />
-        )}
-      </div>
-    );
-  }
+  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);
 
-  if (!effectiveStatus) {
-    // Si pas de statut API et pas de LBProvider, afficher message simple
-    if (!lbStatus && lbStatus !== "ready") {
-      return (
-        <div style={{ position: "relative", display: "inline-block" }}>
-          <button
-            ref={buttonRef}
-            style={{
-              ...aiStyles.statusButton,
-              color: "#ef4444",
-              ...(isHovered && aiStyles.statusButtonHover),
-            }}
-            className={className}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-            >
-              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-            </svg>
-          </button>
-          {showTooltip &&
-            canPortal &&
-            createPortal(
-              <div
-                ref={tooltipRef}
-                style={{
-                  ...aiStyles.tooltip,
-                  ...tooltipPosition,
-                  zIndex: 50,
-                }}
-                onMouseEnter={() => setShowTooltip(true)}
-                onMouseLeave={handleMouseLeave}
-              >
-                No status available
-              </div>,
-              document.body
-            )}
-        </div>
-      );
+  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;
     }
+    setShowTooltip(true);
+  };
 
-    return (
-      <>
-        <div style={{ position: "relative", display: "inline-block" }}>
-          <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);
-              }
-            }}
+  const closeTooltip = () => {
+    if (requiresApiKeySelection) {
+      return;
+    }
+    setTimeout(() => {
+      if (
+        !tooltipRef.current?.matches(":hover") &&
+        !buttonRef.current?.matches(":hover")
+      ) {
+        setShowTooltip(false);
+      }
+    }, 100);
+  };
+
+  const renderTriggerIcon = () => {
+    if (loading || isSelectingApiKey) {
+      return <Loader2 size={14} className="ai-spinner" />;
+    }
+    return <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(
+          <div
+            ref={tooltipRef}
+            className="ai-popover ai-tooltip ai-status-tooltip"
+            style={tooltipStyle}
+            onMouseEnter={() => setShowTooltip(true)}
+            onMouseLeave={closeTooltip}
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-            >
-              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-            </svg>
-          </button>
-          {showCornerLoadingIndicator && (
-            <div
-              style={{
-                position: "absolute",
-                top: -2,
-                right: -2,
-                width: 12,
-                height: 12,
-                borderRadius: "999px",
-                background: "rgba(2, 6, 23, 0.95)",
-                border: "1px solid rgba(139, 92, 246, 0.55)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                pointerEvents: "none",
-              }}
-            >
-              <svg
-                style={aiStyles.spinner}
-                width="8"
-                height="8"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="#8b5cf6"
-                strokeWidth="2"
-              >
-                <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" />
-              </svg>
-            </div>
-          )}
-          {showTooltip &&
-            canPortal &&
-            createPortal(
-              <div
-                ref={tooltipRef}
-                style={{
-                  ...aiStyles.tooltip,
-                  ...tooltipPosition,
-                  zIndex: 50,
-                }}
-                onMouseEnter={() => setShowTooltip(true)}
-                onMouseLeave={handleMouseLeave}
-              >
-                {lbStatus === "ready" && user ? (
-                  <>
-                    <div style={aiStyles.tooltipHeader}>API Status</div>
-                    <div
-                      style={{
-                        ...aiStyles.tooltipSection,
-                        ...aiStyles.tooltipSectionFirst,
-                      }}
-                    >
-                      <div style={aiStyles.tooltipRow}>
-                        <span style={aiStyles.tooltipLabel}>User:</span>
-                        <span style={aiStyles.tooltipValue}>{user.email}</span>
+            {lbStatus === "ready" && user ? (
+              <>
+                <div className="ai-popover-body">
+                  <div className="ai-popover-header">API Status</div>
+                  <div className="ai-popover-section ai-popover-section--first">
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">User</span>
+                      <span className="ai-popover-value ai-truncate max-w-[200px]">
+                        {user.email}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="ai-popover-section">
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">API Key</span>
+                      <div className="ai-row">
+                        {lbIsLoadingStatus ? (
+                          <div className="ai-kv-skeleton w-[110px]" />
+                        ) : (
+                          <span className="ai-popover-value">
+                            {effectiveStatus?.apiKey?.name ||
+                              effectiveStatus?.api_key?.name ||
+                              "Unknown"}
+                          </span>
+                        )}
+                        {switchApiKey ? (
+                          <button
+                            type="button"
+                            className="ai-icon-btn"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setShowTooltip(false);
+                              setShowApiKeySelector(true);
+                            }}
+                            title="Changer de clé API"
+                          >
+                            <ArrowRightLeft size={12} />
+                          </button>
+                        ) : null}
                       </div>
                     </div>
-                    {showFastStatusSkeleton && (
-                      <>
-                        <div style={aiStyles.tooltipSection}>
-                          <div style={aiStyles.tooltipRow}>
-                            <span style={aiStyles.tooltipLabel}>API Key:</span>
-                            <div
-                              style={{
-                                height: "16px",
-                                width: "110px",
-                                background: "rgba(139, 92, 246, 0.12)",
-                                borderRadius: "4px",
-                                animation: "pulse 2s ease-in-out infinite",
-                              }}
-                            />
-                          </div>
-                          <div style={aiStyles.tooltipRow}>
-                            <span style={aiStyles.tooltipLabel}>Env:</span>
-                            <div
-                              style={{
-                                height: "16px",
-                                width: "48px",
-                                background: "rgba(139, 92, 246, 0.12)",
-                                borderRadius: "4px",
-                                animation: "pulse 2s ease-in-out infinite",
-                              }}
-                            />
-                          </div>
-                          <div style={aiStyles.tooltipRow}>
-                            <span style={aiStyles.tooltipLabel}>Rate Limit:</span>
-                            <div
-                              style={{
-                                height: "16px",
-                                width: "84px",
-                                background: "rgba(139, 92, 246, 0.12)",
-                                borderRadius: "4px",
-                                animation: "pulse 2s ease-in-out infinite",
-                              }}
-                            />
-                          </div>
-                          <div style={aiStyles.tooltipRow}>
-                            <span style={aiStyles.tooltipLabel}>Auth:</span>
-                            <div
-                              style={{
-                                height: "16px",
-                                width: "72px",
-                                background: "rgba(139, 92, 246, 0.12)",
-                                borderRadius: "4px",
-                                animation: "pulse 2s ease-in-out infinite",
-                              }}
-                            />
-                          </div>
+
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">Env</span>
+                      {lbIsLoadingStatus && !effectiveStatus?.apiKey?.env ? (
+                        <div className="ai-kv-skeleton w-12" />
+                      ) : (
+                        <span className="ai-popover-value">
+                          {effectiveStatus?.apiKey?.env ||
+                            effectiveStatus?.api_key?.env ||
+                            "N/A"}
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">Rate Limit</span>
+                      {lbIsLoadingStatus &&
+                      !effectiveStatus?.apiKey?.rate_limit_rpm ? (
+                        <div className="ai-kv-skeleton w-[92px]" />
+                      ) : (
+                        <span className="ai-popover-value">
+                          {effectiveStatus?.apiKey?.rate_limit_rpm ||
+                            effectiveStatus?.api_key?.rate_limit_rpm ||
+                            0}{" "}
+                          req/min
+                        </span>
+                      )}
+                    </div>
+
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">Auth</span>
+                      <span className="ai-popover-value">
+                        {lbIsLoadingStatus
+                          ? "..."
+                          : effectiveStatus?.authType || lbStatus || "unknown"}
+                      </span>
+                    </div>
+                  </div>
+
+                  <div className="ai-popover-section">
+                    <div className="ai-popover-header text-xs mb-2">Wallet</div>
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">Total</span>
+                      {lbIsLoadingStatus && !effectiveStatus?.balance ? (
+                        <div className="ai-row">
+                          <div className="ai-kv-skeleton w-[120px]" />
+                          <div className="ai-kv-skeleton w-7 h-7 rounded-full" />
                         </div>
-                        <div style={aiStyles.tooltipSection}>
-                          <div style={aiStyles.tooltipSubtitle}>Wallet</div>
-                          <div style={aiStyles.tooltipRow}>
-                            <span style={aiStyles.tooltipLabel}>Total:</span>
-                            <div
-                              style={{
-                                height: "16px",
-                                width: "120px",
-                                background: "rgba(139, 92, 246, 0.12)",
-                                borderRadius: "4px",
-                                animation: "pulse 2s ease-in-out infinite",
-                              }}
-                            />
-                          </div>
+                      ) : (
+                        <div className="ai-row">
+                          <span className="ai-popover-value">
+                            ${fixed(balanceUsed, 2)} / ${fixed(balanceTotal, 2)}
+                          </span>
+                          <UsageCircle percentage={balancePct} />
                         </div>
-                      </>
-                    )}
-                    <div
-                      style={{
-                        display: "flex",
-                        gap: "8px",
-                        borderTop:
-                          "1px solid var(--ai-border-primary, #374151)",
-                        paddingTop: "12px",
-                      }}
-                    >
-                      <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"
-                      >
-                        <BarChart3 size={18} />
-                      </button>
-                      <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"
-                      >
-                        <Settings size={18} />
-                      </button>
-                      <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"
-                      >
-                        <FileText size={18} />
-                      </button>
-                      <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"
-                      >
-                        <FolderPlus size={18} />
-                      </button>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="ai-popover-section">
+                    <div className="ai-popover-header text-xs mb-2">
+                      Storage
+                    </div>
+                    <div className="ai-popover-row">
+                      <span className="ai-popover-label">Total</span>
+                      {lbIsLoadingStorage ? (
+                        <div className="ai-row">
+                          <div className="ai-kv-skeleton w-[120px]" />
+                          <div className="ai-kv-skeleton w-7 h-7 rounded-full" />
+                        </div>
+                      ) : (
+                        <div className="ai-row">
+                          <span className="ai-popover-value">
+                            {formatStorage(storageUsed)} /{" "}
+                            {formatStorage(storageTotal)}
+                          </span>
+                          <UsageCircle percentage={storagePct} />
+                        </div>
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="ai-status-actions">
+                    {QUICK_LINKS.map((item) => {
+                      const Icon = item.icon;
+                      return (
+                        <button
+                          key={item.href}
+                          type="button"
+                          className="ai-status-action-btn"
+                          onClick={() => window.open(item.href, "_blank")}
+                          title={item.title}
+                        >
+                          <Icon size={17} />
+                        </button>
+                      );
+                    })}
+
+                    {logout && !isApiKeyAuthMode ? (
                       <button
+                        type="button"
+                        className="ai-status-action-btn ai-status-action-btn--danger"
                         onClick={async () => {
-                          if (logout) {
+                          try {
                             await logout();
-                            // Refresh provider data after logout
+                            setShowTooltip(false);
                             if (refetchProviders) {
                               await refetchProviders();
                             }
+                          } catch (error) {
+                            console.error("Logout failed:", error);
                           }
-                          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"
                       >
-                        <Power size={18} />
+                        <LogOut size={17} />
                       </button>
-                    </div>
-                  </>
-                ) : (
-                  <>
-                    <div style={aiStyles.tooltipHeader}>
-                      LastBrain Authentication
-                    </div>
-                    <div
-                      style={{
-                        paddingBottom: "12px",
-                      }}
-                    >
-                      <p
-                        style={{
-                          margin: 0,
-                          fontSize: "13px",
-                          color: "var(--ai-text-secondary, #9ca3af)",
-                          lineHeight: "1.5",
-                        }}
-                      >
-                        Connectez-vous pour accéder aux fonctionnalités IA
-                      </p>
-                    </div>
-                    <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";
-                      }}
-                    >
-                      🔐 Se connecter
-                    </button>
-                  </>
-                )}
-              </div>,
-              document.body
-            )}
-        </div>
-        <LBSigninModal
-          isOpen={showSigninModal}
-          onClose={() => setShowSigninModal(false)}
-        />
-      </>
-    );
-  }
-
-  return (
-    <div style={{ position: "relative", display: "inline-block" }}>
-      <button
-        ref={buttonRef}
-        style={{
-          ...aiStyles.statusButton,
-          color: "#10b981",
-          ...(isHovered && aiStyles.statusButtonHover),
-        }}
-        className={className}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-      >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-        >
-          <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-        </svg>
-      </button>
-      {showCornerLoadingIndicator && (
-        <div
-          style={{
-            position: "absolute",
-            top: -2,
-            right: -2,
-            width: 12,
-            height: 12,
-            borderRadius: "999px",
-            background: "rgba(2, 6, 23, 0.95)",
-            border: "1px solid rgba(139, 92, 246, 0.55)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            pointerEvents: "none",
-          }}
-        >
-          <svg
-            style={aiStyles.spinner}
-            width="8"
-            height="8"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="#8b5cf6"
-            strokeWidth="2"
-          >
-            <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" />
-          </svg>
-        </div>
-      )}
-
-      {showTooltip &&
-        canPortal &&
-        createPortal(
-          <div
-            ref={tooltipRef}
-            style={{
-              ...aiStyles.tooltip,
-              ...tooltipPosition,
-              zIndex: 50,
-            }}
-            onMouseEnter={() => setShowTooltip(true)}
-            onMouseLeave={handleMouseLeave}
-          >
-            <div style={aiStyles.tooltipHeader}>API Status</div>
-
-            {/* User Info Section */}
-            {effectiveStatus.user?.email && (
-              <div
-                style={{
-                  ...aiStyles.tooltipSection,
-                  ...aiStyles.tooltipSectionFirst,
-                }}
-              >
-                <div style={aiStyles.tooltipRow}>
-                  <span style={aiStyles.tooltipLabel}>User:</span>
-                  <span
-                    style={{
-                      ...aiStyles.tooltipValue,
-                      fontSize: "12px",
-                      maxWidth: "200px",
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                    }}
-                  >
-                    {effectiveStatus.user.email}
-                  </span>
+                    ) : null}
+                  </div>
                 </div>
-              </div>
-            )}
-
-            <div
-              style={{
-                ...aiStyles.tooltipSection,
-                ...(effectiveStatus.user?.email
-                  ? {}
-                  : aiStyles.tooltipSectionFirst),
-              }}
-            >
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>API Key:</span>
-                <div
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "8px",
-                  }}
-                >
-                  <span style={aiStyles.tooltipValue}>
-                    {lbIsLoadingStatus ? (
-                      <div
-                        style={{
-                          height: "16px",
-                          width: "100px",
-                          background: "rgba(139, 92, 246, 0.1)",
-                          borderRadius: "4px",
-                          animation: "pulse 2s ease-in-out infinite",
-                        }}
-                      />
-                    ) : (
-                      effectiveStatus?.apiKey?.name ||
-                      effectiveStatus?.api_key?.name ||
-                      "Unknown"
-                    )}
-                  </span>
-                  {switchApiKey && (
-                    <button
-                      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"
-                    >
-                      <ArrowRightLeft
-                        size={12}
-                        style={{ color: "rgba(139, 92, 246, 1)" }}
-                      />
-                    </button>
-                  )}
+              </>
+            ) : (
+              <div className="ai-popover-body">
+                <div className="ai-popover-header">
+                  LastBrain Authentication
                 </div>
-              </div>
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>Env:</span>
-                {lbIsLoadingStatus && !effectiveStatus?.apiKey?.env ? (
-                  <div
-                    style={{
-                      height: "16px",
-                      width: "48px",
-                      background: "rgba(139, 92, 246, 0.1)",
-                      borderRadius: "4px",
-                      animation: "pulse 2s ease-in-out infinite",
-                    }}
-                  />
-                ) : (
-                  <span style={aiStyles.tooltipValue}>
-                    {effectiveStatus.apiKey?.env ||
-                      effectiveStatus.api_key?.env ||
-                      "N/A"}
-                  </span>
-                )}
-              </div>
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>Rate Limit:</span>
-                {lbIsLoadingStatus &&
-                !effectiveStatus?.apiKey?.rate_limit_rpm &&
-                !effectiveStatus?.api_key?.rate_limit_rpm ? (
-                  <div
-                    style={{
-                      height: "16px",
-                      width: "92px",
-                      background: "rgba(139, 92, 246, 0.1)",
-                      borderRadius: "4px",
-                      animation: "pulse 2s ease-in-out infinite",
-                    }}
-                  />
-                ) : (
-                  <span style={aiStyles.tooltipValue}>
-                    {effectiveStatus.apiKey?.rate_limit_rpm ||
-                      effectiveStatus.api_key?.rate_limit_rpm ||
-                      0}{" "}
-                    req/min
-                  </span>
-                )}
-              </div>
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>Auth:</span>
-                <span style={aiStyles.tooltipValue}>
-                  {lbIsLoadingStatus
-                    ? "..."
-                    : effectiveStatus?.authType || lbStatus || "unknown"}
-                </span>
-              </div>
-            </div>
-
-            <div style={aiStyles.tooltipSection}>
-              <div style={aiStyles.tooltipSubtitle}>Wallet</div>
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>Total:</span>
-                {lbIsLoadingStatus && !effectiveStatus?.balance ? (
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "8px",
-                    }}
-                  >
-                    <div
-                      style={{
-                        height: "16px",
-                        width: "120px",
-                        background: "rgba(139, 92, 246, 0.1)",
-                        borderRadius: "4px",
-                        animation: "pulse 2s ease-in-out infinite",
-                      }}
-                    />
-                    <div
-                      style={{
-                        width: "28px",
-                        height: "28px",
-                        borderRadius: "50%",
-                        background: "rgba(139, 92, 246, 0.1)",
-                        animation: "pulse 2s ease-in-out infinite",
-                      }}
-                    />
-                  </div>
-                ) : (
-                  <>
-                    <span style={aiStyles.tooltipValue}>
-                      ${formatFixed(balanceUsed, 2)} / ${formatFixed(balanceTotal, 2)}
-                    </span>
-                    {renderUsageCircle(balancePercentage)}
-                  </>
-                )}
-              </div>
-            </div>
-
-            <div style={aiStyles.tooltipSection}>
-              <div style={aiStyles.tooltipSubtitle}>Storage</div>
-              <div style={aiStyles.tooltipRow}>
-                <span style={aiStyles.tooltipLabel}>Total:</span>
-                {lbIsLoadingStorage ? (
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "8px",
-                    }}
-                  >
-                    <div
-                      style={{
-                        height: "16px",
-                        width: "120px",
-                        background: "rgba(139, 92, 246, 0.1)",
-                        borderRadius: "4px",
-                        animation: "pulse 2s ease-in-out infinite",
-                      }}
-                    />
-                    <div
-                      style={{
-                        width: "28px",
-                        height: "28px",
-                        borderRadius: "50%",
-                        background: "rgba(139, 92, 246, 0.1)",
-                        animation: "pulse 2s ease-in-out infinite",
-                      }}
-                    />
-                  </div>
-                ) : (
-                  <>
-                    <span style={aiStyles.tooltipValue}>
-                      {formatStorage(storageUsed)} /{" "}
-                      {formatStorage(storageAllocated)}
-                    </span>
-                    {renderUsageCircle(storagePercentage)}
-                  </>
-                )}
-              </div>
-            </div>
-
-            <div
-              style={{
-                ...aiStyles.tooltipActions,
-                width: "100%",
-
-                flexDirection: "row",
-              }}
-            >
-              <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"
-              >
-                <BarChart3 size={18} />
-              </button>
-              <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"
-              >
-                <HistoryIcon size={18} />
-              </button>
-              <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"
-              >
-                <Settings size={18} />
-              </button>
-              <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"
-              >
-                <FileText size={18} />
-              </button>
-              <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"
-              >
-                <FolderPlus size={18} />
-              </button>
-
-              {/* Logout Button */}
-              {logout && !isApiKeyAuthMode && (
+                <p className="ai-signin-subtitle mt-0">
+                  Connectez-vous pour accéder aux fonctionnalités IA.
+                </p>
                 <button
-                  onClick={async () => {
-                    try {
-                      await logout();
-                      setShowTooltip(false);
-                      // Refresh provider data after logout
-                      if (refetchProviders) {
-                        await refetchProviders();
-                      }
-                    } 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",
-                    });
+                  type="button"
+                  className="ai-btn ai-btn--auth w-full mt-2"
+                  onClick={() => {
+                    setShowSigninModal(true);
+                    setShowTooltip(false);
                   }}
-                  title="Logout"
                 >
-                  <LogOut size={18} />
+                  Se connecter
                 </button>
-              )}
-            </div>
+              </div>
+            )}
           </div>,
           document.body
-        )}
+        )
+      : null;
+
+  return (
+    <>
+      <div className="relative inline-block">
+        <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"
+        >
+          {renderTriggerIcon()}
+        </button>
 
-      {/* API Key Selector Modal */}
-      {showApiKeySelector && apiKeys.length > 0 && (
+        {showCornerLoading ? (
+          <span className="ai-status-loading-dot" aria-hidden="true">
+            <Loader2 size={7} className="ai-spinner text-[var(--ai-primary)]" />
+          </span>
+        ) : null}
+      </div>
+
+      {tooltipNode}
+
+      {showApiKeySelector && apiKeys.length > 0 ? (
         <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();
               }
@@ -1462,12 +622,16 @@ export function AiStatusButton({
               console.error("Failed to select API key:", error);
             } finally {
               setIsSelectingApiKey(false);
-              setIsLoadingStatus(false);
             }
           }}
           onCancel={() => setShowApiKeySelector(false)}
         />
-      )}
-    </div>
+      ) : null}
+
+      <LBSigninModal
+        isOpen={showSigninModal}
+        onClose={() => setShowSigninModal(false)}
+      />
+    </>
   );
 }