Add animated glowing radar, live pulse, and thinking indicators for agent

frontend/src/components/TaskGraph.tsx

@@ -20,7 +20,7 @@ export default function TaskGraph({
     return (
       <div className="task-graph">
         {tasks.map((task) => (
-          <div className="task-node" key={task.task_key}>
+          <div className={`task-node ${task.status.toLowerCase()}`} key={task.task_key}>
             <div><strong>{task.task_key}</strong></div>
             <div>{task.task_type}</div>
             <span className={`status ${task.status}`}>{task.status}</span>
@@ -36,7 +36,7 @@ export default function TaskGraph({
         const live = taskMap.get(pt.id);
         const status = live?.status || "PENDING";
         return (
-          <div className="task-node" key={pt.id}>
+          <div className={`task-node ${status.toLowerCase()}`} key={pt.id}>
             <div><strong>{pt.id}</strong></div>
             <div>{pt.type}</div>
             <div style={{ fontSize: "0.8rem", color: "#7f92ab" }}>

frontend/src/components/WorkflowTimeline.tsx

@@ -42,9 +42,11 @@ export default function WorkflowTimeline({ events }: { events: WorkflowEvent[] }
       style={{
         background: "var(--bg-elevated)",
         borderRadius: "var(--radius-md)",
-        border: "1px solid var(--border-subtle)",
+        border: isComplete ? "1px solid var(--border-subtle)" : "1px solid rgba(99, 102, 241, 0.4)",
+        boxShadow: isComplete ? "none" : "0 0 20px rgba(99, 102, 241, 0.25)",
         marginBottom: "2rem",
-        overflow: "hidden"
+        overflow: "hidden",
+        transition: "all 0.3s ease"
       }}
     >
       <summary style={{
@@ -53,16 +55,26 @@ export default function WorkflowTimeline({ events }: { events: WorkflowEvent[] }
         fontWeight: 600,
         display: "flex",
         alignItems: "center",
-        gap: "0.5rem",
+        justifyContent: "space-between",
+        gap: "0.75rem",
         listStyle: "none",
         borderBottom: isOpen ? "1px solid var(--border-subtle)" : "none",
-        userSelect: "none"
+        userSelect: "none",
+        background: isComplete ? "transparent" : "linear-gradient(90deg, rgba(99, 102, 241, 0.05) 0%, transparent 100%)"
       }}>
-        <span style={{ transition: "transform 0.2s", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)" }}>▶</span>
-        {isComplete ? "Agent finished thinking" : "Agent is thinking..."}
+        <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+          <span style={{ transition: "transform 0.2s", transform: isOpen ? "rotate(90deg)" : "rotate(0deg)", display: "inline-block" }}>▶</span>
+          {!isComplete && <span className="radar-dot green"></span>}
+          <span>{isComplete ? "Agent completed execution" : "Agent is thinking & executing..."}</span>
+        </div>
+        {!isComplete && (
+          <span style={{ fontSize: "0.8rem", color: "#6366f1", display: "flex", alignItems: "center", gap: "0.3rem" }}>
+            LIVE <span className="thinking-dots"><span></span><span></span><span></span></span>
+          </span>
+        )}
       </summary>
       
-      <div style={{ padding: "1.5rem", maxHeight: "400px", overflowY: "auto" }}>
+      <div style={{ padding: "1.5rem", maxHeight: "450px", overflowY: "auto" }}>
         <ul className="timeline">
           {events.map((event) => (
             <li key={event.id} style={{ marginBottom: "1rem", display: "flex", gap: "1rem", alignItems: "flex-start" }}>
@@ -87,7 +99,27 @@ export default function WorkflowTimeline({ events }: { events: WorkflowEvent[] }
               </div>
             </li>
           ))}
-          {events.length === 0 && <li>Initializing workflow engine...</li>}
+          
+          {!isComplete && (
+            <li style={{ marginTop: "1rem", listStyle: "none" }}>
+              <div className="live-thinking-pulse">
+                <span className="radar-dot"></span>
+                <div style={{ flex: 1 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: "0.4rem" }}>
+                    <span>Agent is working on the autonomous loop</span>
+                    <span className="thinking-dots"><span></span><span></span><span></span></span>
+                  </div>
+                  <div style={{ fontSize: "0.8rem", color: "var(--text-muted)", marginTop: "0.2rem" }}>
+                    Generating code, compiling DAG graph, executing tasks & verifying...
+                  </div>
+                  <div style={{ marginTop: "0.6rem" }}>
+                    <div className="thinking-shimmer-progress"></div>
+                  </div>
+                </div>
+              </div>
+            </li>
+          )}
+          {events.length === 0 && isComplete && <li>No events recorded.</li>}
         </ul>
       </div>
     </details>

frontend/src/index.css

@@ -1039,3 +1039,165 @@ button.secondary:hover,
     padding: 1.5rem;
   }
 }
+
+/* ============================================================
+   LIVE AGENT GLOWING & WORKING ANIMATIONS
+   ============================================================ */
+
+@keyframes pulse-ring {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.8);
+  }
+  70% {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 12px rgba(99, 102, 241, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(99, 102, 241, 0);
+  }
+}
+
+@keyframes pulse-ring-green {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8);
+  }
+  70% {
+    transform: scale(1.1);
+    box-shadow: 0 0 0 12px rgba(16, 185, 129, 0);
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
+  }
+}
+
+@keyframes live-glow {
+  0%, 100% {
+    box-shadow: 0 0 16px rgba(99, 102, 241, 0.4), 0 0 32px rgba(168, 85, 247, 0.2);
+    border-color: rgba(99, 102, 241, 0.7);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(99, 102, 241, 0.7), 0 0 60px rgba(168, 85, 247, 0.45);
+    border-color: rgba(168, 85, 247, 1);
+  }
+}
+
+@keyframes live-neon-sweep {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+@keyframes shimmer-bar {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes bounce-dot {
+  0%, 80%, 100% {
+    transform: scale(0.4);
+    opacity: 0.3;
+  }
+  40% {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+}
+
+.radar-dot {
+  width: 10px;
+  height: 10px;
+  background: #6366f1;
+  border-radius: 50%;
+  display: inline-block;
+  animation: pulse-ring 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+.radar-dot.green {
+  background: #10b981;
+  animation: pulse-ring-green 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+}
+
+.agent-live-banner {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%);
+  border: 1px solid rgba(99, 102, 241, 0.4);
+  border-radius: var(--radius-lg);
+  padding: 1.25rem 1.5rem;
+  margin-bottom: 1.5rem;
+  animation: live-glow 2.5s ease-in-out infinite;
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.agent-live-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.thinking-shimmer-progress {
+  height: 6px;
+  width: 100%;
+  background: linear-gradient(90deg, rgba(99, 102, 241, 0.2) 0%, #6366f1 30%, #ec4899 70%, rgba(168, 85, 247, 0.2) 100%);
+  background-size: 200% 100%;
+  animation: shimmer-bar 1.8s linear infinite;
+  border-radius: 999px;
+}
+
+.thinking-dots span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  background: currentColor;
+  border-radius: 50%;
+  margin: 0 2px;
+  animation: bounce-dot 1.4s infinite ease-in-out both;
+}
+.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
+.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
+
+.task-node.running {
+  border-color: #6366f1 !important;
+  animation: live-glow 2s ease-in-out infinite;
+  background: linear-gradient(145deg, var(--bg-surface), rgba(99, 102, 241, 0.1)) !important;
+}
+
+.status.RUNNING {
+  background: rgba(99, 102, 241, 0.18) !important;
+  color: #6366f1 !important;
+  box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
+  font-weight: 700;
+  animation: live-glow 2s infinite;
+}
+
+.live-thinking-pulse {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1.25rem;
+  background: linear-gradient(90deg, rgba(99, 102, 241, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
+  border: 1px dashed rgba(99, 102, 241, 0.5);
+  border-radius: var(--radius-md);
+  margin-top: 1rem;
+  color: #6366f1;
+  font-weight: 500;
+  font-size: 0.9rem;
+  animation: live-glow 2.5s ease-in-out infinite;
+}
+

frontend/src/pages/WorkflowPage.tsx

@@ -64,11 +64,29 @@ export default function WorkflowPage() {
     <div>
       <h2>Workflow {workflow.workflow_id}</h2>
       {error && <p className="error">{error}</p>}
+      {isLive && (
+        <div className="agent-live-banner">
+          <div className="agent-live-header">
+            <div style={{ display: "flex", alignItems: "center", gap: "0.75rem" }}>
+              <span className="radar-dot green"></span>
+              <span style={{ fontSize: "1.05rem", fontWeight: 600 }}>Agent is Actively Working</span>
+            </div>
+            <span style={{ fontSize: "0.85rem", color: "#6366f1", fontWeight: 600, display: "flex", alignItems: "center", gap: "0.25rem" }}>
+              AUTONOMOUS LOOP <span className="thinking-dots"><span></span><span></span><span></span></span>
+            </span>
+          </div>
+          <p style={{ margin: 0, color: "var(--text-secondary)", fontSize: "0.9rem" }}>
+            The AI agent is planning architecture, generating code & tests, and orchestrating verification tasks in the background.
+          </p>
+          <div className="thinking-shimmer-progress"></div>
+        </div>
+      )}
+
       <div className="card">
-        <p>{workflow.user_prompt}</p>
-        <p>
+        <p style={{ fontSize: "1.1rem", marginBottom: "0.75rem", fontWeight: 500 }}>{workflow.user_prompt}</p>
+        <p style={{ display: "flex", alignItems: "center", gap: "0.75rem", margin: 0 }}>
           <span className={`status ${workflow.status}`}>{workflow.status}</span>
-          {" · "}{workflow.llm_provider} / {workflow.llm_model}
+          <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{workflow.llm_provider} / {workflow.llm_model}</span>
         </p>
       </div>