From 3d6ad162cd21949db3e90591d035db884c473b81 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Thu, 21 May 2026 17:24:12 -0700
Subject: [PATCH] feat(refactor): dynamic agent status ticker card across all
 execution rounds

---
 components/vibn-chat/chat-panel.tsx | 58 +++++++++--------------------
 1 file changed, 18 insertions(+), 40 deletions(-)

diff --git a/components/vibn-chat/chat-panel.tsx b/components/vibn-chat/chat-panel.tsx
index 00fff57f..fc02ef74 100644
--- a/components/vibn-chat/chat-panel.tsx
+++ b/components/vibn-chat/chat-panel.tsx
@@ -1683,53 +1683,31 @@ export function ChatPanel({
           <MessageBubble key={msg.id || i} msg={msg} />
         ))}
 
-        {sending && messages[messages.length - 1]?.role !== "assistant" && (
+        {sending && (
           <div
             style={{
               display: "flex",
               alignItems: "center",
               gap: 8,
-              padding: "6px 0",
+              padding: "8px 12px",
+              margin: "6px 0",
+              background: "#faf8f5",
+              border: "1px dashed #e8e4dc",
+              borderRadius: 8,
+              fontSize: "0.75rem",
+              color: "#8c8580",
+              fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
             }}
           >
-            <div
-              style={{
-                width: 24,
-                height: 24,
-                borderRadius: "50%",
-                background: "#1a1a1a",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                flexShrink: 0,
-              }}
-            >
-              <span
-                style={{
-                  color: "#fff",
-                  fontSize: "0.6rem",
-                  fontWeight: 700,
-                  fontFamily: "var(--font-lora),serif",
-                }}
-              >
-                V
-              </span>
-            </div>
-            <div style={{ display: "flex", gap: 4 }}>
-              {[0, 1, 2].map((i) => (
-                <span
-                  key={i}
-                  style={{
-                    width: 6,
-                    height: 6,
-                    borderRadius: "50%",
-                    background: "#c0bab2",
-                    animation: `vibn-bounce 1.2s ease infinite ${i * 0.2}s`,
-                    display: "inline-block",
-                  }}
-                />
-              ))}
-            </div>
+            <Loader2
+              style={{ width: 12, height: 12, color: "#3d5afe" }}
+              className="animate-spin"
+            />
+            <span style={{ fontStyle: "italic" }}>
+              {messages[messages.length - 1]?.role !== "assistant"
+                ? "Vibn AI is formulating plan..."
+                : "Vibn AI is executing tools & planning next steps..."}
+            </span>
           </div>
         )}