theirongolddev/amc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(dashboard): change SpawnModal from overlay modal to dropdown

Browse Source 
Position the spawn modal directly under the 'New Agent' button without a
blur overlay. Uses click-outside dismissal and absolute positioning.
Reduces visual disruption for quick agent spawning.
This commit is contained in:
teernisse
2026-02-26 17:10:41 -05:00
parent 7a9d290cb9
commit baa712ba15
42 changed files with 86 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dashboard/components/App.js
View File

@@ -471,13 +471,21 @@ export function App() {
`;
})()}
</div>
<button
disabled=${!zellijAvailable}
class="rounded-lg border border-active/40 bg-active/12 px-3 py-2 text-sm font-medium text-active transition-colors hover:bg-active/20 ${!zellijAvailable ? 'opacity-50 cursor-not-allowed' : ''}"
onClick=${() => setSpawnModalOpen(true)}
>
+ New Agent
</button>
<div class="relative">
<button
disabled=${!zellijAvailable}
class="rounded-lg border border-active/40 bg-active/12 px-3 py-2 text-sm font-medium text-active transition-colors hover:bg-active/20 ${!zellijAvailable ? 'opacity-50 cursor-not-allowed' : ''}"
onClick=${() => setSpawnModalOpen(true)}
>
+ New Agent
</button>
<${SpawnModal}
isOpen=${spawnModalOpen}
onClose=${() => setSpawnModalOpen(false)}
onSpawn=${handleSpawnResult}
currentProject=${selectedProject}
/>
</div>
</div>
</header>
@@ -589,12 +597,5 @@ export function App() {
/>
<${ToastContainer} />
<${SpawnModal}
isOpen=${spawnModalOpen}
onClose=${() => setSpawnModalOpen(false)}
onSpawn=${handleSpawnResult}
currentProject=${selectedProject}
/>
`;
}

6
dashboard/components/Modal.js
View File

@@ -18,10 +18,12 @@ export function Modal({ session, conversations, onClose, onRespond, onFetchConve
return;
}
let stale = false;
const agent = session.agent || 'claude';
fetchSkills(agent)
.then(config => setAutocompleteConfig(config))
.catch(() => setAutocompleteConfig(null));
.then(config => { if (!stale) setAutocompleteConfig(config); })
.catch(() => { if (!stale) setAutocompleteConfig(null); });
return () => { stale = true; };
}, [session?.agent]);
// Animated close handler

4
dashboard/components/SessionCard.js
View File

@@ -110,9 +110,9 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
<span class="rounded-full border px-2.5 py-1 font-mono text-micro uppercase tracking-[0.14em] ${agent === 'codex' ? 'border-emerald-400/45 bg-emerald-500/14 text-emerald-300' : 'border-violet-400/45 bg-violet-500/14 text-violet-300'}">
${agent}
</span>
${session.cwd && html`
${session.project_dir && html`
<span class="truncate rounded-full border border-selection bg-bg/40 px-2.5 py-1 font-mono text-micro text-dim">
${session.cwd.split('/').slice(-2).join('/')}
${session.project_dir.split('/').slice(-2).join('/')}
</span>
`}
</div>

40
dashboard/components/SpawnModal.js
View File

@@ -1,4 +1,4 @@
import { html, useState, useEffect, useCallback } from '../lib/preact.js';
import { html, useState, useEffect, useCallback, useRef } from '../lib/preact.js';
import { API_PROJECTS, API_SPAWN, fetchWithTimeout } from '../utils/api.js';
export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
@@ -12,11 +12,21 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
const needsProjectPicker = !currentProject;
// Lock body scroll when modal is open
const dropdownRef = useCallback((node) => {
if (node) dropdownNodeRef.current = node;
}, []);
const dropdownNodeRef = useRef(null);
// Click outside dismisses dropdown
useEffect(() => {
if (!isOpen) return;
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
const handleClickOutside = (e) => {
if (dropdownNodeRef.current && !dropdownNodeRef.current.contains(e.target)) {
handleClose();
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, [isOpen]);
// Reset state on open
@@ -107,29 +117,26 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
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()}
ref=${dropdownRef}
class="absolute right-0 top-full mt-2 z-50 glass-panel w-80 rounded-xl border border-selection/70 shadow-lg ${closing ? 'modal-panel-out' : 'modal-panel-in'}"
onClick=${(e) => e.stopPropagation()}
>
<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>
<div class="flex items-center justify-between border-b border-selection/70 px-4 py-3">
<h2 class="font-display text-sm 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"
class="flex h-6 w-6 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">
<svg class="h-3.5 w-3.5" 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">
<div class="flex flex-col gap-3 px-4 py-3">
${needsProjectPicker && html`
<div class="flex flex-col gap-1.5">
@@ -202,7 +209,7 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
</div>
<!-- Footer -->
<div class="flex items-center justify-end gap-2 border-t border-selection/70 px-5 py-3">
<div class="flex items-center justify-end gap-2 border-t border-selection/70 px-4 py-2.5">
<button
onClick=${handleClose}
disabled=${loading}
@@ -222,7 +229,6 @@ export function SpawnModal({ isOpen, onClose, onSpawn, currentProject }) {
${loading ? 'Spawning...' : 'Spawn'}
</button>
</div>
</div>
</div>
`;
}

6
dashboard/utils/api.js
View File

@@ -29,11 +29,11 @@ export async function fetchWithTimeout(url, options = {}, timeoutMs = API_TIMEOU
export async function fetchSkills(agent) {
const url = `${API_SKILLS}?agent=${encodeURIComponent(agent)}`;
try {
const response = await fetch(url);
const response = await fetchWithTimeout(url);
if (!response.ok) return null;
return response.json();
return await response.json();
} catch {
// Network error or other failure - graceful degradation
// Network error, timeout, or JSON parse failure - graceful degradation
return null;
}
}