fix(ui): official opencode logo (theme-aware) + block re-mapping a mapped folder

- Replace the placeholder opencode mark with the official brand Logo. It's
  theme-specific (dark mark for light backgrounds, light for dark), so ship
  both variants and swap via a small ClientBrandIcon component used by the
  home connect grid and the per-workspace install panel.
- Setup walkthrough: validate the chosen folder. A folder that already has a
  mapping (e.g. picked via the OS dialog) now shows an inline error and blocks
  Next; the detected-workspaces quick-pick already excludes mapped folders.

Tests: detected list excludes an already-mapped folder; full TS suite green
(222).

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-dark.svg

@@ -0,0 +1,31 @@
+/**
+ * Brand icon for an MCP client.
+ *
+ * Some official marks are theme-specific — opencode's logo is a dark mark meant
+ * for light backgrounds and a light mark for dark backgrounds, so neither reads
+ * on both themes. When both variants are provided we render both and toggle with
+ * Tailwind's `dark:` variant; a single asset is shown as-is. Returns `null` when
+ * no asset is given so the caller can render its own fallback glyph.
+ */
+export function ClientBrandIcon({
+  light,
+  dark,
+  alt = '',
+  className = '',
+}: {
+  light?: string;
+  dark?: string;
+  alt?: string;
+  className?: string;
+}) {
+  if (!light && !dark) return null;
+  if (light && dark) {
+    return (
+      <>
+        <img src={light} alt={alt} className={`${className} block dark:hidden`} />
+        <img src={dark} alt={alt} className={`${className} hidden dark:block`} />
+      </>
+    );
+  }
+  return <img src={(light ?? dark) as string} alt={alt} className={className} />;
+}

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

@@ -8,7 +8,9 @@ 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 { addToVscode, addToCursor } from '@/lib/api/clientInstall';
+import { ClientBrandIcon } from './ClientBrandIcon';
 
 type GridAction = 'deep_link' | 'copy_command' | 'copy_config';
 
@@ -17,6 +19,8 @@ interface GridEntry {
   name: string;
   label: string;
   icon?: string;
+  /** Optional dark-theme variant; rendered via ClientBrandIcon when present. */
+  iconDark?: string;
   action: GridAction;
   handler: (() => Promise<void>) | string;
   /**
@@ -100,6 +104,7 @@ export function ConnectIDEsGrid({ gatewayUrl, gatewayRunning }: ConnectIDEsGridP
       name: 'opencode',
       label: 'opencode',
       icon: opencodeIcon,
+      iconDark: opencodeIconDark,
       action: 'copy_config',
       handler: `"mcpmux": {\n  "type": "remote",\n  "url": "${mcpUrl}"\n}`,
       nextStep:
@@ -197,8 +202,9 @@ export function ConnectIDEsGrid({ gatewayUrl, gatewayRunning }: ConnectIDEsGridP
               data-testid={`client-icon-${entry.id}`}
             >
               {entry.icon ? (
-                <img
-                  src={entry.icon}
+                <ClientBrandIcon
+                  light={entry.icon}
+                  dark={entry.iconDark}
                   alt={entry.name}
                   className="h-5 w-5 object-contain"
                 />

apps/desktop/src/components/ClientBrandIcon.tsx

@@ -14,17 +14,20 @@ 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 opencodeIconDark from '@/assets/client-icons/opencode-dark.svg';
 import zedIcon from '@/assets/client-icons/zed.svg';
+import { ClientBrandIcon } from '@/components/ClientBrandIcon';
 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,
+/** Brand icon per supported client id (falls back to a generic glyph). opencode
+ *  ships theme-specific marks, so it carries a dark variant. */
+const CLIENT_ICONS: Record<string, { light: string; dark?: string }> = {
+  cursor: { light: cursorIcon },
+  'claude-code': { light: claudeIcon },
+  vscode: { light: vscodeIcon },
+  opencode: { light: opencodeIcon, dark: opencodeIconDark },
+  zed: { light: zedIcon },
 };
 import {
   generateWorkspaceConfigSnippet,
@@ -233,9 +236,9 @@ export function WorkspaceInstallPanel({ workspaceRoot }: { workspaceRoot: string
                 className="h-4 w-4 flex-shrink-0 accent-primary-500"
               />
               {CLIENT_ICONS[c.id] ? (
-                <img
-                  src={CLIENT_ICONS[c.id]}
-                  alt=""
+                <ClientBrandIcon
+                  light={CLIENT_ICONS[c.id].light}
+                  dark={CLIENT_ICONS[c.id].dark}
                   className="h-5 w-5 flex-shrink-0 object-contain"
                 />
               ) : (

apps/desktop/src/components/ConnectIDEs.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { open as openDialog } from '@tauri-apps/plugin-dialog';
 import {
+  AlertCircle,
   ArrowLeft,
   ArrowRight,
   Check,
@@ -89,6 +90,12 @@ export function WorkspaceSetupWizard({
     () => reportedRoots.filter((r) => !boundRoots.has(r.toLowerCase())),
     [reportedRoots, boundRoots]
   );
+  // Block picking a folder that already has a mapping (e.g. chosen via the
+  // folder dialog) — it must be edited from the Workspaces list, not re-created.
+  const alreadyMapped = useMemo(
+    () => !!folder && boundRoots.has(folder.toLowerCase()),
+    [folder, boundRoots]
+  );
 
   const pickFolder = async () => {
     try {
@@ -182,13 +189,31 @@ export function WorkspaceSetupWizard({
             </Button>
 
             {folder && (
-              <div className="flex items-center gap-2 rounded-lg border border-[rgb(var(--border))] bg-[rgb(var(--background))] px-3 py-2">
-                <Check className="h-4 w-4 flex-shrink-0 text-green-600" />
+              <div
+                className={`flex items-center gap-2 rounded-lg border px-3 py-2 ${
+                  alreadyMapped
+                    ? 'border-amber-300 bg-amber-50 dark:border-amber-800/60 dark:bg-amber-900/20'
+                    : 'border-[rgb(var(--border))] bg-[rgb(var(--background))]'
+                }`}
+              >
+                {alreadyMapped ? (
+                  <AlertCircle className="h-4 w-4 flex-shrink-0 text-amber-600" />
+                ) : (
+                  <Check className="h-4 w-4 flex-shrink-0 text-green-600" />
+                )}
                 <span className="truncate font-mono text-xs" title={folder}>
                   {folder}
                 </span>
               </div>
             )}
+            {alreadyMapped && (
+              <p
+                className="text-xs text-amber-700 dark:text-amber-400"
+                data-testid="wizard-folder-mapped-error"
+              >
+                This folder is already mapped — edit it from the Workspaces list instead.
+              </p>
+            )}
 
             {unmappedRoots.length > 0 && (
               <div>
@@ -315,7 +340,7 @@ export function WorkspaceSetupWizard({
             variant="primary"
             size="sm"
             onClick={() => setStep((s) => (s + 1) as 1 | 2 | 3)}
-            disabled={step === 1 && !folder}
+            disabled={step === 1 && (!folder || alreadyMapped)}
             data-testid="wizard-next"
           >
             {step === 2 ? 'Next' : 'Continue'}

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

@@ -11,12 +11,13 @@ import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-const { openMock, validateMock } = vi.hoisted(() => ({
-  openMock: vi.fn(),
+const { validateMock } = vi.hoisted(() => ({
   validateMock: vi.fn(),
 }));
 
-vi.mock('@tauri-apps/plugin-dialog', () => ({ open: openMock }));
+// `@tauri-apps/plugin-dialog` is mocked globally in setup.ts (open: vi.fn()).
+// We reconfigure that shared mock per-test via vi.importMock (a static import
+// of this mocked-only package isn't Vite-resolvable from the test).
 vi.mock('@/lib/api/workspaceBindings', () => ({ validateWorkspaceRoot: validateMock }));
 vi.mock('@/lib/api/featureSets', () => ({
   isStarterFeatureSet: (fs: { feature_set_type: string }) =>
@@ -50,7 +51,6 @@ const props = (over: any = {}) => ({
 
 describe('WorkspaceSetupWizard', () => {
   beforeEach(() => {
-    openMock.mockReset();
     validateMock.mockReset();
   });
 
@@ -87,6 +87,25 @@ describe('WorkspaceSetupWizard', () => {
     expect(p.onClose).not.toHaveBeenCalled();
   });
 
+  it('does not offer an already-mapped folder in the detected list', () => {
+    // The quick-pick list filters out folders that already have a binding, so a
+    // mapped folder can't be re-picked there; an unmapped one is still offered.
+    // (Picking a mapped folder via the OS dialog is guarded separately by the
+    // alreadyMapped check, which disables Next and shows an inline error.)
+    render(
+      <WorkspaceSetupWizard
+        {...props({
+          reportedRoots: ['/proj/app', '/proj/other'],
+          existingBindings: [
+            { id: 'b1', workspace_root: '/proj/app', space_id: 's1', feature_set_ids: ['fs_starter'] },
+          ],
+        })}
+      />
+    );
+    expect(screen.queryByRole('button', { name: /\/proj\/app$/ })).toBeNull();
+    expect(screen.getByRole('button', { name: /\/proj\/other$/ })).toBeTruthy();
+  });
+
   it('lets you go Back from a later step', async () => {
     const user = userEvent.setup();
     render(<WorkspaceSetupWizard {...props()} />);