editor: fix Models +Add buttons doing nothing on an empty project

The composer was already being pre-selected on click, but nothing scrolled
it into view or signaled the change — on a fresh project all essentials
show as missing and push the composer off-screen, so the click looked
like a no-op. Now scrolls the composer into view and flashes it.

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

movie_editor/frontend/models.js

@@ -793,9 +793,18 @@
         if (req.role_hint) {
           const addBtn = el("button", "btn ghost tiny req-add", "+ Add");
           addBtn.onclick = () => {
-            // pre-scroll the composer to the right role and expand it
-            const typeSelEl = document.querySelector(".composer select");
-            if (typeSelEl) { typeSelEl.value = req.role_hint; typeSelEl.dispatchEvent(new Event("change")); }
+            // Pre-select the composer's Model Type to this role. On a fresh/empty
+            // project the composer sits below the (all-missing) requirements list and
+            // scrolls out of the modal's visible area, so the selection alone was
+            // invisible — scroll it into view and flash it so the click is felt.
+            const composerEl = document.querySelector(".composer");
+            const typeSelEl = composerEl && composerEl.querySelector("select");
+            if (typeSelEl) {
+              typeSelEl.value = req.role_hint;
+              typeSelEl.dispatchEvent(new Event("change"));
+              composerEl.scrollIntoView({ behavior: "smooth", block: "center" });
+              composerEl.classList.remove("flash"); void composerEl.offsetWidth; composerEl.classList.add("flash");
+            }
           };
           row.append(addBtn);
         }

movie_editor/frontend/styles.css

@@ -1168,6 +1168,8 @@ body.tl-spacing { cursor: grabbing; user-select: none; }
 .modal-content { padding: 16px; overflow: auto; }
 
 .composer { background: var(--ink-0); border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 18px; }
+.composer.flash { animation: composer-flash .9s ease; }
+@keyframes composer-flash { 0%, 100% { box-shadow: none; border-color: var(--line); } 25% { box-shadow: 0 0 0 2px var(--amber); border-color: var(--amber); } }
 .composer-title { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--amber); margin-bottom: 10px; }
 .composer-row { display: flex; gap: 10px; align-items: center; }
 .composer-row select { flex: 1; }