From ed41a7a7b91ebdf7b5b6e7271854f914eb52856e Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Mon, 11 May 2026 22:56:53 +0800
Subject: [PATCH] feat(ui): distinguish Claude Code vs Claude Desktop in app
 switcher

The two Claude entries shared the same orange logo, making them hard to
tell apart at a glance. Rename the first entry to "Claude Code" and
overlay a Terminal badge on its logo; overlay a Monitor badge on the
Claude Desktop logo. Changes are scoped to AppSwitcher only; other
panels (MCP, Skills, Usage, etc.) continue to show "Claude".
---
 src/components/AppSwitcher.tsx | 79 ++++++++++++++++++++++------------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index f8c2dfafd..dfc920bcd 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -2,6 +2,12 @@ import type { AppId } from "@/lib/api";
 import type { VisibleApps } from "@/types";
 import { ProviderIcon } from "@/components/ProviderIcon";
 import { cn } from "@/lib/utils";
+import { Monitor, Terminal } from "lucide-react";
+
+const APP_BADGE_ICON: Partial<Record<AppId, typeof Terminal>> = {
+  claude: Terminal,
+  "claude-desktop": Monitor,
+};
 
 interface AppSwitcherProps {
   activeApp: AppId;
@@ -43,7 +49,7 @@ export function AppSwitcher({
     hermes: "hermes",
   };
   const appDisplayName: Record<AppId, string> = {
-    claude: "Claude",
+    claude: "Claude Code",
     "claude-desktop": "Claude Desktop",
     codex: "Codex",
     gemini: "Gemini",
@@ -60,35 +66,54 @@ export function AppSwitcher({
 
   return (
     <div className="inline-flex bg-muted rounded-xl p-1 gap-1">
-      {appsToShow.map((app) => (
-        <button
-          key={app}
-          type="button"
-          onClick={() => handleSwitch(app)}
-          className={cn(
-            "group inline-flex items-center px-3 h-8 rounded-md text-sm font-medium transition-all duration-200",
-            activeApp === app
-              ? "bg-background text-foreground shadow-sm"
-              : "text-muted-foreground hover:text-foreground hover:bg-background/50",
-          )}
-        >
-          <ProviderIcon
-            icon={appIconName[app]}
-            name={appDisplayName[app]}
-            size={iconSize}
-          />
-          <span
+      {appsToShow.map((app) => {
+        const BadgeIcon = APP_BADGE_ICON[app];
+        const isActive = activeApp === app;
+        return (
+          <button
+            key={app}
+            type="button"
+            onClick={() => handleSwitch(app)}
             className={cn(
-              "transition-all duration-200 whitespace-nowrap overflow-hidden",
-              compact
-                ? "max-w-0 opacity-0 ml-0"
-                : "max-w-[80px] opacity-100 ml-2",
+              "group inline-flex items-center px-3 h-8 rounded-md text-sm font-medium transition-all duration-200",
+              isActive
+                ? "bg-background text-foreground shadow-sm"
+                : "text-muted-foreground hover:text-foreground hover:bg-background/50",
             )}
           >
-            {appDisplayName[app]}
-          </span>
-        </button>
-      ))}
+            <span className="relative inline-flex shrink-0">
+              <ProviderIcon
+                icon={appIconName[app]}
+                name={appDisplayName[app]}
+                size={iconSize}
+              />
+              {BadgeIcon && (
+                <span
+                  className={cn(
+                    "absolute -bottom-0.5 -right-0.5 flex items-center justify-center rounded-[3px] border h-[11px] w-[11px]",
+                    isActive
+                      ? "bg-background border-border text-foreground"
+                      : "bg-muted border-background text-muted-foreground group-hover:bg-background group-hover:text-foreground",
+                  )}
+                  aria-hidden="true"
+                >
+                  <BadgeIcon className="h-[8px] w-[8px]" strokeWidth={2.5} />
+                </span>
+              )}
+            </span>
+            <span
+              className={cn(
+                "transition-all duration-200 whitespace-nowrap overflow-hidden",
+                compact
+                  ? "max-w-0 opacity-0 ml-0"
+                  : "max-w-[90px] opacity-100 ml-2",
+              )}
+            >
+              {appDisplayName[app]}
+            </span>
+          </button>
+        );
+      })}
     </div>
   );
 }