From 6411d4df943582d9c4650b1f5ade8984dd6c6edd Mon Sep 17 00:00:00 2001
From: Hiep Le <69354317+hieptl@users.noreply.github.com>
Date: Wed, 5 Nov 2025 16:47:22 +0700
Subject: [PATCH] feat(frontend): display text label when items are selected
 across all canvas views (#11636)

---
 .../conversation-tabs/conversation-tab-nav.tsx | 17 ++++++++++++-----
 .../conversation-tabs/conversation-tabs.tsx    | 18 +++++++++++++++++-
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
index d061b43325..88f164cca1 100644
--- a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
+++ b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-nav.tsx
@@ -5,12 +5,16 @@ type ConversationTabNavProps = {
   icon: ComponentType<{ className: string }>;
   onClick(): void;
   isActive?: boolean;
+  label?: string;
+  className?: string;
 };
 
 export function ConversationTabNav({
   icon: Icon,
   onClick,
   isActive,
+  label,
+  className,
 }: ConversationTabNavProps) {
   return (
     <button
@@ -19,18 +23,21 @@ export function ConversationTabNav({
         onClick();
       }}
       className={cn(
-        "p-1 rounded-md cursor-pointer",
+        "flex items-center gap-2 rounded-md cursor-pointer",
+        "pl-1.5 pr-2 py-1",
         "text-[#9299AA] bg-[#0D0F11]",
         isActive && "bg-[#25272D] text-white",
         isActive
           ? "hover:text-white hover:bg-tertiary"
           : "hover:text-white hover:bg-[#0D0F11]",
-        isActive
-          ? "focus-within:text-white focus-within:bg-tertiary"
-          : "focus-within:text-[#9299AA] focus-within:bg-[#0D0F11]",
+        isActive ? "focus-within:text-white" : "focus-within:text-[#9299AA]",
+        className,
       )}
     >
-      <Icon className={cn("w-5 h-5 text-inherit")} />
+      <Icon className={cn("w-5 h-5 text-inherit flex-shrink-0")} />
+      {isActive && label && (
+        <span className="text-sm font-medium whitespace-nowrap">{label}</span>
+      )}
     </button>
   );
 }
diff --git a/frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx b/frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
index 818ea658a2..ee0437a12a 100644
--- a/frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
+++ b/frontend/src/components/features/conversation/conversation-tabs/conversation-tabs.tsx
@@ -92,6 +92,7 @@ export function ConversationTabs() {
       onClick: () => onTabSelected("editor"),
       tooltipContent: t(I18nKey.COMMON$CHANGES),
       tooltipAriaLabel: t(I18nKey.COMMON$CHANGES),
+      label: t(I18nKey.COMMON$CHANGES),
     },
     {
       isActive: isTabActive("vscode"),
@@ -99,6 +100,7 @@ export function ConversationTabs() {
       onClick: () => onTabSelected("vscode"),
       tooltipContent: <VSCodeTooltipContent />,
       tooltipAriaLabel: t(I18nKey.COMMON$CODE),
+      label: t(I18nKey.COMMON$CODE),
     },
     {
       isActive: isTabActive("terminal"),
@@ -106,6 +108,8 @@ export function ConversationTabs() {
       onClick: () => onTabSelected("terminal"),
       tooltipContent: t(I18nKey.COMMON$TERMINAL),
       tooltipAriaLabel: t(I18nKey.COMMON$TERMINAL),
+      label: t(I18nKey.COMMON$TERMINAL),
+      className: "pl-2",
     },
     {
       isActive: isTabActive("served"),
@@ -113,6 +117,7 @@ export function ConversationTabs() {
       onClick: () => onTabSelected("served"),
       tooltipContent: t(I18nKey.COMMON$APP),
       tooltipAriaLabel: t(I18nKey.COMMON$APP),
+      label: t(I18nKey.COMMON$APP),
     },
     {
       isActive: isTabActive("browser"),
@@ -120,6 +125,7 @@ export function ConversationTabs() {
       onClick: () => onTabSelected("browser"),
       tooltipContent: t(I18nKey.COMMON$BROWSER),
       tooltipAriaLabel: t(I18nKey.COMMON$BROWSER),
+      label: t(I18nKey.COMMON$BROWSER),
     },
   ];
 
@@ -132,7 +138,15 @@ export function ConversationTabs() {
     >
       {tabs.map(
         (
-          { icon, onClick, isActive, tooltipContent, tooltipAriaLabel },
+          {
+            icon,
+            onClick,
+            isActive,
+            tooltipContent,
+            tooltipAriaLabel,
+            label,
+            className,
+          },
           index,
         ) => (
           <ChatActionTooltip
@@ -144,6 +158,8 @@ export function ConversationTabs() {
               icon={icon}
               onClick={onClick}
               isActive={isActive}
+              label={label}
+              className={className}
             />
           </ChatActionTooltip>
         ),