From 1e21dd08b6e497e371cd89e0876651a332697509 Mon Sep 17 00:00:00 2001
From: teernisse <teernisse@visiostack.com>
Date: Thu, 26 Feb 2026 17:09:51 -0500
Subject: [PATCH] feat(dashboard): add visual feedback for spawned agents

---
 dashboard/components/SessionCard.js |  5 +++--
 dashboard/styles.css                | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/dashboard/components/SessionCard.js b/dashboard/components/SessionCard.js
index a110f01..dde30f1 100644
--- a/dashboard/components/SessionCard.js
+++ b/dashboard/components/SessionCard.js
@@ -6,7 +6,7 @@ import { QuestionBlock } from './QuestionBlock.js';
 import { SimpleInput } from './SimpleInput.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 statusMeta = getStatusMeta(session.status);
   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
+  const spawnClass = isNewlySpawned ? ' session-card-spawned' : '';
   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 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`
     <div
diff --git a/dashboard/styles.css b/dashboard/styles.css
index afd50d0..0d5ea89 100644
--- a/dashboard/styles.css
+++ b/dashboard/styles.css
@@ -153,6 +153,16 @@ body {
   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 */
 @media (prefers-reduced-motion: reduce) {
   .spinner-dot::after {
@@ -171,7 +181,8 @@ body {
     animation: none;
   }
   .animate-float,
-  .animate-fade-in-up {
+  .animate-fade-in-up,
+  .session-card-spawned {
     animation: none !important;
   }
 }