feat: select all option for tool management (#825)

- Adds the option to select/deselect all tools in a group when managing
tool
- Cleans up the UI in the project menu
<img width="2462" height="1098" alt="CleanShot 2025-11-11 at 14 50
37@2x"
src="https://github.com/user-attachments/assets/0607839d-2d65-413b-b6e4-a1668a1c6093"
/>

<img width="2518" height="1272" alt="CleanShot 2025-11-11 at 14 50
42@2x"
src="https://github.com/user-attachments/assets/d368902f-07f2-46c1-ab11-6d8139e8d606"
/>

<img width="470" height="464" alt="CleanShot 2025-11-11 at 14 26 14@2x"
src="https://github.com/user-attachments/assets/919bbaf4-7b82-4216-859f-b251b8732b2b"
/>

Author: chase-crumbaugh

.changeset/cold-items-smoke.md

@@ -0,0 +1,5 @@
+---
+"dashboard": patch
+---
+
+Adds the option to select/deselect all during tool management, for example when adding tools to a toolset

client/dashboard/src/components/nav-menu.tsx

@@ -5,9 +5,9 @@ import {
 } from "@/components/ui/sidebar";
 import { cn } from "@/lib/utils";
 import { AppRoute } from "@/routes";
-import { Type } from "./ui/type";
 import React from "react";
 import { ProductTierBadge } from "./product-tier-badge";
+import { Type } from "./ui/type";
 
 export function NavMenu({
   items,

client/dashboard/src/components/project-menu.tsx

@@ -8,7 +8,7 @@ import { useSdkClient } from "@/contexts/Sdk.tsx";
 import { cn } from "@/lib/utils.ts";
 import { ProjectEntry } from "@gram/client/models/components";
 import { Icon, Stack } from "@speakeasy-api/moonshine";
-import { ChevronsUpDown, MessageCircle, PlusIcon } from "lucide-react";
+import { ChevronsUpDown, PlusIcon } from "lucide-react";
 import React from "react";
 import { InputDialog } from "./input-dialog.tsx";
 import { NavButton } from "./nav-menu.tsx";
@@ -206,19 +206,31 @@ export function ProjectMenu() {
             <NavButton
               title="Manage members"
               href={membershipURL}
-              Icon={() => <Icon name="users-round" />}
+              Icon={(props) => (
+                <Icon
+                  name="users-round"
+                  {...props}
+                  className={cn(props.className, "mr-1")} // Needed to match the styling of the log out button
+                />
+              )}
               onClick={() => setOpen(false)}
             />
           </SimpleTooltip>
           <NavButton
             title="Contact us"
             href="https://calendly.com/d/crtj-3tk-wpd/demo-with-speakeasy"
-            Icon={() => <MessageCircle className="h-4 w-4" />}
+            Icon={(props) => (
+              <Icon
+                name="message-circle"
+                {...props}
+                className={cn(props.className, "mr-1")} // Needed to match the styling of the log out button
+              />
+            )}
             onClick={() => setOpen(false)}
           />
           <NavButton
             title="Log out"
-            Icon={() => <Icon name="log-out" />}
+            Icon={(props) => <Icon name="log-out" {...props} />}
             onClick={async () => {
               await client.auth.logout();
               window.location.href = "/login";

client/dashboard/src/components/tool-list/ToolList.tsx

@@ -19,6 +19,7 @@ import {
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { ToolVariationBadge } from "../tool-variation-badge";
+import { SimpleTooltip } from "../ui/tooltip";
 import { Type } from "../ui/type";
 import { MethodBadge } from "./MethodBadge";
 import { SubtoolsBadge } from "./SubtoolsBadge";
@@ -442,37 +443,73 @@ function ToolGroupHeader({
   isExpanded,
   onToggle,
   isFirstGroup = false,
+  allSelected,
+  onSelectAll,
 }: {
   group: ToolGroup;
   isExpanded: boolean;
   onToggle: () => void;
   isFirstGroup?: boolean;
+  allSelected: boolean;
+  onSelectAll: () => void;
 }) {
   const Icon = getIcon(group.icon);
 
   return (
-    <button
-      onClick={onToggle}
-      aria-expanded={isExpanded}
-      aria-label={`${isExpanded ? "Collapse" : "Expand"} ${group.title} group`}
+    <div
       className={cn(
-        "bg-surface-secondary-default flex items-center justify-between pl-4 pr-3 py-4 w-full hover:bg-active transition-colors",
+        "group/header bg-surface-secondary-default flex items-center justify-between pl-4 pr-3 py-4 w-full",
         isExpanded && "border-b border-neutral-softest",
         !isFirstGroup && "border-t border-neutral-softest",
       )}
     >
-      <div className="flex gap-4 items-center">
-        <Icon className="size-4 shrink-0" strokeWidth={1.5} />
+      <button
+        onClick={onToggle}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? "Collapse" : "Expand"} ${group.title} group`}
+        className="flex gap-4 items-center hover:opacity-70 transition-opacity"
+      >
+        <div className="relative size-4 shrink-0">
+          <Icon
+            className={cn(
+              "size-4 absolute inset-0 transition-opacity",
+              "group-hover/header:opacity-0",
+            )}
+            strokeWidth={1.5}
+          />
+          <SimpleTooltip
+            tooltip={`${allSelected ? "Deselect" : "Select"} ${group.tools.length} tools`}
+          >
+            <Checkbox
+              checked={allSelected}
+              onCheckedChange={onSelectAll}
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+              className={cn(
+                "absolute inset-0 transition-opacity opacity-0",
+                "group-hover/header:opacity-100",
+              )}
+            />
+          </SimpleTooltip>
+        </div>
         <p className="text-sm leading-6 text-foreground">{group.title}</p>
-      </div>
-      <ChevronDown
-        className={cn(
-          "size-4 transition-transform",
-          isExpanded ? "rotate-180" : "rotate-0",
-        )}
-        strokeWidth={1.5}
-      />
-    </button>
+      </button>
+      <button
+        onClick={onToggle}
+        aria-expanded={isExpanded}
+        aria-label={`${isExpanded ? "Collapse" : "Expand"} ${group.title} group`}
+        className="hover:opacity-70 transition-opacity"
+      >
+        <ChevronDown
+          className={cn(
+            "size-4 transition-transform",
+            isExpanded ? "rotate-180" : "rotate-0",
+          )}
+          strokeWidth={1.5}
+        />
+      </button>
+    </div>
   );
 }
 
@@ -741,6 +778,39 @@ export function ToolList({
     setSelectedForRemoval(new Set());
   };
 
+  const handleSelectAllInGroup = (group: ToolGroup) => {
+    const groupToolIds = group.tools.map(getToolIdentifier);
+    const currentSelection =
+      selectionMode === "add" ? selectedSet : selectedForRemoval;
+    const allSelected = groupToolIds.every((id) => currentSelection.has(id));
+
+    if (selectionMode === "add" && onSelectionChange) {
+      // For selection mode, update parent state
+      const next = new Set(selectedUrns);
+      if (allSelected) {
+        // Deselect all in group
+        groupToolIds.forEach((id) => next.delete(id));
+      } else {
+        // Select all in group
+        groupToolIds.forEach((id) => next.add(id));
+      }
+      onSelectionChange(Array.from(next));
+    } else {
+      // For normal mode, update local state
+      setSelectedForRemoval((prev) => {
+        const next = new Set(prev);
+        if (allSelected) {
+          // Deselect all in group
+          groupToolIds.forEach((id) => next.delete(id));
+        } else {
+          // Select all in group
+          groupToolIds.forEach((id) => next.add(id));
+        }
+        return next;
+      });
+    }
+  };
+
   return (
     <div className="relative w-full">
       <div
@@ -749,52 +819,66 @@ export function ToolList({
           className,
         )}
       >
-        {groups.map((group, index) => (
-          <div key={`${group.type}-${group.title}-${index}`} className="w-full">
-            <ToolGroupHeader
-              group={group}
-              isExpanded={expandedGroups.has(index)}
-              onToggle={() => toggleGroup(index)}
-              isFirstGroup={index === 0}
-            />
-            {expandedGroups.has(index) && (
-              <div className="w-full">
-                {group.tools.map((tool) => {
-                  const toolId = getToolIdentifier(tool);
-                  const toolIndex = toolIndexMap.get(toolId) ?? -1;
-
-                  return (
-                    <ToolRow
-                      key={tool.canonicalName}
-                      groupName={group.title}
-                      availableToolUrns={toolset?.tools
-                        ?.map((t) => t.toolUrn)
-                        .concat(selectionMode === "add" ? selectedUrns : [])
-                        .filter((urn) => !selectedForRemoval.has(urn))}
-                      tool={tool}
-                      onUpdate={(updates) => onToolUpdate?.(tool, updates)}
-                      isSelected={
-                        selectionMode === "add"
-                          ? selectedSet.has(toolId)
-                          : selectedForRemoval.has(toolId)
-                      }
-                      isFocused={toolIndex === focusedToolIndex}
-                      onCheckboxChange={(checked) =>
-                        handleCheckboxChange(toolId, checked)
-                      }
-                      onTestInPlayground={onTestInPlayground}
-                      onRemove={
-                        selectionMode !== "add" && onToolsRemove
-                          ? () => onToolsRemove([toolId])
-                          : undefined
-                      }
-                    />
-                  );
-                })}
-              </div>
-            )}
-          </div>
-        ))}
+        {groups.map((group, index) => {
+          const groupToolIds = group.tools.map(getToolIdentifier);
+          const currentSelection =
+            selectionMode === "add" ? selectedSet : selectedForRemoval;
+          const allSelected = groupToolIds.every((id) =>
+            currentSelection.has(id),
+          );
+
+          return (
+            <div
+              key={`${group.type}-${group.title}-${index}`}
+              className="w-full"
+            >
+              <ToolGroupHeader
+                group={group}
+                isExpanded={expandedGroups.has(index)}
+                onToggle={() => toggleGroup(index)}
+                isFirstGroup={index === 0}
+                allSelected={allSelected}
+                onSelectAll={() => handleSelectAllInGroup(group)}
+              />
+              {expandedGroups.has(index) && (
+                <div className="w-full">
+                  {group.tools.map((tool) => {
+                    const toolId = getToolIdentifier(tool);
+                    const toolIndex = toolIndexMap.get(toolId) ?? -1;
+
+                    return (
+                      <ToolRow
+                        key={tool.canonicalName}
+                        groupName={group.title}
+                        availableToolUrns={toolset?.tools
+                          ?.map((t) => t.toolUrn)
+                          .concat(selectionMode === "add" ? selectedUrns : [])
+                          .filter((urn) => !selectedForRemoval.has(urn))}
+                        tool={tool}
+                        onUpdate={(updates) => onToolUpdate?.(tool, updates)}
+                        isSelected={
+                          selectionMode === "add"
+                            ? selectedSet.has(toolId)
+                            : selectedForRemoval.has(toolId)
+                        }
+                        isFocused={toolIndex === focusedToolIndex}
+                        onCheckboxChange={(checked) =>
+                          handleCheckboxChange(toolId, checked)
+                        }
+                        onTestInPlayground={onTestInPlayground}
+                        onRemove={
+                          selectionMode !== "add" && onToolsRemove
+                            ? () => onToolsRemove([toolId])
+                            : undefined
+                        }
+                      />
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          );
+        })}
       </div>
 
       {hasChanges && !selectionMode && (

client/dashboard/src/components/ui/sidebar.tsx

@@ -1,4 +1,3 @@
-import { Button, Icon } from "@speakeasy-api/moonshine";
 import { Input } from "@/components/ui/input";
 import { Link } from "@/components/ui/link";
 import { Separator } from "@/components/ui/separator";
@@ -18,6 +17,7 @@ import {
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
+import { Button, Icon } from "@speakeasy-api/moonshine";
 import { VariantProps, cva } from "class-variance-authority";
 import * as React from "react";
 
@@ -528,6 +528,7 @@ function SidebarMenuButton({
       )}
       {...(props.href && { to: props.href })}
       {...(props.href && props.href.startsWith("http") && { external: true })}
+      {...(props.href && { noIcon: true })}
       {...props}
     />
   );