feat(providers): add provider icons to dashboard

- Add provider logo icons for all supported providers
- Update provider detail and list pages to display icons with text fallback
- Target: providers UI

src/app/(dashboard)/dashboard/providers/[id]/page.js

@@ -23,6 +23,7 @@ export default function ProviderDetailPage() {
   const [showEditNodeModal, setShowEditNodeModal] = useState(false);
   const [selectedConnection, setSelectedConnection] = useState(null);
   const [modelAliases, setModelAliases] = useState({});
+  const [headerImgError, setHeaderImgError] = useState(false);
   const { copied, copy } = useCopyToClipboard();
 
   const providerInfo = providerNode
@@ -298,7 +299,7 @@ export default function ProviderDetailPage() {
         <CardSkeleton />
       </div>
     );
-  }
+}
 
   if (!providerInfo) {
     return (
@@ -311,6 +312,14 @@ export default function ProviderDetailPage() {
     );
   }
 
+  // Determine icon path: OpenAI Compatible providers use specialized icons
+  const getHeaderIconPath = () => {
+    if (isOpenAICompatible && providerInfo.apiType) {
+      return providerInfo.apiType === "responses" ? "/providers/oai-r.png" : "/providers/oai-cc.png";
+    }
+    return `/providers/${providerInfo.id}.png`;
+  };
+
   return (
     <div className="flex flex-col gap-8">
       {/* Header */}
@@ -327,19 +336,19 @@ export default function ProviderDetailPage() {
             className="rounded-lg flex items-center justify-center"
             style={{ backgroundColor: `${providerInfo.color}15` }}
           >
-            {providerInfo.textIcon ? (
+            {headerImgError ? (
               <span className="text-sm font-bold" style={{ color: providerInfo.color }}>
-                {providerInfo.textIcon}
+                {providerInfo.textIcon || providerInfo.id.slice(0, 2).toUpperCase()}
               </span>
             ) : (
               <Image
-                src={`/providers/${providerInfo.id}.png`}
+                src={getHeaderIconPath()}
                 alt={providerInfo.name}
                 width={48}
                 height={48}
                 className="object-contain rounded-lg max-w-[48px] max-h-[48px]"
                 sizes="48px"
-                onError={(e) => { e.currentTarget.style.display = "none"; }}
+                onError={() => setHeaderImgError(true)}
               />
             )}
           </div>