jlengrand/Maestro
1
0
Fork 0
mirror of https://github.com/jlengrand/Maestro.git synced 2026-03-10 00:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add tip box with inline wizard alternatives to agent selection screen

Browse Source 
- 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
This commit is contained in:
Pedram Amini
2026-02-04 13:16:31 -06:00
parent a0f104f58f
commit 32bb3cf354
2 changed files with 26 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/renderer/components/TabBar.tsx
View File

@@ -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]);

13
src/renderer/components/Wizard/screens/AgentSelectionScreen.tsx
View File

@@ -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}