Share Claude provider icon color

Author: Marve10s

apps/web/src/components/Sidebar.tsx

@@ -140,6 +140,7 @@ import { sortThreads } from "../lib/threadSort";
 import { SidebarUpdatePill } from "./sidebar/SidebarUpdatePill";
 import { useCopyToClipboard } from "~/hooks/useCopyToClipboard";
 import { CommandDialogTrigger } from "./ui/command";
+import { CLAUDE_PROVIDER_ICON_CLASS_NAME } from "./providerBrandClassNames";
 import { readEnvironmentApi } from "../environmentApi";
 import { useSettings, useUpdateSettings } from "~/hooks/useSettings";
 import { useServerKeybindings } from "../rpc/serverState";
@@ -239,7 +240,7 @@ type ThreadPr = GitStatusResult["pr"];
 
 function providerStatusIconClassName(provider: ThreadStatusPill["workingProvider"]): string {
   if (provider === "claudeAgent") {
-    return "text-[#d97757]";
+    return CLAUDE_PROVIDER_ICON_CLASS_NAME;
   }
 
   if (provider === "codex") {

apps/web/src/components/chat/ProviderModelPicker.tsx

@@ -21,6 +21,7 @@ import {
 import { ClaudeAI, CursorIcon, Gemini, Icon, OpenAI, OpenCodeIcon } from "../Icons";
 import { cn } from "~/lib/utils";
 import { getProviderSnapshot } from "../../providerModels";
+import { CLAUDE_PROVIDER_ICON_CLASS_NAME } from "../providerBrandClassNames";
 
 function isAvailableProviderOption(option: (typeof PROVIDER_OPTIONS)[number]): option is {
   value: ProviderKind;
@@ -47,7 +48,7 @@ function providerIconClassName(
   provider: ProviderKind | ProviderPickerKind,
   fallbackClassName: string,
 ): string {
-  return provider === "claudeAgent" ? "text-[#d97757]" : fallbackClassName;
+  return provider === "claudeAgent" ? CLAUDE_PROVIDER_ICON_CLASS_NAME : fallbackClassName;
 }
 
 export const ProviderModelPicker = memo(function ProviderModelPicker(props: {

apps/web/src/components/providerBrandClassNames.ts

@@ -0,0 +1 @@
+export const CLAUDE_PROVIDER_ICON_CLASS_NAME = "text-[#d97757]";