diff --git a/src/renderer/src/app/OnboardingProviderStep.tsx b/src/renderer/src/app/OnboardingProviderStep.tsx index be442809..9829311a 100644 --- a/src/renderer/src/app/OnboardingProviderStep.tsx +++ b/src/renderer/src/app/OnboardingProviderStep.tsx @@ -1,5 +1,6 @@ import { Fragment, useEffect, useState } from "react"; import type { ProviderCatalogEntry } from "../../../shared/domain"; +import { ProviderLogo } from "../shared/ProviderLogo"; import { ProviderOAuthConnect } from "../shared/ProviderOAuthConnect"; import { Button, Field, Pill } from "../shared/ui"; import type { Draft } from "./Onboarding"; @@ -40,7 +41,8 @@ export function ProviderStep({ providerBaseUrl: "", })} > -
+
+
{provider.label}
{authBadge(provider.authType)}
diff --git a/src/renderer/src/assets/provider-logos/README.md b/src/renderer/src/assets/provider-logos/README.md new file mode 100644 index 00000000..ff05d585 --- /dev/null +++ b/src/renderer/src/assets/provider-logos/README.md @@ -0,0 +1,20 @@ +# Provider logos + +Official brand marks for the model-provider catalog, bundled at build time so +the app never fetches them at runtime. Source: img.logo.dev (same source and +publishable token as the connectors page), downloaded once per brand. + +Refresh a logo (token lives in `src/main/services/composio/connector-brands.ts`): + +``` +curl -o .png "https://img.logo.dev/?token=&size=128&format=png&fallback=404" +``` + +Domain per file: openai.com, anthropic.com, claude.ai (claude-pro), grok.com +(xai), groq.com, mistral.ai, cerebras.ai, openrouter.ai, moonshot.ai (kimi; +also used for kimi-code — kimi.com is not in logo.dev's index), moonshot.cn +(kimi-cn), github.com (github-copilot), antigravity.google +(google-antigravity), chatgpt.com (gpt-account), azure.microsoft.com +(azure-openai), aws.amazon.com (aws-bedrock), cloud.google.com (vertex-ai). +The custom-openai / custom-anthropic endpoints carry no official brand and +render as letter tiles. diff --git a/src/renderer/src/assets/provider-logos/anthropic.png b/src/renderer/src/assets/provider-logos/anthropic.png new file mode 100644 index 00000000..e187dc0a Binary files /dev/null and b/src/renderer/src/assets/provider-logos/anthropic.png differ diff --git a/src/renderer/src/assets/provider-logos/aws-bedrock.png b/src/renderer/src/assets/provider-logos/aws-bedrock.png new file mode 100644 index 00000000..780b80c6 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/aws-bedrock.png differ diff --git a/src/renderer/src/assets/provider-logos/azure-openai.png b/src/renderer/src/assets/provider-logos/azure-openai.png new file mode 100644 index 00000000..15817415 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/azure-openai.png differ diff --git a/src/renderer/src/assets/provider-logos/cerebras.png b/src/renderer/src/assets/provider-logos/cerebras.png new file mode 100644 index 00000000..289ff649 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/cerebras.png differ diff --git a/src/renderer/src/assets/provider-logos/claude-pro.png b/src/renderer/src/assets/provider-logos/claude-pro.png new file mode 100644 index 00000000..0dc129d4 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/claude-pro.png differ diff --git a/src/renderer/src/assets/provider-logos/github-copilot.png b/src/renderer/src/assets/provider-logos/github-copilot.png new file mode 100644 index 00000000..bdfbbab2 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/github-copilot.png differ diff --git a/src/renderer/src/assets/provider-logos/google-antigravity.png b/src/renderer/src/assets/provider-logos/google-antigravity.png new file mode 100644 index 00000000..ed897a79 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/google-antigravity.png differ diff --git a/src/renderer/src/assets/provider-logos/gpt-account.png b/src/renderer/src/assets/provider-logos/gpt-account.png new file mode 100644 index 00000000..875005c3 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/gpt-account.png differ diff --git a/src/renderer/src/assets/provider-logos/groq.png b/src/renderer/src/assets/provider-logos/groq.png new file mode 100644 index 00000000..0702efc9 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/groq.png differ diff --git a/src/renderer/src/assets/provider-logos/kimi-cn.png b/src/renderer/src/assets/provider-logos/kimi-cn.png new file mode 100644 index 00000000..dd31898d Binary files /dev/null and b/src/renderer/src/assets/provider-logos/kimi-cn.png differ diff --git a/src/renderer/src/assets/provider-logos/kimi.png b/src/renderer/src/assets/provider-logos/kimi.png new file mode 100644 index 00000000..86738849 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/kimi.png differ diff --git a/src/renderer/src/assets/provider-logos/mistral.png b/src/renderer/src/assets/provider-logos/mistral.png new file mode 100644 index 00000000..e23d04a7 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/mistral.png differ diff --git a/src/renderer/src/assets/provider-logos/openai.png b/src/renderer/src/assets/provider-logos/openai.png new file mode 100644 index 00000000..0739889e Binary files /dev/null and b/src/renderer/src/assets/provider-logos/openai.png differ diff --git a/src/renderer/src/assets/provider-logos/openrouter.png b/src/renderer/src/assets/provider-logos/openrouter.png new file mode 100644 index 00000000..c518e312 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/openrouter.png differ diff --git a/src/renderer/src/assets/provider-logos/vertex-ai.png b/src/renderer/src/assets/provider-logos/vertex-ai.png new file mode 100644 index 00000000..701415c2 Binary files /dev/null and b/src/renderer/src/assets/provider-logos/vertex-ai.png differ diff --git a/src/renderer/src/assets/provider-logos/xai.png b/src/renderer/src/assets/provider-logos/xai.png new file mode 100644 index 00000000..547c06fa Binary files /dev/null and b/src/renderer/src/assets/provider-logos/xai.png differ diff --git a/src/renderer/src/env.d.ts b/src/renderer/src/env.d.ts new file mode 100644 index 00000000..f7723596 --- /dev/null +++ b/src/renderer/src/env.d.ts @@ -0,0 +1,4 @@ +declare module "*.png" { + const src: string; + export default src; +} diff --git a/src/renderer/src/pages/settings/ProviderLogo.tsx b/src/renderer/src/pages/settings/ProviderLogo.tsx deleted file mode 100644 index 0aa598de..00000000 --- a/src/renderer/src/pages/settings/ProviderLogo.tsx +++ /dev/null @@ -1,35 +0,0 @@ -const PROVIDER_BRAND: Record = { - "Anthropic": ["#cb9a5b", "A"], - "OpenAI": ["#0a0a0b", "O"], - "xAI Grok": ["#0a0a0b", "X"], - "GitHub Copilot": ["#2da44e", "⌬"], - "Google Antigravity": ["#3a7bd5", "G"], - "GPT account": ["#10a37f", "◔"], - "Azure OpenAI": ["#0078d4", "Az"], - "AWS Bedrock": ["#e87722", "Bd"], - "Vertex AI": ["#4285f4", "V"], - "Groq": ["#f55036", "Q"], -}; - -export function ProviderLogo({ label, size = 30 }: { label: string; size?: number }) { - const entry = PROVIDER_BRAND[label] ?? ["#a1a1aa", label.slice(0, 1).toUpperCase()]; - const [background, glyph] = entry; - return ( -
- {glyph} -
- ); -} diff --git a/src/renderer/src/pages/settings/ProvidersPanel.tsx b/src/renderer/src/pages/settings/ProvidersPanel.tsx index 75d0a155..7823f43b 100644 --- a/src/renderer/src/pages/settings/ProvidersPanel.tsx +++ b/src/renderer/src/pages/settings/ProvidersPanel.tsx @@ -10,7 +10,7 @@ import type { ProviderRecord, } from "../../../../shared/domain"; import { PROVIDER_DATA_POLICY } from "../../../../shared/domain"; -import { ProviderLogo } from "./ProviderLogo"; +import { ProviderLogo } from "../../shared/ProviderLogo"; import { ProviderConnectFields, ProviderOAuthFields } from "./ProviderConnectionDialog"; import { composeSecret } from "./provider-secret"; import type { SnapshotActions } from "../../app/useSnapshot"; @@ -281,7 +281,7 @@ function ProviderRow({ borderRadius: 10, }} > - +
{provider.label}
@@ -321,7 +321,7 @@ function ProviderCard({ provider, onConnect }: { provider: ProviderRecord; onCon minWidth: 0, }} > - +
{provider.label}
diff --git a/src/renderer/src/shared/ProviderLogo.tsx b/src/renderer/src/shared/ProviderLogo.tsx new file mode 100644 index 00000000..6731bd1a --- /dev/null +++ b/src/renderer/src/shared/ProviderLogo.tsx @@ -0,0 +1,76 @@ +import openaiLogo from "../assets/provider-logos/openai.png"; +import anthropicLogo from "../assets/provider-logos/anthropic.png"; +import claudeProLogo from "../assets/provider-logos/claude-pro.png"; +import xaiLogo from "../assets/provider-logos/xai.png"; +import groqLogo from "../assets/provider-logos/groq.png"; +import mistralLogo from "../assets/provider-logos/mistral.png"; +import cerebrasLogo from "../assets/provider-logos/cerebras.png"; +import openrouterLogo from "../assets/provider-logos/openrouter.png"; +import kimiLogo from "../assets/provider-logos/kimi.png"; +import kimiCnLogo from "../assets/provider-logos/kimi-cn.png"; +import githubCopilotLogo from "../assets/provider-logos/github-copilot.png"; +import googleAntigravityLogo from "../assets/provider-logos/google-antigravity.png"; +import gptAccountLogo from "../assets/provider-logos/gpt-account.png"; +import azureOpenAiLogo from "../assets/provider-logos/azure-openai.png"; +import awsBedrockLogo from "../assets/provider-logos/aws-bedrock.png"; +import vertexAiLogo from "../assets/provider-logos/vertex-ai.png"; + +/** + * Official provider marks bundled at build time (assets/provider-logos — + * downloaded once from img.logo.dev, see the README there). Catalog keys + * without an official brand (the custom endpoints) fall back to a letter + * tile. The white tile behind the image keeps transparent marks legible on + * the dark theme; full-bleed logos cover it entirely. + */ +const PROVIDER_LOGOS: Record = { + openai: openaiLogo, + anthropic: anthropicLogo, + "claude-pro": claudeProLogo, + xai: xaiLogo, + groq: groqLogo, + mistral: mistralLogo, + cerebras: cerebrasLogo, + openrouter: openrouterLogo, + kimi: kimiLogo, + "kimi-cn": kimiCnLogo, + "kimi-code": kimiLogo, + "github-copilot": githubCopilotLogo, + "google-antigravity": googleAntigravityLogo, + "gpt-account": gptAccountLogo, + "azure-openai": azureOpenAiLogo, + "aws-bedrock": awsBedrockLogo, + "vertex-ai": vertexAiLogo, +}; + +export function ProviderLogo({ providerKey, label, size = 30 }: { providerKey: string; label: string; size?: number }) { + const logo = PROVIDER_LOGOS[providerKey]; + if (logo) { + return ( + + ); + } + return ( +
+ {label.slice(0, 1).toUpperCase()} +
+ ); +}