From 93dcf8dfc2a0793044d5c652f2a994a3bc003d04 Mon Sep 17 00:00:00 2001
From: digital-garbage <133010426+digital-garbage@users.noreply.github.com>
Date: Mon, 6 Jul 2026 20:55:04 +0300
Subject: [PATCH] Setup-node picker collapses on select; autocomplete shows all
 matching shortcuts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Models & Pipeline -> +New node: picking a node now collapses the search results
into a one-line "selected" row with a Change button, instead of leaving the full
list open above the Values/Wiring panel.

Prompt autocomplete: dropped the MAX_ITEMS=8 cap on matchTriggers — a prefix
shared by many shortcuts (e.g. 15 "lazy" triggers) now shows all of them; the
menu already scrolls (max-height in CSS), so nothing was gained by truncating.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 movie_editor/frontend/autocomplete.js |  6 +++---
 movie_editor/frontend/models.js       | 17 ++++++++++++++++-
 movie_editor/frontend/styles.css      |  3 +++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/movie_editor/frontend/autocomplete.js b/movie_editor/frontend/autocomplete.js
index 93fa3b6b..abcb2b74 100644
--- a/movie_editor/frontend/autocomplete.js
+++ b/movie_editor/frontend/autocomplete.js
@@ -7,7 +7,6 @@
 
   const DELIMS = /[,\n;]/;          // token boundaries — a trigger lives between delimiters
   const MIN_QUERY = 2;
-  const MAX_ITEMS = 8;
 
   function enabled() { return !!S.getEditorSetting("autocomplete"); }
 
@@ -25,7 +24,9 @@
   }
 
   // Triggers whose text contains `query` (substring, so "@golden" matches "golden"),
-  // prefix matches ranked first, identical triggers de-duped.
+  // prefix matches ranked first, identical triggers de-duped. Unbounded — the menu itself
+  // scrolls (max-height in CSS), so a prefix shared by many shortcuts (e.g. 15 "lazy_*"
+  // triggers) shows every one of them instead of silently hiding the tail.
   function matchTriggers(query) {
     const q = query.toLowerCase();
     const scored = [];
@@ -42,7 +43,6 @@
       const k = e.trigger.toLowerCase();
       if (seen.has(k)) continue;
       seen.add(k); uniq.push(e);
-      if (uniq.length >= MAX_ITEMS) break;
     }
     return uniq;
   }
diff --git a/movie_editor/frontend/models.js b/movie_editor/frontend/models.js
index d1fcc407..d96e2442 100644
--- a/movie_editor/frontend/models.js
+++ b/movie_editor/frontend/models.js
@@ -715,9 +715,23 @@
     setTimeout(() => search.focus(), 0);
 
     let curList = [], curCand = null, draft = null;
+    // Collapsed once a node is picked — the full list is clutter once Values/Wiring are
+    // showing below it. Re-expands on "Change" or as soon as the user edits the search again.
+    let listOpen = true;
 
     function renderList() {
       clear(listBox);
+      if (curCand && !listOpen) {
+        const row = el("div", "ns-row ns-row-selected active");
+        row.append(el("span", "ns-row-name", curCand.display_name));
+        row.append(el("span", "ns-row-class", curCand.class));
+        const change = el("button", "btn ghost tiny ns-change", "Change");
+        change.type = "button";
+        change.onclick = (e) => { e.stopPropagation(); listOpen = true; renderList(); search.focus(); };
+        row.append(change);
+        listBox.append(row);
+        return;
+      }
       const q = search.value.trim().toLowerCase();
       const f = q ? curList.filter((c) => (c.display_name + " " + c.class + " " + (c.category || "")).toLowerCase().includes(q)) : curList;
       if (!f.length) { listBox.append(el("div", "ns-empty", curList.length ? "No match." : "No matching nodes.")); return; }
@@ -730,7 +744,7 @@
       });
       if (f.length > 200) listBox.append(el("div", "ns-empty", `…${f.length - 200} more — refine the search.`));
     }
-    search.oninput = renderList;
+    search.oninput = () => { listOpen = true; renderList(); };
 
     async function pick(cls) {
       curCand = specByClass[cls];
@@ -741,6 +755,7 @@
         wires: { ...(extras.wires || {}) },              // outName -> single target
         input_sources: { ...(extras.input_sources || {}) },
       };
+      listOpen = false;
       renderList(); renderDetail();
     }
 
diff --git a/movie_editor/frontend/styles.css b/movie_editor/frontend/styles.css
index c40a2e40..2caaa071 100644
--- a/movie_editor/frontend/styles.css
+++ b/movie_editor/frontend/styles.css
@@ -1766,6 +1766,9 @@ body.tour-mode { overflow: hidden; }
 .ns-row-name { font-size: 12.5px; color: var(--text); }
 .ns-row-class { font-size: 10.5px; color: var(--faint); font-family: var(--font-mono);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ns-row-selected { cursor: default; }
+.ns-row-selected .ns-row-class { flex: 1; }
+.ns-change { margin-left: auto; flex: 0 0 auto; }
 .ns-empty { padding: 10px 12px; font-size: 12px; color: var(--faint); }
 .ns-detail { display: flex; flex-direction: column; gap: 10px; }
 .ns-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }