feat: allow switching between tool selection modes in dashboard (#839)

- Adds a section to the MCP details page that allows for switching
between the various tool selection modes
- Bonus: changes the toolset page tabs to use fragments so the tabs can
be navigated to
<img width="1648" height="520" alt="CleanShot 2025-11-12 at 11 13 54@2x"
src="https://github.com/user-attachments/assets/608aafdf-f634-4849-b421-e65899b969e1"
/>

Author: chase-crumbaugh

.speakeasy/out.openapi.yaml

@@ -6538,6 +6538,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -6615,6 +6622,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: addExternalOAuthServer toolsets
       tags:
@@ -6644,6 +6653,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -6715,6 +6731,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: checkMCPSlugAvailability toolsets
       tags:
@@ -6815,6 +6833,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Authorization: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: cloneToolset toolsets
       tags:
@@ -6834,6 +6854,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -6911,6 +6938,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: createToolset toolsets
       tags:
@@ -6940,6 +6969,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -7007,6 +7043,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: deleteToolset toolsets
       tags:
@@ -7036,6 +7074,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -7107,6 +7152,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: getToolset toolsets
       tags:
@@ -7126,6 +7173,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -7197,6 +7251,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: listToolsets toolsets
       tags:
@@ -7226,6 +7282,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -7297,6 +7360,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: removeOAuthServer toolsets
       tags:
@@ -7326,6 +7391,13 @@ paths:
           schema:
             description: Session header
             type: string
+        - allowEmptyValue: true
+          description: API Key header
+          in: header
+          name: Gram-Key
+          schema:
+            description: API Key header
+            type: string
         - allowEmptyValue: true
           description: project header
           in: header
@@ -7403,6 +7475,8 @@ paths:
       security:
         - project_slug_header_Gram-Project: []
           session_header_Gram-Session: []
+        - apikey_header_Gram-Key: []
+          project_slug_header_Gram-Project: []
         - {}
       summary: updateToolset toolsets
       tags:
@@ -11256,6 +11330,9 @@ components:
           description: A short url-friendly label that uniquely identifies a resource.
           pattern: ^[a-z0-9_-]{1,128}$
           maxLength: 40
+        tool_selection_mode:
+          type: string
+          description: The mode to use for tool selection
         tool_urns:
           type: array
           items:
@@ -11266,6 +11343,10 @@ components:
           items:
             $ref: '#/components/schemas/Tool'
           description: The tools in this toolset
+        toolset_version:
+          type: integer
+          description: The version of the toolset (will be 0 if none exists)
+          format: int64
         updated_at:
           type: string
           description: When the toolset was last updated.
@@ -11278,6 +11359,8 @@ components:
         - name
         - slug
         - tools
+        - tool_selection_mode
+        - toolset_version
         - prompt_templates
         - tool_urns
         - resources
@@ -11360,6 +11443,9 @@ components:
           description: A short url-friendly label that uniquely identifies a resource.
           pattern: ^[a-z0-9_-]{1,128}$
           maxLength: 40
+        tool_selection_mode:
+          type: string
+          description: The mode to use for tool selection
         tool_urns:
           type: array
           items:
@@ -11381,6 +11467,7 @@ components:
         - name
         - slug
         - tools
+        - tool_selection_mode
         - prompt_templates
         - tool_urns
         - resources
@@ -11584,6 +11671,9 @@ components:
           description: A short url-friendly label that uniquely identifies a resource.
           pattern: ^[a-z0-9_-]{1,128}$
           maxLength: 40
+        tool_selection_mode:
+          type: string
+          description: The mode to use for tool selection
         tool_urns:
           type: array
           items:
@@ -11629,6 +11719,9 @@ components:
           items:
             type: string
           description: List of resource URNs to include in the toolset
+        tool_selection_mode:
+          type: string
+          description: The mode to use for tool selection
         tool_urns:
           type: array
           items:
@@ -11817,6 +11910,11 @@ components:
         - projects
         - scopes
   securitySchemes:
+    apikey_header_Authorization:
+      type: apiKey
+      description: key based auth.
+      name: Authorization
+      in: header
     apikey_header_Gram-Key:
       type: apiKey
       description: key based auth.

.speakeasy/workflow.lock

@@ -1,4 +1,4 @@
-speakeasyVersion: 1.650.0
+speakeasyVersion: 1.641.1
 sources:
     Gram-Internal:
         sourceNamespace: gram-api-description
@@ -13,8 +13,6 @@ targets:
         sourceNamespace: gram-api-description
         sourceRevisionDigest: sha256:2158f3c904977ad3bfaa18264fe75ca2be862f30a0cba535203c5db9d45c8465
         sourceBlobDigest: sha256:ba3c32ef977c109649e6cb42f48a38f8276ede046a478fe0b80ebe351c0a1d29
-        codeSamplesNamespace: gram-api-description-typescript-code-samples
-        codeSamplesRevisionDigest: sha256:0c50c19b4abbba32277e64138c18bae85150930922bd62a7c7ea03458de1723c
 workflow:
     workflowVersion: 1.0.0
     speakeasyVersion: pinned

client/dashboard/src/components/ui/big-toggle.tsx

@@ -0,0 +1,88 @@
+import { Button, cn, Icon, IconName, Stack } from "@speakeasy-api/moonshine";
+import { Type } from "./type";
+
+export interface BigToggleOption {
+  value: string;
+  icon?: IconName;
+  label: string;
+  description?: string;
+}
+
+export const BigToggle = ({
+  options,
+  selectedValue,
+  onSelect,
+  align = "center",
+}: {
+  options: BigToggleOption[];
+  selectedValue: string;
+  onSelect: (value: string) => void;
+  align?: "center" | "start" | "end";
+}) => {
+  const classes = {
+    both: "px-2 py-1 rounded-sm border-1 w-full",
+    active: "border-border bg-card text-foreground",
+    inactive:
+      "border-transparent text-muted-foreground hover:bg-card hover:cursor-pointer hover:border-border hover:text-foreground",
+    activeText: "text-foreground!",
+    inactiveText: "text-muted-foreground! italic",
+    align: {
+      center: "justify-center",
+      start: "justify-start",
+      end: "justify-end",
+    },
+  };
+
+  const toggle = (
+    <Stack gap={1} className="border rounded-md p-1 w-fit bg-background">
+      {options.map((option) => {
+        const isActive = selectedValue === option.value;
+        return (
+          <Button
+            key={option.value}
+            variant="tertiary"
+            size="sm"
+            className={cn(
+              classes.align[align],
+              classes.both,
+              isActive ? classes.active : classes.inactive,
+            )}
+            {...(!isActive ? { onClick: () => onSelect(option.value) } : {})}
+          >
+            {option.icon && (
+              <Button.LeftIcon>
+                <Icon name={option.icon} className="h-4 w-4" />
+              </Button.LeftIcon>
+            )}
+            <Button.Text>{option.label}</Button.Text>
+          </Button>
+        );
+      })}
+    </Stack>
+  );
+
+  return (
+    <Stack direction="horizontal" align="center" gap={3} className="mt-2">
+      {toggle}
+      {options.some((o) => o.description) && (
+        <Stack className="gap-4.5">
+          {options.map((option) =>
+            option.description ? (
+              <Type
+                key={option.value}
+                small
+                className={cn(
+                  selectedValue === option.value
+                    ? classes.activeText
+                    : classes.inactiveText,
+                )}
+              >
+                {option.description}
+              </Type>
+            ) : null,
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};