Fix Tool pill styling syntax issue

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,60 +734,70 @@ 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,
-              }}
-            >
+            
+            <div style={{ display: "flex", alignItems: "center", gap: 4, minWidth: 0 }}>
+              <span style={{ color: isError ? "#dc2626" : "#6b7280", display: "flex" }}>
+                 {getToolIcon(e.name)}
+              </span>
+              <span style={{ fontWeight: 500, whiteSpace: "nowrap", letterSpacing: "-0.01em" }}>
                 {friendlyToolName(e.name)}
               </span>
+              
               {argSummary && (
                 <span
                   style={{
-                  background: "#f4f4f5",
-                  padding: "2px 6px",
-                  borderRadius: 4,
-                  color: "#71717a",
-                  maxWidth: 200,
+                    color: isError ? "#ef4444" : "#6b7280",
+                    marginLeft: 2,
                     overflow: "hidden",
                     textOverflow: "ellipsis",
                     whiteSpace: "nowrap",
+                    opacity: 0.8,
                   }}
+                  title={argSummary}
                 >
                   {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",
-                    maxWidth: 220,
-                    color: summary.ok ? "#a1a1aa" : "#ef4444",
+                      fontStyle: "italic",
+                      opacity: 0.8
                     }}
                     title={summary.label}
                   >
@@ -792,6 +806,7 @@ function TimelineToolGroup({
                 );
               })()}
             </div>
+          </div>
         );
       })}
     </div>