Add tooltips to worktree new-thread buttons

apps/app/src/components/promptbox/ThreadEnvironmentSummary.test.tsx

@@ -0,0 +1,29 @@
+// @vitest-environment jsdom
+
+import { fireEvent, render, screen } from "@testing-library/react";
+import { TooltipProvider } from "@bb/shared-ui/tooltip";
+import { describe, expect, it, vi } from "vitest";
+import { ThreadEnvironmentSummary } from "./ThreadEnvironmentSummary";
+
+describe("ThreadEnvironmentSummary", () => {
+  it("explains the create-thread action in a tooltip", async () => {
+    render(
+      <TooltipProvider delayDuration={0}>
+        <ThreadEnvironmentSummary
+          environmentLabel="Worktree"
+          onCreateNewThreadInWorktree={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    fireEvent.focus(
+      screen.getByRole("button", {
+        name: "Create new thread in this worktree",
+      }),
+    );
+
+    expect((await screen.findByRole("tooltip")).textContent).toBe(
+      "Create new thread in this worktree",
+    );
+  });
+});

apps/app/src/components/promptbox/ThreadEnvironmentSummary.tsx

@@ -2,6 +2,11 @@ import { memo } from "react";
 import { OptionDisplay } from "@/components/pickers/OptionPicker";
 import { copyToClipboardWithToast } from "@/lib/clipboard";
 import { Icon, type IconName } from "@bb/shared-ui/icon";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@bb/shared-ui/tooltip";
 import type { WorkspaceCheckoutDisplay } from "@/lib/workspace-checkout-display";
 
 const CHECKOUT_CHIP_BASE_CLASS_NAME =
@@ -107,14 +112,19 @@ export const ThreadEnvironmentSummary = memo(function ThreadEnvironmentSummary({
         </span>
       ) : null}
       {onCreateNewThreadInWorktree ? (
-        <button
-          type="button"
-          aria-label="Create new thread in this worktree"
-          onClick={onCreateNewThreadInWorktree}
-          className="-ml-1 inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md px-1 py-0.5 text-muted-foreground transition-colors hover:bg-state-hover hover:text-foreground"
-        >
-          <Icon name="MessageSquarePlus" className="size-4" />
-        </button>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <button
+              type="button"
+              aria-label="Create new thread in this worktree"
+              onClick={onCreateNewThreadInWorktree}
+              className="-ml-1 inline-flex cursor-pointer shrink-0 items-center justify-center rounded-md px-1 py-0.5 text-muted-foreground transition-colors hover:bg-state-hover hover:text-foreground"
+            >
+              <Icon name="MessageSquarePlus" className="size-4" />
+            </button>
+          </TooltipTrigger>
+          <TooltipContent>Create new thread in this worktree</TooltipContent>
+        </Tooltip>
       ) : null}
     </div>
   );

apps/app/src/components/secondary-panel/ThreadMetadataContent.test.tsx

@@ -1,10 +1,11 @@
 // @vitest-environment jsdom
 
-import { fireEvent, render, screen } from "@testing-library/react";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { MemoryRouter } from "react-router-dom";
 import type { Environment, Thread } from "@bb/domain";
-import { describe, expect, it, vi } from "vitest";
+import { TooltipProvider } from "@bb/shared-ui/tooltip";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { EnvironmentRow, ParentSelectorRow } from "./ThreadMetadataContent";
 import { parentThreads } from "./ThreadMetadataContent.fixtures";
 
@@ -61,23 +62,51 @@ function makeEnvironment(overrides: Partial<Environment> = {}): Environment {
 
 function renderEnvironmentRow(environment: Environment): string {
   return renderToStaticMarkup(
-    <MemoryRouter>
-      <EnvironmentRow
-        thread={makeThread({ environmentId: environment.id })}
-        environment={environment}
-        environmentDisplayHost={localHost}
-      />
-    </MemoryRouter>,
+    <TooltipProvider>
+      <MemoryRouter>
+        <EnvironmentRow
+          thread={makeThread({ environmentId: environment.id })}
+          environment={environment}
+          environmentDisplayHost={localHost}
+        />
+      </MemoryRouter>
+    </TooltipProvider>,
   );
 }
 
+afterEach(cleanup);
+
 describe("EnvironmentRow", () => {
   it("shows the create-thread action for a provisioned worktree", () => {
     expect(renderEnvironmentRow(makeEnvironment())).toContain(
       'aria-label="Create new thread in this worktree"',
     );
   });
 
+  it("explains the create-thread action in a tooltip", async () => {
+    render(
+      <TooltipProvider delayDuration={0}>
+        <MemoryRouter>
+          <EnvironmentRow
+            thread={makeThread()}
+            environment={makeEnvironment()}
+            environmentDisplayHost={localHost}
+          />
+        </MemoryRouter>
+      </TooltipProvider>,
+    );
+
+    fireEvent.focus(
+      screen.getByRole("button", {
+        name: "Create new thread in this worktree",
+      }),
+    );
+
+    expect((await screen.findByRole("tooltip")).textContent).toBe(
+      "Create new thread in this worktree",
+    );
+  });
+
   it("hides the create-thread action while a managed worktree is provisioning", () => {
     const markup = renderEnvironmentRow(
       makeEnvironment({

apps/app/src/components/secondary-panel/ThreadMetadataContent.tsx

@@ -44,6 +44,11 @@ import {
   DropdownMenuTrigger,
 } from "@bb/shared-ui/dropdown-menu";
 import { Icon } from "@bb/shared-ui/icon";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@bb/shared-ui/tooltip";
 import {
   BranchPicker,
   getMergeBaseBranchCandidateGroups,
@@ -338,14 +343,19 @@ export function EnvironmentRow({
           </span>
         ) : null}
         {showCreateThreadButton ? (
-          <button
-            type="button"
-            aria-label="Create new thread in this worktree"
-            onClick={createThreadInWorktree}
-            className="inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-state-hover hover:text-foreground"
-          >
-            <Icon name="MessageSquarePlus" className="size-4" />
-          </button>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                type="button"
+                aria-label="Create new thread in this worktree"
+                onClick={createThreadInWorktree}
+                className="inline-flex shrink-0 items-center justify-center rounded-md p-0.5 text-muted-foreground transition-colors hover:bg-state-hover hover:text-foreground"
+              >
+                <Icon name="MessageSquarePlus" className="size-4" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>Create new thread in this worktree</TooltipContent>
+          </Tooltip>
         ) : null}
       </span>
     </DetailRow>