feat(career): Gold tier frontend — relay, ceremony, slam, gold ink everywhere

The drill-state relay now carries virtuoso's goldImprov map; a badge that
comes back gold gets its own ceremony + notification (tier-suffixed seen
ids — the bronze moment stays seen under its legacy id, a gold slam marks
both), a gold stamp slam in the book, gold ink on the shelf-cover mini
stamp, and the real gold foil chip. The bronze page's dashed 'Gold rung
coming' preview becomes a live invitation to jam the style in Virtuoso.

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

CHANGELOG.md

@@ -8,6 +8,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- **Gold tier (career passports)** — an earned badge turns **gold** when
+  Virtuoso verifies an improvised jam in the passport's style (the
+  `gold_improv` artifact relays with the drill snapshot; a genre inherits its
+  family's style, gained-only, and gold never substitutes for the badge bar
+  itself). Gold gets its own ceremony, stamp slam, foil chip, and gold ink on
+  the shelf cover, profile wall, and passport card; the bronze page's "Gold
+  rung coming" preview becomes a live invitation to jam it.
 - **Gigs (the career verb, frontend)** — book a gig from any opened passport:
   a gig poster proposes the setlist (re-roll for a different bill; save or
   copy the poster as a PNG), "Play the gig" hands the set to the play queue

docs/size-exemptions.md

@@ -62,7 +62,7 @@ and is a monolith in its own right, to be split per-table once the router train
 lands) · `static/v3/songs.js` (4,134) · `static/capabilities/audio-session.js`
 (2,974) · `plugins/highway_3d/screen.js` (15,656) · `plugins/keys_highway_3d/screen.js`
 (3,780) · `plugins/drum_highway_3d/screen.js` (3,597) · `plugins/career/screen.js`
-(1,516 — career v3 gigs pushed it over; split plan: carve the gig block into a
+(1,530 — career v3 gigs + gold pushed it over; split plan: carve the gig block into a
 `scriptType: module` file when career work next touches it) — and every monolith with a PR
 train in the refactor plan. Test files (e.g. `tests/test_plugins.py`) are out of scope
 by policy — the norm governs source files.

plugins/career/assets/career.css

@@ -525,7 +525,18 @@
     pointer-events: none;
 }
 
-/* Gold foil preview — honest "coming", never earnable-looking. */
+/* Gold ink — a REAL gold badge (comb-verified improv). */
+.pp-stamp-gold {
+    border-color: #b8860b;
+    color: #a97b1b;
+    box-shadow: inset 0 0 0 3px #f3e8c8, inset 0 0 0 4px #b8860b;
+}
+.pp-stamp-mini.pp-stamp-gold {
+    color: #f0c75e;
+    border-color: #f0c75e;
+    box-shadow: none;
+}
+/* Gold foil chip — rendered only alongside an earned gold stamp. */
 .pp-gold-foil {
     position: relative;
     overflow: hidden;
@@ -535,8 +546,8 @@
     margin-top: 0.9rem;
     padding: 0.28rem 0.85rem;
     border-radius: 999px;
-    border: 2px dashed #c8b273;
-    color: #a8946d;
+    border: 2px solid #d9a253;
+    color: #c89040;
     font-size: 0.58rem;
     font-weight: 700;
     letter-spacing: 0.32em;

plugins/career/screen.js

@@ -304,11 +304,15 @@
         } catch (_) { return {}; }
     }
 
-    function badgeId(inst, gkey) { return inst + '/' + gkey; }
+    // Bronze keeps the legacy un-suffixed id, so badges seen before the Gold
+    // tier existed stay seen; gold is a distinct moment with its own id.
+    function badgeId(inst, gkey, tier) { return inst + '/' + gkey + (tier === 'gold' ? '@gold' : ''); }
 
-    function markBadgeSeen(inst, gkey) {
+    function markBadgeSeen(inst, gkey, tier) {
         const seen = seenBadges();
-        seen[badgeId(inst, gkey)] = 1;
+        seen[badgeId(inst, gkey, tier)] = 1;
+        // A gold slam covers the bronze moment too — never queue both.
+        if (tier === 'gold') seen[badgeId(inst, gkey)] = 1;
         lsSet(PP_SEEN_KEY, JSON.stringify(seen));
     }
 
@@ -320,15 +324,19 @@
         const seen = seenBadges();
         for (const inst of Object.keys(view.instruments || {})) {
             for (const p of (view.instruments[inst].passports || [])) {
-                const id = badgeId(inst, p.genre_key);
-                if (p.badge !== 'earned' || seen[id] || _ppNotified[id]) continue;
+                if (p.badge !== 'earned' && p.badge !== 'gold') continue;
+                const gold = p.badge === 'gold';
+                const id = badgeId(inst, p.genre_key, p.badge);
+                if (seen[id] || _ppNotified[id]) continue;
                 _ppNotified[id] = true;
                 sfx('chime');
                 if (window.fbNotify && typeof window.fbNotify.show === 'function') {
                     window.fbNotify.show({
-                        big: true, icon: '🛂', accent: '#b45309',
-                        title: 'Badge earned!',
-                        message: `${p.genre} — Bronze, ready to stamp into your ${ppLabel(inst)} passport.`,
+                        big: true, icon: gold ? '🏅' : '🛂', accent: gold ? '#d9a253' : '#b45309',
+                        title: gold ? 'Gold — a verified improv!' : 'Badge earned!',
+                        message: gold
+                            ? `${p.genre} — your ${ppLabel(inst)} badge turns gold.`
+                            : `${p.genre} — Bronze, ready to stamp into your ${ppLabel(inst)} passport.`,
                     });
                 }
                 badgeCeremony(inst, p);
@@ -377,11 +385,11 @@
         el.innerHTML = `
             <canvas class="pp-confetti"></canvas>
             <div class="pp-ceremony-card">
-                <div class="pp-stamp pp-stamp-page pp-ceremony-stamp" style="--pp-rot:${ppJitter(p.genre_key, 7).toFixed(1)}deg">
+                <div class="pp-stamp pp-stamp-page pp-ceremony-stamp${p.badge === 'gold' ? ' pp-stamp-gold' : ''}" style="--pp-rot:${ppJitter(p.genre_key, 7).toFixed(1)}deg">
                     <span class="pp-stamp-genre">${esc(p.genre.toUpperCase())}</span>
-                    <span class="pp-stamp-tier">BRONZE</span>
+                    <span class="pp-stamp-tier">${p.badge === 'gold' ? 'GOLD' : 'BRONZE'}</span>
                 </div>
-                <div class="pp-ceremony-title">Badge earned</div>
+                <div class="pp-ceremony-title">${p.badge === 'gold' ? 'Gold — a verified improv' : 'Badge earned'}</div>
                 <div class="pp-ceremony-sub">${esc(p.genre)} — ${esc(ppLabel(inst))} passport</div>
             </div>`;
         let timer = 0;
@@ -445,7 +453,11 @@
             fetch(`${API}/drill-state`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ mode: snap.mode, xp: snap.xp, byNode: snap.byNode }),
+                body: JSON.stringify({
+                    mode: snap.mode, xp: snap.xp, byNode: snap.byNode,
+                    ...(snap.goldImprov && typeof snap.goldImprov === 'object' && !Array.isArray(snap.goldImprov)
+                        ? { goldImprov: snap.goldImprov } : {}),
+                }),
             }).then(() => refreshPassports()).catch(() => { /* next event retries */ });
         }, 1500);
     }
@@ -483,9 +495,9 @@
 
     function ppCoverHTML(inst, p) {
         const rot = ppJitter(inst + p.genre_key, 1.6).toFixed(2);
-        const earned = p.badge === 'earned';
+        const earned = p.badge === 'earned' || p.badge === 'gold';
         const stamp = earned
-            ? `<span class="pp-stamp pp-stamp-mini" style="--pp-rot:${ppJitter(p.genre_key, 8).toFixed(1)}deg">BRONZE</span>`
+            ? `<span class="pp-stamp pp-stamp-mini${p.badge === 'gold' ? ' pp-stamp-gold' : ''}" style="--pp-rot:${ppJitter(p.genre_key, 8).toFixed(1)}deg">${p.badge === 'gold' ? 'GOLD' : 'BRONZE'}</span>`
             : '';
         const stubs = p.qualifying_count === 1 ? '1 stub' : `${p.qualifying_count} stubs`;
         const hours = fmtHours(p.seconds_total);
@@ -641,13 +653,15 @@
         let badgeArea = '';
         if (p.badge === 'shown_not_judged') {
             badgeArea = `<div class="pp-snj">Shown, not judged — your ${esc(ppLabel(inst).toLowerCase())} repertoire speaks for itself.</div>`;
-        } else if (p.badge === 'earned') {
-            badgeArea = `<div class="pp-stamp pp-stamp-page${pendingSlam ? ' pp-stamp-hidden' : ' pp-tilt'}" style="--pp-rot:${ppJitter(p.genre_key, 7).toFixed(1)}deg">
+        } else if (p.badge === 'earned' || p.badge === 'gold') {
+            const gold = p.badge === 'gold';
+            badgeArea = `<div class="pp-stamp pp-stamp-page${pendingSlam ? ' pp-stamp-hidden' : ' pp-tilt'}${gold ? ' pp-stamp-gold' : ''}" style="--pp-rot:${ppJitter(p.genre_key, 7).toFixed(1)}deg">
                 <span class="pp-stamp-genre">${esc(p.genre.toUpperCase())}</span>
-                <span class="pp-stamp-tier">BRONZE</span>
+                <span class="pp-stamp-tier">${gold ? 'GOLD' : 'BRONZE'}</span>
             </div>
-            <div class="pp-gold-foil" aria-hidden="true">GOLD</div>
-            <div class="pp-gold-note">Gold rung coming — improvise it, verified.</div>
+            ${gold
+        ? '<div class="pp-gold-foil" aria-hidden="true">GOLD</div><div class="pp-gold-note">A verified improv — the comb heard it live.</div>'
+        : '<div class="pp-gold-note">Gold rung: improvise over this style in a Virtuoso jam — verified, not self-reported.</div>'}
             <div class="pp-card-actions">
                 <button class="career-btn career-btn-ghost" data-pp-card="save">Save card</button>
                 <button class="career-btn career-btn-ghost" data-pp-card="copy">Copy card</button>
@@ -724,7 +738,8 @@
         if (!p || !overlay) return;
         _ppBook = { inst, gkey };
         _ppReturnFocus = document.activeElement;
-        const pending = p.badge === 'earned' && !seenBadges()[badgeId(inst, gkey)];
+        const pending = (p.badge === 'earned' || p.badge === 'gold')
+            && !seenBadges()[badgeId(inst, gkey, p.badge)];
         overlay.innerHTML = ppBookHTML(inst, p, pending);
         overlay.classList.remove('hidden');
         const close = overlay.querySelector('.pp-book-close');
@@ -746,7 +761,7 @@
                 stamp.classList.add('pp-tilt'); // freshly slammed = trading card too
                 if (book) book.classList.add('pp-shake');
                 sfx('stamp');
-                markBadgeSeen(inst, gkey);
+                markBadgeSeen(inst, gkey, p.badge);
                 renderPassports(); // the shelf cover gains its mini-stamp
             }, 950);
         }

plugins/career/tests/passports.test.js

@@ -198,3 +198,52 @@ test('gig runner lifecycle: advance on ended, abandon on dead-queue stop', () =>
     t.onGigSongStop();
     assert.equal(t.getGigRun(), null);
 });
+
+test('a gold upgrade notifies even when the bronze moment was already seen', () => {
+    // Bronze seen under the legacy un-suffixed id; the badge then turns gold.
+    const w = load({ 'feedBack-career-badges-seen': '{"guitar/blues":1}' });
+    const t = w.__careerPassportTest;
+    const view = { instruments: { guitar: { passports: [
+        { genre_key: 'blues', genre: 'Blues', badge: 'gold' }] } } };
+    t.detectNewBadges(view);
+    assert.equal(w.notifications.length, 1);
+    assert.match(w.notifications[0].title, /Gold/);
+    // Same session: no duplicate.
+    t.detectNewBadges(view);
+    assert.equal(w.notifications.length, 1);
+    // Gold slam seen → fresh session stays silent.
+    t.markBadgeSeen('guitar', 'blues', 'gold');
+    const w2 = load({ 'feedBack-career-badges-seen': JSON.stringify(t.seenBadges()) });
+    w2.__careerPassportTest.detectNewBadges(view);
+    assert.equal(w2.notifications.length, 0);
+});
+
+test('a gold slam marks the bronze moment seen too — never both ceremonies', () => {
+    const w = load();
+    const t = w.__careerPassportTest;
+    t.markBadgeSeen('guitar', 'blues', 'gold');
+    const seen = JSON.parse(JSON.stringify(t.seenBadges()));
+    assert.equal(seen['guitar/blues@gold'], 1);
+    assert.equal(seen['guitar/blues'], 1);
+    // A later view where the badge reads 'earned' (e.g. gold state lost
+    // server-side) must not replay the bronze ceremony.
+    const view = { instruments: { guitar: { passports: [
+        { genre_key: 'blues', genre: 'Blues', badge: 'earned' }] } } };
+    const w2 = load({ 'feedBack-career-badges-seen': JSON.stringify(seen) });
+    w2.__careerPassportTest.detectNewBadges(view);
+    assert.equal(w2.notifications.length, 0);
+});
+
+test('careerTotals counts gold badges on the wall', () => {
+    const t = load().__careerPassportTest;
+    t.setView({
+        config: { instruments: ['guitar'] },
+        instruments: { guitar: { committed_at: 1, gig_count: 0, passports: [
+            { genre_key: 'blues', genre: 'Blues', badge: 'gold', seconds_total: 60 },
+            { genre_key: 'funk', genre: 'Funk', badge: 'in_progress', seconds_total: 0 },
+        ] } },
+    });
+    const totals = t.careerTotals();
+    assert.equal(totals.badges, 1);
+    assert.equal(totals.walls[0].earned[0].badge, 'gold');
+});