feat(playground-ui): remove CombinedButtons in favor of ButtonsGroup (#16035)

## Summary

- Replace both `CombinedButtons` callers — observability
(`trace-timeline-tools.tsx`) and experiment
(`experiment-trace-timeline-tools.tsx`) trace timeline span-type filters
— with `ButtonsGroup spacing="close"`.
- Delete `packages/playground-ui/src/ds/components/CombinedButtons/` and
remove the export from the package index.

### Why

`CombinedButtons` and `ButtonsGroup` were near-duplicate primitives. The
segmented look from `CombinedButtons` is achievable with `ButtonsGroup
spacing="close"`, just with per-button borders + 2px gap rather than a
single outer shell with internal dividers. Consolidating to one
primitive removes API drift.

### Migration

```tsx
// Before
<CombinedButtons>
  <Button>Agent</Button>
  <Button>Model</Button>
</CombinedButtons>

// After
<ButtonsGroup spacing="close">
  <Button>Agent</Button>
  <Button>Model</Button>
</ButtonsGroup>
```

## Test plan

- [ ] Visit `/agents/<id>/traces?traceId=<id>` → trace timeline filter
(Agent / Model / etc.) renders as segmented cluster, click toggles fade,
X resets
- [ ] Visit `/experiments/<id>` → click a result row → trace panel
timeline filter behaves identically
- [ ] `pnpm exec tsc --noEmit` clean in `packages/playground` and
`packages/playground-ui`
- [ ] No remaining `CombinedButtons` references in repo (grep)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## ELI5

This PR removes a duplicate button component called `CombinedButtons`
that did the same thing as an existing `ButtonsGroup` component. Instead
of having two similar ways to display a group of buttons, the code now
uses `ButtonsGroup` everywhere, making the codebase simpler and less
confusing.

## Summary

Consolidates two near-duplicate button grouping primitives by removing
the `CombinedButtons` component in favor of using `ButtonsGroup` with
`spacing="close"` to achieve the same segmented button layout.

### Changes Made

**Component Removal:**
- Deleted `packages/playground-ui/src/ds/components/CombinedButtons/`
directory, including:
- `combined-buttons.tsx` (component implementation with
`CombinedButtonsProps` interface)
- `combined-buttons.stories.tsx` (Storybook stories: Default,
ThreeButtons, WithIcons, IconOnly, SplitButton)
  - `index.ts` (barrel export)
- Removed `CombinedButtons` export from
`packages/playground-ui/src/index.ts`

**Migration:**
-
`packages/playground/src/domains/experiments/components/experiment-trace-timeline-tools.tsx`:
Replaced `<CombinedButtons>` wrapper with `<ButtonsGroup
spacing="close">`
-
`packages/playground/src/domains/observability/components/trace-timeline-tools.tsx`:
Replaced `<CombinedButtons>` wrapper with `<ButtonsGroup
spacing="close">`

**Documentation:**
- Added `.changeset/wise-ties-try.md` documenting the minor version bump
and breaking change removal, including before/after migration examples

### Impact

- Both affected components (trace timeline tools in observability and
experiments domains) now use the consolidated `ButtonsGroup` API with
`spacing="close"` to render segmented button clusters
- No functional or visual changes to end-user behavior; the segmented
appearance and interaction patterns remain identical
- API surface reduced by removing duplicate component

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: damien-schneider

.changeset/wise-ties-try.md

@@ -0,0 +1,19 @@
+---
+'@mastra/playground-ui': minor
+---
+
+Removed the `CombinedButtons` component. Use `ButtonsGroup` with `spacing="close"` for the same segmented-style cluster of toggle buttons.
+
+```tsx
+// Before
+<CombinedButtons>
+  <Button>Agent</Button>
+  <Button>Model</Button>
+</CombinedButtons>
+
+// After
+<ButtonsGroup spacing="close">
+  <Button>Agent</Button>
+  <Button>Model</Button>
+</ButtonsGroup>
+```

packages/playground-ui/src/ds/components/CombinedButtons/combined-buttons.stories.tsx

@@ -61,7 +61,6 @@ export * from './ds/components/MainHeader';
 export * from './ds/components/Sections';
 
 // DS Components - Migrated Complex Elements
-export * from './ds/components/CombinedButtons';
 export * from './ds/components/DateTimePicker';
 export * from './ds/components/EntryList';
 export * from './ds/components/FormFields';

packages/playground-ui/src/ds/components/CombinedButtons/combined-buttons.tsx

@@ -1,5 +1,5 @@
 import type { LightSpanRecord } from '@mastra/core/storage';
-import { Button, CombinedButtons, SearchFieldBlock, Icon } from '@mastra/playground-ui';
+import { Button, ButtonsGroup, SearchFieldBlock, Icon } from '@mastra/playground-ui';
 import { XIcon, CircleDashedIcon } from 'lucide-react';
 import { Fragment, useEffect, useState } from 'react';
 import { useThrottledCallback } from 'use-debounce';
@@ -66,7 +66,7 @@ export function ExperimentTraceTimelineTools({
           onReset={() => setLocalSearchPhrase('')}
         />
       </div>
-      <CombinedButtons>
+      <ButtonsGroup spacing="close">
         {usedSpanTypes.map(item => {
           const spanUI = getExperimentSpanTypeUi(item);
           const isFaded = fadedTypes?.includes(item);
@@ -100,7 +100,7 @@ export function ExperimentTraceTimelineTools({
             <XIcon />
           </Icon>
         </Button>
-      </CombinedButtons>
+      </ButtonsGroup>
     </div>
   );
 }

packages/playground-ui/src/ds/components/CombinedButtons/index.ts

@@ -1,5 +1,5 @@
 import type { LightSpanRecord } from '@mastra/core/storage';
-import { Button, CombinedButtons, SearchFieldBlock, Icon } from '@mastra/playground-ui';
+import { Button, ButtonsGroup, SearchFieldBlock, Icon } from '@mastra/playground-ui';
 import { XIcon, CircleDashedIcon } from 'lucide-react';
 import { Fragment, useEffect, useState } from 'react';
 import { useThrottledCallback } from 'use-debounce';
@@ -66,7 +66,7 @@ export function TraceTimelineTools({
           onReset={() => setLocalSearchPhrase('')}
         />
       </div>
-      <CombinedButtons>
+      <ButtonsGroup spacing="close">
         {usedSpanTypes.map(item => {
           const spanUI = getSpanTypeUi(item);
           const isFaded = fadedTypes?.includes(item);
@@ -101,7 +101,7 @@ export function TraceTimelineTools({
             <XIcon />
           </Icon>
         </Button>
-      </CombinedButtons>
+      </ButtonsGroup>
     </div>
   );
 }