From 44385514cda88d5e13548caa3136aa710a81e0f4 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Mon, 15 Jun 2026 13:12:08 -0700
Subject: [PATCH] Add blinking cursor to active streaming text

---
 vibn-frontend/components/vibn-chat/chat-panel.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/vibn-frontend/components/vibn-chat/chat-panel.tsx b/vibn-frontend/components/vibn-chat/chat-panel.tsx
index 321e5743..2bddaddc 100644
--- a/vibn-frontend/components/vibn-chat/chat-panel.tsx
+++ b/vibn-frontend/components/vibn-chat/chat-panel.tsx
@@ -546,7 +546,7 @@ const MessageBubble = React.memo(function MessageBubble({
         }}
       >
         {!isUser && msg.timeline && msg.timeline.length > 0 && (
-          <Timeline entries={msg.timeline} />
+          <Timeline entries={msg.timeline} isActiveStream={sending && msgIndex === messages.length - 1} />
         )}
         {/*
           Render the legacy bottom content bubble ONLY when:
@@ -600,7 +600,7 @@ const MessageBubble = React.memo(function MessageBubble({
  * name with a ×N counter. The flow visually mirrors what actually
  * happened: thought → tools → thought → tools → ... → final summary.
  */
-function Timeline({ entries }: { entries: TimelineEntry[] }) {
+function Timeline({ entries, isActiveStream }: { entries: TimelineEntry[], isActiveStream?: boolean }) {
   // Walk the entries and emit a renderable list. Adjacent same-category
   // tool entries get bundled into a TimelineToolGroup; thought and
   // text entries pass through as-is.
@@ -634,11 +634,12 @@ function Timeline({ entries }: { entries: TimelineEntry[] }) {
   return (
     <div style={{ marginBottom: 6 }}>
       {items.map((item, i) => {
+        const isLast = i === items.length - 1;
         if (item.kind === "thought") {
-          return <TimelineText key={i} text={item.text} />;
+          return <TimelineText key={i} text={item.text} isStreaming={isActiveStream && isLast} />;
         }
         if (item.kind === "text") {
-          return <TimelineText key={i} text={item.text} />;
+          return <TimelineText key={i} text={item.text} isStreaming={isActiveStream && isLast} />;
         }
         if (item.kind === "toolGroup") {
           return (
@@ -660,7 +661,7 @@ function Timeline({ entries }: { entries: TimelineEntry[] }) {
  * bubble so each round of multi-tool-loop output reads as a discrete
  * step instead of concatenating into a wall of text.
  */
-function TimelineText({ text }: { text: string }) {
+function TimelineText({ text, isStreaming }: { text: string; isStreaming?: boolean }) {
   const proseWrap: React.CSSProperties = {
     overflowWrap: "anywhere",
     wordBreak: "break-word",
@@ -684,7 +685,7 @@ function TimelineText({ text }: { text: string }) {
       <span
         style={proseWrap}
         dangerouslySetInnerHTML={{
-          __html: renderMarkdown(stripRawToolLogs(text)),
+          __html: renderMarkdown(stripRawToolLogs(text)) + (isStreaming ? `<span class="animate-pulse" style="display:inline-block; width:6px; height:13px; background-color:#9ca3af; vertical-align:-1px; margin-left:2px; border-radius:1px;"></span>` : ""),
         }}
       />
     </div>