more refactoring

frontend/src/main.js

@@ -59,6 +59,31 @@ function updateState(newState) {
     renderApp();
 }
 
+function showToast(message, type = 'info') {
+    const container = document.getElementById('toast-container');
+    const toast = document.createElement('div');
+    toast.className = `toast ${type}`;
+
+    const icons = {
+        success: '✓',
+        error: '✕',
+        info: 'ℹ'
+    };
+
+    toast.innerHTML = `
+        <span class="toast-icon">${icons[type] || 'ℹ'}</span>
+        <span class="toast-message">${message}</span>
+    `;
+
+    container.appendChild(toast);
+
+    // Auto remove
+    setTimeout(() => {
+        toast.style.animation = 'fadeOut 0.3s forwards';
+        setTimeout(() => toast.remove(), 300);
+    }, 4000);
+}
+
 function renderApp() {
     renderTaskList();
 
@@ -343,9 +368,10 @@ rerunBtn.addEventListener('click', async () => {
             state.tasks[index] = updatedTask;
         }
         selectTask(updatedTask.id);
+        showToast('Task rerun successfully!', 'success');
     } catch (error) {
-        console.error('Error running task:', error);
-        alert('Failed to run task.');
+        console.error('Failed to rerun task:', error);
+        showToast('Failed to rerun task.', 'error');
     }
 });
 
@@ -464,9 +490,10 @@ newTaskForm.addEventListener('submit', async (e) => {
         state.isEditing = false;
         selectTask(updatedTask.id);
         renderTaskList();
+        showToast(state.isEditing ? 'Task updated successfully' : 'Task created successfully', 'success');
     } catch (error) {
-        console.error('Error creating task:', error);
-        alert('Failed to execute task. Check console.');
+        console.error('Save task failed:', error);
+        showToast('Failed to execute task. Check console.', 'error');
     }
 });
 
@@ -536,8 +563,8 @@ async function handleCallback() {
             throw new Error('No access token in response');
         }
     } catch (error) {
-        console.error('Auth callback failed:', error);
-        alert('Authentication failed.');
+        console.error('Callback failed:', error);
+        showToast('Authentication failed.', 'error');
         showLogin();
     }
 }

frontend/src/style.css

@@ -798,6 +798,77 @@ textarea:focus {
 .btn-sm {
   padding: 6px 12px;
   font-size: 12px;
+  width: 100%;
+  justify-content: center;
+}
+
+/* Toast System */
+#toast-container {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  z-index: 2000;
+}
+
+.toast {
+  min-width: 300px;
+  padding: 16px 20px;
+  border-radius: 12px;
+  background: var(--bg-sidebar);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.toast.error {
+  border-left: 4px solid var(--status-failed);
+}
+
+.toast.success {
+  border-left: 4px solid var(--status-completed);
+}
+
+.toast.info {
+  border-left: 4px solid var(--primary);
+}
+
+.toast-icon {
+  font-size: 18px;
+}
+
+.toast-message {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
 }
 
 .logout-btn {