From 2a2ddd8bdbe2d1a3db335bfee09410e90791e086 Mon Sep 17 00:00:00 2001
From: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
Date: Thu, 23 Apr 2026 22:10:28 -0700
Subject: [PATCH] feat(tab-bar): add colored top border to active tab (#1020)

---
 src/renderer/src/components/tab-bar/BrowserTab.tsx    | 7 ++++++-
 src/renderer/src/components/tab-bar/EditorFileTab.tsx | 7 ++++++-
 src/renderer/src/components/tab-bar/SortableTab.tsx   | 7 ++++++-
 src/renderer/src/components/tab-bar/drop-indicator.ts | 9 +++++++++
 4 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/tab-bar/BrowserTab.tsx b/src/renderer/src/components/tab-bar/BrowserTab.tsx
index 8a33044d4fe..ab79928070f 100644
--- a/src/renderer/src/components/tab-bar/BrowserTab.tsx
+++ b/src/renderer/src/components/tab-bar/BrowserTab.tsx
@@ -13,7 +13,11 @@ import type { BrowserTab as BrowserTabState } from '../../../../shared/types'
 import { CLOSE_ALL_CONTEXT_MENUS_EVENT } from './SortableTab'
 import { getLiveBrowserUrl } from '../browser-pane/browser-runtime'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 function formatBrowserTabUrlLabel(url: string): string {
   if (url === ORCA_BROWSER_BLANK_URL || url === 'about:blank') {
@@ -132,6 +136,7 @@ export default function BrowserTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           <Globe
             className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
           />
diff --git a/src/renderer/src/components/tab-bar/EditorFileTab.tsx b/src/renderer/src/components/tab-bar/EditorFileTab.tsx
index 1b6b018267b..5cef1dc886e 100644
--- a/src/renderer/src/components/tab-bar/EditorFileTab.tsx
+++ b/src/renderer/src/components/tab-bar/EditorFileTab.tsx
@@ -26,7 +26,11 @@ import type { GitFileStatus } from '../../../../shared/types'
 import type { OpenFile } from '../../store/slices/editor'
 import { CLOSE_ALL_CONTEXT_MENUS_EVENT } from './SortableTab'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 const isMac = navigator.userAgent.includes('Mac')
 const isLinux = navigator.userAgent.includes('Linux')
@@ -201,6 +205,7 @@ export default function EditorFileTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           {isConflictReview ? (
             <ShieldAlert
               className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-orange-400' : 'text-orange-400/70'}`}
diff --git a/src/renderer/src/components/tab-bar/SortableTab.tsx b/src/renderer/src/components/tab-bar/SortableTab.tsx
index b7644f0acce..58a4e7c6b09 100644
--- a/src/renderer/src/components/tab-bar/SortableTab.tsx
+++ b/src/renderer/src/components/tab-bar/SortableTab.tsx
@@ -11,7 +11,11 @@ import {
 import { Input } from '@/components/ui/input'
 import type { TerminalTab } from '../../../../shared/types'
 import type { TabDragItemData } from '../tab-group/useTabDragSplit'
-import { getDropIndicatorClasses, type DropIndicator } from './drop-indicator'
+import {
+  ACTIVE_TAB_INDICATOR_CLASSES,
+  getDropIndicatorClasses,
+  type DropIndicator
+} from './drop-indicator'
 
 type SortableTabProps = {
   tab: TerminalTab
@@ -193,6 +197,7 @@ export default function SortableTab({
             }
           }}
         >
+          {isActive && <span className={ACTIVE_TAB_INDICATOR_CLASSES} aria-hidden />}
           <TerminalIcon
             className={`w-3.5 h-3.5 mr-1.5 shrink-0 ${isActive ? 'text-foreground' : 'text-muted-foreground'}`}
           />
diff --git a/src/renderer/src/components/tab-bar/drop-indicator.ts b/src/renderer/src/components/tab-bar/drop-indicator.ts
index ee13e83a42c..e0e0deeabc6 100644
--- a/src/renderer/src/components/tab-bar/drop-indicator.ts
+++ b/src/renderer/src/components/tab-bar/drop-indicator.ts
@@ -13,3 +13,12 @@ export function getDropIndicatorClasses(dropIndicator: DropIndicator): string {
   }
   return ''
 }
+
+// Why: the bg-accent vs. bg-card contrast alone is too subtle to tell which
+// tab is active at a glance, especially in light mode. VS Code solves this
+// with a 1–2px colored bar across the top of the active tab
+// (tab.activeBorderTop). We mirror that here with an absolutely-positioned
+// child span so it sits above the tab content without shifting layout and
+// without conflicting with drop-indicator pseudo-elements during a drag.
+export const ACTIVE_TAB_INDICATOR_CLASSES =
+  'pointer-events-none absolute inset-x-0 top-0 h-0.5 bg-[#1e3d9c] z-10'