refactor(playground): remove duplicate Chat button from agent header (#12365)

Removes the redundant Chat button from the agent header since users can
already navigate to chat through the agent combobox dropdown.

Also cleaned up the unused `agentName` prop that was only being passed
for this button.

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: mfrachet

packages/playground/src/domains/agents/agent-header.tsx

@@ -14,7 +14,7 @@ import {
   AgentCombobox,
 } from '@mastra/playground-ui';
 
-export function AgentHeader({ agentName, agentId }: { agentName: string; agentId: string }) {
+export function AgentHeader({ agentId }: { agentId: string }) {
   return (
     <Header>
       <Breadcrumb>
@@ -30,10 +30,6 @@ export function AgentHeader({ agentName, agentId }: { agentName: string; agentId
       </Breadcrumb>
 
       <HeaderGroup>
-        <Button as={Link} to={`/agents/${agentId}/chat`}>
-          Chat
-        </Button>
-
         <DividerIcon />
 
         <Button as={Link} to={`/observability?entity=${agentId}`}>

packages/playground/src/domains/agents/agent-layout.tsx

@@ -1,22 +1,15 @@
 import { useParams } from 'react-router';
 
 import { AgentHeader } from './agent-header';
-import { HeaderTitle, Header, MainContentLayout, useAgent, Skeleton } from '@mastra/playground-ui';
+import { MainContentLayout } from '@mastra/playground-ui';
 
 export const AgentLayout = ({ children }: { children: React.ReactNode }) => {
   const { agentId } = useParams();
-  const { data: agent, isLoading: isAgentLoading } = useAgent(agentId!);
+
   return (
     <MainContentLayout>
-      {isAgentLoading ? (
-        <Header>
-          <HeaderTitle>
-            <Skeleton className="h-6 w-[200px]" />
-          </HeaderTitle>
-        </Header>
-      ) : (
-        <AgentHeader agentName={agent?.name!} agentId={agentId!} />
-      )}
+      <AgentHeader agentId={agentId!} />
+
       {children}
     </MainContentLayout>
   );