From 0b0021a3100e4a14363b8c7ca0cbf13e65ee2dba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Thu, 21 May 2026 19:57:22 -0400
Subject: [PATCH] feat(studio): improve Ask agent UX, add tooltips to tabs and
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Ask agent button turns green with checkmark on copy
- Add button shows tooltip "Add to composition at current time"
- Ask agent shows tooltip "Copy a prompt to paste into your AI agent"
- Tab tooltips: Code, Comps, Assets, Catalog each explain their purpose
- Search placeholder updated to "Search by name, category, or tag…"
---
 .../src/components/sidebar/BlocksTab.tsx      | 56 ++++++++++++++-----
 .../src/components/sidebar/LeftSidebar.tsx    |  4 ++
 2 files changed, 45 insertions(+), 15 deletions(-)

diff --git a/packages/studio/src/components/sidebar/BlocksTab.tsx b/packages/studio/src/components/sidebar/BlocksTab.tsx
index 46a4a734c..e12b78a0b 100644
--- a/packages/studio/src/components/sidebar/BlocksTab.tsx
+++ b/packages/studio/src/components/sidebar/BlocksTab.tsx
@@ -63,7 +63,7 @@ export const BlocksTab = memo(function BlocksTab({ onAddBlock, onPreviewBlock }:
             type="text"
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search blocks…"
+            placeholder="Search by name, category, or tag…"
             className="w-full bg-neutral-900 border border-neutral-800 rounded-md pl-7 pr-2 py-1.5 text-[11px] text-neutral-200 placeholder:text-neutral-600 focus:outline-none focus:border-neutral-700 transition-colors"
           />
         </div>
@@ -400,6 +400,7 @@ function BlockCard({
             <button
               type="button"
               onClick={handleAdd}
+              title="Add to composition at current time"
               className="flex items-center gap-1 px-3 py-1.5 rounded-md bg-white text-black text-[10px] font-semibold hover:bg-neutral-200 transition-colors"
             >
               <svg
@@ -412,26 +413,51 @@ function BlockCard({
               >
                 <path d="M12 5v14M5 12h14" />
               </svg>
-              {adding ? "Added" : "Add"}
+              {adding ? "Added!" : "Add"}
             </button>
           )}
           <button
             type="button"
             onClick={handleCopyPrompt}
-            className={`flex items-center gap-1 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md ${onAdd ? "bg-white/15 text-white/90 text-[9px]" : "bg-white text-black text-[10px] font-semibold"} hover:bg-white/25 transition-colors`}
+            title="Copy a prompt to paste into your AI agent"
+            className={`flex items-center gap-1.5 px-3 ${onAdd ? "py-1" : "py-1.5"} rounded-md transition-colors ${
+              copied
+                ? "bg-emerald-500 text-white"
+                : onAdd
+                  ? "bg-white/15 text-white/90 hover:bg-white/25"
+                  : "bg-white text-black hover:bg-neutral-200"
+            } ${onAdd ? "text-[9px]" : "text-[10px] font-semibold"}`}
           >
-            <svg
-              width={onAdd ? 9 : 12}
-              height={onAdd ? 9 : 12}
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-            >
-              <rect x="9" y="9" width="13" height="13" rx="2" />
-              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-            </svg>
-            {copied ? "Copied!" : "Ask agent"}
+            {copied ? (
+              <>
+                <svg
+                  width={onAdd ? 9 : 11}
+                  height={onAdd ? 9 : 11}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2.5"
+                >
+                  <path d="M20 6 9 17l-5-5" />
+                </svg>
+                Copied!
+              </>
+            ) : (
+              <>
+                <svg
+                  width={onAdd ? 9 : 11}
+                  height={onAdd ? 9 : 11}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                >
+                  <rect x="9" y="9" width="13" height="13" rx="2" />
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                </svg>
+                Ask agent
+              </>
+            )}
           </button>
         </div>
 
diff --git a/packages/studio/src/components/sidebar/LeftSidebar.tsx b/packages/studio/src/components/sidebar/LeftSidebar.tsx
index dcadab0b0..a7b9fe167 100644
--- a/packages/studio/src/components/sidebar/LeftSidebar.tsx
+++ b/packages/studio/src/components/sidebar/LeftSidebar.tsx
@@ -127,6 +127,7 @@ export const LeftSidebar = memo(
                   <button
                     type="button"
                     onClick={() => selectTab("code")}
+                    title="Source code editor"
                     className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
                       tab === "code"
                         ? "bg-neutral-800 text-white"
@@ -138,6 +139,7 @@ export const LeftSidebar = memo(
                   <button
                     type="button"
                     onClick={() => selectTab("compositions")}
+                    title="Composition layers and sub-compositions"
                     className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
                       tab === "compositions"
                         ? "bg-neutral-800 text-white"
@@ -149,6 +151,7 @@ export const LeftSidebar = memo(
                   <button
                     type="button"
                     onClick={() => selectTab("assets")}
+                    title="Media assets — videos, images, audio, fonts"
                     className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
                       tab === "assets"
                         ? "bg-neutral-800 text-white"
@@ -161,6 +164,7 @@ export const LeftSidebar = memo(
                     <button
                       type="button"
                       onClick={() => selectTab("blocks")}
+                      title="Browse blocks, components, and templates from the registry"
                       className={`rounded-[14px] px-1.5 py-2 text-[10px] font-semibold truncate transition-all ${
                         tab === "blocks"
                           ? "bg-neutral-800 text-white"