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

@@ -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,6 +1601,10 @@ 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(() => {
 			requestAnimationFrame(() => {
 				const container = tabBarRef.current;
 				// When a file tab is active, scroll to it; otherwise scroll to the active AI tab
@@ -1611,10 +1615,10 @@ function TabBarInner({
 				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' });
 				}
 			});
+		});
 	}, [activeTabId, activeFileTabId, showUnreadOnly]);
 
 	// Can always close tabs - closing the last one creates a fresh new tab

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}