sky-wheel aspect micro-tooltip: give it its OWN portal id so it stops battling the wallet/kit over #id_mini_tooltip_portal — TDD

The Aspected/Unaspected micro-tooltip (the DON|DOFF state read-out, mirroring the
game-kit Equipped/Unequipped chip) showed on the standalone sky.html but NOT on
the home-page SkyDrive applet or the gameroom Sky Select felt. Root cause: the
sky-wheel grabbed #id_mini_tooltip_portal — the SAME element the wallet + game-kit
token tooltips use (wallet.js / wallet-shop.js / gameboard.js). On the home page,
where the My Wallet AND SkyDrive applets coexist, the wallet left an inline
display:none on the shared element that the sky-wheel's class-based `.active`
{display:block} could never override (inline > stylesheet). sky.html only worked
because it has no wallet. Live trace: the element even carried the wallet's
"In-Use: <room>" text while the sky tried to show "Unaspected".

Fix — separate elements, no shared state:
- sky-wheel.js reads its own #id_aspect_mini_portal (not #id_mini_tooltip_portal).
- _gameboard.scss: the italic/right-aligned aspect-portal rule + `.active`
  {display:block} rescoped to #id_aspect_mini_portal. The wallet/kit keep
  #id_mini_tooltip_portal (_wallet-tokens.scss) untouched.
- home.html now ships BOTH portals (wallet #id_mini_tooltip_portal +
  #id_aspect_mini_portal); sky.html renames its portal; room.html adds
  #id_aspect_mini_portal in the SKY_SELECT block (covers initial CAST SKY + the
  saved-wheel revisit — same #id_sky_tooltip block).

Verified live (Claudezilla): home-page applet + sky.html now show the aspect
micro-tooltip (display:block, "Unaspected" ⇄ "Aspected" on DON|DOFF) with the
wallet element untouched. TDD: SkyWheelSpec +1 — a planet activation touches only
#id_aspect_mini_portal, leaving a sibling #id_mini_tooltip_portal (w. its inline
display:none + content) untouched. 506+1 Jasmine specs green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/apps/gameboard/static/apps/gameboard/sky-wheel.js

@@ -1008,7 +1008,10 @@ const SkyWheel = (() => {
   function _injectTooltipControls() {
     _tooltipEl = document.getElementById('id_sky_tooltip');
     if (!_tooltipEl) return;
-    _miniPortalEl = document.getElementById('id_mini_tooltip_portal');
+    // The sky-wheel's OWN aspect portal — NOT #id_mini_tooltip_portal, which the
+    // wallet/game-kit own (wallet.js / wallet-shop.js / gameboard.js). Sharing it
+    // made the two battle on the home page (wallet's inline display:none stuck).
+    _miniPortalEl = document.getElementById('id_aspect_mini_portal');
     _tooltipEl.innerHTML =
       `<button type="button" class="btn btn-equip nw-asp-don">DON</button>` +
       `<button type="button" class="btn btn-unequip btn-disabled nw-asp-doff">DOFF</button>` +

src/static/tests/SkyWheelSpec.js

@@ -231,6 +231,40 @@ describe("SkyWheel — tick lines, raise, and cycle navigation", () => {
         expect(sun.classList.contains("nw-planet--active")).toBe(false);
     });
 
+    // ── Aspect mini-portal id-separation (regression) ───────────────────────
+    // The Aspected/Unaspected micro-portal must live in its OWN element
+    // (#id_aspect_mini_portal), NOT the wallet/kit's #id_mini_tooltip_portal —
+    // on the home page they shared that id and the wallet's inline display:none
+    // stuck, hiding the aspect tooltip. Activating a planet must touch ONLY the
+    // aspect element and leave the wallet element untouched.
+    it("aspect micro-portal uses its own #id_aspect_mini_portal, not the wallet's id", () => {
+        const wallet = document.createElement("div");
+        wallet.id = "id_mini_tooltip_portal";
+        wallet.style.display = "none";        // the wallet's leftover inline state
+        wallet.textContent = "In-Use: Foo";   // the wallet's own content
+        document.body.appendChild(wallet);
+        const aspect = document.createElement("div");
+        aspect.id = "id_aspect_mini_portal";
+        aspect.className = "token-tooltip token-tooltip--mini";
+        document.body.appendChild(aspect);
+
+        // Re-draw so _injectTooltipControls re-binds to the now-present aspect
+        // portal, then activate a planet.
+        SkyWheel.draw(svgEl2, CONJUNCTION_CHART);
+        svgEl2.querySelector("[data-planet='Sun']")
+            .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+        // The aspect element got the swap text + .active …
+        expect(aspect.classList.contains("active")).toBe(true);
+        expect(["Aspected", "Unaspected"]).toContain(aspect.textContent);
+        // … and the wallet's element is untouched (no battle).
+        expect(wallet.textContent).toBe("In-Use: Foo");
+        expect(wallet.classList.contains("active")).toBe(false);
+
+        wallet.remove();
+        aspect.remove();
+    });
+
     // ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ────────
     // CONJUNCTION_CHART merged sorted desc: ASC(180)→Mars(132)→MC(90)→Sun(66.7)→Venus(63.3)
     // PRV from Sun (pos 3) → MC (pos 2, 90°) — angles and planets share the cycle.

src/static_src/scss/_gameboard.scss

@@ -265,7 +265,13 @@ body.page-gameboard {
     &.active { display: block; }
 }
 
-#id_mini_tooltip_portal {
+// Sky-wheel aspect mini-portal (Aspected / Unaspected). Its OWN id —
+// NOT #id_mini_tooltip_portal — because that id is the wallet/game-kit token
+// micro-tooltip portal (wallet.js / wallet-shop.js / gameboard.js), and on the
+// home page (My Wallet + SkyDrive applets coexist) the two collided: the wallet
+// left an inline display:none on the shared element that this class-based
+// .active could never override. Separate elements = no battle.
+#id_aspect_mini_portal {
     position: fixed;
     z-index: 9999;
     // Polish-8 — bumped from font-size 0.8em → 0.95em + added padding to

src/static_src/tests/SkyWheelSpec.js

@@ -231,6 +231,40 @@ describe("SkyWheel — tick lines, raise, and cycle navigation", () => {
         expect(sun.classList.contains("nw-planet--active")).toBe(false);
     });
 
+    // ── Aspect mini-portal id-separation (regression) ───────────────────────
+    // The Aspected/Unaspected micro-portal must live in its OWN element
+    // (#id_aspect_mini_portal), NOT the wallet/kit's #id_mini_tooltip_portal —
+    // on the home page they shared that id and the wallet's inline display:none
+    // stuck, hiding the aspect tooltip. Activating a planet must touch ONLY the
+    // aspect element and leave the wallet element untouched.
+    it("aspect micro-portal uses its own #id_aspect_mini_portal, not the wallet's id", () => {
+        const wallet = document.createElement("div");
+        wallet.id = "id_mini_tooltip_portal";
+        wallet.style.display = "none";        // the wallet's leftover inline state
+        wallet.textContent = "In-Use: Foo";   // the wallet's own content
+        document.body.appendChild(wallet);
+        const aspect = document.createElement("div");
+        aspect.id = "id_aspect_mini_portal";
+        aspect.className = "token-tooltip token-tooltip--mini";
+        document.body.appendChild(aspect);
+
+        // Re-draw so _injectTooltipControls re-binds to the now-present aspect
+        // portal, then activate a planet.
+        SkyWheel.draw(svgEl2, CONJUNCTION_CHART);
+        svgEl2.querySelector("[data-planet='Sun']")
+            .dispatchEvent(new MouseEvent("click", { bubbles: true }));
+
+        // The aspect element got the swap text + .active …
+        expect(aspect.classList.contains("active")).toBe(true);
+        expect(["Aspected", "Unaspected"]).toContain(aspect.textContent);
+        // … and the wallet's element is untouched (no battle).
+        expect(wallet.textContent).toBe("In-Use: Foo");
+        expect(wallet.classList.contains("active")).toBe(false);
+
+        wallet.remove();
+        aspect.remove();
+    });
+
     // ── T9n ── PRV cycles counterclockwise (to higher ecliptic degree) ────────
     // CONJUNCTION_CHART merged sorted desc: ASC(180)→Mars(132)→MC(90)→Sun(66.7)→Venus(63.3)
     // PRV from Sun (pos 3) → MC (pos 2, 90°) — angles and planets share the cycle.

src/templates/apps/dashboard/home.html

@@ -24,11 +24,16 @@
         <div id="id_sky_tooltip" class="tt" style="display:none;"></div>
         <div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
         {% comment %}
-        Polish-8 — aspect mini-portal for the My Sky applet's sky-wheel
-        (parallel to sky.html's main page). sky-wheel.js text-swaps
-        "Aspected" / "Unaspected" tied to `_aspectsVisible` whenever the
-        DON/DOFF apparatus is shown (planets + angles only).
+        Two SEPARATE micro-portals — the home page hosts BOTH the My Wallet
+        applet (token Equipped/Unequipped/In-Use micro-tooltip, via wallet.js)
+        AND the SkyDrive applet sky-wheel (Aspected/Unaspected, via sky-wheel.js).
+        They formerly shared #id_mini_tooltip_portal and battled: the wallet left
+        an inline display:none on the element that the sky-wheel's class-based
+        .active could not override, so the aspect micro-tooltip never showed here.
+        Each now owns its element: #id_mini_tooltip_portal (wallet/kit) +
+        #id_aspect_mini_portal (sky-wheel).
         {% endcomment %}
         <div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini"></div>
+        <div id="id_aspect_mini_portal" class="token-tooltip token-tooltip--mini"></div>
     {% endif %}
 {% endblock content %}

src/templates/apps/dashboard/sky.html

@@ -101,14 +101,13 @@
 Polish-8 — aspect mini-portal. Mirrors the game-kit / wallet mini-tooltip-
 portal pattern (Equipped / Unequipped / In-Use) but text-swaps "Aspected" /
 "Unaspected" tied to the sky-wheel's `_aspectsVisible` state per the
-currently-active planet/angle. Only shown when the main `#id_sky_tooltip`
-is open AND the active ring is planets or angles (the rings w. DON|DOFF
-apparatus); hidden for elements/signs/houses rings + on close. Reuses the
-`.token-tooltip.token-tooltip--mini` SCSS chrome already declared in
-`_gameboard.scss:210-220` (ID-keyed rule applies globally since the SCSS
-bundle is unified via `core.scss`).
+currently-active planet/angle. Its OWN id `#id_aspect_mini_portal` (NOT the
+wallet/kit's `#id_mini_tooltip_portal`) so the two never share an element —
+on the home page they battled (wallet's inline display:none stuck). Reuses the
+`.token-tooltip--mini` chrome; the `#id_aspect_mini_portal` rule is in
+`_gameboard.scss` (applies globally — the SCSS bundle is unified via core.scss).
 {% endcomment %}
-<div id="id_mini_tooltip_portal" class="token-tooltip token-tooltip--mini"></div>
+<div id="id_aspect_mini_portal" class="token-tooltip token-tooltip--mini"></div>
 
 <script src="{% static 'apps/gameboard/d3.min.js' %}"></script>
 <script src="{% static 'apps/gameboard/sky-wheel.js' %}"></script>

src/templates/apps/gameboard/room.html

@@ -118,6 +118,11 @@
         {% if room.table_status == "SKY_SELECT" and viewer_cost_current %}
             <div id="id_sky_tooltip" class="tt" style="display:none;"></div>
             <div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
+            {# Aspect mini-portal (Aspected/Unaspected, DON|DOFF). Its OWN id —    #}
+            {# the wallet/kit own #id_mini_tooltip_portal; separate elements so    #}
+            {# they never collide. Covers initial CAST SKY + the saved-wheel       #}
+            {# revisit (both use the same #id_sky_tooltip + sky-wheel.js).         #}
+            <div id="id_aspect_mini_portal" class="token-tooltip token-tooltip--mini"></div>
         {% endif %}
 
         {# Gamer-needed stub — a seat lapsed past its renewal grace and was   #}