From 164390676c61d9f1bf92c6c6d268afb2995579fd Mon Sep 17 00:00:00 2001
From: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>
Date: Thu, 25 Jun 2026 10:15:41 +0800
Subject: [PATCH] fix(ui): show official opencode logo in the Apps tab
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A connected opencode client wasn't recognized by resolveKnownClientKey, so the
Apps (Clients) page fell back to its self-reported logo_uri — an outdated mark.
Recognize "opencode" and render our bundled official, theme-aware logo via
ClientBrandIcon, overriding the stale remote logo.

Test: resolveKnownClientKey maps "opencode" / "opencode (mcpmux)" to opencode.

Claude-Session: https://claude.ai/code/session_01Baan9JmzR43uxxRUh7CAMF
Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>
---
 apps/desktop/src/features/clients/ClientsPage.tsx | 15 +++++++++++++++
 apps/desktop/src/lib/clientIcons.ts               |  1 +
 tests/ts/lib/clientIcons.test.ts                  |  8 ++++++++
 3 files changed, 24 insertions(+)

diff --git a/apps/desktop/src/features/clients/ClientsPage.tsx b/apps/desktop/src/features/clients/ClientsPage.tsx
index 6c6d64f2..84e15a32 100644
--- a/apps/desktop/src/features/clients/ClientsPage.tsx
+++ b/apps/desktop/src/features/clients/ClientsPage.tsx
@@ -6,6 +6,9 @@ import claudeIcon from '@/assets/client-icons/claude.svg';
 import windsurfIcon from '@/assets/client-icons/windsurf.svg';
 import jetbrainsIcon from '@/assets/client-icons/jetbrains.svg';
 import androidStudioIcon from '@/assets/client-icons/android-studio.svg';
+import opencodeIcon from '@/assets/client-icons/opencode.svg';
+import opencodeIconDark from '@/assets/client-icons/opencode-dark.svg';
+import { ClientBrandIcon } from '@/components/ClientBrandIcon';
 import { resolveKnownClientKey } from '@/lib/clientIcons';
 import {
   Laptop,
@@ -65,6 +68,18 @@ const CLIENT_ICON_ASSETS: Record<string, string> = {
 
 function ClientIcon({ logo_uri, client_name }: { logo_uri?: string | null; client_name: string }) {
   const knownKey = resolveKnownClientKey(client_name);
+  // opencode ships theme-specific marks; render our bundled official logo
+  // (overriding any outdated self-reported logo_uri).
+  if (knownKey === 'opencode') {
+    return (
+      <ClientBrandIcon
+        light={opencodeIcon}
+        dark={opencodeIconDark}
+        alt={client_name}
+        className="h-full w-full rounded object-contain"
+      />
+    );
+  }
   const iconUrl = (knownKey && CLIENT_ICON_ASSETS[knownKey]) || logo_uri;
   if (iconUrl) {
     return (
diff --git a/apps/desktop/src/lib/clientIcons.ts b/apps/desktop/src/lib/clientIcons.ts
index c49c45b0..fc214a27 100644
--- a/apps/desktop/src/lib/clientIcons.ts
+++ b/apps/desktop/src/lib/clientIcons.ts
@@ -21,6 +21,7 @@ const KNOWN_CLIENT_PATTERNS: { pattern: string; iconKey: string }[] = [
   { pattern: 'clion', iconKey: 'jetbrains' },
   { pattern: 'jetbrains', iconKey: 'jetbrains' },
   { pattern: 'cursor', iconKey: 'cursor' },
+  { pattern: 'opencode', iconKey: 'opencode' },
   { pattern: 'vscode', iconKey: 'vscode' },
   { pattern: 'claude', iconKey: 'claude' },
 ];
diff --git a/tests/ts/lib/clientIcons.test.ts b/tests/ts/lib/clientIcons.test.ts
index dfb5e81b..313cee95 100644
--- a/tests/ts/lib/clientIcons.test.ts
+++ b/tests/ts/lib/clientIcons.test.ts
@@ -38,6 +38,14 @@ describe('resolveKnownClientKey', () => {
     it('should resolve "codeium" to windsurf', () => {
       expect(resolveKnownClientKey('codeium')).toBe('windsurf');
     });
+
+    it('should resolve "opencode" to opencode', () => {
+      expect(resolveKnownClientKey('opencode')).toBe('opencode');
+    });
+
+    it('should resolve "opencode (mcpmux)" to opencode', () => {
+      expect(resolveKnownClientKey('opencode (mcpmux)')).toBe('opencode');
+    });
   });
 
   describe('prefix matches with parenthesised suffix', () => {