fix(provider): update references from "Claude" to "Provider" for consistency

- Changed all instances of the tray icon style from "Claude" to "Provider" in tests and settings for clarity.
- Updated the App component to pass the provider icon URL.
- Adjusted the tray icon rendering logic to improve visual consistency and functionality.

Author: robinebers

src/App.test.tsx

@@ -532,7 +532,7 @@ describe("App", () => {
     const settingsButtons = await screen.findAllByRole("button", { name: "Settings" })
     await userEvent.click(settingsButtons[0])
 
-    await userEvent.click(await screen.findByRole("radio", { name: "Claude" }))
+    await userEvent.click(await screen.findByRole("radio", { name: "Provider" }))
     expect(state.saveTrayIconStyleMock).toHaveBeenCalledWith("provider")
     expect(state.saveTrayShowPercentageMock).toHaveBeenCalledWith(true)
   })
@@ -559,7 +559,7 @@ describe("App", () => {
     expect(textOnlyCheckbox).toHaveAttribute("aria-disabled", "true")
     expect(textOnlyCheckbox).toBeChecked()
 
-    await userEvent.click(await screen.findByRole("radio", { name: "Claude" }))
+    await userEvent.click(await screen.findByRole("radio", { name: "Provider" }))
     const providerCheckbox = getTrayCheckbox()
     expect(providerCheckbox).toBeVisible()
     expect(providerCheckbox).toHaveAttribute("aria-disabled", "true")

src/App.tsx

@@ -786,6 +786,7 @@ function App() {
           onTrayIconStyleChange={handleTrayIconStyleChange}
           trayShowPercentage={trayShowPercentage}
           onTrayShowPercentageChange={handleTrayShowPercentageChange}
+          providerIconUrl={navPlugins[0]?.iconUrl}
         />
       )
     }

src/lib/settings.ts

@@ -57,7 +57,7 @@ export const DISPLAY_MODE_OPTIONS: { value: DisplayMode; label: string }[] = [
 export const TRAY_ICON_STYLE_OPTIONS: { value: TrayIconStyle; label: string }[] = [
   { value: "bars", label: "Bars" },
   { value: "circle", label: "Circle" },
-  { value: "provider", label: "Claude" },
+  { value: "provider", label: "Provider" },
   { value: "textOnly", label: "%" },
 ];
 

src/lib/tray-bars-icon.ts

@@ -243,7 +243,7 @@ export function makeTrayBarsSvg(args: {
       }
     }
   } else if (style === "provider") {
-    const iconSize = Math.max(6, sizePx - 2 * layout.pad)
+    const iconSize = Math.max(6, Math.round(sizePx - 2 * layout.pad * 0.5))
     const x = layout.barsX
     const y = Math.round((height - iconSize) / 2) + 1
     const href = typeof providerIconUrl === "string" ? providerIconUrl.trim() : ""

src/pages/settings.test.tsx

@@ -131,9 +131,9 @@ describe("SettingsPage", () => {
     expect(screen.getByText("How obsessive are you")).toBeInTheDocument()
   })
 
-  it("renders appearance section with theme options", () => {
+  it("renders app theme section with theme options", () => {
     render(<SettingsPage {...defaultProps} />)
-    expect(screen.getByText("Appearance")).toBeInTheDocument()
+    expect(screen.getByText("App Theme")).toBeInTheDocument()
     expect(screen.getByText("How it looks around here")).toBeInTheDocument()
     expect(screen.getByText("System")).toBeInTheDocument()
     expect(screen.getByText("Light")).toBeInTheDocument()
@@ -166,17 +166,17 @@ describe("SettingsPage", () => {
 
   it("renders tray icon style section", () => {
     render(<SettingsPage {...defaultProps} />)
-    expect(screen.getByText("Menu Bar Icon")).toBeInTheDocument()
+    expect(screen.getByText("Bar Icon")).toBeInTheDocument()
     expect(screen.getByText("The little guy up top")).toBeInTheDocument()
     expect(screen.getByRole("radio", { name: "Bars" })).toBeInTheDocument()
     expect(screen.getByRole("radio", { name: "Circle" })).toBeInTheDocument()
-    expect(screen.getByRole("radio", { name: "Claude" })).toBeInTheDocument()
+    expect(screen.getByRole("radio", { name: "Provider" })).toBeInTheDocument()
     expect(screen.getByRole("radio", { name: "%" })).toBeInTheDocument()
   })
 
   it("renders renamed usage section heading", () => {
     render(<SettingsPage {...defaultProps} />)
-    expect(screen.getByText("Show Usage As")).toBeInTheDocument()
+    expect(screen.getByText("Usage Mode")).toBeInTheDocument()
   })
 
   it("updates tray icon style", async () => {
@@ -211,7 +211,7 @@ describe("SettingsPage", () => {
         onTrayIconStyleChange={onTrayIconStyleChange}
       />
     )
-    await userEvent.click(screen.getByRole("radio", { name: "Claude" }))
+    await userEvent.click(screen.getByRole("radio", { name: "Provider" }))
     expect(onTrayIconStyleChange).toHaveBeenCalledWith("provider")
   })
 

src/pages/settings.tsx

@@ -23,6 +23,7 @@ import {
   DISPLAY_MODE_OPTIONS,
   TRAY_ICON_STYLE_OPTIONS,
   THEME_OPTIONS,
+  isTrayPercentageMandatory,
   type AutoUpdateIntervalMinutes,
   type DisplayMode,
   type ThemeMode,
@@ -74,9 +75,11 @@ function getPreviewBarLayout(fraction: number): { fillPercent: number; remainder
 function TrayIconStylePreview({
   style,
   isActive,
+  providerIconUrl,
 }: {
   style: TrayIconStyle;
   isActive: boolean;
+  providerIconUrl?: string;
 }) {
   const trackClass = isActive ? "bg-primary-foreground/30" : "bg-foreground/15";
   const remainderClass = isActive ? "bg-primary-foreground/55" : "bg-foreground/25";
@@ -151,11 +154,33 @@ function TrayIconStylePreview({
   }
 
   if (style === "provider") {
+    if (providerIconUrl) {
+      return (
+        <div
+          aria-hidden
+          className={cn(
+            "w-[18px] h-[18px] shrink-0",
+            isActive ? "bg-primary-foreground" : "bg-foreground"
+          )}
+          style={{
+            WebkitMaskImage: `url(${providerIconUrl})`,
+            WebkitMaskSize: "contain",
+            WebkitMaskRepeat: "no-repeat",
+            WebkitMaskPosition: "center",
+            maskImage: `url(${providerIconUrl})`,
+            maskSize: "contain",
+            maskRepeat: "no-repeat",
+            maskPosition: "center",
+          }}
+        />
+      );
+    }
+    // Fallback: generic provider icon (Anthropic logo)
     return (
       <svg
         aria-hidden
-        width="13"
-        height="13"
+        width="18"
+        height="18"
         viewBox="0 0 100 100"
         className={cn("shrink-0", textClass)}
       >
@@ -246,6 +271,7 @@ interface SettingsPageProps {
   onTrayIconStyleChange: (value: TrayIconStyle) => void;
   trayShowPercentage: boolean;
   onTrayShowPercentageChange: (value: boolean) => void;
+  providerIconUrl?: string;
 }
 
 export function SettingsPage({
@@ -262,10 +288,10 @@ export function SettingsPage({
   onTrayIconStyleChange,
   trayShowPercentage,
   onTrayShowPercentageChange,
+  providerIconUrl,
 }: SettingsPageProps) {
-  const isTrayPercentageMandatory =
-    trayIconStyle === "provider" || trayIconStyle === "textOnly";
-  const trayShowPercentageChecked = isTrayPercentageMandatory
+  const percentageMandatory = isTrayPercentageMandatory(trayIconStyle);
+  const trayShowPercentageChecked = percentageMandatory
     ? true
     : trayShowPercentage;
 
@@ -368,6 +394,7 @@ export function SettingsPage({
                   <TrayIconStylePreview
                     style={option.value}
                     isActive={isActive}
+                    providerIconUrl={option.value === "provider" ? providerIconUrl : undefined}
                   />
                 </Button>
               );
@@ -377,17 +404,17 @@ export function SettingsPage({
         <label
           className={cn(
             "mt-2 flex items-center gap-2 text-sm select-none",
-            isTrayPercentageMandatory
+            percentageMandatory
               ? "text-muted-foreground cursor-not-allowed"
               : "text-foreground"
           )}
         >
           <Checkbox
-            key={`tray-pct-${trayShowPercentageChecked}-${isTrayPercentageMandatory}`}
+            key={`tray-pct-${trayShowPercentageChecked}-${percentageMandatory}`}
             checked={trayShowPercentageChecked}
-            disabled={isTrayPercentageMandatory}
+            disabled={percentageMandatory}
             onCheckedChange={(checked) => {
-              if (isTrayPercentageMandatory) return;
+              if (percentageMandatory) return;
               onTrayShowPercentageChange(checked === true);
             }}
           />