feat: add OAuth support for external MCP servers in the Playground

.changeset/brown-guests-clean.md

@@ -0,0 +1,7 @@
+---
+"dashboard": patch
+"@gram/client": patch
+"server": patch
+---
+
+feat: add OAuth support for external MCP servers in the Playground

client/dashboard/src/pages/playground/Playground.tsx

@@ -48,6 +48,7 @@ export default function Playground() {
 function PlaygroundInner() {
   const [searchParams] = useSearchParams();
   const chat = useChatContext();
+  const routes = useRoutes();
 
   const [selectedToolset, setSelectedToolset] = useState<string | null>(
     searchParams.get("toolset") ?? null,
@@ -63,6 +64,9 @@ function PlaygroundInner() {
     Record<string, string>
   >({});
 
+  const { data: toolsetsData } = useListToolsets();
+  const toolsets = toolsetsData?.toolsets;
+
   // We use a ref so that we can hot-swap the toolset and environment without causing a re-render
   const chatConfigRef = useRef({
     toolsetSlug: selectedToolset,
@@ -83,6 +87,22 @@ function PlaygroundInner() {
     environmentSlug: selectedEnvironment ?? "",
   });
 
+  // If toolsets have loaded and there are none, show full-page empty state
+  if (toolsets !== undefined && toolsets.length === 0) {
+    return (
+      <Page>
+        <Page.Header>
+          <Page.Header.Breadcrumbs fullWidth />
+        </Page.Header>
+        <Page.Body>
+          <div className="h-full flex m-8">
+            <ToolsetsEmptyState onCreateToolset={() => routes.mcp.goTo()} />
+          </div>
+        </Page.Body>
+      </Page>
+    );
+  }
+
   const logsButton = (
     <Button size="sm" variant="ghost" onClick={() => setShowLogs(!showLogs)}>
       <ScrollTextIcon className="size-4 mr-2" />