include playground under biome check

biome.json

@@ -16,6 +16,7 @@
       "openai-sdk/**",
       "packages/**",
       "guides/**",
+      "site/ai-playground/**",
       "!node_modules",
       "!**/node_modules",
       "!dist",
@@ -70,5 +71,10 @@
     "clientKind": "git",
     "enabled": false,
     "useIgnoreFile": false
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
   }
 }

site/ai-playground/src/app.tsx

@@ -210,7 +210,7 @@ const App = () => {
 
   // Scroll to bottom when messages change
   useEffect(() => {
-    if (messageElement.current) {
+    if (messageElement.current && messages.length > 0) {
       messageElement.current.scrollTop = messageElement.current.scrollHeight;
     }
   }, [messages]);

site/ai-playground/src/components/McpServers.tsx

@@ -121,7 +121,7 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
         setShowLocalhostWarning(true);
         return;
       }
-    } catch (err) {
+    } catch (_err) {
       // Invalid URL, let the server handle it
     }
 
@@ -261,22 +261,6 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
     );
   };
 
-  // Get overall status for the header
-  const getOverallStatus = () => {
-    if (mcpState.servers.length === 0) return "not-connected";
-    if (mcpState.servers.some((s) => s.state === "ready")) return "ready";
-    if (mcpState.servers.some((s) => s.state === "authenticating"))
-      return "authenticating";
-    if (
-      mcpState.servers.some(
-        (s) => s.state === "connecting" || s.state === "discovering"
-      )
-    )
-      return "connecting";
-    if (mcpState.servers.some((s) => s.state === "failed")) return "failed";
-    return "not-connected";
-  };
-
   return (
     <section className="rounded-lg bg-white p-4">
       <div className="flex align-middle">
@@ -448,7 +432,10 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
           {showAuth && (
             <div className="absolute z-10 mt-2 w-full bg-white border border-gray-200 rounded-md shadow-lg p-3 space-y-3">
               <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
+                <label
+                  htmlFor="header-name"
+                  className="block text-xs font-medium text-gray-700 mb-1"
+                >
                   Header Name
                 </label>
                 <input
@@ -464,7 +451,10 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
                 />
               </div>
               <div>
-                <label className="block text-xs font-medium text-gray-700 mb-1">
+                <label
+                  htmlFor="bearer-value"
+                  className="block text-xs font-medium text-gray-700 mb-1"
+                >
                   Bearer Value
                 </label>
                 <div className="relative">
@@ -538,7 +528,7 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
                 </div>
                 <button
                   type="button"
-                  className="ml-2 px-2 py-1 text-xs bg-red-100 hover:bg-red-200 text-red-700 rounded-md transition-colors flex-shrink-0"
+                  className="ml-2 px-2 py-1 text-xs bg-red-100 hover:bg-red-200 text-red-700 rounded-md transition-colors shrink-0"
                   onClick={() => handleDisconnect(server.id)}
                   disabled={disconnectingServerId === server.id}
                 >
@@ -670,7 +660,7 @@ export function McpServers({ agent, mcpState, mcpLogs }: McpServersProps) {
                         </div>
                         {tool.description && (
                           <svg
-                            className={`w-3 h-3 text-gray-500 flex-shrink-0 ml-2 transform transition-transform ${
+                            className={`w-3 h-3 text-gray-500 shrink-0 ml-2 transform transition-transform ${
                               isExpanded ? "rotate-180" : ""
                             }`}
                             fill="none"

site/ai-playground/src/components/ShellCommand.tsx

@@ -17,6 +17,7 @@ const ShellCommand = ({
   };
 
   return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: it's fine
     <div
       className="relative group"
       onMouseEnter={() => setIsHovered(true)}

site/ai-playground/src/components/UnifiedModelSelector.tsx

@@ -370,7 +370,11 @@ const UnifiedModelSelector = ({
         <div className="relative">
           <div className="mb-1">
             <div className="flex justify-between items-center mb-1">
-              <label {...getLabelProps()} className="font-semibold text-sm">
+              <label
+                htmlFor="model"
+                {...getLabelProps()}
+                className="font-semibold text-sm"
+              >
                 Model
               </label>
               <div className="flex space-x-1 min-h-[26px]">
@@ -481,7 +485,12 @@ const UnifiedModelSelector = ({
         /* External Provider Models Selector */
         <div className="space-y-3">
           <div>
-            <label className="text-xs text-gray-600 block mb-1">Provider</label>
+            <label
+              htmlFor="provider"
+              className="text-xs text-gray-600 block mb-1"
+            >
+              Provider
+            </label>
             <select
               value={externalProvider}
               onChange={(e) =>
@@ -497,7 +506,9 @@ const UnifiedModelSelector = ({
           </div>
 
           <div>
-            <label className="text-xs text-gray-600 block mb-1">Model</label>
+            <label htmlFor="model" className="text-xs text-gray-600 block mb-1">
+              Model
+            </label>
             <div className="bg-white border border-gray-200 rounded-md p-2 max-h-40 overflow-y-auto">
               {externalModels.map((model) => (
                 <button
@@ -527,7 +538,10 @@ const UnifiedModelSelector = ({
 
           {/* Authentication Method */}
           <div>
-            <label className="text-xs text-gray-600 block mb-2">
+            <label
+              htmlFor="authentication"
+              className="text-xs text-gray-600 block mb-2"
+            >
               Authentication
             </label>
             <div className="flex gap-2 mb-3">
@@ -557,7 +571,10 @@ const UnifiedModelSelector = ({
 
             {authMethod === "provider-key" ? (
               <div>
-                <label className="text-xs text-gray-600 block mb-1">
+                <label
+                  htmlFor="provider-api-key"
+                  className="text-xs text-gray-600 block mb-1"
+                >
                   {externalProvider === "openai"
                     ? "OpenAI"
                     : externalProvider === "anthropic"
@@ -592,7 +609,10 @@ const UnifiedModelSelector = ({
             ) : (
               <div className="space-y-3">
                 <div>
-                  <label className="text-xs text-gray-600 block mb-1">
+                  <label
+                    htmlFor="account-id"
+                    className="text-xs text-gray-600 block mb-1"
+                  >
                     Account ID <span className="text-red-500">*</span>
                   </label>
                   <input
@@ -609,7 +629,10 @@ const UnifiedModelSelector = ({
                 </div>
 
                 <div>
-                  <label className="text-xs text-gray-600 block mb-1">
+                  <label
+                    htmlFor="gateway-id"
+                    className="text-xs text-gray-600 block mb-1"
+                  >
                     Gateway ID <span className="text-red-500">*</span>
                   </label>
                   <input
@@ -626,7 +649,10 @@ const UnifiedModelSelector = ({
                 </div>
 
                 <div>
-                  <label className="text-xs text-gray-600 block mb-1">
+                  <label
+                    htmlFor="cloudflare-api-key"
+                    className="text-xs text-gray-600 block mb-1"
+                  >
                     Cloudflare API Key <span className="text-red-500">*</span>
                   </label>
                   <div className="relative">

site/ai-playground/src/server.ts

@@ -108,7 +108,7 @@ export class Playground extends AIChatAgent<Env, PlaygroundState> {
         const cleanedMessages = cleanupMessages(this.messages);
 
         // Determine which model provider to use
-        let modelProvider;
+        let modelProvider: LanguageModel;
 
         if (
           this.state.useExternalProvider &&
@@ -134,7 +134,7 @@ export class Playground extends AIChatAgent<Env, PlaygroundState> {
               apiKey: this.state.gatewayApiKey
             });
 
-            let baseModel;
+            let baseModel: LanguageModel;
             if (this.state.externalProvider === "openai") {
               const openai = createOpenAIGateway(); // No API key for unified billing
               baseModel = openai.chat(modelName);