diff --git a/src/apps/billboard/static/apps/billboard/bud-btn.js b/src/apps/billboard/static/apps/billboard/bud-btn.js
new file mode 100644
index 0000000..800af4a
--- /dev/null
+++ b/src/apps/billboard/static/apps/billboard/bud-btn.js
@@ -0,0 +1,112 @@
+// Shared skeleton for the three #id_bud_btn slide-out panels:
+// • _bud_panel.html — post-share (POSTs to billboard:share_post)
+// • _bud_invite_panel.html — gatekeeper invite (POSTs to epic:invite_gamer)
+// • _bud_add_panel.html — My Buds add (POSTs to billboard:add_bud)
+//
+// Owns: csrf cookie read, open/close + .bud-open html-class, button click,
+// Escape, click-outside, Enter-in-input, OK POST + JSON routing.
+//
+// Each caller drives it with `bindBudBtn({submitUrl, autocompleteUrl?, onSuccess})`.
+// `onSuccess(data)` does the panel-specific DOM updates (line append, chip
+// append, bud-entry append, Brief banner — whatever the response carries).
+// _close({clear: true}) fires automatically on a successful response.
+//
+// `autocompleteUrl` enables bud-autocomplete on the input (post-share +
+// gatekeeper panels) by binding bud-autocomplete.js to #id_bud_suggestions.
+// My Buds omits it — the autocomplete pool is request.user.buds, which is
+// the set you can't usefully re-add.
+
+(function () {
+ 'use strict';
+
+ window.bindBudBtn = function (opts) {
+ opts = opts || {};
+ var btn = document.getElementById('id_bud_btn');
+ var panel = document.getElementById('id_bud_panel');
+ var input = document.getElementById('id_recipient');
+ var ok = document.getElementById('id_bud_ok');
+ var html = document.documentElement;
+ if (!btn || !panel || !input || !ok) return;
+
+ var suggestions = opts.autocompleteUrl
+ ? document.getElementById('id_bud_suggestions')
+ : null;
+
+ function _csrf() {
+ var m = document.cookie.match(/csrftoken=([^;]+)/);
+ return m ? m[1] : '';
+ }
+
+ function _open() {
+ html.classList.add('bud-open');
+ btn.classList.add('active');
+ setTimeout(function () { input.focus(); }, 60);
+ }
+
+ function _close(o) {
+ o = o || {};
+ html.classList.remove('bud-open');
+ btn.classList.remove('active');
+ if (o.clear !== false) input.value = '';
+ }
+
+ btn.addEventListener('click', function () {
+ if (html.classList.contains('bud-open')) _close();
+ else _open();
+ });
+
+ document.addEventListener('keydown', function (e) {
+ if (e.key === 'Escape' && html.classList.contains('bud-open')) _close();
+ });
+
+ document.addEventListener('click', function (e) {
+ if (!html.classList.contains('bud-open')) return;
+ if (panel.contains(e.target)) return;
+ if (e.target === btn || btn.contains(e.target)) return;
+ // Suggestions live outside the panel (panel has overflow:hidden
+ // for its scaleX slide); a click inside them must NOT close+clear.
+ if (suggestions && suggestions.contains(e.target)) return;
+ _close();
+ });
+
+ ok.addEventListener('click', function () {
+ var recipient = input.value.trim();
+ if (!recipient) return;
+
+ var fd = new FormData();
+ fd.set('recipient', recipient);
+
+ fetch(opts.submitUrl, {
+ method: 'POST',
+ credentials: 'same-origin',
+ headers: {
+ 'Accept': 'application/json',
+ 'X-CSRFToken': _csrf(),
+ },
+ body: fd,
+ })
+ .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+ .then(function (data) {
+ if (typeof opts.onSuccess === 'function') opts.onSuccess(data);
+ _close({ clear: true });
+ })
+ .catch(function () {
+ // Privacy-safe response shape — even an unregistered/self
+ // recipient is a 200. Network/5xx land here; just close.
+ });
+ });
+
+ input.addEventListener('keydown', function (e) {
+ if (e.key === 'Enter') {
+ e.preventDefault();
+ ok.click();
+ }
+ });
+
+ if (opts.autocompleteUrl && window.bindBudAutocomplete && suggestions) {
+ window.bindBudAutocomplete(input, suggestions, {
+ searchUrl: opts.autocompleteUrl,
+ });
+ }
+ };
+}());
diff --git a/src/templates/apps/billboard/_partials/_bud_add_panel.html b/src/templates/apps/billboard/_partials/_bud_add_panel.html
index e37ca9f..fdd2e71 100644
--- a/src/templates/apps/billboard/_partials/_bud_add_panel.html
+++ b/src/templates/apps/billboard/_partials/_bud_add_panel.html
@@ -1,15 +1,21 @@
+{% load static %}
{# ─────────────────────────────────────────────────────────────────────── #}
-{# _bud_add_panel.html — bottom-left handshake btn + slide-out add- #}
-{# bud field. Mirrors _bud_panel.html (post-share) but POSTs to #}
-{# add_bud and appends to #id_buds_list instead of #id_post_table. #}
-{# Included by my_buds.html only. #}
+{# _bud_add_panel.html — bottom-left handshake btn + slide-out add-bud #}
+{# field. Skeleton (open/close/POST) owned by bud-btn.js; this partial #}
+{# wires the add-bud success callback: {bud} → append .bud-entry to #}
+{# #id_buds_list. #}
+{# Included by my_buds.html only. #}
+{# #}
+{# No autocomplete — the bud-autocomplete pool is request.user.buds, #}
+{# which is precisely the set you can't usefully re-add. Post-share + #}
+{# gatekeeper-invite panels DO bind autocomplete. #}
{# ─────────────────────────────────────────────────────────────────────── #}
-
+
OK
-{# No autocomplete on this panel — the bud-autocomplete pool is the #}
-{# user's existing buds, which is precisely the set you can't usefully #}
-{# re-add. Post-share + gatekeeper-invite panels keep the autocomplete #}
-{# binding (re-sharing with an existing bud is a real flow). #}
-
+
diff --git a/src/templates/apps/billboard/_partials/_bud_invite_panel.html b/src/templates/apps/billboard/_partials/_bud_invite_panel.html
index 2956dc3..86d0827 100644
--- a/src/templates/apps/billboard/_partials/_bud_invite_panel.html
+++ b/src/templates/apps/billboard/_partials/_bud_invite_panel.html
@@ -1,14 +1,10 @@
{% load static %}
-{% load lyric_extras %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_invite_panel.html — bud btn + slide-out for the gatekeeper game- #}
-{# invite flow. Replaces the legacy `