feat(ui): opencode global connect + client icons in install panel

- Add opencode to the home "Connect a client" grid: a global config snippet
  (mcp.mcpmux = { type: remote, url }) with NO per-workspace header, since a
  global config can hold only one. New opencode brand icon.
- Show brand icons in the per-workspace install panel checklist (Cursor,
  Claude Code, VS Code, opencode, Zed), with a generic fallback. New zed icon.

Tests: ConnectIDEs renders the opencode tile and copies a header-less global
snippet; install panel renders an icon per client row.

Claude-Session: https://claude.ai/code/session_01Baan9JmzR43uxxRUh7CAMF
Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/assets/client-icons/opencode.svg

@@ -7,6 +7,7 @@ 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 { addToVscode, addToCursor } from '@/lib/api/clientInstall';
 
 type GridAction = 'deep_link' | 'copy_command' | 'copy_config';
@@ -94,6 +95,18 @@ export function ConnectIDEsGrid({ gatewayUrl, gatewayRunning }: ConnectIDEsGridP
         'loads mcpmux on the next `claude` invocation (existing sessions need ' +
         '/restart). Approve on this page when it connects.',
     },
+    {
+      id: 'opencode',
+      name: 'opencode',
+      label: 'opencode',
+      icon: opencodeIcon,
+      action: 'copy_config',
+      handler: `"mcpmux": {\n  "type": "remote",\n  "url": "${mcpUrl}"\n}`,
+      nextStep:
+        'Copies a JSON snippet. In opencode, paste it under "mcp" in opencode.json ' +
+        '(project) or ~/.config/opencode/opencode.json (global), then restart ' +
+        'opencode. Approve on this page when it connects.',
+    },
     {
       id: 'jetbrains',
       name: 'JetBrains IDEs',

apps/desktop/src/assets/client-icons/zed.svg

@@ -1,8 +1,31 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Check, Copy, Download, Loader2, ShieldCheck, ShieldOff, AlertCircle } from 'lucide-react';
+import {
+  AppWindow,
+  Check,
+  Copy,
+  Download,
+  Loader2,
+  ShieldCheck,
+  ShieldOff,
+  AlertCircle,
+} from 'lucide-react';
 import { Button } from '@mcpmux/ui';
+import cursorIcon from '@/assets/client-icons/cursor.svg';
+import claudeIcon from '@/assets/client-icons/claude.svg';
+import vscodeIcon from '@/assets/client-icons/vscode.png';
+import opencodeIcon from '@/assets/client-icons/opencode.svg';
+import zedIcon from '@/assets/client-icons/zed.svg';
 import { getGatewayStatus } from '@/lib/api/gateway';
 import { useNavigateTo, useSetPendingSettingsSection } from '@/stores';
+
+/** Brand icon per supported client id (falls back to a generic glyph). */
+const CLIENT_ICONS: Record<string, string> = {
+  cursor: cursorIcon,
+  'claude-code': claudeIcon,
+  vscode: vscodeIcon,
+  opencode: opencodeIcon,
+  zed: zedIcon,
+};
 import {
   generateWorkspaceConfigSnippet,
   getGatewayAuthDisabled,
@@ -209,6 +232,15 @@ export function WorkspaceInstallPanel({ workspaceRoot }: { workspaceRoot: string
                 onChange={() => toggleClient(c.id)}
                 className="h-4 w-4 flex-shrink-0 accent-primary-500"
               />
+              {CLIENT_ICONS[c.id] ? (
+                <img
+                  src={CLIENT_ICONS[c.id]}
+                  alt=""
+                  className="h-5 w-5 flex-shrink-0 object-contain"
+                />
+              ) : (
+                <AppWindow className="h-5 w-5 flex-shrink-0 text-[rgb(var(--muted))]" />
+              )}
               <div className="min-w-0 flex-1">
                 <div className="text-sm font-medium text-[rgb(var(--foreground))]">{c.label}</div>
                 <div className="truncate font-mono text-[11px] text-[rgb(var(--muted))]">

apps/desktop/src/components/ConnectIDEs.tsx

@@ -35,9 +35,30 @@ describe('ConnectIDEs', () => {
     expect(screen.getByTestId('client-icon-vscode')).toBeInTheDocument();
     expect(screen.getByTestId('client-icon-cursor')).toBeInTheDocument();
     expect(screen.getByTestId('client-icon-claude-code')).toBeInTheDocument();
+    expect(screen.getByTestId('client-icon-opencode')).toBeInTheDocument();
     expect(screen.getByTestId('client-icon-copy-config')).toBeInTheDocument();
   });
 
+  it('offers a global opencode config snippet (no workspace header)', async () => {
+    const user = userEvent.setup();
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    Object.defineProperty(navigator, 'clipboard', {
+      value: { writeText },
+      writable: true,
+      configurable: true,
+    });
+    render(<ConnectIDEs gatewayUrl="http://localhost:45818" gatewayRunning={true} />);
+
+    await user.click(screen.getByTestId('client-icon-opencode'));
+    await user.click(screen.getByRole('button', { name: /Copy config/i }));
+
+    const copied = writeText.mock.calls[0][0] as string;
+    expect(copied).toContain('"type": "remote"');
+    expect(copied).toContain('localhost:45818/mcp');
+    // Global connect carries no per-workspace header.
+    expect(copied).not.toContain('X-Mcpmux-Workspace');
+  });
+
   it('should show labels under icons', () => {
     render(
       <ConnectIDEs gatewayUrl="http://localhost:45818" gatewayRunning={true} />

apps/desktop/src/features/workspaces/WorkspaceInstallPanel.tsx

@@ -74,11 +74,14 @@ describe('WorkspaceInstallPanel', () => {
       .mockResolvedValue({ running: true, url: 'http://localhost:45818' });
   });
 
-  it('lists every supported client', async () => {
+  it('lists every supported client, each with an icon', async () => {
     render(<WorkspaceInstallPanel workspaceRoot={ROOT} />);
     expect(await screen.findByText('Cursor')).toBeTruthy();
     for (const c of CLIENTS) {
-      expect(screen.getByTestId(`workspace-install-client-${c.id}`)).toBeTruthy();
+      const row = screen.getByTestId(`workspace-install-client-${c.id}`);
+      expect(row).toBeTruthy();
+      // Each known client renders a brand icon image.
+      expect(row.querySelector('img')).toBeTruthy();
     }
   });