From b8ded7e9fe38ccc33e8f5128bbe342d10bedcd8a Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Fri, 1 May 2026 00:33:46 -0700
Subject: [PATCH] =?UTF-8?q?feat(tabs):=20stronger=20tab=20icons=20?=
 =?UTF-8?q?=E2=80=94=20blue=20browser=20globe,=20bold=20terminal=20tile=20?=
 =?UTF-8?q?(#1305)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- BrowserTab: Globe icon uses text-blue-500 on both active and inactive tabs
  for a distinct, recognizable anchor in the tab strip.
- shell-icons: GenericTerminalIcon now renders a pitch-black tile with a
  thick stroked >_ (chevron at 3.2px, underscore at 2.6px, taller chevron)
  so mac/linux/default terminal tabs match the colored-badge treatment of
  the PowerShell/CMD/WSL icons instead of a flat lucide chevron.
- SortableTab: all terminal tabs use ShellIcon. On Windows, tabs without a
  per-tab shellOverride fall back to the user's configured default
  Windows shell so the tab-strip icon reflects what's actually running.

Co-authored-by: Orca <help@stably.ai>
---
 .../src/components/tab-bar/BrowserTab.tsx     | 11 +++--
 .../src/components/tab-bar/SortableTab.tsx    | 38 +++++++++-------
 .../src/components/tab-bar/shell-icons.tsx    | 44 ++++++++++++++++---
 3 files changed, 69 insertions(+), 24 deletions(-)

diff --git a/src/renderer/src/components/tab-bar/BrowserTab.tsx b/src/renderer/src/components/tab-bar/BrowserTab.tsx
index 3d960dc40..47cc893a7 100644
--- a/src/renderer/src/components/tab-bar/BrowserTab.tsx
+++ b/src/renderer/src/components/tab-bar/BrowserTab.tsx
@@ -149,9 +149,14 @@ export default function BrowserTab({
           }}
         >
           {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
-          <Globe
-            className={`w-3 h-3 mr-1 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
-          />
+          {/* Why: the browser tab icon is the only non-terminal, non-editor
+              surface in the tab strip. Coloring the Globe blue (matching the
+              in-app browser's identity and the default tab insertion bar)
+              gives it a distinct, recognizable anchor so users can spot
+              browser tabs at a glance even when the strip is saturated. We
+              keep full color on both active and inactive tabs — dimming to
+              muted-foreground made the icon read as "disabled" in practice. */}
+          <Globe className="w-3 h-3 mr-1 shrink-0 text-blue-500" />
           <span className="truncate max-w-[100px] mr-1">{getBrowserTabLabel(tab)}</span>
           {tab.loading && !tab.loadError && !isBlankBrowserTab(tab) && (
             <span className="mr-1 size-1.5 rounded-full bg-sky-500/80 shrink-0" />
diff --git a/src/renderer/src/components/tab-bar/SortableTab.tsx b/src/renderer/src/components/tab-bar/SortableTab.tsx
index d5ab25826..79c99c223 100644
--- a/src/renderer/src/components/tab-bar/SortableTab.tsx
+++ b/src/renderer/src/components/tab-bar/SortableTab.tsx
@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSortable } from '@dnd-kit/sortable'
-import { X, Terminal as TerminalIcon, Minimize2, Columns2, Rows2 } from 'lucide-react'
+import { X, Minimize2, Columns2, Rows2 } from 'lucide-react'
 import { ShellIcon } from './shell-icons'
 import {
   DropdownMenu,
@@ -81,6 +81,16 @@ export default function SortableTab({
   // because the slice returns a fresh object reference on each mark/clear.
   const hasUnreadActivity = useAppStore((s) => s.unreadTerminalTabs[tab.id] === true)
 
+  // Why: on Windows, tabs created before the per-tab shell override landed (or
+  // created via the default Ctrl+T path without picking a specific shell)
+  // don't carry a shellOverride. We still want the tab-strip icon to reflect
+  // the shell actually running, so fall back to the user's configured default
+  // Windows shell. On mac/linux this resolves to undefined and the ShellIcon
+  // generic-terminal fallback renders.
+  const defaultWindowsShell = useAppStore((s) => s.settings?.terminalWindowsShell)
+  const isWindows = navigator.userAgent.includes('Windows')
+  const shellForIcon = tab.shellOverride ?? (isWindows ? defaultWindowsShell : undefined)
+
   // Why: intentionally no transform/transition/opacity here. The PR's
   // design is that tabs stay visually anchored during a drag — only the
   // blue insertion bar moves. Siblings also don't shift (see
@@ -255,25 +265,21 @@ export default function SortableTab({
             <span data-testid="tab-activity-bell" className="inline-flex shrink-0">
               <FilledBellIcon className="w-3 h-3 mr-1 text-amber-500 drop-shadow-sm" />
             </span>
-          ) : tab.shellOverride ? (
-            // Why: when the tab was explicitly opened with a specific Windows
-            // shell (PowerShell / CMD / WSL via the "+" menu), render the
-            // matching brand-style glyph so the strip shows at a glance which
-            // shell this tab is running. Falls back to the generic lucide
-            // TerminalIcon below for mac/linux shells and for Windows tabs
-            // that were spawned before the per-tab shell override landed
-            // (shellOverride absent → same neutral glyph as before, no visual
-            // regression for existing sessions).
+          ) : (
+            // Why: ShellIcon renders a colored brand-style tile for PowerShell,
+            // CMD, and WSL so Windows users can distinguish shells at a glance.
+            // On mac/linux (or Windows tabs without a resolved shell) it falls
+            // back to a matching colored generic-terminal tile — keeping every
+            // tab's leading glyph in the same visual idiom instead of mixing a
+            // flat lucide chevron with the brand tiles. Opacity dims the icon
+            // on inactive tabs to match the existing text treatment without
+            // desaturating the brand colors beyond recognition.
             <span
-              className={`mr-1 inline-flex shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
+              className={`mr-1 inline-flex shrink-0 ${isActive ? '' : 'opacity-70'}`}
               aria-hidden
             >
-              <ShellIcon shell={tab.shellOverride} size={12} />
+              <ShellIcon shell={shellForIcon} size={12} />
             </span>
-          ) : (
-            <TerminalIcon
-              className={`w-3 h-3 mr-1 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
-            />
           )}
           {isEditing ? (
             <Input
diff --git a/src/renderer/src/components/tab-bar/shell-icons.tsx b/src/renderer/src/components/tab-bar/shell-icons.tsx
index 5774a2e27..0e77adff8 100644
--- a/src/renderer/src/components/tab-bar/shell-icons.tsx
+++ b/src/renderer/src/components/tab-bar/shell-icons.tsx
@@ -1,5 +1,4 @@
 import React from 'react'
-import { Terminal as TerminalIcon } from 'lucide-react'
 
 export type WindowsShell = 'powershell.exe' | 'cmd.exe' | 'wsl.exe'
 
@@ -9,7 +8,10 @@ export type WindowsShell = 'powershell.exe' | 'cmd.exe' | 'wsl.exe'
 // hand-crafted icons (derived from the official brand marks and redrawn as
 // small currentColor-aware paths so they inherit the tab's text color) make
 // each shell identifiable at a glance without shipping a heavier brand-asset
-// package like simple-icons.
+// package like simple-icons. The generic (macOS/Linux) terminal fallback uses
+// the same colored-tile treatment so the tab strip reads as a consistent set
+// of badges rather than a monochrome lucide glyph next to colorful brand
+// marks.
 
 function PowerShellIcon({ size = 14 }: { size?: number }): React.JSX.Element {
   return (
@@ -75,6 +77,40 @@ function WslIcon({ size = 14 }: { size?: number }): React.JSX.Element {
   )
 }
 
+function GenericTerminalIcon({ size = 14 }: { size?: number }): React.JSX.Element {
+  // Why: matches the tile treatment of PowerShell/CMD/WSL so the tab strip
+  // reads as a consistent set of badges instead of a flat monochrome chevron.
+  // Uses black/white (same palette as the CmdIcon) so generic mac/linux
+  // sessions stay visually neutral — the colorful brand tiles are reserved
+  // for shells that actually have a brand identity.
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden
+    >
+      <rect x="1.5" y="3" width="21" height="18" rx="2.5" fill="#000000" />
+      <path
+        d="M6 7.5 L11.5 12 L6 16.5"
+        stroke="#ffffff"
+        strokeWidth="3.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        fill="none"
+      />
+      <path
+        d="M12.5 16.5 L18 16.5"
+        stroke="#ffffff"
+        strokeWidth="2.6"
+        strokeLinecap="round"
+        fill="none"
+      />
+    </svg>
+  )
+}
+
 export function ShellIcon({
   shell,
   size = 14
@@ -92,7 +128,5 @@ export function ShellIcon({
   if (normalized === 'wsl.exe' || normalized.startsWith('wsl')) {
     return <WslIcon size={size} />
   }
-  // Fallback: generic terminal glyph for mac/linux shells and anything
-  // unrecognized. Inherits currentColor so it matches the surrounding tab.
-  return <TerminalIcon width={size} height={size} aria-hidden />
+  return <GenericTerminalIcon size={size} />
 }