fix(acp): sync new responding indicator with active prompt state

Author: bajrangCoder

src/pages/acp/acp.js

@@ -487,14 +487,37 @@ export default function AcpPageInclude() {
 			elements.$cancelBtn.style.display = value ? "flex" : "none";
 		}
 		updateStatusDot(value ? "connecting" : "connected");
+		if (currentView === "chat") {
+			syncTimeline();
+		}
 	}
 
 	// ─── Event Handlers ───
+	function getActiveAgentMessageId() {
+		if (!isPrompting || !client.session) return null;
+
+		const messages = client.session.messages;
+		for (let index = messages.length - 1; index >= 0; index--) {
+			if (messages[index].role === "agent") {
+				return messages[index].id;
+			}
+		}
+
+		return null;
+	}
+
 	function createTimelineElement(entry) {
 		const cwd = client.session?.cwd || $form.getValues().cwd || "";
+		const activeAgentMessageId = getActiveAgentMessageId();
 		switch (entry.type) {
 			case "message":
-				return ChatMessage({ message: entry.message, cwd });
+				return ChatMessage({
+					message: entry.message,
+					cwd,
+					isResponding:
+						entry.message.role === "agent" &&
+						entry.message.id === activeAgentMessageId,
+				});
 			case "tool_call":
 				return ToolCallCard({ toolCall: entry.toolCall });
 			case "plan":
@@ -516,10 +539,15 @@ export default function AcpPageInclude() {
 			if ($empty) $empty.remove();
 		}
 
+		const activeAgentMessageId = getActiveAgentMessageId();
 		entries.forEach((entry) => {
 			const entryWithContext = {
 				...entry,
 				cwd: client.session?.cwd || $form.getValues().cwd || "",
+				isResponding:
+					entry.type === "message" &&
+					entry.message.role === "agent" &&
+					entry.message.id === activeAgentMessageId,
 			};
 			if (timelineElements.has(entry.entryId)) {
 				timelineElements.get(entry.entryId).update(entryWithContext);

src/pages/acp/acp.scss

@@ -602,25 +602,52 @@
 			}
 		}
 
-		&.streaming {
-			.acp-message-content::after {
-				content: "";
-				display: inline-block;
-				width: 2px;
-				height: 1em;
-				margin-left: 2px;
-				background: var(--active-color);
-				animation: acp-blink 0.8s step-end infinite;
-				vertical-align: text-bottom;
-			}
-		}
-
 		.acp-message-meta {
+			display: flex;
+			align-items: center;
+			gap: 8px;
+			flex-wrap: wrap;
 			font-size: 0.65rem;
 			opacity: 0.35;
 			margin-top: 4px;
 			padding: 0 2px;
 			color: var(--secondary-text-color);
+
+			.acp-streaming-indicator {
+				display: inline-flex;
+				align-items: center;
+				gap: 4px;
+				padding: 2px 7px;
+				border-radius: 999px;
+				background: color-mix(
+					in srgb,
+					var(--active-color),
+					transparent 88%
+				);
+				color: var(--active-color);
+				opacity: 0.95;
+			}
+
+			.acp-streaming-dot {
+				width: 4px;
+				height: 4px;
+				border-radius: 50%;
+				background: currentColor;
+				animation: acp-streaming-pulse 1.2s ease-in-out infinite;
+
+				&:nth-child(2) {
+					animation-delay: 0.18s;
+				}
+
+				&:nth-child(3) {
+					animation-delay: 0.36s;
+				}
+			}
+
+			.acp-streaming-label {
+				font-weight: 600;
+				letter-spacing: 0.02em;
+			}
 		}
 	}
 
@@ -1193,13 +1220,15 @@
 	}
 }
 
-@keyframes acp-blink {
+@keyframes acp-streaming-pulse {
 	0%,
 	100% {
-		opacity: 1;
+		opacity: 0.35;
+		transform: scale(0.9);
 	}
-	50% {
-		opacity: 0;
+	40% {
+		opacity: 1;
+		transform: scale(1);
 	}
 }
 

src/pages/acp/components/chatMessage.js

@@ -165,8 +165,13 @@ async function resolveExistingPath(candidates = []) {
 	return null;
 }
 
-export default function ChatMessage({ message, cwd = "" }) {
+export default function ChatMessage({
+	message,
+	cwd = "",
+	isResponding = false,
+}) {
 	let messageCwd = cwd;
+	let messageResponding = isResponding;
 
 	const $content = <div className="acp-message-content"></div>;
 	const $meta = <div className="acp-message-meta"></div>;
@@ -255,9 +260,20 @@ export default function ChatMessage({ message, cwd = "" }) {
 			hour: "2-digit",
 			minute: "2-digit",
 		});
-		$meta.textContent = message.streaming ? `${timeStr} · streaming` : timeStr;
+		$meta.innerHTML = "";
+		$meta.append(<span className="acp-message-time">{timeStr}</span>);
+		if (messageResponding) {
+			$meta.append(
+				<span className="acp-streaming-indicator">
+					<span className="acp-streaming-dot"></span>
+					<span className="acp-streaming-dot"></span>
+					<span className="acp-streaming-dot"></span>
+					<span className="acp-streaming-label">Responding</span>
+				</span>,
+			);
+		}
 		$role.textContent = message.role === "user" ? "You" : "Agent";
-		$el.classList.toggle("streaming", Boolean(message.streaming));
+		$el.classList.toggle("streaming", Boolean(messageResponding));
 	}
 
 	renderContent();
@@ -275,6 +291,7 @@ export default function ChatMessage({ message, cwd = "" }) {
 	$el.update = (msg) => {
 		message = msg.message || msg;
 		if (msg.cwd) messageCwd = msg.cwd;
+		if ("isResponding" in msg) messageResponding = Boolean(msg.isResponding);
 		renderContent();
 		renderMeta();
 	};