fix(ui): keep semantic button colours on hover after the no-op hover cleanup

ui/litellm-dashboard/src/app/chat/page.integration.test.tsx

@@ -1,11 +1,12 @@
 import React from "react";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { useChatHistory } from "@/components/chat/useChatHistory";
 import ChatConversationPage from "./page";
 
-const { mockMakeOpenAIResponsesRequest } = vi.hoisted(() => ({
+const { mockMakeOpenAIResponsesRequest, shellState } = vi.hoisted(() => ({
   mockMakeOpenAIResponsesRequest: vi.fn(),
+  shellState: { storageUnavailable: false },
 }));
 
 vi.mock("next/navigation", () => ({
@@ -50,7 +51,7 @@
       conversations: history.conversations,
       activeConversation: history.activeConversation,
       activeConversationId: history.currentActiveId,
-      storageUnavailable: false,
+      storageUnavailable: shellState.storageUnavailable,
       staleId: false,
       createConversation: history.createConversation,
       appendMessage: history.appendMessage,
@@ -81,6 +82,7 @@
   beforeEach(() => {
     localStorage.clear();
     mockMakeOpenAIResponsesRequest.mockReset();
+    shellState.storageUnavailable = false;
   });
 
   it("renders latency, TTFT, token counts and cost reported for the assistant turn", async () => {
@@ -92,7 +94,7 @@
 
       updateTextUI("assistant", "Sixty three microdollars.");
       onTimingData?.(250);
       onUsageData?.({ promptTokens: 12, completionTokens: 8, totalTokens: 20, cost: 0.000063 });
       onTotalLatency?.(1200);
     });
 
@@ -130,3 +132,20 @@
     expect(document.querySelector(".response-metrics")).toBeNull();
   });
 });
+
+describe("/ui/chat storage banner", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    mockMakeOpenAIResponsesRequest.mockReset();
+    shellState.storageUnavailable = true;
+  });
+
+  it("keeps the dismiss control amber on hover instead of the ghost variant's foreground", async () => {
+    render(<ChatConversationPage />);
+
+    const banner = await screen.findByText("Chat history won't be saved in this browser session");
+    const dismiss = within(banner.parentElement!).getByRole("button");
+    expect(dismiss).toHaveClass("hover:text-warning/80");
+    expect(dismiss).not.toHaveClass("hover:text-foreground");
+  });
+});

ui/litellm-dashboard/src/app/chat/page.tsx

@@ -378,7 +378,7 @@
               className={`h-auto w-full justify-start gap-2 rounded px-3 py-[7px] font-normal ${checked ? "bg-accent" : ""}`}
             >
               {logo ? (
                 <img
                   src={logo}
                   alt=""
                   className="w-4 h-4 object-contain shrink-0"
@@ -419,7 +419,7 @@
                   const provider = getProviderFromModelName(selectedModel);
                   const { logo } = provider ? getProviderLogoAndName(provider) : { logo: "" };
                   return logo ? (
                     <img
                       src={logo}
                       alt=""
                       className="w-4 h-4 object-contain shrink-0"
@@ -518,7 +518,7 @@
             variant="ghost"
             size="icon-xs"
             onClick={() => setStorageBannerDismissed(true)}
-            className="text-warning hover:bg-warning/15 "
+            className="text-warning hover:bg-warning/15 hover:text-warning/80"
           >
             <X className="size-3.5" />
           </Button>

ui/litellm-dashboard/src/components/SidebarUsageCard.test.tsx

@@ -156,4 +156,12 @@ describe("SidebarUsageCard", () => {
     await user.click(rail);
     expect(onExpandRail).toHaveBeenCalledOnce();
   });
+
+  it("keeps the collapsed rail tinted on hover instead of the outline variant's foreground", async () => {
+    renderWithClient(<SidebarUsageCard accessToken="token" collapsed onExpandRail={vi.fn()} />);
+
+    const rail = await screen.findByTitle("Enterprise usage");
+    expect(rail).toHaveClass("hover:text-sidebar-primary/80");
+    expect(rail).not.toHaveClass("hover:text-foreground");
+  });
 });

ui/litellm-dashboard/src/components/SidebarUsageCard.tsx

@@ -85,7 +85,7 @@ export default function SidebarUsageCard({ accessToken, collapsed, onExpandRail
         variant="outline"
         onClick={onExpandRail}
         title="Enterprise usage"
-        className="h-9 w-full rounded-lg border-sidebar-border bg-sidebar text-sidebar-primary shadow-none hover:bg-sidebar-accent"
+        className="h-9 w-full rounded-lg border-sidebar-border bg-sidebar text-sidebar-primary shadow-none hover:bg-sidebar-accent hover:text-sidebar-primary/80"
       >
         <Award className="size-[18px]" strokeWidth={1.75} />
       </Button>

ui/litellm-dashboard/src/components/team/LoggingSettings.test.tsx

@@ -181,6 +181,22 @@ describe("LoggingSettings", () => {
     expect(source.match(HARDCODED_PALETTE) ?? []).toHaveLength(0);
   });
 
+  it("keeps the remove button destructive on hover instead of the ghost variant's foreground", () => {
+    const initialValue = [
+      {
+        callback_name: "langsmith",
+        callback_type: "success",
+        callback_vars: {},
+      },
+    ];
+
+    renderWithProviders(<LoggingSettings value={initialValue} onChange={vi.fn()} />);
+
+    const remove = screen.getByRole("button", { name: "Remove" });
+    expect(remove).toHaveClass("hover:text-destructive/80");
+    expect(remove).not.toHaveClass("hover:text-foreground");
+  });
+
   it("reports the chosen event type when a different option is picked", async () => {
     const user = userEvent.setup({ delay: null });
     const mockOnChange = vi.fn();

ui/litellm-dashboard/src/components/team/LoggingSettings.tsx

@@ -104,7 +104,7 @@
     handleChange(newValue);
   };
 
   const updateLoggingConfig = (index: number, field: keyof LoggingConfig, newValue: any) => {
     const updatedConfigs = [...value];
     if (field === "callback_name") {
       // Convert display name to callback value and reset callback_vars when callback changes
@@ -172,7 +172,7 @@
                   width={400}
                   placeholder={`os.environ/${paramName.toUpperCase()}`}
                   value={config.callback_vars[paramName] || ""}
                   onChange={(e: any) => updateCallbackVar(configIndex, paramName, e.target.value)}
                 />
               ) : (
                 <CallbackVarInput
@@ -278,7 +278,7 @@
                   variant="ghost"
                   onClick={() => removeLoggingConfig(index)}
                   size="sm"
-                  className="text-destructive hover:bg-destructive/10"
+                  className="text-destructive hover:bg-destructive/10 hover:text-destructive/80"
                   type="button"
                 >
                   <Trash2 />