Use official OpenCode SVG icon instead of remote favicon

Replaces the remote favicon loading for OpenCode with a local SVG icon.
This avoids flaky external network requests and ensures the icon renders
properly across light and dark themes using theme-aware currentColor.
This commit is contained in:
Jinjing
2026-07-04 15:13:35 -07:00
parent 5ba4e2454d
commit e2521752a4
3 changed files with 34 additions and 1 deletions
@@ -27,4 +27,14 @@ describe('AgentCombobox', () => {
expect(markup).not.toContain('https://github.com/Gitlawb.png')
expect(markup).not.toContain('<svg')
})
it('uses the official OpenCode SVG mark instead of a remote favicon', () => {
const markup = renderToStaticMarkup(<AgentIcon agent="opencode" />)
expect(markup).toContain('<svg')
expect(markup).toContain('viewBox="0 0 240 300"')
expect(markup).not.toContain('/resources/opencode.webp')
expect(markup).not.toContain('https://www.google.com/s2/favicons')
expect(markup).not.toContain('<img')
})
})
+4 -1
View File
@@ -9,6 +9,7 @@ import {
CopilotIcon,
KiloIcon,
OmpIcon,
OpenCodeIcon,
PiIcon
} from './agent-icon-glyphs'
import { translate } from '@/i18n/i18n'
@@ -86,7 +87,6 @@ export const getAgentCatalog = createLocalizedCatalog((): AgentCatalogEntry[] =>
id: 'opencode',
label: translate('auto.lib.agent.catalog.e7a4ca5103', 'OpenCode'),
cmd: 'opencode',
faviconDomain: 'opencode.ai',
homepageUrl: 'https://opencode.ai/docs/cli/'
},
{
@@ -336,6 +336,9 @@ export function AgentIcon({
if (agent === 'copilot') {
return <CopilotIcon size={size} />
}
if (agent === 'opencode') {
return <OpenCodeIcon size={size} />
}
const catalogEntry = getAgentCatalog().find((a) => a.id === agent)
if (catalogEntry?.iconUrl) {
return (
@@ -112,6 +112,26 @@ export function CopilotIcon({ size = 14 }: { size?: number }): React.JSX.Element
)
}
export function OpenCodeIcon({ size = 14 }: { size?: number }): React.JSX.Element {
// SVG geometry sourced from opencode.ai/brand's official logo asset.
// Why: the branded fills are adapted to currentColor so the mark is visible
// in both Orca themes and avoids the flaky favicon proxy.
return (
<svg
width={size}
height={size}
viewBox="0 0 240 300"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden
className="text-current"
>
<path d="M180 240H60V120H180V240Z" fill="currentColor" fillOpacity="0.28" />
<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="currentColor" />
</svg>
)
}
export function AgentLetterIcon({
letter,
size = 14