Blueprint v2.2: Async Refresh & Optimize UI

- Convert form POST to async fetch() in system_status.html
- Spinner + disabled button while request is in-flight
- Bootstrap toast notification on success/error
- Auto-reload page 1.5s after successful refresh

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

templates/system_status.html

@@ -8,11 +8,11 @@
     </div>
     <div class="col-md-4 text-end">
         <a href="{{ url_for('project.index') }}" class="btn btn-outline-secondary me-2">Back to Dashboard</a>
-        <form action="{{ url_for('admin.optimize_models') }}" method="POST" class="d-inline" onsubmit="return confirm('This will re-analyze all available models. Continue?');">
-            <button type="submit" class="btn btn-primary">
-                <i class="fas fa-sync me-2"></i>Refresh & Optimize
+        <button id="refreshBtn" class="btn btn-primary" onclick="refreshModels()">
+            <span id="refreshIcon"><i class="fas fa-sync me-2"></i></span>
+            <span id="refreshSpinner" class="spinner-border spinner-border-sm me-2 d-none" role="status"></span>
+            <span id="refreshLabel">Refresh & Optimize</span>
         </button>
-        </form>
     </div>
 </div>
 
@@ -183,4 +183,55 @@
         <p class="text-muted small mt-2 mb-0">Model selection is cached for 24 hours to save API calls.</p>
     </div>
 </div>
+
+<!-- Toast notification -->
+<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100">
+    <div id="refreshToast" class="toast align-items-center border-0" role="alert" aria-live="assertive" aria-atomic="true">
+        <div class="d-flex">
+            <div id="toastBody" class="toast-body fw-semibold"></div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+        </div>
+    </div>
+</div>
+
+<script>
+async function refreshModels() {
+    const btn = document.getElementById('refreshBtn');
+    const icon = document.getElementById('refreshIcon');
+    const spinner = document.getElementById('refreshSpinner');
+    const label = document.getElementById('refreshLabel');
+
+    btn.disabled = true;
+    icon.classList.add('d-none');
+    spinner.classList.remove('d-none');
+    label.textContent = 'Processing...';
+
+    try {
+        const resp = await fetch("{{ url_for('admin.optimize_models') }}", {
+            method: 'POST',
+            headers: { 'X-Requested-With': 'XMLHttpRequest' }
+        });
+        const data = await resp.json();
+        showToast(data.message, resp.ok ? 'bg-success text-white' : 'bg-danger text-white');
+        if (resp.ok) {
+            setTimeout(() => location.reload(), 1500);
+        }
+    } catch (err) {
+        showToast('Request failed: ' + err.message, 'bg-danger text-white');
+    } finally {
+        btn.disabled = false;
+        icon.classList.remove('d-none');
+        spinner.classList.add('d-none');
+        label.textContent = 'Refresh & Optimize';
+    }
+}
+
+function showToast(message, classes) {
+    const toast = document.getElementById('refreshToast');
+    const body = document.getElementById('toastBody');
+    toast.className = 'toast align-items-center border-0 ' + classes;
+    body.textContent = message;
+    bootstrap.Toast.getOrCreateInstance(toast, { delay: 4000 }).show();
+}
+</script>
 {% endblock %}