diff --git a/vibn-frontend/components/vibn-chat/chat-panel.tsx b/vibn-frontend/components/vibn-chat/chat-panel.tsx
index 2bddaddc..c0eb0aef 100644
--- a/vibn-frontend/components/vibn-chat/chat-panel.tsx
+++ b/vibn-frontend/components/vibn-chat/chat-panel.tsx
@@ -490,8 +490,12 @@ function stripRawToolLogs(text: string): string {
 
 const MessageBubble = React.memo(function MessageBubble({
   msg,
+  isLast,
+  sending,
 }: {
   msg: Message;
+  isLast: boolean;
+  sending: boolean;
 }) {
   const isUser = msg.role === "user";
   const proseWrap: React.CSSProperties = {
@@ -546,7 +550,7 @@ const MessageBubble = React.memo(function MessageBubble({
         }}
       >
         {!isUser && msg.timeline && msg.timeline.length > 0 && (
-          <Timeline entries={msg.timeline} isActiveStream={sending && msgIndex === messages.length - 1} />
+          <Timeline entries={msg.timeline} isActiveStream={sending && isLast} />
         )}
         {/*
           Render the legacy bottom content bubble ONLY when:
@@ -730,67 +734,78 @@ function TimelineToolGroup({
           <div
             key={i}
             style={{
-              fontSize: "0.75rem",
-              color: isError ? "#ef4444" : "#52525b",
-              display: "flex",
+              display: "inline-flex",
               alignItems: "center",
-              gap: 8,
+              gap: 6,
+              background: isError ? "#fef2f2" : "#f3f4f6",
+              border: `1px solid ${isError ? '#fecaca' : '#e5e7eb'}`,
+              borderRadius: "999px",
+              padding: "4px 10px 4px 6px",
+              fontSize: "0.75rem",
+              color: isError ? "#dc2626" : "#4b5563",
+              width: "fit-content",
+              maxWidth: "100%",
+              boxShadow: "0 1px 2px rgba(0,0,0,0.02)",
             }}
           >
-            <span style={{ display: "flex", alignItems: "center", width: 14 }}>
+            <span style={{ display: "flex", alignItems: "center", justifyContent: "center", color: isError ? "#ef4444" : "#9ca3af" }}>
               {isError ? (
-                "✗"
-              ) : !isDone ? (
+                <XCircle size={14} />
+              ) : isDone ? (
+                <CheckCircle2 size={14} style={{ color: "#10b981" }} />
+              ) : (
                 <Loader2
                   style={{ width: 12, height: 12, color: "#8b5cf6" }}
                   className="animate-spin"
                 />
-              ) : (
-                <span style={{ color: "#a1a1aa" }}>✓</span>
               )}
             </span>
-            <span
-              style={{
-                fontFamily: "var(--font-mono), monospace",
-                fontWeight: 500,
-              }}
-            >
-              {friendlyToolName(e.name)}
-            </span>
-            {argSummary && (
-              <span
-                style={{
-                  background: "#f4f4f5",
-                  padding: "2px 6px",
-                  borderRadius: 4,
-                  color: "#71717a",
-                  maxWidth: 200,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                }}
-              >
-                {argSummary}
+            
+            <div style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0 }}>
+              <span style={{ color: isError ? "#dc2626" : "#6b7280", display: "flex" }}>
+                 {getToolIcon(e.name)}
               </span>
-            )}
-            {(() => {
-              const summary = summarizeToolResult(e.result);
-              if (!summary) return null;
-              return (
+              <span style={{ fontWeight: 500, whiteSpace: "nowrap", letterSpacing: "-0.01em" }}>
+                {friendlyToolName(e.name)}
+              </span>
+              
+              {argSummary && (
                 <span
                   style={{
+                    color: isError ? "#ef4444" : "#6b7280",
+                    marginLeft: 2,
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
-                    maxWidth: 220,
-                    color: summary.ok ? "#a1a1aa" : "#ef4444",
+                    opacity: 0.8,
                   }}
-                  title={summary.label}
+                  title={argSummary}
                 >
-                  — {summary.label}
+                  {argSummary}
                 </span>
-              );
-            })()}
+              )}
+              
+              {(() => {
+                const summary = summarizeToolResult(e.result);
+                if (!summary) return null;
+                return (
+                  <span 
+                    style={{ 
+                      color: summary.ok ? (isError ? "#dc2626" : "#6b7280") : "#dc2626", 
+                      marginLeft: 2,
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      fontStyle: "italic",
+                      opacity: 0.8
+                    }}
+                    title={summary.label}
+                  >
+                    — {summary.label}
+                  </span>
+                );
+              })()}
+            </div>
           </div>
         );
       })}