Improve new agent wizard UX with tip box and header rename

- Rename wizard header from "Create a Maestro Agent" to "New Agent Wizard"
- Add info tip box explaining in-tab wizard alternative (/wizard command, wand button)
- Only show tip box when user has existing agents (first-time users won't see it)
- Update note copy: "The new agent wizard captures application inputs until complete"
- Add final sentence: "The in-tab wizard runs alongside your other work"
- Move "Select the provider" text directly above agent tiles
- Center note box vertically with equal spacing
- Update test mocks with sessions.getAll and sshRemote.getConfigs
This commit is contained in:
Pedram Amini
2026-02-05 01:36:45 -06:00
parent 4080153666
commit 5cb53ac37b
3 changed files with 65 additions and 27 deletions

View File

@@ -154,6 +154,12 @@ const mockMaestro = {
shell: {
openExternal: vi.fn(),
},
sshRemote: {
getConfigs: vi.fn().mockResolvedValue({ success: true, configs: [] }),
},
sessions: {
getAll: vi.fn().mockResolvedValue([]),
},
};
// Mock theme

View File

@@ -159,6 +159,12 @@ const mockMaestro = {
fs: {
readFile: vi.fn(),
},
sshRemote: {
getConfigs: vi.fn().mockResolvedValue({ success: true, configs: [] }),
},
sessions: {
getAll: vi.fn().mockResolvedValue([]),
},
};
// Helper to render with required providers

View File

@@ -326,6 +326,9 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
const [loadingModels, setLoadingModels] = useState(false);
const [refreshingAgent, setRefreshingAgent] = useState(false);
// Track if user has existing agents (to show/hide the note about in-tab wizard)
const [hasExistingAgents, setHasExistingAgents] = useState(false);
// SSH Remote configuration state
// Initialize from wizard context if already set (e.g., when SSH was configured before opening wizard)
const [sshRemotes, setSshRemotes] = useState<SshRemoteConfig[]>([]);
@@ -492,6 +495,27 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
};
}, []);
// Check if user has existing agents on mount
useEffect(() => {
let mounted = true;
async function checkExistingAgents() {
try {
const sessions = await window.maestro.sessions.getAll();
if (mounted) {
setHasExistingAgents(sessions.length > 0);
}
} catch (error) {
console.error('Failed to check existing agents:', error);
}
}
checkExistingAgents();
return () => {
mounted = false;
};
}, []);
// Focus on mount - currently focus name field since only Claude is supported
// TODO: When multiple agents are supported, focus the tiles instead
useEffect(() => {
@@ -1113,7 +1137,8 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
</div>
{/* Section 2: Note box - centered in available space */}
{/* Section 2: Note box - only shown if user has existing agents */}
{hasExistingAgents && (
<div className="flex justify-center">
<div
className="flex items-start gap-2.5 px-4 py-3 rounded-lg max-w-lg text-xs"
@@ -1141,6 +1166,7 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
</span>
</div>
</div>
)}
{/* Section 3: Agent Grid or Connection Error */}
{sshConnectionError ? (