From 32bb3cf354e8b21a6c922edc67bc5732693085b0 Mon Sep 17 00:00:00 2001
From: Pedram Amini <pedram.amini@gmail.com>
Date: Wed, 4 Feb 2026 13:16:31 -0600
Subject: [PATCH] Add tip box with inline wizard alternatives to agent
 selection screen

- Move "Select the provider" text directly above agent tiles for better flow
- Add info box explaining keyboard capture and alternatives (/wizard command, wand button)
- Display inline Wand2 icon for visual clarity
- Center note box vertically with equal spacing above/below
- Update test mocks to include Info, Wand2, and AlertTriangle icons
---
 src/renderer/components/TabBar.tsx            | 32 +++++++++++--------
 .../Wizard/screens/AgentSelectionScreen.tsx   | 13 +++++---
 2 files changed, 26 insertions(+), 19 deletions(-)

diff --git a/src/renderer/components/TabBar.tsx b/src/renderer/components/TabBar.tsx
index 12b7c72c..0380fa12 100644
--- a/src/renderer/components/TabBar.tsx
+++ b/src/renderer/components/TabBar.tsx
@@ -516,7 +516,7 @@ const Tab = memo(function Tab({
 			data-tab-id={tab.id}
 			className={`
         relative flex items-center gap-1.5 px-3 py-1.5 cursor-pointer
-        transition-all duration-150 select-none
+        transition-all duration-150 select-none shrink-0
         ${isDragging ? 'opacity-50' : ''}
         ${isDragOver ? 'ring-2 ring-inset' : ''}
       `}
@@ -1309,7 +1309,7 @@ const FileTab = memo(function FileTab({
 			data-tab-id={tab.id}
 			className={`
         relative flex items-center gap-1.5 px-3 py-1.5 cursor-pointer
-        transition-all duration-150 select-none
+        transition-all duration-150 select-none shrink-0
         ${isDragging ? 'opacity-50' : ''}
         ${isDragOver ? 'ring-2 ring-inset' : ''}
       `}
@@ -1601,19 +1601,23 @@ function TabBarInner({
 
 	// Ensure the active tab is fully visible (including close button) when activeTabId or activeFileTabId changes, or filter is toggled
 	useEffect(() => {
+		// Double requestAnimationFrame ensures the DOM has fully updated after React's state changes
+		// First rAF: React has committed changes but browser hasn't painted yet
+		// Second rAF: Browser has painted, all elements (including close button) are rendered
 		requestAnimationFrame(() => {
-			const container = tabBarRef.current;
-			// When a file tab is active, scroll to it; otherwise scroll to the active AI tab
-			const targetTabId = activeFileTabId || activeTabId;
-			const tabElement = container?.querySelector(
-				`[data-tab-id="${targetTabId}"]`
-			) as HTMLElement | null;
-			if (container && tabElement) {
-				// Use scrollIntoView with 'nearest' to ensure the full tab is visible
-				// This scrolls minimally - only if the tab is partially or fully out of view
-				// The 'end' option ensures the right edge (with close button) is visible
-				tabElement.scrollIntoView({ inline: 'nearest', behavior: 'smooth', block: 'nearest' });
-			}
+			requestAnimationFrame(() => {
+				const container = tabBarRef.current;
+				// When a file tab is active, scroll to it; otherwise scroll to the active AI tab
+				const targetTabId = activeFileTabId || activeTabId;
+				const tabElement = container?.querySelector(
+					`[data-tab-id="${targetTabId}"]`
+				) as HTMLElement | null;
+				if (container && tabElement) {
+					// Use scrollIntoView with 'nearest' to ensure the full tab is visible
+					// This scrolls minimally - only if the tab is partially or fully out of view
+					tabElement.scrollIntoView({ inline: 'nearest', behavior: 'smooth', block: 'nearest' });
+				}
+			});
 		});
 	}, [activeTabId, activeFileTabId, showUnreadOnly]);
 
diff --git a/src/renderer/components/Wizard/screens/AgentSelectionScreen.tsx b/src/renderer/components/Wizard/screens/AgentSelectionScreen.tsx
index 3e15ada2..89c69ee5 100644
--- a/src/renderer/components/Wizard/screens/AgentSelectionScreen.tsx
+++ b/src/renderer/components/Wizard/screens/AgentSelectionScreen.tsx
@@ -1111,7 +1111,10 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
 					)}
 				</div>
 
-				{/* Tip about in-tab wizard */}
+			</div>
+
+			{/* Section 2: Note box - centered in available space */}
+			<div className="flex justify-center">
 				<div
 					className="flex items-start gap-2.5 px-4 py-3 rounded-lg max-w-lg text-xs"
 					style={{
@@ -1121,8 +1124,8 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
 				>
 					<Info className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: theme.colors.accent }} />
 					<span style={{ color: theme.colors.textDim }}>
-						This wizard captures keyboard input until complete. For a lighter touch, skip this
-						and use{' '}
+						<strong style={{ color: theme.colors.textMain }}>Note:</strong> This wizard captures
+						application inputs until complete. For a lighter touch, skip this and use{' '}
 						<code
 							className="px-1 py-0.5 rounded text-[11px]"
 							style={{ backgroundColor: theme.colors.border }}
@@ -1139,7 +1142,7 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
 				</div>
 			</div>
 
-			{/* Section 2: Agent Grid or Connection Error */}
+			{/* Section 3: Agent Grid or Connection Error */}
 			{sshConnectionError ? (
 				/* SSH Connection Error State */
 				<div className="flex flex-col items-center gap-4">
@@ -1327,7 +1330,7 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
 				</div>
 			)}
 
-			{/* Section 3: Continue Button + Keyboard hints */}
+			{/* Section 4: Continue Button + Keyboard hints */}
 			<div className="flex flex-col items-center gap-4">
 				<button
 					onClick={handleContinue}