From 5cbf4a89ba7d8bbc67fa31b5db7dd5b69aabd061 Mon Sep 17 00:00:00 2001
From: Jinjing <6427696+AmethystLiang@users.noreply.github.com>
Date: Sun, 17 May 2026 20:48:41 -0700
Subject: [PATCH] Make pane locate highlight more obvious (#2211)

Add a dedicated pane locate color token and use a stronger blue rim
with longer visible opacity so repeated focus flashes are easier to see.
---
 src/renderer/src/assets/main.css                   |  2 ++
 src/renderer/src/assets/terminal.css               | 14 +++++++-------
 .../terminal-pane/focused-pane-rim-flash.test.ts   |  6 +++---
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/renderer/src/assets/main.css b/src/renderer/src/assets/main.css
index 467c14d5e30..1486a682d90 100644
--- a/src/renderer/src/assets/main.css
+++ b/src/renderer/src/assets/main.css
@@ -103,6 +103,7 @@
   --border: #e5e5e5;
   --input: #e5e5e5;
   --ring: #a1a1a1;
+  --terminal-pane-locate: var(--color-blue-600);
   --chart-1: var(--color-blue-300);
   --chart-2: var(--color-blue-500);
   --chart-3: var(--color-blue-600);
@@ -156,6 +157,7 @@
   --border: rgb(255 255 255 / 0.07);
   --input: rgb(255 255 255 / 0.15);
   --ring: #737373;
+  --terminal-pane-locate: var(--color-blue-400);
   --chart-1: var(--color-blue-300);
   --chart-2: var(--color-blue-500);
   --chart-3: var(--color-blue-600);
diff --git a/src/renderer/src/assets/terminal.css b/src/renderer/src/assets/terminal.css
index 05931b02b59..51280400812 100644
--- a/src/renderer/src/assets/terminal.css
+++ b/src/renderer/src/assets/terminal.css
@@ -134,18 +134,18 @@
   inset: 1px;
   z-index: 30;
   pointer-events: none;
-  border: 1px solid color-mix(in srgb, var(--ring) 82%, transparent);
-  border-radius: 3px;
+  border: 1.5px solid color-mix(in srgb, var(--terminal-pane-locate) 52%, transparent);
+  border-right-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
+  border-left-color: color-mix(in srgb, var(--terminal-pane-locate) 68%, transparent);
+  border-radius: 2px;
   box-shadow:
-    inset 0 0 0 1px color-mix(in srgb, var(--ring) 44%, transparent),
-    0 0 0 2px color-mix(in srgb, var(--ring) 28%, transparent),
-    0 0 18px color-mix(in srgb, var(--ring) 28%, transparent);
+    0 0 0 2px color-mix(in srgb, var(--terminal-pane-locate) 34%, transparent),
+    0 0 20px color-mix(in srgb, var(--terminal-pane-locate) 40%, transparent);
   animation: pane-focus-rim-flash 1.5s ease-out forwards;
 }
 
 @keyframes pane-focus-rim-flash {
-  0%,
-  72% {
+  0% {
     opacity: 1;
   }
   100% {
diff --git a/src/renderer/src/components/terminal-pane/focused-pane-rim-flash.test.ts b/src/renderer/src/components/terminal-pane/focused-pane-rim-flash.test.ts
index 3293cfe8424..e347a203319 100644
--- a/src/renderer/src/components/terminal-pane/focused-pane-rim-flash.test.ts
+++ b/src/renderer/src/components/terminal-pane/focused-pane-rim-flash.test.ts
@@ -42,12 +42,12 @@ describe('flashFocusedPaneRim', () => {
     const pane = createPaneElement()
 
     flashFocusedPaneRim(pane)
-    vi.advanceTimersByTime(800)
+    vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
     flashFocusedPaneRim(pane)
-    vi.advanceTimersByTime(600)
+    vi.advanceTimersByTime(FOCUSED_PANE_FLASH_MS - 100)
 
     expect(pane.classList.contains('pane-focus-rim-flash')).toBe(true)
-    vi.advanceTimersByTime(900)
+    vi.advanceTimersByTime(100)
     expect(pane.classList.contains('pane-focus-rim-flash')).toBe(false)
   })
 })