feat: production-ready deployment with multi-language UI

- Add multi-language support (NL, AR, EN) with RTL
- Improve health checks (SSL-tolerant, multi-endpoint)
- Add DELETE /api/stack/:name for cleanup
- Add persistent storage (portal-ai-workspace-{name})
- Improve rollback (delete domain, app, project)
- Increase SSE timeout to 255s
- Add deployment strategy documentation

src/frontend/app.js

@@ -1,3 +1,188 @@
+const translations = {
+    en: {
+        title: 'AI Stack Deployer',
+        subtitle: 'Deploy your personal OpenCode AI coding assistant in seconds',
+        chooseStackName: 'Choose Your Stack Name',
+        availableAt: 'Your AI assistant will be available at',
+        stackName: 'Stack Name',
+        placeholder: 'e.g., john-dev',
+        inputHint: '3-20 characters, lowercase letters, numbers, and hyphens only',
+        deployBtn: 'Deploy My AI Stack',
+        deploying: 'Deploying Your Stack',
+        stack: 'Stack',
+        initializing: 'Initializing deployment...',
+        successMessage: 'Your AI coding assistant is ready to use',
+        stackNameLabel: 'Stack Name:',
+        openStack: 'Open My AI Stack',
+        deployAnother: 'Deploy Another Stack',
+        tryAgain: 'Try Again',
+        poweredBy: 'Powered by',
+        deploymentComplete: 'Deployment Complete',
+        deploymentFailed: 'Deployment Failed',
+        nameRequired: 'Name is required',
+        nameLengthError: 'Name must be between 3 and 20 characters',
+        nameCharsError: 'Only lowercase letters, numbers, and hyphens allowed',
+        nameHyphenError: 'Cannot start or end with a hyphen',
+        nameReserved: 'This name is reserved',
+        checkingAvailability: 'Checking availability...',
+        nameAvailable: '✓ Name is available!',
+        nameNotAvailable: 'Name is not available',
+        checkFailed: 'Failed to check availability',
+        connectionLost: 'Connection lost. Please refresh and try again.',
+        deployingText: 'Deploying...'
+    },
+    nl: {
+        title: 'AI Stack Deployer',
+        subtitle: 'Implementeer je persoonlijke OpenCode AI programmeerassistent in seconden',
+        chooseStackName: 'Kies Je Stack Naam',
+        availableAt: 'Je AI-assistent is beschikbaar op',
+        stackName: 'Stack Naam',
+        placeholder: 'bijv., jan-dev',
+        inputHint: '3-20 tekens, kleine letters, cijfers en koppeltekens',
+        deployBtn: 'Implementeer Mijn AI Stack',
+        deploying: 'Stack Wordt Geïmplementeerd',
+        stack: 'Stack',
+        initializing: 'Implementatie initialiseren...',
+        successMessage: 'Je AI programmeerassistent is klaar voor gebruik',
+        stackNameLabel: 'Stack Naam:',
+        openStack: 'Open Mijn AI Stack',
+        deployAnother: 'Implementeer Nog Een Stack',
+        tryAgain: 'Probeer Opnieuw',
+        poweredBy: 'Mogelijk gemaakt door',
+        deploymentComplete: 'Implementatie Voltooid',
+        deploymentFailed: 'Implementatie Mislukt',
+        nameRequired: 'Naam is verplicht',
+        nameLengthError: 'Naam moet tussen 3 en 20 tekens zijn',
+        nameCharsError: 'Alleen kleine letters, cijfers en koppeltekens toegestaan',
+        nameHyphenError: 'Kan niet beginnen of eindigen met een koppelteken',
+        nameReserved: 'Deze naam is gereserveerd',
+        checkingAvailability: 'Beschikbaarheid controleren...',
+        nameAvailable: '✓ Naam is beschikbaar!',
+        nameNotAvailable: 'Naam is niet beschikbaar',
+        checkFailed: 'Controle mislukt',
+        connectionLost: 'Verbinding verbroken. Ververs de pagina en probeer opnieuw.',
+        deployingText: 'Implementeren...'
+    },
+    ar: {
+        title: 'AI Stack Deployer',
+        subtitle: 'انشر مساعد البرمجة الذكي الخاص بك في ثوانٍ',
+        chooseStackName: 'اختر اسم المشروع',
+        availableAt: 'سيكون مساعدك الذكي متاحًا على',
+        stackName: 'اسم المشروع',
+        placeholder: 'مثال: أحمد-dev',
+        inputHint: '3-20 حرف، أحرف صغيرة وأرقام وشرطات فقط',
+        deployBtn: 'انشر مشروعي',
+        deploying: 'جاري النشر',
+        stack: 'المشروع',
+        initializing: 'جاري التهيئة...',
+        successMessage: 'مساعد البرمجة الذكي جاهز للاستخدام',
+        stackNameLabel: 'اسم المشروع:',
+        openStack: 'افتح مشروعي',
+        deployAnother: 'انشر مشروع آخر',
+        tryAgain: 'حاول مرة أخرى',
+        poweredBy: 'مدعوم من',
+        deploymentComplete: 'تم النشر بنجاح',
+        deploymentFailed: 'فشل النشر',
+        nameRequired: 'الاسم مطلوب',
+        nameLengthError: 'يجب أن يكون الاسم بين 3 و 20 حرفًا',
+        nameCharsError: 'يُسمح فقط بالأحرف الصغيرة والأرقام والشرطات',
+        nameHyphenError: 'لا يمكن أن يبدأ أو ينتهي بشرطة',
+        nameReserved: 'هذا الاسم محجوز',
+        checkingAvailability: 'جاري التحقق...',
+        nameAvailable: '✓ الاسم متاح!',
+        nameNotAvailable: 'الاسم غير متاح',
+        checkFailed: 'فشل التحقق',
+        connectionLost: 'انقطع الاتصال. يرجى تحديث الصفحة والمحاولة مرة أخرى.',
+        deployingText: 'جاري النشر...'
+    }
+};
+
+let currentLang = 'en';
+
+function detectLanguage() {
+    const browserLang = navigator.language || navigator.userLanguage;
+    const lang = browserLang.split('-')[0].toLowerCase();
+    
+    if (translations[lang]) {
+        return lang;
+    }
+    return 'en';
+}
+
+function t(key) {
+    return translations[currentLang][key] || translations['en'][key] || key;
+}
+
+function setLanguage(lang) {
+    if (!translations[lang]) return;
+    
+    currentLang = lang;
+    localStorage.setItem('preferredLanguage', lang);
+    
+    document.documentElement.lang = lang;
+    document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
+    
+    document.querySelectorAll('[data-i18n]').forEach(el => {
+        const key = el.getAttribute('data-i18n');
+        el.textContent = t(key);
+    });
+    
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+        const key = el.getAttribute('data-i18n-placeholder');
+        el.placeholder = t(key);
+    });
+    
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.classList.remove('active');
+        if (btn.getAttribute('data-lang') === lang) {
+            btn.classList.add('active');
+        }
+    });
+    
+    const typewriterTarget = document.getElementById('typewriter-target');
+    if (typewriterTarget && currentState === STATE.FORM) {
+        typewriter(typewriterTarget, t('chooseStackName'));
+    }
+}
+
+function initLanguage() {
+    const saved = localStorage.getItem('preferredLanguage');
+    const lang = saved || detectLanguage();
+    setLanguage(lang);
+    
+    document.querySelectorAll('.lang-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            setLanguage(btn.getAttribute('data-lang'));
+        });
+    });
+}
+
+function typewriter(element, text, speed = 50) {
+    let i = 0;
+    element.innerHTML = '';
+    
+    const cursor = document.createElement('span');
+    cursor.className = 'typing-cursor';
+    
+    const existingCursor = element.parentNode.querySelector('.typing-cursor');
+    if (existingCursor) {
+        existingCursor.remove();
+    }
+    
+    element.parentNode.insertBefore(cursor, element.nextSibling);
+
+    function type() {
+        if (i < text.length) {
+            element.textContent += text.charAt(i);
+            i++;
+            setTimeout(type, speed);
+        } else {
+            
+        }
+    }
+    type();
+}
+
 // State Machine for Deployment
 const STATE = {
     FORM: 'form',
@@ -41,50 +226,60 @@ const tryAgainBtn = document.getElementById('try-again-btn');
 function setState(newState) {
     currentState = newState;
 
-    formState.style.display = 'none';
-    progressState.style.display = 'none';
-    successState.style.display = 'none';
-    errorState.style.display = 'none';
+    const states = [formState, progressState, successState, errorState];
+    
+    states.forEach(state => {
+        state.style.display = 'none';
+        state.classList.remove('fade-in');
+    });
 
+    let activeState;
     switch (newState) {
         case STATE.FORM:
-            formState.style.display = 'block';
+            activeState = formState;
             break;
         case STATE.PROGRESS:
-            progressState.style.display = 'block';
+            activeState = progressState;
             break;
         case STATE.SUCCESS:
-            successState.style.display = 'block';
+            activeState = successState;
             break;
         case STATE.ERROR:
-            errorState.style.display = 'block';
+            activeState = errorState;
             break;
     }
+
+    if (activeState) {
+        activeState.style.display = 'block';
+        // Add a slight delay to ensure the display property has taken effect before adding the class
+        setTimeout(() => {
+            activeState.classList.add('fade-in');
+        }, 10);
+    }
 }
 
-// Name Validation
 function validateName(name) {
     if (!name) {
-        return { valid: false, error: 'Name is required' };
+        return { valid: false, error: t('nameRequired') };
     }
 
     const trimmedName = name.trim().toLowerCase();
 
     if (trimmedName.length < 3 || trimmedName.length > 20) {
-        return { valid: false, error: 'Name must be between 3 and 20 characters' };
+        return { valid: false, error: t('nameLengthError') };
     }
 
     if (!/^[a-z0-9-]+$/.test(trimmedName)) {
-        return { valid: false, error: 'Only lowercase letters, numbers, and hyphens allowed' };
+        return { valid: false, error: t('nameCharsError') };
     }
 
     if (trimmedName.startsWith('-') || trimmedName.endsWith('-')) {
-        return { valid: false, error: 'Cannot start or end with a hyphen' };
+        return { valid: false, error: t('nameHyphenError') };
     }
 
     const reservedNames = ['admin', 'api', 'www', 'root', 'system', 'test', 'demo', 'portal'];
     if (reservedNames.includes(trimmedName)) {
-        return { valid: false, error: 'This name is reserved' };
+        return { valid: false, error: t('nameReserved') };
     }
 
     return { valid: true, name: trimmedName };
@@ -114,9 +309,8 @@ stackNameInput.addEventListener('input', (e) => {
         return;
     }
 
-    // Check availability with debounce
     stackNameInput.classList.remove('error', 'success');
-    validationMessage.textContent = 'Checking availability...';
+    validationMessage.textContent = t('checkingAvailability');
     validationMessage.className = 'validation-message';
 
     checkTimeout = setTimeout(async () => {
@@ -126,18 +320,18 @@ stackNameInput.addEventListener('input', (e) => {
 
             if (data.available && data.valid) {
                 stackNameInput.classList.add('success');
-                validationMessage.textContent = '✓ Name is available!';
+                validationMessage.textContent = t('nameAvailable');
                 validationMessage.className = 'validation-message success';
                 deployBtn.disabled = false;
             } else {
                 stackNameInput.classList.add('error');
-                validationMessage.textContent = data.error || 'Name is not available';
+                validationMessage.textContent = data.error || t('nameNotAvailable');
                 validationMessage.className = 'validation-message error';
                 deployBtn.disabled = true;
             }
         } catch (error) {
             console.error('Failed to check name availability:', error);
-            validationMessage.textContent = 'Failed to check availability';
+            validationMessage.textContent = t('checkFailed');
             validationMessage.className = 'validation-message error';
             deployBtn.disabled = true;
         }
@@ -154,7 +348,7 @@ deployForm.addEventListener('submit', async (e) => {
     }
 
     deployBtn.disabled = true;
-    deployBtn.innerHTML = '<span class="btn-text">Deploying...</span>';
+    deployBtn.innerHTML = `<span class="btn-text">${t('deployingText')}</span>`;
 
     try {
         const response = await fetch('/api/deploy', {
@@ -191,7 +385,7 @@ deployForm.addEventListener('submit', async (e) => {
         showError(error.message);
         deployBtn.disabled = false;
         deployBtn.innerHTML = `
-            <span class="btn-text">Deploy My AI Stack</span>
+            <span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
             <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
                 <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
             </svg>
@@ -222,7 +416,7 @@ function startProgressStream(deploymentId) {
 
     eventSource.onerror = () => {
         eventSource.close();
-        showError('Connection lost. Please refresh and try again.');
+        showError(t('connectionLost'));
     };
 }
 
@@ -243,12 +437,12 @@ function updateProgress(data) {
 
     // Add to log
     const logEntry = document.createElement('div');
+    logEntry.className = 'log-entry';
     logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${data.currentStep}`;
     progressLog.appendChild(logEntry);
     progressLog.scrollTop = progressLog.scrollHeight;
 }
 
-// Show Success
 function showSuccess(data) {
     successName.textContent = deployingName.textContent;
     successUrl.textContent = deploymentUrl;
@@ -256,15 +450,21 @@ function showSuccess(data) {
     openStackBtn.href = deploymentUrl;
 
     setState(STATE.SUCCESS);
+    const targetSpan = document.getElementById('success-title');
+    if(targetSpan) {
+        typewriter(targetSpan, t('deploymentComplete'));
+    }
 }
 
-// Show Error
 function showError(message) {
     errorMessage.textContent = message;
     setState(STATE.ERROR);
+    const targetSpan = document.getElementById('error-title');
+    if(targetSpan) {
+        typewriter(targetSpan, t('deploymentFailed'), 30);
+    }
 }
 
-// Reset to Form
 function resetToForm() {
     deploymentId = null;
     deploymentUrl = null;
@@ -279,19 +479,29 @@ function resetToForm() {
 
     deployBtn.disabled = false;
     deployBtn.innerHTML = `
-        <span class="btn-text">Deploy My AI Stack</span>
+        <span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</span>
         <svg class="btn-icon" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
         </svg>
     `;
 
     setState(STATE.FORM);
+    const targetSpan = document.getElementById('typewriter-target');
+    if(targetSpan) {
+        typewriter(targetSpan, t('chooseStackName'));
+    }
 }
 
 // Event Listeners
 deployAnotherBtn.addEventListener('click', resetToForm);
 tryAgainBtn.addEventListener('click', resetToForm);
 
-// Initialize
-setState(STATE.FORM);
-console.log('AI Stack Deployer initialized');
+document.addEventListener('DOMContentLoaded', () => {
+    initLanguage();
+    setState(STATE.FORM);
+    const targetSpan = document.getElementById('typewriter-target');
+    if(targetSpan) {
+        typewriter(targetSpan, t('chooseStackName'));
+    }
+    console.log('AI Stack Deployer initialized');
+});