Implement defensive DOM operations in app.js to fix startup crashes

static/app.js

@@ -72,7 +72,7 @@ marked.setOptions({
 // Setup Initial State & Event Handlers
 async function initializeApp() {
     // 1. Restore Credentials
-    if (STATE.apiKey) {
+    if (STATE.apiKey && dom.apiKeyInput) {
         dom.apiKeyInput.value = STATE.apiKey;
     }
 
@@ -87,111 +87,137 @@ async function initializeApp() {
         });
 
     // 3. Register Sidebar Drawer Slide Events (Drawer + Overlay)
-    dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
-    dom.btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
-    dom.sidebarOverlay.addEventListener("click", () => toggleSettingsDrawer(false));
+    if (dom.btnToggleRight) dom.btnToggleRight.addEventListener("click", () => toggleSettingsDrawer(true));
+    if (dom.btnCloseDrawer) dom.btnCloseDrawer.addEventListener("click", () => toggleSettingsDrawer(false));
+    if (dom.sidebarOverlay) dom.sidebarOverlay.addEventListener("click", () => toggleSettingsDrawer(false));
 
     // 4. Register Settings Listeners
-    dom.apiKeyInput.addEventListener("input", (e) => {
-        STATE.apiKey = e.target.value;
-        localStorage.setItem("step_api_key", STATE.apiKey);
-    });
+    if (dom.apiKeyInput) {
+        dom.apiKeyInput.addEventListener("input", (e) => {
+            STATE.apiKey = e.target.value;
+            localStorage.setItem("step_api_key", STATE.apiKey);
+        });
+    }
 
-    dom.toggleKeyVisibility.addEventListener("click", () => {
-        const type = dom.apiKeyInput.type === "password" ? "text" : "password";
-        dom.apiKeyInput.type = type;
-    });
+    if (dom.toggleKeyVisibility) {
+        dom.toggleKeyVisibility.addEventListener("click", () => {
+            if (dom.apiKeyInput) {
+                const type = dom.apiKeyInput.type === "password" ? "text" : "password";
+                dom.apiKeyInput.type = type;
+            }
+        });
+    }
 
-    dom.effortRadioButtons.forEach(radio => {
-        radio.addEventListener("change", (e) => {
-            STATE.reasoningEffort = e.target.value;
+    if (dom.effortRadioButtons) {
+        dom.effortRadioButtons.forEach(radio => {
+            radio.addEventListener("change", (e) => {
+                STATE.reasoningEffort = e.target.value;
+            });
         });
-    });
+    }
 
-    dom.maxTokensSlider.addEventListener("input", (e) => {
-        STATE.maxTokens = parseInt(e.target.value);
-        dom.maxTokensVal.textContent = STATE.maxTokens;
-    });
+    if (dom.maxTokensSlider && dom.maxTokensVal) {
+        dom.maxTokensSlider.addEventListener("input", (e) => {
+            STATE.maxTokens = parseInt(e.target.value);
+            dom.maxTokensVal.textContent = STATE.maxTokens;
+        });
+    }
 
-    dom.temperatureSlider.addEventListener("input", (e) => {
-        STATE.temperature = parseFloat(e.target.value);
-        dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
-    });
+    if (dom.temperatureSlider && dom.temperatureVal) {
+        dom.temperatureSlider.addEventListener("input", (e) => {
+            STATE.temperature = parseFloat(e.target.value);
+            dom.temperatureVal.textContent = STATE.temperature.toFixed(1);
+        });
+    }
 
     // 5. Register File Upload Actions
-    dom.studioUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
-    dom.miniUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
-    dom.dropZone.addEventListener("click", () => dom.fileUploader.click());
-    dom.fileUploader.addEventListener("change", handleFileSelection);
+    if (dom.studioUploadTrigger) dom.studioUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
+    if (dom.miniUploadTrigger) dom.miniUploadTrigger.addEventListener("click", () => dom.fileUploader.click());
+    if (dom.dropZone) dom.dropZone.addEventListener("click", () => dom.fileUploader.click());
+    if (dom.fileUploader) dom.fileUploader.addEventListener("change", handleFileSelection);
 
     // Dropzone Drag-and-Drop animations
-    ["dragenter", "dragover"].forEach(eventName => {
-        dom.dropZone.addEventListener(eventName, (e) => {
-            e.preventDefault();
-            dom.dropZone.classList.add("drag-active");
-        }, false);
-    });
+    if (dom.dropZone) {
+        ["dragenter", "dragover"].forEach(eventName => {
+            dom.dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                dom.dropZone.classList.add("drag-active");
+            }, false);
+        });
 
-    ["dragleave", "drop"].forEach(eventName => {
-        dom.dropZone.addEventListener(eventName, (e) => {
-            e.preventDefault();
-            dom.dropZone.classList.remove("drag-active");
-        }, false);
-    });
+        ["dragleave", "drop"].forEach(eventName => {
+            dom.dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                dom.dropZone.classList.remove("drag-active");
+            }, false);
+        });
 
-    dom.dropZone.addEventListener("drop", (e) => {
-        const dt = e.dataTransfer;
-        const files = dt.files;
-        processFiles(files);
-    });
+        dom.dropZone.addEventListener("drop", (e) => {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            processFiles(files);
+        });
+    }
 
     // 6. Submit Triggers
-    dom.studioSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.studioPromptInput));
-    dom.miniSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.miniPromptInput));
+    if (dom.studioSendBtn) {
+        dom.studioSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.studioPromptInput));
+    }
+    if (dom.miniSendBtn) {
+        dom.miniSendBtn.addEventListener("click", () => triggerPromptSubmission(dom.miniPromptInput));
+    }
 
-    dom.studioPromptInput.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            triggerPromptSubmission(dom.studioPromptInput);
-        }
-    });
+    if (dom.studioPromptInput) {
+        dom.studioPromptInput.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                triggerPromptSubmission(dom.studioPromptInput);
+            }
+        });
+    }
 
-    dom.miniPromptInput.addEventListener("keydown", (e) => {
-        if (e.key === "Enter" && !e.shiftKey) {
-            e.preventDefault();
-            triggerPromptSubmission(dom.miniPromptInput);
-        }
-    });
+    if (dom.miniPromptInput) {
+        dom.miniPromptInput.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                triggerPromptSubmission(dom.miniPromptInput);
+            }
+        });
+    }
 
     // 7. Resets
-    dom.menuNewChat.addEventListener("click", resetSandbox);
-    dom.clearChatBtn.addEventListener("click", resetSandbox);
+    if (dom.menuNewChat) dom.menuNewChat.addEventListener("click", resetSandbox);
+    if (dom.clearChatBtn) dom.clearChatBtn.addEventListener("click", resetSandbox);
 
     // 8. Recipe Chips Console Setup
-    dom.recipeChips.forEach(chip => {
-        chip.addEventListener("click", () => {
-            const recipeType = chip.getAttribute("data-recipe");
-            loadRecipe(recipeType);
+    if (dom.recipeChips) {
+        dom.recipeChips.forEach(chip => {
+            chip.addEventListener("click", () => {
+                const recipeType = chip.getAttribute("data-recipe");
+                loadRecipe(recipeType);
+            });
         });
-    });
+    }
 
     // Auto-expand input textareas
     [dom.studioPromptInput, dom.miniPromptInput].forEach(textarea => {
-        textarea.addEventListener("input", () => {
-            textarea.style.height = "auto";
-            textarea.style.height = (textarea.scrollHeight) + "px";
-        });
+        if (textarea) {
+            textarea.addEventListener("input", () => {
+                textarea.style.height = "auto";
+                textarea.style.height = (textarea.scrollHeight) + "px";
+            });
+        }
     });
 }
 
 // Drawer Toggler Action
 function toggleSettingsDrawer(open) {
     if (open) {
-        dom.sidebarRight.classList.remove("collapsed");
-        dom.sidebarOverlay.classList.add("active");
+        if (dom.sidebarRight) dom.sidebarRight.classList.remove("collapsed");
+        if (dom.sidebarOverlay) dom.sidebarOverlay.classList.add("active");
     } else {
-        dom.sidebarRight.classList.add("collapsed");
-        dom.sidebarOverlay.classList.remove("active");
+        if (dom.sidebarRight) dom.sidebarRight.classList.add("collapsed");
+        if (dom.sidebarOverlay) dom.sidebarOverlay.classList.remove("active");
     }
 }
 
@@ -223,12 +249,12 @@ function processFiles(files) {
 
 // Update UI Attachment Previews
 function updateShelfUI() {
-    dom.shelfList.innerHTML = "";
-    dom.innerShelfPreview.innerHTML = "";
-    dom.miniShelfPreview.innerHTML = "";
+    if (dom.shelfList) dom.shelfList.innerHTML = "";
+    if (dom.innerShelfPreview) dom.innerShelfPreview.innerHTML = "";
+    if (dom.miniShelfPreview) dom.miniShelfPreview.innerHTML = "";
 
     if (STATE.uploadedFiles.length === 0) {
-        dom.shelfList.innerHTML = `<div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>`;
+        if (dom.shelfList) dom.shelfList.innerHTML = `<div class="empty-shelf-text">No active attachments loaded. Upload images or video clips.</div>`;
         return;
     }
 
@@ -264,15 +290,15 @@ function updateShelfUI() {
             removeFile(file.id);
         });
 
-        dom.shelfList.appendChild(chip);
+        if (dom.shelfList) dom.shelfList.appendChild(chip);
 
         // 2. Dashboard Inner Console Preview
         const previewItemDash = createPreviewThumb(file);
-        dom.innerShelfPreview.appendChild(previewItemDash);
+        if (dom.innerShelfPreview) dom.innerShelfPreview.appendChild(previewItemDash);
 
         // 3. Mini Input Preview
         const previewItemMini = createPreviewThumb(file);
-        dom.miniShelfPreview.appendChild(previewItemMini);
+        if (dom.miniShelfPreview) dom.miniShelfPreview.appendChild(previewItemMini);
     });
 }