mirror of
https://github.com/jlengrand/Maestro.git
synced 2026-03-10 08:31:19 +00:00
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:
@@ -154,6 +154,12 @@ const mockMaestro = {
|
|||||||
shell: {
|
shell: {
|
||||||
openExternal: vi.fn(),
|
openExternal: vi.fn(),
|
||||||
},
|
},
|
||||||
|
sshRemote: {
|
||||||
|
getConfigs: vi.fn().mockResolvedValue({ success: true, configs: [] }),
|
||||||
|
},
|
||||||
|
sessions: {
|
||||||
|
getAll: vi.fn().mockResolvedValue([]),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Mock theme
|
// Mock theme
|
||||||
|
|||||||
@@ -159,6 +159,12 @@ const mockMaestro = {
|
|||||||
fs: {
|
fs: {
|
||||||
readFile: vi.fn(),
|
readFile: vi.fn(),
|
||||||
},
|
},
|
||||||
|
sshRemote: {
|
||||||
|
getConfigs: vi.fn().mockResolvedValue({ success: true, configs: [] }),
|
||||||
|
},
|
||||||
|
sessions: {
|
||||||
|
getAll: vi.fn().mockResolvedValue([]),
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
// Helper to render with required providers
|
// Helper to render with required providers
|
||||||
|
|||||||
@@ -326,6 +326,9 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
|
|||||||
const [loadingModels, setLoadingModels] = useState(false);
|
const [loadingModels, setLoadingModels] = useState(false);
|
||||||
const [refreshingAgent, setRefreshingAgent] = 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
|
// SSH Remote configuration state
|
||||||
// Initialize from wizard context if already set (e.g., when SSH was configured before opening wizard)
|
// Initialize from wizard context if already set (e.g., when SSH was configured before opening wizard)
|
||||||
const [sshRemotes, setSshRemotes] = useState<SshRemoteConfig[]>([]);
|
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
|
// Focus on mount - currently focus name field since only Claude is supported
|
||||||
// TODO: When multiple agents are supported, focus the tiles instead
|
// TODO: When multiple agents are supported, focus the tiles instead
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -1113,34 +1137,36 @@ export function AgentSelectionScreen({ theme }: AgentSelectionScreenProps): JSX.
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Section 2: Note box - centered in available space */}
|
{/* Section 2: Note box - only shown if user has existing agents */}
|
||||||
<div className="flex justify-center">
|
{hasExistingAgents && (
|
||||||
<div
|
<div className="flex justify-center">
|
||||||
className="flex items-start gap-2.5 px-4 py-3 rounded-lg max-w-lg text-xs"
|
<div
|
||||||
style={{
|
className="flex items-start gap-2.5 px-4 py-3 rounded-lg max-w-lg text-xs"
|
||||||
backgroundColor: theme.colors.accent + '15',
|
style={{
|
||||||
border: `1px solid ${theme.colors.accent}30`,
|
backgroundColor: theme.colors.accent + '15',
|
||||||
}}
|
border: `1px solid ${theme.colors.accent}30`,
|
||||||
>
|
}}
|
||||||
<Info className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: theme.colors.accent }} />
|
>
|
||||||
<span style={{ color: theme.colors.textDim }}>
|
<Info className="w-4 h-4 flex-shrink-0 mt-0.5" style={{ color: theme.colors.accent }} />
|
||||||
<strong style={{ color: theme.colors.textMain }}>Note:</strong> The new agent wizard captures
|
<span style={{ color: theme.colors.textDim }}>
|
||||||
application inputs until complete. For a lighter touch, create a new agent then run{' '}
|
<strong style={{ color: theme.colors.textMain }}>Note:</strong> The new agent wizard captures
|
||||||
<code
|
application inputs until complete. For a lighter touch, create a new agent then run{' '}
|
||||||
className="px-1 py-0.5 rounded text-[11px]"
|
<code
|
||||||
style={{ backgroundColor: theme.colors.border }}
|
className="px-1 py-0.5 rounded text-[11px]"
|
||||||
>
|
style={{ backgroundColor: theme.colors.border }}
|
||||||
/wizard
|
>
|
||||||
</code>
|
/wizard
|
||||||
{' '}or click the{' '}
|
</code>
|
||||||
<Wand2
|
{' '}or click the{' '}
|
||||||
className="inline w-3.5 h-3.5 align-text-bottom"
|
<Wand2
|
||||||
style={{ color: theme.colors.accent }}
|
className="inline w-3.5 h-3.5 align-text-bottom"
|
||||||
/>
|
style={{ color: theme.colors.accent }}
|
||||||
{' '}button in the Auto Run panel. The in-tab wizard runs alongside your other work.
|
/>
|
||||||
</span>
|
{' '}button in the Auto Run panel. The in-tab wizard runs alongside your other work.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
{/* Section 3: Agent Grid or Connection Error */}
|
{/* Section 3: Agent Grid or Connection Error */}
|
||||||
{sshConnectionError ? (
|
{sshConnectionError ? (
|
||||||
|
|||||||
Reference in New Issue
Block a user