fix dangling js, refine onedrive styling and add persistence

templates/index.html

@@ -4,11 +4,11 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Velocity AI // Crystalline Edit</title>
+    <title>Auto Video Editor</title>
     <link rel="icon"
         href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22><path fill=%22%2320f3b4%22 d=%22M448 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64zm-52.2 64l-32 64H271.8l32-64h92zm-144 0l-32 64H127.8l32-64h92zM64 96h19.8l-32 64H64V96zm384 320H64V192h384v224z%22/></svg>">
     <link
-        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500;800&family=JetBrains+Mono:wght@300;500&display=swap"
+        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;500;800&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
         rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
     <style>
@@ -24,7 +24,7 @@
             --text-main: #e2e8f0;
             --text-dim: #94a3b8;
             --font-sans: 'Plus Jakarta Sans', sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
+            --font-mono: 'Work Sans', monospace;
             --success-color: #00ff9d;
             --error-color: #ff4d4d;
         }
@@ -636,7 +636,7 @@
                     </button>
 
                     <div id="onedrive-instruction"
-                        style="font-size: 0.65rem; padding: 10px; border: 1px solid var(--glass-border); border-radius: 12px; margin-bottom: 10px; display: none;">
+                        style="font-size: 0.85rem; padding: 15px; border: 1px solid var(--glass-border); border-radius: 12px; margin-bottom: 10px; display: none; background: rgba(0,0,0,0.2);">
                     </div>
 
                     <div id="onedrive-status"
@@ -659,7 +659,7 @@
             <!-- CENTER: Creative Studio -->
             <div class="glass-panel creative-studio">
                 <div class="prism-refraction"></div>
-                <h2 class="section-label"><span></span> Creative Studio</h2>
+                <h2 class="section-label"><span></span>AI Prompt</h2>
                 <textarea id="style_desc" name="style_desc" class="text-console" required
                     placeholder="Describe the desired cinematic flow...">{{ default_style_desc | escape }}</textarea>
                 <div class="quick-presets">
@@ -681,19 +681,19 @@
                     <h2 class="section-label"><span></span> Command</h2>
 
                     <div class="control-group">
-                        <label>TARGET DURATION (SEC)</label>
+                        <label>TARGET DURATION</label>
                         <input type="number" id="duration" name="duration" class="control-input" value="30" min="1">
                     </div>
 
                     <div class="control-group">
-                        <label>AI ARCHITECTURE</label>
+                        <label>LLM MODEL</label>
                         <select id="model_name" name="model_name" class="control-input">
                             <option value="gemini-3-flash-preview">Initializing...</option>
                         </select>
                     </div>
 
                     <div class="toggle-switch" onclick="document.getElementById('mute_audio').click()">
-                        <span style="font-size: 0.65rem; font-weight: 600; font-family: var(--font-mono);">MUTE ORIG
+                        <span style="font-size: 0.65rem; font-weight: 600; font-family: var(--font-mono);">MUTE
                             AUDIO</span>
                         <label class="custom-switch" onclick="event.stopPropagation()">
                             <input type="checkbox" id="mute_audio" name="mute_audio" checked>
@@ -710,9 +710,9 @@
                 </div>
 
                 <div class="glass-panel pulse-feed">
-                    <h2 class="section-label"><span></span> Pulse Live-Feed</h2>
+                    <h2 class="section-label"><span></span> Live-Feed</h2>
                     <div class="thinking-logs" id="thinking-header">
-                        > Standby for input...
+                        > Waiting for your input...
                     </div>
                     <div id="progress-area" style="display: none; margin-top: auto;">
                         <div id="progress-message"
@@ -810,7 +810,7 @@
                     });
                 }
             } catch (error) {
-                modelSelect.innerHTML = '<option value="gemini-3-flash-preview">Flash V3 Preview</option>';
+                modelSelect.innerHTML = '<option value="gemini-3-flash-preview">Gemini 3 Flash Preview</option>';
             }
         }
         loadModels();
@@ -953,10 +953,13 @@
 
                 if (data.status === 'success') {
                     instructionOnedrive.style.display = 'block';
+                    btnOnedrive.style.display = 'none';
                     instructionOnedrive.innerHTML = `
-                        <b>Sign-in Required</b><br><br>
-                        1. Visit <a href="https://www.microsoft.com/link" target="_blank">microsoft.com/link</a><br>
-                        2. Code: <b style="font-size: 1rem;">${data.user_code}</b>
+                        <div style="margin-bottom: 12px; color: var(--chlorophyll); font-weight: 800; letter-spacing: 1px;"><i class="fas fa-lock"></i> SIGN-IN REQUIRED</div>
+                        <div style="margin-bottom: 8px;">1. Visit <a href="https://www.microsoft.com/link" target="_blank" style="font-size: 0.95rem;">microsoft.com/link</a></div>
+                        <div>2. Enter code:<br>
+                            <b style="font-size: 1.6rem; letter-spacing: 3px; color: var(--chlorophyll); background: rgba(0,0,0,0.4); padding: 8px 16px; border-radius: 8px; display: inline-block; margin-top: 8px; user-select: text;">${data.user_code}</b>
+                        </div>
                     `;
 
                     const poll = setInterval(async () => {
@@ -965,6 +968,7 @@
                         if (sData.status === 'success') {
                             clearInterval(poll);
                             document.getElementById('onedrive_access_token').value = sData.access_token;
+                            localStorage.setItem('velocity_onedrive_token', sData.access_token);
                             instructionOnedrive.style.display = 'none';
                             btnOnedrive.style.display = 'none';
                             statusOnedrive.style.display = 'block';
@@ -976,23 +980,55 @@
                 }
             } catch (err) {
                 btnOnedrive.disabled = false;
-                btnOnedrive.textContent = 'Retry Link';
+                btnOnedrive.innerHTML = '<i class="fab fa-microsoft"></i> Retry Link';
             }
         });
 
         async function fetchOneDriveProjects(token) {
-            projectListOnedrive.innerHTML = '<div style="padding: 10px; font-size: 0.7rem;">Fetching...</div>';
-            const res = await fetch('/api/onedrive/projects', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ access_token: token })
-            });
-            const data = await res.json();
-            if (data.status === 'success') {
-                onedriveProjects = data.projects;
-                renderProjects(onedriveProjects);
+            projectListOnedrive.innerHTML = '<div style="padding: 10px; font-size: 0.7rem; color: var(--text-dim);"><i class="fas fa-spinner fa-spin"></i> Fetching Cloud Projects...</div>';
+            try {
+                const res = await fetch('/api/onedrive/projects', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ access_token: token })
+                });
+                const data = await res.json();
+                if (data.status === 'success') {
+                    onedriveProjects = data.projects;
+                    renderProjects(onedriveProjects);
+                } else {
+                    // Token expired or invalid
+                    resetOneDriveLogin();
+                }
+            } catch (e) {
+                resetOneDriveLogin();
+            }
+        }
+
+        function resetOneDriveLogin() {
+            localStorage.removeItem('velocity_onedrive_token');
+            btnOnedrive.style.display = 'block';
+            btnOnedrive.innerHTML = '<i class="fab fa-microsoft"></i> Connect OneDrive';
+            btnOnedrive.disabled = false;
+            statusOnedrive.style.display = 'none';
+            projectSelectionOnedrive.style.display = 'none';
+            projectListOnedrive.innerHTML = '';
+        }
+
+        async function initOneDriveCache() {
+            const cachedToken = localStorage.getItem('velocity_onedrive_token');
+            if (cachedToken) {
+                btnOnedrive.style.display = 'none';
+                statusOnedrive.style.display = 'block';
+                statusOnedrive.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Restoring Cloud Link...';
+                document.getElementById('onedrive_access_token').value = cachedToken;
+                projectSelectionOnedrive.style.display = 'block';
+                fetchOneDriveProjects(cachedToken).then(() => {
+                    statusOnedrive.innerHTML = '<i class="fas fa-check-circle"></i> Linked to OneDrive';
+                });
             }
         }
+        initOneDriveCache();
 
         function renderProjects(list) {
             projectListOnedrive.innerHTML = '';