oussamadouhou/ai-stack-deployer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

your-mom

Browse Source
This commit is contained in:
Oussama Douhou
2026-01-10 13:28:14 +01:00
parent 2f4722acd0
commit f2cb76b65d
1 changed files with 376 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

752
src/frontend/app.js
View File

@@ -1,213 +1,213 @@
const translations = { const translations = {
en: { en: {
title: 'AI Stack Deployer', title: 'AI Stack Deployer',
subtitle: 'Deploy your personal OpenCode AI coding assistant in seconds', subtitle: 'Deploy your personal OpenCode AI coding assistant in seconds',
chooseStackName: 'Choose Your Stack Name', chooseStackName: 'Choose Your Stack Name',
availableAt: 'Your AI assistant will be available at', availableAt: 'Your AI assistant will be available at',
stackName: 'Stack Name', stackName: 'Stack Name',
placeholder: 'e.g., john-dev', placeholder: 'e.g., your-mom-is-fat-dev',
inputHint: '3-20 characters, lowercase letters, numbers, and hyphens only', inputHint: '3-20 characters, lowercase letters, numbers, and hyphens only',
deployBtn: 'Deploy My AI Stack', deployBtn: 'Deploy My AI Stack',
deploying: 'Deploying Your Stack', deploying: 'Deploying Your Stack',
stack: 'Stack', stack: 'Stack',
initializing: 'Initializing deployment...', initializing: 'Initializing deployment...',
successMessage: 'Your AI coding assistant is ready to use', successMessage: 'Your AI coding assistant is ready to use',
stackNameLabel: 'Stack Name:', stackNameLabel: 'Stack Name:',
openStack: 'Open My AI Stack', openStack: 'Open My AI Stack',
deployAnother: 'Deploy Another Stack', deployAnother: 'Deploy Another Stack',
tryAgain: 'Try Again', tryAgain: 'Try Again',
poweredBy: 'Powered by', poweredBy: 'Powered by',
deploymentComplete: 'Deployment Complete', deploymentComplete: 'Deployment Complete',
deploymentFailed: 'Deployment Failed', deploymentFailed: 'Deployment Failed',
nameRequired: 'Name is required', nameRequired: 'Name is required',
nameLengthError: 'Name must be between 3 and 20 characters', nameLengthError: 'Name must be between 3 and 20 characters',
nameCharsError: 'Only lowercase letters, numbers, and hyphens allowed', nameCharsError: 'Only lowercase letters, numbers, and hyphens allowed',
nameHyphenError: 'Cannot start or end with a hyphen', nameHyphenError: 'Cannot start or end with a hyphen',
nameReserved: 'This name is reserved', nameReserved: 'This name is reserved',
checkingAvailability: 'Checking availability...', checkingAvailability: 'Checking availability...',
nameAvailable: '✓ Name is available!', nameAvailable: '✓ Name is available!',
nameNotAvailable: 'Name is not available', nameNotAvailable: 'Name is not available',
checkFailed: 'Failed to check availability', checkFailed: 'Failed to check availability',
connectionLost: 'Connection lost. Please refresh and try again.', connectionLost: 'Connection lost. Please refresh and try again.',
deployingText: 'Deploying...', deployingText: 'Deploying...',
yournamePlaceholder: 'yourname' yournamePlaceholder: 'yourname'
}, },
nl: { nl: {
title: 'AI Stack Deployer', title: 'AI Stack Deployer',
subtitle: 'Implementeer je persoonlijke OpenCode AI programmeerassistent in seconden', subtitle: 'Implementeer je persoonlijke OpenCode AI programmeerassistent in seconden',
chooseStackName: 'Kies Je Stack Naam', chooseStackName: 'Kies Je Stack Naam',
availableAt: 'Je AI-assistent is beschikbaar op', availableAt: 'Je AI-assistent is beschikbaar op',
stackName: 'Stack Naam', stackName: 'Stack Naam',
placeholder: 'bijv., jan-dev', placeholder: 'bijv., je-moeder-is-dik-dev',
inputHint: '3-20 tekens, kleine letters, cijfers en koppeltekens', inputHint: '3-20 tekens, kleine letters, cijfers en koppeltekens',
deployBtn: 'Implementeer Mijn AI Stack', deployBtn: 'Implementeer Mijn AI Stack',
deploying: 'Stack Wordt Geïmplementeerd', deploying: 'Stack Wordt Geïmplementeerd',
stack: 'Stack', stack: 'Stack',
initializing: 'Implementatie initialiseren...', initializing: 'Implementatie initialiseren...',
successMessage: 'Je AI programmeerassistent is klaar voor gebruik', successMessage: 'Je AI programmeerassistent is klaar voor gebruik',
stackNameLabel: 'Stack Naam:', stackNameLabel: 'Stack Naam:',
openStack: 'Open Mijn AI Stack', openStack: 'Open Mijn AI Stack',
deployAnother: 'Implementeer Nog Een Stack', deployAnother: 'Implementeer Nog Een Stack',
tryAgain: 'Probeer Opnieuw', tryAgain: 'Probeer Opnieuw',
poweredBy: 'Mogelijk gemaakt door', poweredBy: 'Mogelijk gemaakt door',
deploymentComplete: 'Implementatie Voltooid', deploymentComplete: 'Implementatie Voltooid',
deploymentFailed: 'Implementatie Mislukt', deploymentFailed: 'Implementatie Mislukt',
nameRequired: 'Naam is verplicht', nameRequired: 'Naam is verplicht',
nameLengthError: 'Naam moet tussen 3 en 20 tekens zijn', nameLengthError: 'Naam moet tussen 3 en 20 tekens zijn',
nameCharsError: 'Alleen kleine letters, cijfers en koppeltekens toegestaan', nameCharsError: 'Alleen kleine letters, cijfers en koppeltekens toegestaan',
nameHyphenError: 'Kan niet beginnen of eindigen met een koppelteken', nameHyphenError: 'Kan niet beginnen of eindigen met een koppelteken',
nameReserved: 'Deze naam is gereserveerd', nameReserved: 'Deze naam is gereserveerd',
checkingAvailability: 'Beschikbaarheid controleren...', checkingAvailability: 'Beschikbaarheid controleren...',
nameAvailable: '✓ Naam is beschikbaar!', nameAvailable: '✓ Naam is beschikbaar!',
nameNotAvailable: 'Naam is niet beschikbaar', nameNotAvailable: 'Naam is niet beschikbaar',
checkFailed: 'Controle mislukt', checkFailed: 'Controle mislukt',
connectionLost: 'Verbinding verbroken. Ververs de pagina en probeer opnieuw.', connectionLost: 'Verbinding verbroken. Ververs de pagina en probeer opnieuw.',
deployingText: 'Implementeren...', deployingText: 'Implementeren...',
yournamePlaceholder: 'jouwnaam' yournamePlaceholder: 'jouwnaam'
}, },
ar: { ar: {
title: 'AI Stack Deployer', title: 'AI Stack Deployer',
subtitle: 'انشر مساعد البرمجة الذكي الخاص بك في ثوانٍ', subtitle: 'انشر مساعد البرمجة الذكي الخاص بك في ثوانٍ',
chooseStackName: 'اختر اسم المشروع', chooseStackName: 'اختر اسم المشروع',
availableAt: 'سيكون مساعدك الذكي متاحًا على', availableAt: 'سيكون مساعدك الذكي متاحًا على',
stackName: 'اسم المشروع', stackName: 'اسم المشروع',
placeholder: 'مثال: أحمد-dev', placeholder: 'مثال: أحمد-dev',
inputHint: '3-20 حرف، أحرف صغيرة وأرقام وشرطات فقط', inputHint: '3-20 حرف، أحرف صغيرة وأرقام وشرطات فقط',
deployBtn: 'انشر مشروعي', deployBtn: 'انشر مشروعي',
deploying: 'جاري النشر', deploying: 'جاري النشر',
stack: 'المشروع', stack: 'المشروع',
initializing: 'جاري التهيئة...', initializing: 'جاري التهيئة...',
successMessage: 'مساعد البرمجة الذكي جاهز للاستخدام', successMessage: 'مساعد البرمجة الذكي جاهز للاستخدام',
stackNameLabel: 'اسم المشروع:', stackNameLabel: 'اسم المشروع:',
openStack: 'افتح مشروعي', openStack: 'افتح مشروعي',
deployAnother: 'انشر مشروع آخر', deployAnother: 'انشر مشروع آخر',
tryAgain: 'حاول مرة أخرى', tryAgain: 'حاول مرة أخرى',
poweredBy: 'مدعوم من', poweredBy: 'مدعوم من',
deploymentComplete: 'تم النشر بنجاح', deploymentComplete: 'تم النشر بنجاح',
deploymentFailed: 'فشل النشر', deploymentFailed: 'فشل النشر',
nameRequired: 'الاسم مطلوب', nameRequired: 'الاسم مطلوب',
nameLengthError: 'يجب أن يكون الاسم بين 3 و 20 حرفًا', nameLengthError: 'يجب أن يكون الاسم بين 3 و 20 حرفًا',
nameCharsError: 'يُسمح فقط بالأحرف الصغيرة والأرقام والشرطات', nameCharsError: 'يُسمح فقط بالأحرف الصغيرة والأرقام والشرطات',
nameHyphenError: 'لا يمكن أن يبدأ أو ينتهي بشرطة', nameHyphenError: 'لا يمكن أن يبدأ أو ينتهي بشرطة',
nameReserved: 'هذا الاسم محجوز', nameReserved: 'هذا الاسم محجوز',
checkingAvailability: 'جاري التحقق...', checkingAvailability: 'جاري التحقق...',
nameAvailable: '✓ الاسم متاح!', nameAvailable: '✓ الاسم متاح!',
nameNotAvailable: 'الاسم غير متاح', nameNotAvailable: 'الاسم غير متاح',
checkFailed: 'فشل التحقق', checkFailed: 'فشل التحقق',
connectionLost: 'انقطع الاتصال. يرجى تحديث الصفحة والمحاولة مرة أخرى.', connectionLost: 'انقطع الاتصال. يرجى تحديث الصفحة والمحاولة مرة أخرى.',
deployingText: 'جاري النشر...', deployingText: 'جاري النشر...',
yournamePlaceholder: 'اسمك' yournamePlaceholder: 'اسمك'
} }
}; };
let currentLang = 'en'; let currentLang = 'en';
function detectLanguage() { function detectLanguage() {
const browserLang = navigator.language || navigator.userLanguage; const browserLang = navigator.language || navigator.userLanguage;
const lang = browserLang.split('-')[0].toLowerCase(); const lang = browserLang.split('-')[0].toLowerCase();
if (translations[lang]) { if (translations[lang]) {
return lang; return lang;
} }
return 'en'; return 'en';
} }
function t(key) { function t(key) {
return translations[currentLang][key] || translations['en'][key] || key; return translations[currentLang][key] || translations['en'][key] || key;
} }
function setLanguage(lang) { function setLanguage(lang) {
if (!translations[lang]) return; if (!translations[lang]) return;
currentLang = lang; currentLang = lang;
localStorage.setItem('preferredLanguage', lang); localStorage.setItem('preferredLanguage', lang);
document.documentElement.lang = lang; document.documentElement.lang = lang;
document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr'; document.documentElement.dir = lang === 'ar' ? 'rtl' : 'ltr';
document.querySelectorAll('[data-i18n]').forEach(el => { document.querySelectorAll('[data-i18n]').forEach(el => {
const key = el.getAttribute('data-i18n'); const key = el.getAttribute('data-i18n');
el.textContent = t(key); el.textContent = t(key);
}); });
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => { document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
const key = el.getAttribute('data-i18n-placeholder'); const key = el.getAttribute('data-i18n-placeholder');
el.placeholder = t(key); el.placeholder = t(key);
}); });
document.querySelectorAll('.lang-btn').forEach(btn => { document.querySelectorAll('.lang-btn').forEach(btn => {
btn.classList.remove('active'); btn.classList.remove('active');
if (btn.getAttribute('data-lang') === lang) { if (btn.getAttribute('data-lang') === lang) {
btn.classList.add('active'); btn.classList.add('active');
}
});
const previewNameEl = document.getElementById('preview-name');
if (previewNameEl && !stackNameInput?.value) {
previewNameEl.textContent = t('yournamePlaceholder');
}
const typewriterTarget = document.getElementById('typewriter-target');
if (typewriterTarget && currentState === STATE.FORM) {
typewriter(typewriterTarget, t('chooseStackName'));
} }
});
const previewNameEl = document.getElementById('preview-name');
if (previewNameEl && !stackNameInput?.value) {
previewNameEl.textContent = t('yournamePlaceholder');
}
const typewriterTarget = document.getElementById('typewriter-target');
if (typewriterTarget && currentState === STATE.FORM) {
typewriter(typewriterTarget, t('chooseStackName'));
}
} }
function initLanguage() { function initLanguage() {
const saved = localStorage.getItem('preferredLanguage'); const saved = localStorage.getItem('preferredLanguage');
const lang = saved || detectLanguage(); const lang = saved || detectLanguage();
setLanguage(lang); setLanguage(lang);
document.querySelectorAll('.lang-btn').forEach(btn => { document.querySelectorAll('.lang-btn').forEach(btn => {
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
setLanguage(btn.getAttribute('data-lang')); setLanguage(btn.getAttribute('data-lang'));
});
}); });
});
} }
// Track active typewriter instances to prevent race conditions // Track active typewriter instances to prevent race conditions
let activeTypewriters = new Map(); let activeTypewriters = new Map();
function typewriter(element, text, speed = 50) { function typewriter(element, text, speed = 50) {
// Cancel any existing typewriter on this element // Cancel any existing typewriter on this element
const elementId = element.id || 'default'; const elementId = element.id || 'default';
if (activeTypewriters.has(elementId)) { if (activeTypewriters.has(elementId)) {
clearTimeout(activeTypewriters.get(elementId)); clearTimeout(activeTypewriters.get(elementId));
activeTypewriters.delete(elementId); activeTypewriters.delete(elementId);
} }
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() { let i = 0;
if (i < text.length) { element.innerHTML = '';
element.textContent += text.charAt(i);
i++; const cursor = document.createElement('span');
const timeoutId = setTimeout(type, speed); cursor.className = 'typing-cursor';
activeTypewriters.set(elementId, timeoutId);
} else { const existingCursor = element.parentNode.querySelector('.typing-cursor');
activeTypewriters.delete(elementId); if (existingCursor) {
} existingCursor.remove();
}
element.parentNode.insertBefore(cursor, element.nextSibling);
function type() {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
const timeoutId = setTimeout(type, speed);
activeTypewriters.set(elementId, timeoutId);
} else {
activeTypewriters.delete(elementId);
} }
type(); }
type();
} }
// State Machine for Deployment // State Machine for Deployment
const STATE = { const STATE = {
FORM: 'form', FORM: 'form',
PROGRESS: 'progress', PROGRESS: 'progress',
SUCCESS: 'success', SUCCESS: 'success',
ERROR: 'error' ERROR: 'error'
}; };
let currentState = STATE.FORM; let currentState = STATE.FORM;
@@ -243,271 +243,271 @@ const tryAgainBtn = document.getElementById('try-again-btn');
// State Management // State Management
function setState(newState) { function setState(newState) {
currentState = newState; currentState = newState;
const states = [formState, progressState, successState, errorState]; const states = [formState, progressState, successState, errorState];
states.forEach(state => {
state.style.display = 'none';
state.classList.remove('fade-in');
});
let activeState; states.forEach(state => {
switch (newState) { state.style.display = 'none';
case STATE.FORM: state.classList.remove('fade-in');
activeState = formState; });
break;
case STATE.PROGRESS:
activeState = progressState;
break;
case STATE.SUCCESS:
activeState = successState;
break;
case STATE.ERROR:
activeState = errorState;
break;
}
if (activeState) { let activeState;
activeState.style.display = 'block'; switch (newState) {
// Add a slight delay to ensure the display property has taken effect before adding the class case STATE.FORM:
setTimeout(() => { activeState = formState;
activeState.classList.add('fade-in'); break;
}, 10); case STATE.PROGRESS:
} activeState = progressState;
break;
case STATE.SUCCESS:
activeState = successState;
break;
case STATE.ERROR:
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);
}
} }
function validateName(name) { function validateName(name) {
if (!name) { if (!name) {
return { valid: false, error: t('nameRequired') }; return { valid: false, error: t('nameRequired') };
} }
const trimmedName = name.trim().toLowerCase(); const trimmedName = name.trim().toLowerCase();
if (trimmedName.length < 3 || trimmedName.length > 20) { if (trimmedName.length < 3 || trimmedName.length > 20) {
return { valid: false, error: t('nameLengthError') }; return { valid: false, error: t('nameLengthError') };
} }
if (!/^[a-z0-9-]+$/.test(trimmedName)) { if (!/^[a-z0-9-]+$/.test(trimmedName)) {
return { valid: false, error: t('nameCharsError') }; return { valid: false, error: t('nameCharsError') };
} }
if (trimmedName.startsWith('-') || trimmedName.endsWith('-')) { if (trimmedName.startsWith('-') || trimmedName.endsWith('-')) {
return { valid: false, error: t('nameHyphenError') }; return { valid: false, error: t('nameHyphenError') };
} }
const reservedNames = ['admin', 'api', 'www', 'root', 'system', 'test', 'demo', 'portal']; const reservedNames = ['admin', 'api', 'www', 'root', 'system', 'test', 'demo', 'portal'];
if (reservedNames.includes(trimmedName)) { if (reservedNames.includes(trimmedName)) {
return { valid: false, error: t('nameReserved') }; return { valid: false, error: t('nameReserved') };
} }
return { valid: true, name: trimmedName }; return { valid: true, name: trimmedName };
} }
// Real-time Name Validation // Real-time Name Validation
let checkTimeout; let checkTimeout;
stackNameInput.addEventListener('input', (e) => { stackNameInput.addEventListener('input', (e) => {
const value = e.target.value.toLowerCase(); const value = e.target.value.toLowerCase();
e.target.value = value; e.target.value = value;
previewName.textContent = value || t('yournamePlaceholder'); previewName.textContent = value || t('yournamePlaceholder');
// Clear previous timeout // Clear previous timeout
clearTimeout(checkTimeout); clearTimeout(checkTimeout);
// Validate format first // Validate format first
const validation = validateName(value); const validation = validateName(value);
if (!validation.valid) { if (!validation.valid) {
stackNameInput.classList.remove('success'); stackNameInput.classList.remove('success');
stackNameInput.classList.add('error');
validationMessage.textContent = validation.error;
validationMessage.className = 'validation-message error';
deployBtn.disabled = true;
return;
}
stackNameInput.classList.remove('error', 'success');
validationMessage.textContent = t('checkingAvailability');
validationMessage.className = 'validation-message';
checkTimeout = setTimeout(async () => {
try {
const response = await fetch(`/api/check/${validation.name}`);
const data = await response.json();
if (data.available && data.valid) {
stackNameInput.classList.add('success');
validationMessage.textContent = t('nameAvailable');
validationMessage.className = 'validation-message success';
deployBtn.disabled = false;
} else {
stackNameInput.classList.add('error'); stackNameInput.classList.add('error');
validationMessage.textContent = validation.error; validationMessage.textContent = data.error || t('nameNotAvailable');
validationMessage.className = 'validation-message error'; validationMessage.className = 'validation-message error';
deployBtn.disabled = true; deployBtn.disabled = true;
return; }
} catch (error) {
console.error('Failed to check name availability:', error);
validationMessage.textContent = t('checkFailed');
validationMessage.className = 'validation-message error';
deployBtn.disabled = true;
} }
}, 500);
stackNameInput.classList.remove('error', 'success');
validationMessage.textContent = t('checkingAvailability');
validationMessage.className = 'validation-message';
checkTimeout = setTimeout(async () => {
try {
const response = await fetch(`/api/check/${validation.name}`);
const data = await response.json();
if (data.available && data.valid) {
stackNameInput.classList.add('success');
validationMessage.textContent = t('nameAvailable');
validationMessage.className = 'validation-message success';
deployBtn.disabled = false;
} else {
stackNameInput.classList.add('error');
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 = t('checkFailed');
validationMessage.className = 'validation-message error';
deployBtn.disabled = true;
}
}, 500);
}); });
// Form Submission // Form Submission
deployForm.addEventListener('submit', async (e) => { deployForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
const validation = validateName(stackNameInput.value); const validation = validateName(stackNameInput.value);
if (!validation.valid) { if (!validation.valid) {
return; return;
}
deployBtn.disabled = true;
deployBtn.innerHTML = `<span class="btn-text">${t('deployingText')}</span>`;
try {
const response = await fetch('/api/deploy', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: validation.name
})
});
const data = await response.json();
if (!response.ok || !data.success) {
throw new Error(data.error || 'Deployment failed');
} }
deployBtn.disabled = true; deploymentId = data.deploymentId;
deployBtn.innerHTML = `<span class="btn-text">${t('deployingText')}</span>`; deploymentUrl = data.url;
try { // Update progress UI
const response = await fetch('/api/deploy', { deployingName.textContent = validation.name;
method: 'POST', deployingUrl.textContent = deploymentUrl;
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: validation.name
})
});
const data = await response.json(); // Switch to progress state
setState(STATE.PROGRESS);
if (!response.ok || !data.success) { // Start SSE connection
throw new Error(data.error || 'Deployment failed'); startProgressStream(deploymentId);
}
deploymentId = data.deploymentId; } catch (error) {
deploymentUrl = data.url; console.error('Deployment error:', error);
showError(error.message);
// Update progress UI deployBtn.disabled = false;
deployingName.textContent = validation.name; deployBtn.innerHTML = `
deployingUrl.textContent = deploymentUrl;
// Switch to progress state
setState(STATE.PROGRESS);
// Start SSE connection
startProgressStream(deploymentId);
} catch (error) {
console.error('Deployment error:', error);
showError(error.message);
deployBtn.disabled = false;
deployBtn.innerHTML = `
<span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</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"> <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"/> <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg> </svg>
`; `;
} }
}); });
// SSE Progress Streaming // SSE Progress Streaming
function startProgressStream(deploymentId) { function startProgressStream(deploymentId) {
eventSource = new EventSource(`/api/status/${deploymentId}`); eventSource = new EventSource(`/api/status/${deploymentId}`);
eventSource.addEventListener('progress', (event) => { eventSource.addEventListener('progress', (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
updateProgress(data); updateProgress(data);
}); });
eventSource.addEventListener('complete', (event) => { eventSource.addEventListener('complete', (event) => {
const data = JSON.parse(event.data); const data = JSON.parse(event.data);
eventSource.close(); eventSource.close();
showSuccess(data); showSuccess(data);
}); });
eventSource.addEventListener('error', (event) => { eventSource.addEventListener('error', (event) => {
const data = event.data ? JSON.parse(event.data) : { message: 'Unknown error' }; const data = event.data ? JSON.parse(event.data) : { message: 'Unknown error' };
eventSource.close(); eventSource.close();
showError(data.message); showError(data.message);
}); });
eventSource.onerror = () => { eventSource.onerror = () => {
eventSource.close(); eventSource.close();
showError(t('connectionLost')); showError(t('connectionLost'));
}; };
} }
// Update Progress UI // Update Progress UI
function updateProgress(data) { function updateProgress(data) {
// Update progress bar // Update progress bar
progressBar.style.width = `${data.progress}%`; progressBar.style.width = `${data.progress}%`;
progressPercent.textContent = `${data.progress}%`; progressPercent.textContent = `${data.progress}%`;
// Update current step // Update current step
const stepContainer = document.querySelector('.progress-steps'); const stepContainer = document.querySelector('.progress-steps');
stepContainer.innerHTML = ` stepContainer.innerHTML = `
<div class="step active"> <div class="step active">
<div class="step-icon">⚙️</div> <div class="step-icon">⚙️</div>
<div class="step-text">${data.currentStep}</div> <div class="step-text">${data.currentStep}</div>
</div> </div>
`; `;
// Add to log // Add to log
const logEntry = document.createElement('div'); const logEntry = document.createElement('div');
logEntry.className = 'log-entry'; logEntry.className = 'log-entry';
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${data.currentStep}`; logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${data.currentStep}`;
progressLog.appendChild(logEntry); progressLog.appendChild(logEntry);
progressLog.scrollTop = progressLog.scrollHeight; progressLog.scrollTop = progressLog.scrollHeight;
} }
function showSuccess(data) { function showSuccess(data) {
successName.textContent = deployingName.textContent; successName.textContent = deployingName.textContent;
successUrl.textContent = deploymentUrl; successUrl.textContent = deploymentUrl;
successUrl.href = deploymentUrl; successUrl.href = deploymentUrl;
openStackBtn.href = deploymentUrl; openStackBtn.href = deploymentUrl;
setState(STATE.SUCCESS); setState(STATE.SUCCESS);
const targetSpan = document.getElementById('success-title'); const targetSpan = document.getElementById('success-title');
if(targetSpan) { if (targetSpan) {
typewriter(targetSpan, t('deploymentComplete')); typewriter(targetSpan, t('deploymentComplete'));
} }
} }
function showError(message) { function showError(message) {
errorMessage.textContent = message; errorMessage.textContent = message;
setState(STATE.ERROR); setState(STATE.ERROR);
const targetSpan = document.getElementById('error-title'); const targetSpan = document.getElementById('error-title');
if(targetSpan) { if (targetSpan) {
typewriter(targetSpan, t('deploymentFailed'), 30); typewriter(targetSpan, t('deploymentFailed'), 30);
} }
} }
function resetToForm() { function resetToForm() {
deploymentId = null; deploymentId = null;
deploymentUrl = null; deploymentUrl = null;
stackNameInput.value = ''; stackNameInput.value = '';
previewName.textContent = t('yournamePlaceholder'); previewName.textContent = t('yournamePlaceholder');
validationMessage.textContent = ''; validationMessage.textContent = '';
validationMessage.className = 'validation-message'; validationMessage.className = 'validation-message';
stackNameInput.classList.remove('error', 'success'); stackNameInput.classList.remove('error', 'success');
progressLog.innerHTML = ''; progressLog.innerHTML = '';
progressBar.style.width = '0%'; progressBar.style.width = '0%';
progressPercent.textContent = '0%'; progressPercent.textContent = '0%';
deployBtn.disabled = false; deployBtn.disabled = false;
deployBtn.innerHTML = ` deployBtn.innerHTML = `
<span class="btn-text" data-i18n="deployBtn">${t('deployBtn')}</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"> <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"/> <path d="M10 4V16M4 10H16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg> </svg>
`; `;
setState(STATE.FORM); setState(STATE.FORM);
const targetSpan = document.getElementById('typewriter-target'); const targetSpan = document.getElementById('typewriter-target');
if(targetSpan) { if (targetSpan) {
typewriter(targetSpan, t('chooseStackName')); typewriter(targetSpan, t('chooseStackName'));
} }
} }
// Event Listeners // Event Listeners
@@ -515,11 +515,11 @@ deployAnotherBtn.addEventListener('click', resetToForm);
tryAgainBtn.addEventListener('click', resetToForm); tryAgainBtn.addEventListener('click', resetToForm);
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
initLanguage(); initLanguage();
setState(STATE.FORM); setState(STATE.FORM);
const targetSpan = document.getElementById('typewriter-target'); const targetSpan = document.getElementById('typewriter-target');
if(targetSpan) { if (targetSpan) {
typewriter(targetSpan, t('chooseStackName')); typewriter(targetSpan, t('chooseStackName'));
} }
console.log('AI Stack Deployer initialized'); console.log('AI Stack Deployer initialized');
}); });