From c7d8f89c33323995c3f32a673b3c6116cb1e9967 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Fri, 28 Aug 2026 20:15:13 -0700
Subject: 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
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019eA8JRq9Wr7z2fRQk99HLi
---
 build.js      | 9 ++++++---
 src/app.js    | 5 +++--
 src/style.css | 5 +++--
 3 files changed, 12 insertions(+), 7 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>
diff --git a/src/app.js b/src/app.js
index 310e724..05a1c40 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1995,8 +1995,9 @@ function brandHeader(withLock) {
     { class: 'row between' },
     h(
       'div',
-      { class: 'brand' + (STAGING ? ' staging' : ''), style: 'cursor:pointer', title: t('home'), onClick: goHome },
-      STAGING ? h('span', { class: 'staging-badge', title: 'staging build — new wallets start on Mutinynet' }, 'staging') : null,
+      { class: 'brand' + (STAGING ? ' staging' : ' beta'), style: 'cursor:pointer', title: t('home'), onClick: goHome },
+      STAGING ? h('span', { class: 'staging-badge', title: 'staging build — new wallets start on Mutinynet' }, 'staging')
+        : h('span', { class: 'beta-badge' }, 'beta'),
       h('div', { class: 'logo-full', 'aria-label': 'coinos', role: 'img', html: '<svg viewBox="0 0 224 72" height="40" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M36 4.23529C18.4568 4.23529 4.23529 18.4568 4.23529 36C4.23529 53.5432 18.4568 67.7647 36 67.7647C53.5432 67.7647 67.7647 53.5432 67.7647 36C67.7647 18.4568 53.5432 4.23529 36 4.23529ZM0 36C0 16.1177 16.1177 0 36 0C55.8823 0 72 16.1177 72 36C72 55.8823 55.8823 72 36 72C16.1177 72 0 55.8823 0 36Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36 58.5882C48.4751 58.5882 58.5882 48.4751 58.5882 36C58.5882 23.5248 48.4751 13.4117 36 13.4117C23.5249 13.4117 13.4118 23.5248 13.4118 36C13.4118 48.4751 23.5249 58.5882 36 58.5882ZM36 54C45.9411 54 54 45.9411 54 36C54 26.0589 45.9411 18 36 18C26.0589 18 18 26.0589 18 36C18 45.9411 26.0589 54 36 54Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M36.0001 22.8988C36.0001 22.8988 36 22.8988 36 22.8988C28.7644 22.8988 22.8988 28.7644 22.8988 36C22.8988 43.2356 28.7644 49.1012 36 49.1012C36 49.1012 36.0001 49.1012 36.0001 49.1012V22.8988Z" fill="currentColor"/><path d="M97.608 27.704C99.544 27.704 101.248 28.088 102.72 28.856C104.192 29.624 105.368 30.688 106.248 32.048C107.144 33.408 107.68 34.952 107.856 36.68H102.864C102.752 35.928 102.48 35.216 102.048 34.544C101.616 33.856 101.032 33.304 100.296 32.888C99.56 32.456 98.672 32.24 97.632 32.24C95.776 32.24 94.264 32.928 93.096 34.304C91.944 35.68 91.368 37.792 91.368 40.64C91.368 43.264 91.92 45.352 93.024 46.904C94.128 48.456 95.704 49.232 97.752 49.232C98.776 49.232 99.648 49.008 100.368 48.56C101.104 48.096 101.68 47.528 102.096 46.856C102.528 46.168 102.808 45.48 102.936 44.792H107.784C107.64 46.472 107.112 47.968 106.2 49.28C105.304 50.592 104.12 51.624 102.648 52.376C101.192 53.112 99.512 53.48 97.608 53.48C95.336 53.48 93.312 52.984 91.536 51.992C89.776 50.984 88.392 49.528 87.384 47.624C86.376 45.704 85.872 43.392 85.872 40.688C85.872 38.112 86.344 35.856 87.288 33.92C88.232 31.968 89.584 30.448 91.344 29.36C93.104 28.256 95.192 27.704 97.608 27.704ZM122.09 53.48C119.722 53.48 117.658 52.976 115.898 51.968C114.138 50.944 112.77 49.48 111.794 47.576C110.834 45.672 110.354 43.384 110.354 40.712C110.354 38.12 110.818 35.848 111.746 33.896C112.69 31.944 114.042 30.424 115.802 29.336C117.562 28.248 119.666 27.704 122.114 27.704C124.482 27.704 126.538 28.224 128.282 29.264C130.026 30.304 131.37 31.792 132.314 33.728C133.274 35.664 133.754 37.992 133.754 40.712C133.754 43.224 133.298 45.44 132.386 47.36C131.49 49.264 130.17 50.76 128.426 51.848C126.698 52.936 124.586 53.48 122.09 53.48ZM122.114 49.04C123.458 49.04 124.562 48.672 125.426 47.936C126.306 47.2 126.954 46.192 127.37 44.912C127.802 43.632 128.018 42.176 128.018 40.544C128.018 39.024 127.826 37.624 127.442 36.344C127.074 35.064 126.45 34.04 125.57 33.272C124.706 32.488 123.554 32.096 122.114 32.096C120.754 32.096 119.626 32.456 118.73 33.176C117.85 33.88 117.186 34.872 116.738 36.152C116.306 37.416 116.09 38.88 116.09 40.544C116.09 42.048 116.282 43.448 116.666 44.744C117.066 46.024 117.706 47.064 118.586 47.864C119.466 48.648 120.642 49.04 122.114 49.04ZM143.518 28.184V53H137.902V28.184H143.518ZM143.59 18.32V23.84H137.806V18.32H143.59ZM149.367 53V28.184H155.079V31.736C155.463 31.096 155.983 30.48 156.639 29.888C157.311 29.296 158.135 28.816 159.111 28.448C160.087 28.08 161.231 27.896 162.543 27.896C164.079 27.896 165.503 28.2 166.815 28.808C168.143 29.416 169.207 30.368 170.007 31.664C170.823 32.96 171.231 34.632 171.231 36.68V53H165.375V37.376C165.375 35.744 164.927 34.536 164.031 33.752C163.135 32.952 162.007 32.552 160.647 32.552C159.719 32.552 158.839 32.712 158.007 33.032C157.175 33.336 156.495 33.808 155.967 34.448C155.455 35.072 155.199 35.856 155.199 36.8V53H149.367ZM186.348 53.48C183.98 53.48 181.916 52.976 180.156 51.968C178.396 50.944 177.028 49.48 176.052 47.576C175.092 45.672 174.612 43.384 174.612 40.712C174.612 38.12 175.076 35.848 176.004 33.896C176.948 31.944 178.3 30.424 180.06 29.336C181.82 28.248 183.924 27.704 186.372 27.704C188.74 27.704 190.796 28.224 192.54 29.264C194.284 30.304 195.628 31.792 196.572 33.728C197.532 35.664 198.012 37.992 198.012 40.712C198.012 43.224 197.556 45.44 196.644 47.36C195.748 49.264 194.428 50.76 192.684 51.848C190.956 52.936 188.844 53.48 186.348 53.48ZM186.372 49.04C187.716 49.04 188.82 48.672 189.684 47.936C190.564 47.2 191.212 46.192 191.628 44.912C192.06 43.632 192.276 42.176 192.276 40.544C192.276 39.024 192.084 37.624 191.7 36.344C191.332 35.064 190.708 34.04 189.828 33.272C188.964 32.488 187.812 32.096 186.372 32.096C185.012 32.096 183.884 32.456 182.988 33.176C182.108 33.88 181.444 34.872 180.996 36.152C180.564 37.416 180.348 38.88 180.348 40.544C180.348 42.048 180.54 43.448 180.924 44.744C181.324 46.024 181.964 47.064 182.844 47.864C183.724 48.648 184.9 49.04 186.372 49.04ZM210.995 53.48C209.267 53.48 207.627 53.208 206.075 52.664C204.539 52.104 203.243 51.232 202.187 50.048C201.147 48.864 200.491 47.336 200.219 45.464H205.355C205.579 46.376 205.971 47.12 206.531 47.696C207.107 48.272 207.787 48.696 208.571 48.968C209.355 49.224 210.155 49.352 210.971 49.352C212.459 49.352 213.659 49.096 214.571 48.584C215.499 48.072 215.963 47.28 215.963 46.208C215.963 45.424 215.707 44.8 215.195 44.336C214.683 43.872 213.867 43.52 212.747 43.28L208.019 42.2C205.923 41.736 204.235 40.968 202.955 39.896C201.691 38.824 201.051 37.312 201.035 35.36C201.019 33.888 201.387 32.576 202.139 31.424C202.891 30.272 204.011 29.368 205.499 28.712C206.987 28.04 208.827 27.704 211.019 27.704C213.915 27.704 216.235 28.352 217.979 29.648C219.723 30.928 220.619 32.76 220.667 35.144H215.699C215.523 34.072 215.019 33.24 214.187 32.648C213.355 32.04 212.275 31.736 210.947 31.736C209.571 31.736 208.443 32 207.563 32.528C206.683 33.056 206.243 33.864 206.243 34.952C206.243 35.704 206.579 36.296 207.251 36.728C207.923 37.16 208.931 37.528 210.275 37.832L214.739 38.912C216.019 39.232 217.067 39.664 217.883 40.208C218.699 40.752 219.339 41.352 219.803 42.008C220.267 42.648 220.587 43.312 220.763 44C220.955 44.672 221.051 45.296 221.051 45.872C221.051 47.472 220.635 48.84 219.803 49.976C218.987 51.096 217.827 51.96 216.323 52.568C214.819 53.176 213.043 53.48 210.995 53.48Z" fill="currentColor"/></svg>' })
     ),
     withLock
diff --git a/src/style.css b/src/style.css
index 2433d82..f0ec820 100644
--- a/src/style.css
+++ b/src/style.css
@@ -502,14 +502,15 @@ hr.divider { margin: 16px 0; }
 .confirm-pop { width: 100%; max-width: 340px; }
 
 /* staging builds: an unmissable stamp across the header logo */
-.brand.staging { position: relative; }
-.staging-badge {
+.brand.staging, .brand.beta { position: relative; }
+.staging-badge, .beta-badge {
   position: absolute; left: 2px; bottom: -3px; z-index: 2; pointer-events: none;
   background: #f7931a; color: #fff; font-size: 9px; font-weight: 750;
   letter-spacing: .06em; text-transform: uppercase; line-height: 1;
   padding: 2px 6px; border-radius: 5px; transform: rotate(-6deg);
   box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
 }
+.beta-badge { background: #6d28d9; }
 .wallet-row-btn { font-size: 19px; line-height: 1; padding: 8px 12px; }
 .chat-avatar.header-ava.fallback { align-items: center; justify-content: center; display: flex; color: var(--muted); }
 
-- 
cgit v1.2.3