The logo wears its beta sticker — purple, tilted like staging's orange one, present from the static boot shell's very first paint so it never pops in

Co-Authored-By: Claude Fable 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_019eA8JRq9Wr7z2fRQk99HLi

1 files changed, 6 insertions, 3 deletions

diff --git a/build.js b/build.js
index 94552fa..72ea98b9 100644
--- a/build.js
+++ b/build.js
@@ -332,8 +332,11 @@ async function brandSvg() {
 // before any JS parses — no blank page, no flash. It mirrors the DOM the
 // app's own first render produces (brand row; plus the profile shell when
 // the path deep-links a profile), so the morph replaces it invisibly.
-function bootShell(logo) {
-  return `<div class="col" style="gap:16px"><div class="row between"><div class="brand"><div class="logo-full" aria-label="coinos" role="img">${logo}</div></div></div><div class="card col" id="boot-shell" style="gap:12px;display:none"><div class="row gap6" style="align-items:center"><div class="chat-avatar profile-avatar fallback loading"></div><div class="chat-title" id="boot-shell-name"></div></div></div></div>`;
+function bootShell(logo, staging) {
+  const badge = staging
+    ? '<span class="staging-badge">staging</span>'
+    : '<span class="beta-badge">beta</span>';
+  return `<div class="col" style="gap:16px"><div class="row between"><div class="brand ${staging ? 'staging' : 'beta'}">${badge}<div class="logo-full" aria-label="coinos" role="img">${logo}</div></div></div><div class="card col" id="boot-shell" style="gap:12px;display:none"><div class="row gap6" style="align-items:center"><div class="chat-avatar profile-avatar fallback loading"></div><div class="chat-title" id="boot-shell-name"></div></div></div></div>`;
 }
 const BOOT_SHELL_SCRIPT = `<script>try{var m=location.pathname.match(/^\\/([A-Za-z0-9._-]{1,64})\\/?$/);if(m){document.getElementById('boot-shell').style.display='';document.getElementById('boot-shell-name').textContent=decodeURIComponent(m[1]);}}catch(e){}</script>`;
 
@@ -350,7 +353,7 @@ async function pageHtml({ css, staging, pwa, scriptHtml }) {
 ${pwa ? PWA_HEAD : ''}<style>${css}</style>
 </head>
 <body>
-<div id="app">${bootShell(await brandSvg())}</div>
+<div id="app">${bootShell(await brandSvg(), staging)}</div>
 ${BOOT_SHELL_SCRIPT}
 ${scriptHtml}
 ${pwa ? SW_REGISTER + '\n' : ''}</body>