From 432065d18f692938c7910970feae8f38c47faef7 Mon Sep 17 00:00:00 2001
From: mawkone <mark@getacquired.com>
Date: Wed, 13 May 2026 15:12:58 -0700
Subject: [PATCH] feat(ui): add expandable tool details to timeline tool group
 components

---
 .../components/vibn-chat/chat-panel.tsx       | 103 +++++++++++++++---
 1 file changed, 90 insertions(+), 13 deletions(-)

diff --git a/vibn-frontend/components/vibn-chat/chat-panel.tsx b/vibn-frontend/components/vibn-chat/chat-panel.tsx
index 5527d77..1ad2041 100644
--- a/vibn-frontend/components/vibn-chat/chat-panel.tsx
+++ b/vibn-frontend/components/vibn-chat/chat-panel.tsx
@@ -427,26 +427,103 @@ function TimelineToolGroup({
   return (
     <div
       style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        padding: "6px 12px",
         margin: "4px 0",
         background: "#f0ede8",
         borderRadius: 8,
-        fontSize: "0.75rem",
-        color: "#6b6560",
         fontFamily: "var(--font-inter),ui-sans-serif,sans-serif",
       }}
     >
-      {!allDone ? (
-        <Loader2 style={{ width: 12, height: 12 }} className="animate-spin" />
-      ) : (
-        <Wrench style={{ width: 12, height: 12, color: "#2e7d32" }} />
+      <button
+        onClick={() => setExpanded(!expanded)}
+        style={{
+          display: "flex",
+          alignItems: "center",
+          width: "100%",
+          gap: 8,
+          padding: "6px 12px",
+          background: "none",
+          border: "none",
+          fontSize: "0.75rem",
+          color: "#6b6560",
+          cursor: "pointer",
+          textAlign: "left",
+        }}
+      >
+        <span style={{ width: 14, display: "flex", justifyContent: "center" }}>
+          {!allDone ? (
+            <Loader2
+              style={{ width: 12, height: 12 }}
+              className="animate-spin"
+            />
+          ) : (
+            <Wrench style={{ width: 12, height: 12, color: "#2e7d32" }} />
+          )}
+        </span>
+        <span style={{ flex: 1 }}>
+          {category} {count > 1 ? `(x${count})` : ""} {!allDone ? "..." : " ✓"}
+        </span>
+        <span
+          style={{
+            transform: expanded ? "rotate(180deg)" : "none",
+            transition: "transform 0.15s ease",
+          }}
+        >
+          <ChevronDown style={{ width: 12, height: 12, opacity: 0.5 }} />
+        </span>
+      </button>
+
+      {expanded && (
+        <div
+          style={{
+            padding: "0 12px 8px 34px",
+            display: "flex",
+            flexDirection: "column",
+            gap: 4,
+          }}
+        >
+          {entries.map((e, i) => (
+            <div
+              key={i}
+              style={{
+                fontSize: "0.7rem",
+                color: "#8c8580",
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+              }}
+            >
+              <div
+                style={{
+                  width: 4,
+                  height: 4,
+                  borderRadius: "50%",
+                  background: "#ccc",
+                }}
+              />
+              <span style={{ fontFamily: "var(--font-mono), monospace" }}>
+                {friendlyToolName(e.name)}
+              </span>
+              {!e.result && e.status === "running" && (
+                <span className="animate-pulse">...</span>
+              )}
+              {e.result && (
+                <span
+                  style={{
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
+                    opacity: 0.7,
+                    maxWidth: 150,
+                  }}
+                  title={e.result}
+                >
+                  — {e.result}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
       )}
-      <span>
-        {category} {count > 1 ? `(x${count})` : ""} {!allDone ? "..." : " ✓"}
-      </span>
     </div>
   );
 }