feat(dashboard): implement SpawnModal component
This commit is contained in:
teernisse
224
dashboard/components/SpawnModal.js
Normal file
224
dashboard/components/SpawnModal.js
Normal file
@@ -0,0 +1,224 @@
|
|||||||
|
import { html, useState, useEffect, useCallback } from '../lib/preact.js';
|
||||||
|
import { API_PROJECTS, API_SPAWN, fetchWithTimeout } from '../utils/api.js';
|
||||||
|
|
||||||
|
export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
|
||||||
|
const [projects, setProjects] = useState([]);
|
||||||
|
const [selectedProject, setSelectedProject] = useState('');
|
||||||
|
const [agentType, setAgentType] = useState('claude');
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [loadingProjects, setLoadingProjects] = useState(false);
|
||||||
|
const [closing, setClosing] = useState(false);
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
|
||||||
|
const needsProjectPicker = !currentProject;
|
||||||
|
|
||||||
|
// Lock body scroll when modal is open
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
return () => { document.body.style.overflow = ''; };
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Reset state on open
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setAgentType('claude');
|
||||||
|
setError(null);
|
||||||
|
setLoading(false);
|
||||||
|
setClosing(false);
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
// Fetch projects when needed
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && needsProjectPicker) {
|
||||||
|
setLoadingProjects(true);
|
||||||
|
fetchWithTimeout(API_PROJECTS)
|
||||||
|
.then(r => r.json())
|
||||||
|
.then(data => {
|
||||||
|
setProjects(data.projects || []);
|
||||||
|
setSelectedProject('');
|
||||||
|
})
|
||||||
|
.catch(err => setError(err.message))
|
||||||
|
.finally(() => setLoadingProjects(false));
|
||||||
|
}
|
||||||
|
}, [isOpen, needsProjectPicker]);
|
||||||
|
|
||||||
|
// Animated close handler
|
||||||
|
const handleClose = useCallback(() => {
|
||||||
|
if (loading) return;
|
||||||
|
setClosing(true);
|
||||||
|
setTimeout(() => {
|
||||||
|
setClosing(false);
|
||||||
|
onClose();
|
||||||
|
}, 200);
|
||||||
|
}, [loading, onClose]);
|
||||||
|
|
||||||
|
// Handle escape key
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) return;
|
||||||
|
const handleKeyDown = (e) => {
|
||||||
|
if (e.key === 'Escape') handleClose();
|
||||||
|
};
|
||||||
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||||
|
}, [isOpen, handleClose]);
|
||||||
|
|
||||||
|
const handleSpawn = async () => {
|
||||||
|
const project = currentProject || selectedProject;
|
||||||
|
if (!project) {
|
||||||
|
setError('Please select a project');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetchWithTimeout(API_SPAWN, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${window.AMC_AUTH_TOKEN}`,
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ project, agent_type: agentType }),
|
||||||
|
});
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.ok) {
|
||||||
|
onSpawn({ success: true, project, agentType });
|
||||||
|
handleClose();
|
||||||
|
} else {
|
||||||
|
setError(data.error || 'Spawn failed');
|
||||||
|
onSpawn({ error: data.error });
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
const msg = err.name === 'AbortError' ? 'Request timed out' : err.message;
|
||||||
|
setError(msg);
|
||||||
|
onSpawn({ error: msg });
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!isOpen) return null;
|
||||||
|
|
||||||
|
const canSpawn = !loading && (currentProject || selectedProject);
|
||||||
|
|
||||||
|
return html`
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 z-50 flex items-center justify-center bg-[#02050d]/84 p-4 backdrop-blur-sm ${closing ? 'modal-backdrop-out' : 'modal-backdrop-in'}"
|
||||||
|
onClick=${(e) => e.target === e.currentTarget && handleClose()}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="glass-panel w-full max-w-md rounded-2xl ${closing ? 'modal-panel-out' : 'modal-panel-in'}"
|
||||||
|
onClick=${(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center justify-between border-b border-selection/70 px-5 py-4">
|
||||||
|
<h2 class="font-display text-lg font-semibold text-bright">Spawn Agent</h2>
|
||||||
|
<button
|
||||||
|
onClick=${handleClose}
|
||||||
|
disabled=${loading}
|
||||||
|
class="flex h-7 w-7 items-center justify-center rounded-lg border border-selection/80 text-dim transition-colors hover:border-done/40 hover:bg-done/10 hover:text-bright disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Body -->
|
||||||
|
<div class="flex flex-col gap-4 px-5 py-4">
|
||||||
|
|
||||||
|
${needsProjectPicker && html`
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-label font-medium text-dim">Project</label>
|
||||||
|
${loadingProjects ? html`
|
||||||
|
<div class="flex items-center gap-2 rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-dim">
|
||||||
|
<span class="working-dots"><span>.</span><span>.</span><span>.</span></span>
|
||||||
|
Loading projects
|
||||||
|
</div>
|
||||||
|
` : html`
|
||||||
|
<select
|
||||||
|
value=${selectedProject}
|
||||||
|
onChange=${(e) => { setSelectedProject(e.target.value); setError(null); }}
|
||||||
|
class="w-full rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-fg transition-colors duration-150 focus:border-starting/60 focus:outline-none"
|
||||||
|
>
|
||||||
|
<option value="" disabled>Select a project...</option>
|
||||||
|
${projects.map(p => html`
|
||||||
|
<option key=${p} value=${p}>${p}</option>
|
||||||
|
`)}
|
||||||
|
</select>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
|
||||||
|
${currentProject && html`
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-label font-medium text-dim">Project</label>
|
||||||
|
<div class="rounded-xl border border-selection/75 bg-bg/70 px-3 py-2 text-sm text-bright">
|
||||||
|
${currentProject}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
|
||||||
|
<!-- Agent type -->
|
||||||
|
<div class="flex flex-col gap-1.5">
|
||||||
|
<label class="text-label font-medium text-dim">Agent Type</label>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button
|
||||||
|
onClick=${() => setAgentType('claude')}
|
||||||
|
class="flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition-colors duration-150 ${
|
||||||
|
agentType === 'claude'
|
||||||
|
? 'border-violet-400/45 bg-violet-500/14 text-violet-300'
|
||||||
|
: 'border-selection/75 bg-bg/70 text-dim hover:border-selection hover:text-fg'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
Claude
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick=${() => setAgentType('codex')}
|
||||||
|
class="flex-1 rounded-xl border px-3 py-2 text-sm font-medium transition-colors duration-150 ${
|
||||||
|
agentType === 'codex'
|
||||||
|
? 'border-emerald-400/45 bg-emerald-500/14 text-emerald-300'
|
||||||
|
: 'border-selection/75 bg-bg/70 text-dim hover:border-selection hover:text-fg'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
Codex
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${error && html`
|
||||||
|
<div class="rounded-lg border border-attention/40 bg-attention/12 px-3 py-1.5 text-sm text-attention">
|
||||||
|
${error}
|
||||||
|
</div>
|
||||||
|
`}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Footer -->
|
||||||
|
<div class="flex items-center justify-end gap-2 border-t border-selection/70 px-5 py-3">
|
||||||
|
<button
|
||||||
|
onClick=${handleClose}
|
||||||
|
disabled=${loading}
|
||||||
|
class="rounded-xl border border-selection/75 bg-bg/70 px-4 py-2 text-sm font-medium text-dim transition-colors hover:border-selection hover:text-fg disabled:cursor-not-allowed disabled:opacity-50"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick=${handleSpawn}
|
||||||
|
disabled=${!canSpawn}
|
||||||
|
class="rounded-xl px-4 py-2 text-sm font-medium transition-[transform,filter] duration-150 hover:-translate-y-0.5 hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:translate-y-0 disabled:hover:brightness-100 ${
|
||||||
|
agentType === 'claude'
|
||||||
|
? 'bg-violet-500 text-white'
|
||||||
|
: 'bg-emerald-500 text-white'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
${loading ? 'Spawning...' : 'Spawn'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user