B-DETAIL-05 — HUD Polish: Text Centering · Tab Cycle Toggle · Unit Drawer¶

SURFACE: rtopacks.com.au — qual detail page (/qual/[code]/)
CLOUDFLARE ACCOUNT: e5a9830215a8d88961dc6c80a8c7442a (UCCA — do not touch UCCO account)
DO NOT TOUCH: keys.ucca.online, ucco.foundation, mcp.ucco.foundation, ucca.online, ir.ucca.online, engine-db D1 (0efa8970)
DB: rtopacks-db D1 334ac8fb-9850-48c0-9da0-b56c55640e98
BRIEF DRIP RULE: Deploy and confirm before requesting next brief.

Diagnosis (live audit — 20 March 2026)¶

Observed on rtopacks.com.au/qual/PSP50922:

Issue 1 — Zone 2 text width
.z2e has max-width: 820px correctly set, but margin is 0px (no centering). .z2 is display: block. So .z2e sits hard-left at x=36px inside a 1526px container. Text appears to run full width because 820px left-anchored on a 1500px viewport still looks like it bleeds across the screen. Fix is one line.

Issue 2 — Tab cycle has no stop affordance
Tabs cycle correctly. Active tab class is __tA. The __ta span currently reads "Recon · VNDA 2020–21" — that's the attribution slot. There is zero UI signal that clicking stops the cycle. Unit links are plain <a> tags (no React intercept yet).

Issue 3 — Zone 3 dead space
Chain: .z3 (flex column, flex:1, h=575px) → .tc (display:block, flex:1, h=545px — THIS IS THE PROBLEM) → .td (h=141px only). .tc is display: block not display: flex, so .td does not stretch to fill .tc. Everything below the Overview content (~141px of rendered content) is dead space all the way to z3's bottom.

Issue 4 — Unit page is a full navigation break
Unit links (<a href="/unit/PSPTIS102">) are standard anchor tags — clicking navigates away from the HUD entirely. The unit page at /unit/[code]/ is a separate long-scroll page with only a "← Home" back link (goes to homepage, not back to the qual). No way back to the qual. This needs to become an intercepted fetch + in-HUD drawer.

Issue 5 — MCP badge on qual page
MCP badge is visible bottom-left on the qual page. It has no place on a public product surface. Remove it from the qual page render path entirely.

Issue 6 — Keyline (status: ALREADY FIXED)
Live inspection confirms .pg box-shadow is correctly rgba(15,158,130,0.2) 0px 0px 0px 1px inset. This fix shipped. No action needed.

Fixes¶

Fix 1 — Zone 2 text centering¶

File: hud.module.css (or wherever .z2e is defined)
Change: Add margin-left: auto; margin-right: auto; to .z2e

/* BEFORE */
.z2e {
  max-width: 820px;
  /* no margin centering */
}

/* AFTER */
.z2e {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

This is one line. .z2e already has max-width: 820px and display: block. Adding margin: 0 auto is all that's needed.

Fix 2 — Tab cycle toggle (rotation on/off)¶

Replace the current passive __ta attribution span with a combined attribution + toggle control. The toggle lives on the right side of the tab bar. Left side remains the tabs.

Behaviour: - On page load: cycle is ON (auto-advances tabs every 4s, locks after 5 cycles per existing cookie logic) - Clicking any tab: stops cycle, sets cycle to OFF, activates that tab - A small rotation icon (⟳) sits at the right end of the tab bar, teal when ON, muted (opacity 0.4) when OFF - Clicking the icon toggles cycle back ON (restarts from current tab) or OFF - VNDA attribution text stays — move it to below the tab bar (small, muted, left-aligned) or keep it in __ta but relocate __ta to sit under the tab strip rather than inside it

Tab bar layout change:

[ Overview ][ Employment ][ Income ][ Income support ][ Further study ]    [⟳]

The ⟳ is the cycle toggle. Icon: a simple SVG arc-arrow (or Unicode ↻ U+21BB). No label needed — the on/off teal/muted state is the affordance.

State: Use a cycleActive boolean in component state. When cycleActive === false, clear the interval. When toggled back ON, restart interval from current tab index.

When user clicks a tab button: set cycleActive = false, activate tab, update toggle icon to muted.

Fix 3 — Zone 3 height chain¶

File: hud.module.css
Problem: .tc is display: block — it does not distribute its height to children.
Fix: Change .tc to display: flex; flex-direction: column;

/* BEFORE */
.tc {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  /* display: block  ← implicit */
}

/* AFTER */
.tc {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.td (the active tab content div) should also get flex: 1 1 0; min-height: 0; overflow-y: auto; so it fills the remaining space in .tc.

Fix 4 — Unit drawer (intercept + in-HUD overlay)¶

This is the most complex fix. Unit links must not navigate away from the HUD. Instead: intercept click → fetch unit data → render in a slide-in drawer over the HUD.

Architecture:

Intercept links. In the qual page component, add onClick handler to all <a class="__ui"> unit links. Call e.preventDefault(). Set state: unitDrawerCode = 'PSPTIS102' (the unit code from the href).
Fetch unit data. When unitDrawerCode is set, fetch from the existing unit API:
```
GET /api/unit/[code]
```
(This endpoint already exists — it powers the current /unit/[code]/ page. If it doesn't exist as a standalone JSON endpoint, use the existing page data fetching logic or create GET /api/unit/[code] that returns the unit record from rtopacks-db.)
Drawer component. Render a <div class="unitDrawer"> that:
Covers the full HUD viewport (position: fixed, inset: 0, z-index: 200)
Background: rgba(0,0,0,0.85) backdrop blur over the live HUD (HUD keeps playing behind it)
Content panel: slides in from the right, ~560px wide, full height, background: rgba(12,18,24,0.96), teal left border 3px solid rgba(15,158,130,0.6)
Has an ✕ close button top-right (teal, monospace)
Shows: unit code badge, unit title, training package, elements & performance criteria, knowledge evidence, assessment conditions
Scrollable internally (overflow-y: auto)
Close on: ✕ click, Escape key, click outside panel
Back context. The drawer is always "over" the qual page. No navigation occurs. Close = return to qual, exactly where you were (tab, scroll position, all state preserved).
Unit page /unit/[code]/ stays — it's still a valid direct URL for SEO and sharing. Just add a "← Back to [Qual Title]" link if document.referrer includes /qual/. The drawer is the in-context path; the standalone page is the direct URL path.

CSS sketch:

.unitDrawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  display: flex;
  justify-content: flex-end;
}

.unitDrawerPanel {
  width: 560px;
  max-width: 100vw;
  height: 100%;
  background: rgba(12,18,24,0.97);
  border-left: 3px solid rgba(15,158,130,0.5);
  overflow-y: auto;
  padding: 32px 28px;
  animation: slideInRight 0.25s ease-out;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

Content rendering in drawer: - Performance criteria text from TGA has known formatting issues (run-on paragraphs, missing breaks). When rendering in the drawer, parse the text: split on numbered patterns (1., 1.1, 2., etc.) and render as structured list. This fixes the blob problem seen on the current unit page.

Fix 5 — Remove MCP badge from qual page¶

The MCP badge (bottom-left, green pill) must not appear on /qual/[code]/. It's appropriate on developer/internal pages, not on the public product surface.

Fix: Wherever the MCP badge component is rendered in the layout, gate it so it does not render on the qual page route. Either: - Add a route check: if (pathname.startsWith('/qual/')) return null; in the badge component, OR - Remove it from the qual page layout entirely

Ops stubs required (OPS-AS-OS rule)¶

If Fix 4 introduces a new /api/unit/[code] Worker or edge function, it must get an ops stub at ops.rtopacks.com.au at deploy time. Label: Unit Data API · endpoint: /api/unit/[code] · last called: [timestamp].

Deploy checklist¶

Fix 1: .z2e margin-auto — verify text block centred at all viewport widths
Fix 2: Cycle toggle icon in tab bar — verify ON/OFF state, verify clicking tab stops cycle
Fix 3: .tc display:flex — verify Zone 3 fills full height, no dead space
Fix 4: Unit drawer — verify no navigation on unit link click, drawer opens/closes, Escape works, HUD live behind it
Fix 5: MCP badge gone from qual page — verify bottom-left is clean
Ops stub for unit API if new endpoint created

Test qual: rtopacks.com.au/qual/PSP50922