add icons to manage clients

package.json

@@ -33,7 +33,6 @@
   "keywords": [],
   "license": "Apache-2.0",
   "devDependencies": {
-    "ajv": "^8.17.1",
     "@electron-forge/cli": "^7.8.1",
     "@electron-forge/maker-base": "^7.8.1",
     "@electron-forge/maker-deb": "^7.8.1",
@@ -63,6 +62,7 @@
     "@types/unzipper": "^0.10.11",
     "@vitejs/plugin-react-swc": "^4.0.0",
     "@vitest/coverage-istanbul": "^3.1.4",
+    "ajv": "^8.17.1",
     "autoprefixer": "^10.4.21",
     "dotenv": "^17.0.0",
     "electron": "37.4.0",
@@ -136,10 +136,15 @@
     "lucide-react": "^0.544.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "@iconify/react": "^5.1.0",
+    "@iconify/icons-heroicons-outline": "^1.2.5",
+    "@iconify-json/vscode-icons": "^1.1.82",
+    "@iconify-json/simple-icons": "^1.1.119",
     "react-hook-form": "7.62.0",
     "regexp.escape": "^2.0.1",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
+
     "sonner": "^2.0.3",
     "streamdown": "^1.2.0",
     "tailwind-merge": "^3.3.0",

renderer/src/common/components/brand-icon.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'react'
+import { Icon } from '@iconify/react'
+import homeIcon from '@iconify/icons-heroicons-outline/home'
+import vscodeIcons from '@iconify-json/vscode-icons/icons.json'
+import simpleIcons from '@iconify-json/simple-icons/icons.json'
+
+type Props = {
+  name: string
+} & Pick<ComponentProps<'svg'>, 'className' | 'aria-hidden' | 'focusable'>
+
+const cursorRulesIcon = (vscodeIcons as any).icons?.['file-type-cursorrules']
+const claudeIcon = (simpleIcons as any).icons?.['claude']
+
+const ICONS: Record<string, unknown> = {
+  // Cursor editor
+  cursor: cursorRulesIcon,
+  // Claude (Anthropic)
+  'claude-code': claudeIcon,
+}
+
+export default function BrandIcon({ name, className, ...rest }: Props) {
+  const key = name.toLowerCase()
+  const icon = (ICONS[key] ?? homeIcon) as any
+  return (
+    <Icon
+      icon={icon}
+      className={className}
+      aria-hidden
+      inline={false}
+      preserveAspectRatio="xMidYMid meet"
+      style={{ overflow: 'visible', display: 'block' }}
+      {...rest}
+    />
+  )
+}

renderer/src/features/clients/components/manage-clients-button.tsx

@@ -4,6 +4,7 @@ import { Label } from '@/common/components/ui/label'
 import { Button } from '@/common/components/ui/button'
 import { Switch } from '@/common/components/ui/switch'
 import { Code } from 'lucide-react'
+import BrandIcon from '@/common/components/brand-icon'
 import { z } from 'zod/v4'
 import { zodV4Resolver } from '@/common/lib/zod-v4-resolver'
 import { useManageClients } from '../hooks/use-manage-clients'
@@ -12,12 +13,12 @@ import { useToastMutation } from '@/common/hooks/use-toast-mutation'
 interface ManageClientsButtonProps {
   groupName: string
   variant?:
-    | 'default'
-    | 'outline'
-    | 'secondary'
-    | 'ghost'
-    | 'link'
-    | 'destructive'
+  | 'default'
+  | 'outline'
+  | 'secondary'
+  | 'ghost'
+  | 'link'
+  | 'destructive'
   className?: string
 }
 
@@ -67,7 +68,7 @@ export function ManageClientsButton({
             return (
               <div
                 key={client.client_type}
-                className="flex items-start gap-2 border-b p-4 align-middle last:border-b-0"
+                className="flex items-center gap-3 border-b p-4 last:border-b-0"
               >
                 <Switch
                   id={fieldName}
@@ -78,9 +79,12 @@ export function ManageClientsButton({
                   }}
                 />
 
-                <Label htmlFor={fieldName} className="text-sm font-medium">
-                  {displayName}
-                </Label>
+                <div className="flex items-center gap-2">
+                  <BrandIcon name={displayName} className="size-3 shrink-0" />
+                  <Label htmlFor={fieldName} className="text-sm font-medium">
+                    {displayName}
+                  </Label>
+                </div>
               </div>
             )
           })}