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

feat(dashboard): add visual feedback for spawned agents

Browse Source
This commit is contained in:
teernisse
2026-02-26 17:09:51 -05:00
parent e3e42e53f2
commit 1e21dd08b6
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dashboard/components/SessionCard.js
View File

@@ -6,7 +6,7 @@ import { QuestionBlock } from './QuestionBlock.js';
import { SimpleInput } from './SimpleInput.js'; import { SimpleInput } from './SimpleInput.js';
import { AgentActivityIndicator } from './AgentActivityIndicator.js'; import { AgentActivityIndicator } from './AgentActivityIndicator.js';
export function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss, enlarged = false, autocompleteConfig = null }) { export function SessionCard({ session, onClick, conversation, onFetchConversation, onRespond, onDismiss, enlarged = false, autocompleteConfig = null, isNewlySpawned = false }) {
const hasQuestions = session.pending_questions && session.pending_questions.length > 0; const hasQuestions = session.pending_questions && session.pending_questions.length > 0;
const statusMeta = getStatusMeta(session.status); const statusMeta = getStatusMeta(session.status);
const agent = session.agent === 'codex' ? 'codex' : 'claude'; const agent = session.agent === 'codex' ? 'codex' : 'claude';
@@ -84,9 +84,10 @@ export function SessionCard({ session, onClick, conversation, onFetchConversatio
}; };
// Container classes differ based on enlarged mode // Container classes differ based on enlarged mode
const spawnClass = isNewlySpawned ? ' session-card-spawned' : '';
const containerClasses = enlarged const containerClasses = enlarged
? 'glass-panel flex w-full max-w-[90vw] max-h-[90vh] flex-col overflow-hidden rounded-2xl border border-selection/80' ? 'glass-panel flex w-full max-w-[90vw] max-h-[90vh] flex-col overflow-hidden rounded-2xl border border-selection/80'
: 'glass-panel flex h-[850px] max-h-[850px] w-[600px] cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-[border-color,box-shadow] duration-200 hover:border-starting/35 hover:shadow-panel'; : 'glass-panel flex h-[850px] max-h-[850px] w-[600px] cursor-pointer flex-col overflow-hidden rounded-xl border border-selection/70 transition-[border-color,box-shadow] duration-200 hover:border-starting/35 hover:shadow-panel' + spawnClass;
return html` return html`
<div <div

13
dashboard/styles.css
View File

@@ -153,6 +153,16 @@ body {
animation: modalPanelOut 200ms ease-in forwards; animation: modalPanelOut 200ms ease-in forwards;
} }
/* Spawn highlight animation - visual feedback when a newly spawned agent appears */
@keyframes spawn-highlight {
0% { box-shadow: 0 0 0 3px rgba(95, 208, 164, 0.6), 0 0 16px rgba(95, 208, 164, 0.15); }
100% { box-shadow: 0 0 0 0 transparent, 0 0 0 transparent; }
}
.session-card-spawned {
animation: spawn-highlight 2.5s ease-out;
}
/* Accessibility: disable continuous animations for motion-sensitive users */ /* Accessibility: disable continuous animations for motion-sensitive users */
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.spinner-dot::after { .spinner-dot::after {
@@ -171,7 +181,8 @@ body {
animation: none; animation: none;
} }
.animate-float, .animate-float,
.animate-fade-in-up { .animate-fade-in-up,
.session-card-spawned {
animation: none !important; animation: none !important;
} }
} }