fix: improve quota error handling and ttyd password refresh

- Show clear error message when machine type quota is exhausted
- Auto-suggest alternative machine type when quota error occurs
- Add machine type selector when resuming stopped environment
- Auto-refresh environment data to get ttyd password after startup
- Add refresh button in web terminal for manual password refresh
- Show loading state when password is not yet available

Author: tea-artist

src/components/environment-panel.tsx

@@ -28,7 +28,6 @@ import {
   RefreshCw,
   CircleCheck,
   CircleX,
-  Terminal,
 } from "lucide-react";
 import { WebTerminal, WebTerminalButton } from "./web-terminal";
 
@@ -128,32 +127,66 @@ export function EnvironmentPanel({
     }
   }, [environment, checkServiceStatus]);
 
-  // Auto-check service status when environment is running
+  // Refresh environments list (also fetches individual environment for latest metadata)
+  const refreshEnvironments = useCallback(async () => {
+    try {
+      // First, get the full list
+      const listResponse = await fetch("/api/environment");
+      const listData = await listResponse.json();
+      
+      if (listData.environments) {
+        // For each running environment, fetch its individual data to get latest metadata
+        // (instancesClient.list may not have the most recent metadata like ttyd-password)
+        const updatedEnvironments = await Promise.all(
+          listData.environments.map(async (env: DevEnvironment) => {
+            if (env.status === "RUNNING" && !env.ttydPassword) {
+              // Fetch individual environment to get latest metadata
+              try {
+                const envResponse = await fetch(`/api/environment?instanceId=${encodeURIComponent(env.instanceId)}`);
+                const envData = await envResponse.json();
+                if (envData.environment) {
+                  return envData.environment;
+                }
+              } catch {
+                // Fall back to list data
+              }
+            }
+            return env;
+          })
+        );
+        setEnvironments(updatedEnvironments);
+      }
+    } catch (err) {
+      console.error("Error refreshing environments:", err);
+    }
+  }, []);
+
+  // Auto-check service status and refresh environment data when running
   useEffect(() => {
     if (environment?.status === "RUNNING" && environment.externalIp) {
+      // Initial checks
       checkServiceStatus(environment.instanceId);
 
-      // Poll every 30 seconds
+      // If no password yet, refresh environment data to get it
+      // (ttyd password is set by startup script which takes a few seconds)
+      if (!environment.ttydPassword) {
+        const passwordPollInterval = setInterval(async () => {
+          await refreshEnvironments();
+        }, 5000); // Check every 5 seconds for password
+        
+        // Stop polling after 60 seconds (startup script should be done by then)
+        setTimeout(() => clearInterval(passwordPollInterval), 60000);
+      }
+      
+      // Poll service status every 30 seconds
       const interval = setInterval(() => {
         checkServiceStatus(environment.instanceId);
+        refreshEnvironments(); // Also refresh environment data
       }, 30000);
 
       return () => clearInterval(interval);
     }
-  }, [environment?.status, environment?.externalIp, environment?.instanceId, checkServiceStatus]);
-
-  // Refresh environments list
-  const refreshEnvironments = useCallback(async () => {
-    try {
-      const response = await fetch("/api/environment");
-      const data = await response.json();
-      if (data.environments) {
-        setEnvironments(data.environments);
-      }
-    } catch (err) {
-      console.error("Error refreshing environments:", err);
-    }
-  }, []);
+  }, [environment?.status, environment?.externalIp, environment?.instanceId, environment?.ttydPassword, checkServiceStatus, refreshEnvironments]);
 
   // Poll for environment status until target state is reached
   const pollUntilStatus = useCallback(async (
@@ -217,7 +250,30 @@ export function EnvironmentPanel({
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || "Failed to create environment");
+        const errorMsg = data.error || "Failed to create environment";
+        
+        // Check if this is a quota exhausted error
+        if (errorMsg.startsWith("QUOTA_EXHAUSTED:")) {
+          // Parse the error: QUOTA_EXHAUSTED:machineType:message
+          const parts = errorMsg.split(":");
+          const exhaustedMachineType = parts[1];
+          const userMessage = parts.slice(2).join(":");
+          
+          // Find alternative machine types
+          const currentIndex = MACHINE_CONFIGS.findIndex(c => c.machineType === exhaustedMachineType);
+          const alternatives = MACHINE_CONFIGS.filter((_, i) => i !== currentIndex);
+          
+          if (alternatives.length > 0) {
+            // Suggest the next available machine type
+            const nextConfig = alternatives[0];
+            setSelectedMachineType(nextConfig.machineType);
+            setShowMachineSelector(true); // Open the selector so user can see options
+          }
+          
+          throw new Error(userMessage);
+        }
+        
+        throw new Error(errorMsg);
       }
 
       // Initial environment created, now poll until RUNNING
@@ -508,7 +564,17 @@ export function EnvironmentPanel({
 
         {error && (
           <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm max-w-md mx-auto">
-            {error}
+            <div className="flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="font-medium">{error}</p>
+                {error.includes("unavailable") && (
+                  <p className="mt-2 text-slate-400">
+                    👆 Please select a different machine type above and try again.
+                  </p>
+                )}
+              </div>
+            </div>
           </div>
         )}
 
@@ -679,51 +745,68 @@ echo "✓ Ready! You can now click 'Open in Cursor/VS Code'"`;
         </p>
 
         {error && (
-          <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm">
-            {error}
+          <div className="mb-6 p-4 rounded-xl bg-red-500/10 border border-red-500/20 text-red-400 text-sm max-w-md mx-auto">
+            <div className="flex items-start gap-3">
+              <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
+              <div>
+                <p className="font-medium">{error}</p>
+                {error.includes("unavailable") && (
+                  <p className="mt-2 text-slate-400">
+                    The selected machine type is out of capacity. Please try again later or contact support.
+                  </p>
+                )}
+              </div>
+            </div>
           </div>
         )}
 
         {showNewInstanceForm ? (
           newInstanceFormJSX
         ) : (
-          <div className="flex items-center justify-center gap-4">
-            <button
-              onClick={() => createEnvironment(environment.instanceId)}
-              disabled={isCreating || isDeleting}
-              className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-cyan-500 text-white font-semibold text-lg hover:from-emerald-400 hover:to-cyan-400 transition-all hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
-            >
-              {isCreating ? (
-                <>
-                  <Loader2 className="w-6 h-6 animate-spin" />
-                  Resuming...
-                </>
-              ) : (
-                <>
-                  <Play className="w-6 h-6" />
-                  Resume Environment
-                </>
-              )}
-            </button>
+          <>
+            {/* Machine type selector for resume - useful when quota is exhausted */}
+            <div className="max-w-md mx-auto mb-6">
+              {machineTypeSelectorJSX}
+            </div>
 
-            <button
-              onClick={deleteEnvironment}
-              disabled={isCreating || isDeleting}
-              className="inline-flex items-center gap-3 px-6 py-4 rounded-2xl bg-red-500/10 text-red-400 font-semibold hover:bg-red-500/20 transition-all disabled:opacity-50"
-            >
-              {isDeleting ? (
-                <>
-                  <Loader2 className="w-5 h-5 animate-spin" />
-                  Resetting...
-                </>
-              ) : (
-                <>
-                  <RotateCcw className="w-5 h-5" />
-                  Reset
-                </>
-              )}
-            </button>
-          </div>
+            <div className="flex items-center justify-center gap-4">
+              <button
+                onClick={() => createEnvironment(environment.instanceId)}
+                disabled={isCreating || isDeleting}
+                className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-gradient-to-r from-emerald-500 to-cyan-500 text-white font-semibold text-lg hover:from-emerald-400 hover:to-cyan-400 transition-all hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+              >
+                {isCreating ? (
+                  <>
+                    <Loader2 className="w-6 h-6 animate-spin" />
+                    Resuming...
+                  </>
+                ) : (
+                  <>
+                    <Play className="w-6 h-6" />
+                    Resume Environment
+                  </>
+                )}
+              </button>
+
+              <button
+                onClick={deleteEnvironment}
+                disabled={isCreating || isDeleting}
+                className="inline-flex items-center gap-3 px-6 py-4 rounded-2xl bg-red-500/10 text-red-400 font-semibold hover:bg-red-500/20 transition-all disabled:opacity-50"
+              >
+                {isDeleting ? (
+                  <>
+                    <Loader2 className="w-5 h-5 animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  <>
+                    <RotateCcw className="w-5 h-5" />
+                    Reset
+                  </>
+                )}
+              </button>
+            </div>
+          </>
         )}
 
         <p className="mt-6 text-sm text-slate-500">
@@ -885,6 +968,8 @@ echo "✓ SSH configured for all Teable dev environments"`;
           ttydPassword={environment.ttydPassword}
           instanceId={environment.instanceId}
           onClose={() => setShowWebTerminal(false)}
+          onRefresh={refreshEnvironments}
+          isRefreshing={isCheckingServices}
         />
       )}
 

src/components/web-terminal.tsx

@@ -8,20 +8,26 @@ import {
   Check,
   Key,
   Globe,
+  RefreshCw,
+  AlertCircle,
 } from "lucide-react"
 
 interface WebTerminalProps {
   externalIp: string
   ttydPassword: string | null
   instanceId: string
   onClose?: () => void
+  onRefresh?: () => void
+  isRefreshing?: boolean
 }
 
 export function WebTerminal({
   externalIp,
   ttydPassword,
   instanceId,
   onClose,
+  onRefresh,
+  isRefreshing,
 }: WebTerminalProps) {
   const [copied, setCopied] = useState<string | null>(null)
 
@@ -112,10 +118,35 @@ export function WebTerminal({
 
         {/* Credentials Section */}
         <div className="bg-slate-800/50 rounded-xl p-4 space-y-3">
-          <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
-            <Key className="w-4 h-4" />
-            Login Credentials (if prompted)
-          </h4>
+          <div className="flex items-center justify-between">
+            <h4 className="text-sm font-medium text-slate-300 flex items-center gap-2">
+              <Key className="w-4 h-4" />
+              Login Credentials (if prompted)
+            </h4>
+            {onRefresh && (
+              <button
+                onClick={onRefresh}
+                disabled={isRefreshing}
+                className="flex items-center gap-1.5 px-2 py-1 rounded-lg text-xs text-slate-400 hover:text-white hover:bg-slate-700 transition-colors disabled:opacity-50"
+              >
+                <RefreshCw className={`w-3 h-3 ${isRefreshing ? 'animate-spin' : ''}`} />
+                {isRefreshing ? 'Refreshing...' : 'Refresh'}
+              </button>
+            )}
+          </div>
+          
+          {/* No password warning */}
+          {!ttydPassword && (
+            <div className="flex items-start gap-2 p-3 rounded-lg bg-amber-500/10 border border-amber-500/20">
+              <AlertCircle className="w-4 h-4 text-amber-400 flex-shrink-0 mt-0.5" />
+              <div className="text-sm text-amber-400">
+                <p className="font-medium">Password not ready yet</p>
+                <p className="text-amber-400/70 mt-1">
+                  The startup script is still initializing. Click &quot;Refresh&quot; to check again, or wait a moment.
+                </p>
+              </div>
+            </div>
+          )}
 
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
             {/* Username */}
@@ -137,11 +168,11 @@ export function WebTerminal({
             </div>
 
             {/* Password */}
-            <div className="flex items-center justify-between bg-slate-900 rounded-lg px-3 py-2">
+            <div className={`flex items-center justify-between bg-slate-900 rounded-lg px-3 py-2 ${!ttydPassword ? 'border border-amber-500/30' : ''}`}>
               <div>
                 <div className="text-xs text-slate-500">Password</div>
-                <div className="text-white font-mono">
-                  {ttydPassword || "(no password)"}
+                <div className={`font-mono ${ttydPassword ? 'text-white' : 'text-amber-400'}`}>
+                  {ttydPassword || "(loading...)"}
                 </div>
               </div>
               {ttydPassword && (

src/lib/gcp.ts

@@ -243,6 +243,7 @@ export async function createDevEnvironment(
 
   // Try each machine type in order until one succeeds
   let lastError: Error | null = null;
+  let quotaExhaustedMachineType: string | null = null;
 
   for (const config of configsToTry) {
     console.log(`Trying to create instance with ${config.machineType}...`);
@@ -354,8 +355,10 @@ export async function createDevEnvironment(
 
       // Check if it's a quota error - try next machine type
       if (errorMessage.includes("Quota") || errorMessage.includes("quota") || 
-          errorMessage.includes("CPUS_PER_VM_FAMILY") || errorMessage.includes("exceeded")) {
-        console.log(`Quota exceeded for ${config.machineType}, trying next option...`);
+          errorMessage.includes("CPUS_PER_VM_FAMILY") || errorMessage.includes("exceeded") ||
+          errorMessage.includes("ZONE_RESOURCE_POOL_EXHAUSTED") || errorMessage.includes("does not have enough resources")) {
+        console.log(`Quota/resource exhausted for ${config.machineType}, trying next option...`);
+        quotaExhaustedMachineType = config.machineType;
         lastError = error as Error;
         continue;
       }
@@ -365,8 +368,20 @@ export async function createDevEnvironment(
     }
   }
 
-  // All machine types failed
-  throw lastError || new Error("Failed to create environment: all machine types exhausted");
+  // All machine types failed - provide a clear error message
+  if (quotaExhaustedMachineType) {
+    // If user specified a machine type and it's exhausted
+    if (requestedMachineType) {
+      const config = MACHINE_CONFIGS.find(c => c.machineType === requestedMachineType);
+      const displayName = config?.displayName || requestedMachineType;
+      throw new Error(`QUOTA_EXHAUSTED:${requestedMachineType}:Machine type "${displayName}" is currently unavailable (quota exhausted). Please select a different machine type.`);
+    } else {
+      // All automatic fallback options exhausted
+      throw new Error("All machine types are currently unavailable. Please try again later or contact support.");
+    }
+  }
+  
+  throw lastError || new Error("Failed to create environment: unknown error");
 }
 
 export async function getDevEnvironment(