diff --git a/bundled-addons/hermes/addon.json b/bundled-addons/hermes/addon.json
index a730d9bf..98165660 100644
--- a/bundled-addons/hermes/addon.json
+++ b/bundled-addons/hermes/addon.json
@@ -1,7 +1,7 @@
 {
   "id": "hermes",
   "name": "Hermes",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "description": "Message anyone by their on-chain name. End-to-end encrypted DMs over Nostr (NIP-17), identity derived from your wallet seed.",
   "author": "Silent Mode",
   "icon": "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjM3OS45NCA5OC40MiA1NjIuMzUgNTYyLjM1IiByb2xlPSJpbWciIGFyaWEtbGFiZWw9Ikhlcm1lcyI+PHRpdGxlPkhlcm1lczwvdGl0bGU+PHBhdGggZmlsbD0iIzM4QkRGOCIgZD0iTTU0Ny42MTUxMTIsNTEwLjM4MDk1MSAgIEM1NDEuMjU5Mzk5LDUwMC43OTY2OTIgNTMzLjEyNjM0Myw0OTcuMzAwMDQ5IDUyMS41MjY4NTUsNDk2LjQwMDgxOCAgIEM1MDAuNDAxNTgxLDQ5NC43NjMyMTQgNDgzLjk1ODQ2Niw0ODIuODgwMjgwIDQ3MS4zODMyMDksNDY1Ljk4ODMxMiAgIEM0NjkuMjI1Njc3LDQ2My4wOTAwODggNDY3LjA3NjE0MSw0NjIuMTA5NzcyIDQ2My41NDAxOTIsNDYyLjE4OTM5MiAgIEM0NDEuNDcwMjc2LDQ2Mi42ODYzMTAgNDIyLjI4NjY1Miw0NTUuMjIyODM5IDQwNi41NDc3OTEsNDM5LjgzNzk1MiAgIEMzOTcuNDI0MjU1LDQzMC45MTk1ODYgMzg5LjEzMjA1MCw0MjEuMTUwNzU3IDM3OS45Mzk3ODksNDExLjE5NTAzOCAgIEMzODIuODY1MTQzLDQwOS44OTEzMjcgMzg0Ljc0MzMxNyw0MDguOTQ3MTEzIDM4Ni42OTY2NTUsNDA4LjE5OTMxMCAgIEM0NDkuMTY1MjIyLDM4NC4yODQ1NDYgNTExLjY3NTIwMSwzNjAuNDc3Mjk1IDU3NC4wODMwMDgsMzM2LjQwNTIxMiAgIEM1ODQuODMyNTgxLDMzMi4yNTg4NTAgNTk1LjI3OTU0MSwzMzEuMjkwMjUzIDYwNi40NjIwOTcsMzM2LjI4MzE0MiAgIEM2MDcuNDI3OTc5LDMyMy44NTU1OTEgNjE1LjQ5ODEwOCwzMTkuMjUzMzg3IDYyNS41NDM0NTcsMzE1LjQ1NTA3OCAgIEM3MDIuNDMxODI0LDI4Ni4zODIwMTkgNzc5LjE4MjQ5NSwyNTYuOTQ0ODI0IDg1NS45OTEyMTEsMjI3LjY2MDcwNiAgIEM4NjkuODU1MTY0LDIyMi4zNzQ5MDggODc5LjAwMjU2MywyMjYuODExNzgzIDg4NC4xNjA3NjcsMjQwLjg5MzIwNCAgIEM5MDEuODQ1NzY0LDI4OS4xNzEyNjUgOTE5LjU3MDA2OCwzMzcuNDM0OTY3IDkzNy4zMjA2MTgsMzg1LjY4ODk2NSAgIEM5NDIuMjg0OTczLDM5OS4xODQ0NzkgOTM4LjIwOTQ3Myw0MDguOTc5MTI2IDkyNC44MzU1MTAsNDE0LjA3NDY0NiAgIEM4NTYuNTY5NjQxLDQ0MC4wODQwNzYgNzg4LjI2MTc4MCw0NjUuOTgzMTg1IDcxOS45NjYxMjUsNDkxLjkxNDM5OCAgIEM3MTAuMDA4MTc5LDQ5NS42OTUzMTIgNzAwLjA3OTc3Myw0OTkuNTU5ODc1IDY5MC4wNjExNTcsNTAzLjE3MzU4NCAgIEM2NzcuODY3ODU5LDUwNy41NzE2NTUgNjY4LjMyMjMyNyw1MDMuNDAzMjkwIDY2My42MjY4MzEsNDkxLjAzMzA1MSAgIEM2NTIuNTg0MjkwLDQ2MS45NDE5NTYgNjQxLjkwMzA3Niw0MzIuNzEzNzQ1IDYzMS4wNjY4MzMsNDAzLjU0NDM0MiAgIEM2MjkuMzg2MzUzLDM5OS4wMjA4NzQgNjI3LjM0MDM5MywzOTQuNjA2MTcxIDYyNi4wMTUxMzcsMzg5Ljk4MzAzMiAgIEM2MjIuMzYyNjEwLDM3Ny4yNDA5OTcgNjEzLjEwMzE0OSwzNjkuNzA2Njk2IDYwMi4wOTc3MTcsMzYzLjg3MzUzNSAgIEM1OTMuNjMwNzM3LDM1OS4zODU3NzMgNTg1LjAzNjAxMSwzNTguNjY1NDA1IDU3NS42ODIxMjksMzYyLjMwNTcyNSAgIEM1MjYuODM4NTYyLDM4MS4zMTQ0ODQgNDc3Ljg1NTQ5OSwzOTkuOTY0ODc0IDQyOC45MjU3NTEsNDE4Ljc1MjQxMSAgIEM0MjcuMjQ5NTczLDQxOS4zOTU5OTYgNDI1LjYyNDYzNCw0MjAuMTcyOTEzIDQyMy4yMTIzNzIsNDIxLjIxODU5NyAgIEM0MjkuOTQ3Mzg4LDQyOC4xNjEwMTEgNDM3LjUxNDUyNiw0MzIuMzQ2NjQ5IDQ0NS45NjYzMDksNDM0LjkzNjc5OCAgIEM0NTguNjk2Nzc3LDQzOC44MzgxNjUgNDcxLjA4NTA1Miw0MzcuODEyNTAwIDQ4My41NjE4OTAsNDMyLjk0NTE2MCAgIEM1MjIuNjIzMjMwLDQxNy43MDY4MTggNTYxLjgzNTY5Myw0MDIuODU1NjIxIDYwMC45OTQyNjMsMzg3Ljg2NjYzOCAgIEM2MDIuODIxMTY3LDM4Ny4xNjczODkgNjA0LjY5MzI5OCwzODYuNTg2MjEyIDYwNy4xNDE1NDEsMzg1Ljc0NDc1MSAgIEM2MDkuODk2NjA2LDM5My4zMzc5NTIgNjEyLjU0NDQzNCw0MDAuNjM1ODAzIDYxNS40NzYzMTgsNDA4LjcxNjQ5MiAgIEM1NzUuMjY5MDQzLDQyNC4xNDczNjkgNTM1LjMwNjU4MCw0MzkuNDg0MzE0IDQ5NC43MzA5MjcsNDU1LjA1NjU0OSAgIEM1MDIuOTg1MzUyLDQ2NC43NDAxNDMgNTEyLjkxNTgzMyw0NzAuMDMzMjY0IDUyNC43OTA1ODgsNDcxLjk1NDQ5OCAgIEM1MzMuMjIwNTgxLDQ3My4zMTg0MjAgNTQxLjMyNDM0MSw0NzIuMjk0MjIwIDU0OS4yOTU3MTUsNDY5LjIxMjg5MSAgIEM1NzMuNTA3MDgwLDQ1OS44NTQwMDQgNTk3Ljc2ODE4OCw0NTAuNjIzNzE4IDYyMi4wMTU0NDIsNDQxLjM1Nzk0MSAgIEM2MjMuNTMzOTk3LDQ0MC43Nzc2NDkgNjI1LjEwMDQwMyw0NDAuMzIyNDc5IDYyNy4xMTMwOTgsNDM5LjY1MzI5MCAgIEM2MjkuOTk2ODg3LDQ0Ny4yOTgxNTcgNjMyLjc4MjI4OCw0NTQuNjgyMDk4IDYzNS43MTI0NjMsNDYyLjQ0OTg2MCAgIEM2MTEuNDMzMjg5LDQ3MS44MTI0MzkgNTg3LjYxNjAyOCw0ODAuOTk2ODg3IDU2My4wMjM2MjEsNDkwLjQ4MDI1NSAgIEM1NzUuMzY0ODY4LDUwMy40MDc3NDUgNTg5LjU5NDQyMSw1MTAuMjkwNDk3IDYwNi40NjEzMDQsNTA3LjA4MDk2MyAgIEM2MTguNDEyNTM3LDUwNC44MDY3NjMgNjI5Ljc3ODEzNyw0OTkuNDUxOTA0IDY0MS40MDE1NTAsNDk1LjQ2MTYwOSAgIEM2NDMuMTExODE2LDQ5NC44NzQ0ODEgNjQ0LjgwMjE4NSw0OTQuMjI5MzA5IDY0NS44MDA2NTksNDkzLjg2NjA1OCAgIEM2NTEuMjczMzc2LDUwMC43OTA3MTAgNjU2LjQ0MDMwOCw1MDcuMzI4NDAwIDY2Mi4xMTE1MTEsNTE0LjUwNDE1MCAgIEM2NDUuODA4NDcyLDUyMC4xNTAyNjkgNjI5LjQwODM4Niw1MjcuNTgyOTQ3IDYxMi4yMDU2ODgsNTMxLjM2OTYyOSAgIEM1ODcuNDY4MTQwLDUzNi44MTUwNjMgNTY2LjAyNDA0OCw1MjcuNzgzNTA4IDU0Ny42MTUxMTIsNTEwLjM4MDk1MSAgTTkwOC45MzU5MTMsMzc5LjIwMDg2NyAgIEM4OTUuNTAwODU0LDM0Mi42NDQzNzkgODgyLjA2NTczNSwzMDYuMDg3ODkxIDg2OC4yMTIzNDEsMjY4LjM5MzE1OCAgIEM4NTguNzY4NzM4LDI4NS4zNjY4MjEgODQ5Ljk4NjAyMywzMDEuMDMwMzA0IDg0MS4zMjUzNzgsMzE2Ljc2MTAxNyAgIEM4MzUuMzA2Mzk2LDMyNy42OTM1NDIgODI5LjQ1NTI2MSwzMzguNzE4NTA2IDgyMy4wNjUzMDgsMzUwLjIwMTAxOSAgIEM4MTEuNzgxNzM4LDM2OS45Njc4NjUgODAwLjQ5ODE2OSwzODkuNzM0NzQxIDc4OS4wNjQxNDgsNDA5Ljc2NTE5OCAgIEM3MzkuMzY1OTY3LDM5MS44NDk2MDkgNjkwLjAyNTIwOCwzNzQuMDYyODk3IDYzOS43NDg1OTYsMzU1LjkzODg0MyAgIEM2NDAuNjgzNTMzLDM1OC42ODg3ODIgNjQxLjE3Njk0MSwzNjAuMjUyMjI4IDY0MS43NDMyMjUsMzYxLjc4ODgxOCAgIEM2NDkuNzM5MDc1LDM4My40ODM3OTUgNjU3LjY2NTI4Myw0MDUuMjA0ODk1IDY2NS43NzU2MzUsNDI2Ljg1NzAyNSAgIEM2NzEuMzcwODUwLDQ0MS43OTQ2NDcgNjc3LjA1ODcxNiw0NTYuNzAyNjM3IDY4My4wNDUyMjcsNDcxLjQ4NjE0NSAgIEM2ODUuMzg2ODQxLDQ3Ny4yNjgzNzIgNjg4LjA1MTU3NSw0NzguMTc0ODk2IDY5NC4wNjgyMzcsNDc1Ljk4NjA4NCAgIEM3MDAuOTU3Mjc1LDQ3My40Nzk4NTggNzA3LjY2NTc3MSw0NzAuNDgyNDUyIDcxNC41MTU2MjUsNDY3Ljg2Mjk3NiAgIEM3NzYuNDU4NjE4LDQ0NC4xNzUyMDEgODM4LjQxOTMxMiw0MjAuNTMzNTM5IDkwMC4zNjM2NDcsMzk2Ljg0OTIxMyAgIEM5MDguNjA4NzY1LDM5My42OTY3MTYgOTEyLjAwMTE2MCwzODYuODczNDc0IDkwOC45MzU5MTMsMzc5LjIwMDg2NyAgTTgyMS45NTg0MzUsMzAyLjQyMjg4MiAgIEM4MjkuOTQ3MjY2LDI4Ny45MzE3MDIgODM3LjkzNjE1NywyNzMuNDQwNTIxIDg0Ni42MzY1OTcsMjU3LjY1ODY2MSAgIEM3ODAuMTM1NDM3LDI4My4wMTIyMDcgNzE1LjAxMDA3MSwzMDcuODQxMjc4IDY0OS44ODQ2NDQsMzMyLjY3MDM0OSAgIEM2NDkuOTAxOTc4LDMzMy4wNjk2MTEgNjQ5LjkxOTM3MywzMzMuNDY4OTAzIDY0OS45MzY3MDcsMzMzLjg2ODE5NSAgIEM2OTIuNjc0MTMzLDM0OS4yNjY3NTQgNzM1LjQxMTU2MCwzNjQuNjY1MzE0IDc3OC40NDI0NDQsMzgwLjE2OTYxNyAgIEM3OTMuMDA5ODI3LDM1NC4xNDUzMjUgODA3LjMwNTA1NCwzMjguNjA3MjM5IDgyMS45NTg0MzUsMzAyLjQyMjg4MiAgeiIvPjxwYXRoIGZpbGw9IiMwNjExMWEiIGQ9Ik05MDguOTQ3NzU0LDM3OS45MzkyNDAgICBDOTEyLjAwMTE2MCwzODYuODczNDc0IDkwOC42MDg3NjUsMzkzLjY5NjcxNiA5MDAuMzYzNjQ3LDM5Ni44NDkyMTMgICBDODM4LjQxOTMxMiw0MjAuNTMzNTM5IDc3Ni40NTg2MTgsNDQ0LjE3NTIwMSA3MTQuNTE1NjI1LDQ2Ny44NjI5NzYgICBDNzA3LjY2NTc3MSw0NzAuNDgyNDUyIDcwMC45NTcyNzUsNDczLjQ3OTg1OCA2OTQuMDY4MjM3LDQ3NS45ODYwODQgICBDNjg4LjA1MTU3NSw0NzguMTc0ODk2IDY4NS4zODY4NDEsNDc3LjI2ODM3MiA2ODMuMDQ1MjI3LDQ3MS40ODYxNDUgICBDNjc3LjA1ODcxNiw0NTYuNzAyNjM3IDY3MS4zNzA4NTAsNDQxLjc5NDY0NyA2NjUuNzc1NjM1LDQyNi44NTcwMjUgICBDNjU3LjY2NTI4Myw0MDUuMjA0ODk1IDY0OS43MzkwNzUsMzgzLjQ4Mzc5NSA2NDEuNzQzMjI1LDM2MS43ODg4MTggICBDNjQxLjE3Njk0MSwzNjAuMjUyMjI4IDY0MC42ODM1MzMsMzU4LjY4ODc4MiA2MzkuNzQ4NTk2LDM1NS45Mzg4NDMgICBDNjkwLjAyNTIwOCwzNzQuMDYyODk3IDczOS4zNjU5NjcsMzkxLjg0OTYwOSA3ODkuMDY0MTQ4LDQwOS43NjUxOTggICBDODAwLjQ5ODE2OSwzODkuNzM0NzQxIDgxMS43ODE3MzgsMzY5Ljk2Nzg2NSA4MjMuNjA0Njc1LDM1MC4wNzQ0MDIgICBDODI1LjA4Njg1MywzNDkuMzYyMjc0IDgyNi4zNjM2NDcsMzQ4Ljk4ODc3MCA4MjYuODk5MzUzLDM0OC4xNDQ4NjcgICBDODI3Ljg1ODY0MywzNDYuNjMzNDUzIDgyOC4yMjU5NTIsMzQ0Ljc1OTAwMyA4MjkuMDkzNTY3LDM0My4xNzQ4MzUgICBDODM5LjMwNzY3OCwzMjQuNTI0NTY3IDg0OS41NTEwMjUsMzA1Ljg5MDMyMCA4NTkuODM4NzQ1LDI4Ny4yODA1NzkgICBDODYxLjIwMjIwOSwyODQuODE0MDU2IDg2Mi43MDE1OTksMjgyLjM5MTA1MiA4NjQuNDA1NDU3LDI4MC4xNTEzOTggICBDODY3LjMyODEyNSwyNzYuMzA5NzUzIDg2OC41NjI4MDUsMjc2LjQyODgwMiA4NzAuMjk3MTE5LDI4MC45NDUxMjkgICBDODc3LjY2OTU1NiwzMDAuMTQ0MTA0IDg4NC45ODcxODMsMzE5LjM2NDkyOSA4OTIuMTc4NTI4LDMzOC42MzIzMjQgICBDODk2Ljg4MDE4OCwzNTEuMjI5MDA0IDkwMS4yODMyNjQsMzYzLjkzNjk1MSA5MDUuOTY1MDg4LDM3Ni41NDExNjggICBDOTA2LjQ1NTM4MywzNzcuODYxMDUzIDkwNy45Mjk5MzIsMzc4LjgxNTMzOCA5MDguOTQ3NzU0LDM3OS45MzkyNDAgIHoiLz48cGF0aCBmaWxsPSIjMDYxMTFhIiBkPSJNODIxLjc3OTM1OCwzMDIuNzQ2MDMzICAgQzgwNy4zMDUwNTQsMzI4LjYwNzIzOSA3OTMuMDA5ODI3LDM1NC4xNDUzMjUgNzc4LjQ0MjQ0NCwzODAuMTY5NjE3ICAgQzczNS40MTE1NjAsMzY0LjY2NTMxNCA2OTIuNjc0MTMzLDM0OS4yNjY3NTQgNjQ5LjkzNjcwNywzMzMuODY4MTk1ICAgQzY0OS45MTkzNzMsMzMzLjQ2ODkwMyA2NDkuOTAxOTc4LDMzMy4wNjk2MTEgNjQ5Ljg4NDY0NCwzMzIuNjcwMzQ5ICAgQzcxNS4wMTAwNzEsMzA3Ljg0MTI3OCA3ODAuMTM1NDM3LDI4My4wMTIyMDcgODQ2LjYzNjU5NywyNTcuNjU4NjYxICAgQzgzNy45MzYxNTcsMjczLjQ0MDUyMSA4MjkuOTQ3MjY2LDI4Ny45MzE3MDIgODIxLjc3OTM1OCwzMDIuNzQ2MDMzICB6Ii8+PHBhdGggZmlsbD0iIzA2MTExYSIgZD0iTTkwOC45NDE4MzMsMzc5LjU3MDA2OCAgIEM5MDcuOTI5OTMyLDM3OC44MTUzMzggOTA2LjQ1NTM4MywzNzcuODYxMDUzIDkwNS45NjUwODgsMzc2LjU0MTE2OCAgIEM5MDEuMjgzMjY0LDM2My45MzY5NTEgODk2Ljg4MDE4OCwzNTEuMjI5MDA0IDg5Mi4xNzg1MjgsMzM4LjYzMjMyNCAgIEM4ODQuOTg3MTgzLDMxOS4zNjQ5MjkgODc3LjY2OTU1NiwzMDAuMTQ0MTA0IDg3MC4yOTcxMTksMjgwLjk0NTEyOSAgIEM4NjguNTYyODA1LDI3Ni40Mjg4MDIgODY3LjMyODEyNSwyNzYuMzA5NzUzIDg2NC40MDU0NTcsMjgwLjE1MTM5OCAgIEM4NjIuNzAxNTk5LDI4Mi4zOTEwNTIgODYxLjIwMjIwOSwyODQuODE0MDU2IDg1OS44Mzg3NDUsMjg3LjI4MDU3OSAgIEM4NDkuNTUxMDI1LDMwNS44OTAzMjAgODM5LjMwNzY3OCwzMjQuNTI0NTY3IDgyOS4wOTM1NjcsMzQzLjE3NDgzNSAgIEM4MjguMjI1OTUyLDM0NC43NTkwMDMgODI3Ljg1ODY0MywzNDYuNjMzNDUzIDgyNi44OTkzNTMsMzQ4LjE0NDg2NyAgIEM4MjYuMzYzNjQ3LDM0OC45ODg3NzAgODI1LjA4Njg1MywzNDkuMzYyMjc0IDgyMy44MzY1NDgsMzQ5LjgyNTAxMiAgIEM4MjkuNDU1MjYxLDMzOC43MTg1MDYgODM1LjMwNjM5NiwzMjcuNjkzNTQyIDg0MS4zMjUzNzgsMzE2Ljc2MTAxNyAgIEM4NDkuOTg2MDIzLDMwMS4wMzAzMDQgODU4Ljc2ODczOCwyODUuMzY2ODIxIDg2OC4yMTIzNDEsMjY4LjM5MzE1OCAgIEM4ODIuMDY1NzM1LDMwNi4wODc4OTEgODk1LjUwMDg1NCwzNDIuNjQ0Mzc5IDkwOC45NDE4MzMsMzc5LjU3MDA2OCAgeiIvPjwvc3ZnPgo=",
diff --git a/bundled-addons/hermes/panel.html b/bundled-addons/hermes/panel.html
index 799b350b..52db84bd 100644
--- a/bundled-addons/hermes/panel.html
+++ b/bundled-addons/hermes/panel.html
@@ -257,55 +257,65 @@
   </div>
 </div>
 
-<!-- ========== SIGNIN SCREEN ========== -->
+<!-- ========== SIGNIN SCREEN ==========
+     Same tab bar as the web messenger: Sign in / Sign up persistent pill,
+     active tab filled. The Theseus-only "Open with Theseus ID" quick path
+     slots into the Sign in tab's form when the vault is unlocked. -->
 <div class="screen active" id="signin">
   <div class="mk" aria-hidden="true">
     <img src="assets/mark.svg" alt="" width="72" height="72" style="display:block">
   </div>
   <h1>Hermes</h1>
   <p class="lede">End-to-end encrypted DMs. Your identity is your on-chain registered name — same wallet seed as Theseus.</p>
-  <div class="actions">
-    <button class="primary" id="useVaultBtn" disabled>Open with Theseus ID</button>
-    <button class="secondary" id="toggleCreateBtn">Create a new account</button>
+
+  <!-- Persistent tab bar. Clicking an inactive tab swaps the form below. -->
+  <div id="startRow" style="display:flex;gap:0;width:100%;max-width:300px;border:1px solid var(--line);border-radius:999px;padding:3px;background:var(--panel)">
+    <button class="tab tab-active" id="startSignInBtn" style="flex:1;font:inherit;font-weight:600;font-size:13px;padding:8px 10px;background:var(--sky);color:var(--sky-ink);border:0;border-radius:999px;cursor:pointer">Sign in</button>
+    <button class="tab" id="startSignUpBtn" style="flex:1;font:inherit;font-weight:600;font-size:13px;padding:8px 10px;background:transparent;color:var(--ink);border:0;border-radius:999px;cursor:pointer">Sign up</button>
   </div>
-  <div class="mnemonic" id="createBox">
-    <input id="createHandle" type="text" placeholder="alice" autocomplete="off" spellcheck="false" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
+
+  <!-- Sign-in form (default). Theseus-ID button appears above when the
+       vault is unlocked (toggled by boot code based on canUseVault). -->
+  <div id="signinForm" style="display:flex;width:100%;max-width:300px;flex-direction:column;gap:8px">
+    <button class="primary" id="useVaultBtn" disabled style="display:none">Open with Theseus ID</button>
+    <input id="signinHandle" type="text" placeholder="alice" autocomplete="username" spellcheck="false" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
+    <input id="signinPassword" type="password" placeholder="password" autocomplete="current-password" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
+    <button class="primary" id="signinBtn">Sign in</button>
+  </div>
+
+  <!-- Sign-up form (hidden until Sign up tab active). -->
+  <div id="signupForm" style="display:none;width:100%;max-width:300px;flex-direction:column;gap:8px">
+    <input id="createHandle" type="text" placeholder="pick a name — alice" autocomplete="off" spellcheck="false" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
     <input id="createPassword" type="password" placeholder="password (min 6)" autocomplete="new-password" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
     <input id="createPassword2" type="password" placeholder="confirm password" autocomplete="new-password" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
     <label style="display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--mut);text-align:left;cursor:pointer">
       <input id="createCloud" type="checkbox" style="margin-top:3px;accent-color:var(--sky)">
-      <span>Back up to the cloud so I can sign in on other devices with this name + password. (You can turn this off in Settings. Your password is the only key; relays never see the seed.)</span>
+      <span>Back up to the cloud so I can sign in on other devices with this name + password.</span>
     </label>
     <button class="primary" id="useCreateBtn">Create account</button>
-    <div class="hint">You'll get a handle like <code>alice.erm</code>. We'll generate a seed phrase — back it up in Settings.</div>
+    <div class="hint" style="margin-top:0">We'll generate a seed phrase — back it up in Settings after you sign in.</div>
   </div>
 
-  <div style="display:flex;align-items:center;gap:10px;width:100%;max-width:300px;margin-top:8px">
-    <span style="flex:1;height:1px;background:var(--line)"></span>
-    <span style="color:var(--mut);font-size:11.5px;letter-spacing:.4px;text-transform:uppercase">Sign in</span>
-    <span style="flex:1;height:1px;background:var(--line)"></span>
+  <!-- Recover-with-seed form. Reached from the "Recover with seed phrase"
+       link, has its own ← Back since recovery is a one-shot flow. -->
+  <div id="recoverForm" style="display:none;width:100%;max-width:300px;flex-direction:column;gap:8px">
+    <textarea id="mnemonicInput" placeholder="nsec1… or 12/24-word mnemonic" autocomplete="off" spellcheck="false" style="font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;min-height:86px;resize:vertical"></textarea>
+    <button class="primary" id="recoverBtn">Recover account</button>
+    <button class="secondary" id="recoverBack" style="font:inherit;background:transparent;color:var(--mut);border:0;cursor:pointer;font-size:12px;padding:4px">← Back to sign in</button>
+    <div class="hint">Stays in this panel, never leaves the device.</div>
   </div>
 
-  <div class="signin-chips" style="display:flex;gap:6px;width:100%;max-width:300px">
-    <button class="chip chip-active" data-method="namepw" style="flex:1;font:inherit;font-size:12px;padding:7px 8px;background:var(--sky);color:#06111a;border:1px solid var(--sky);border-radius:6px;cursor:pointer;font-weight:600">Name + password</button>
-    <button class="chip" data-method="seed" style="flex:1;font:inherit;font-size:12px;padding:7px 8px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:6px;cursor:pointer">Seed phrase</button>
+  <!-- Hidden legacy button so the old toggleCreateBtn handler doesn't crash. -->
+  <div style="display:none">
+    <button id="toggleCreateBtn"></button>
   </div>
 
-  <div id="methodNamepw" class="method" style="width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px">
-    <input id="signinHandle" type="text" placeholder="alice" autocomplete="username" spellcheck="false" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
-    <input id="signinPassword" type="password" placeholder="password" autocomplete="current-password" style="font-family:inherit;font-size:13px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%">
-    <div class="hint">Works on this device, or on any device if you turned on cloud backup. Otherwise use seed phrase.</div>
+  <div id="recoverLinkRow" style="margin-top:6px">
+    <a href="#" id="recoverLink" style="color:var(--mut);font-size:12px;text-decoration:underline">Recover with seed phrase</a>
   </div>
 
-  <div id="methodSeed" class="method" style="width:100%;max-width:300px;display:none;flex-direction:column;gap:8px">
-    <textarea id="mnemonicInput" placeholder="nsec1… or 12/24-word mnemonic — stays in this tab, never sent to the server" autocomplete="off" spellcheck="false" style="font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;min-height:86px;resize:vertical"></textarea>
-    <div class="hint">Paste your 12 or 24 words.</div>
-  </div>
-
-  <button class="primary" id="signinBtn" style="width:100%;max-width:300px;margin-top:4px">Sign in</button>
   <div class="err" id="signinErr"></div>
-  <div class="hint" id="vaultHint"></div>
-  <div class="hint" style="margin-top:4px;max-width:300px">You'll stay signed in. Sign out from the ⋯ menu.</div>
+  <div class="hint" id="vaultHint" style="font-size:11px;max-width:300px;text-align:center"></div>
 </div>
 
 <!-- ========== APP SCREEN ========== -->
@@ -637,6 +647,34 @@ function showSignin() {
   $("signin").classList.add("active");
   $("menuBtn").style.display = "none";
   closeMenu();
+  showSigninView("signin");
+}
+
+// One of: "signin" (default), "signup", "recover". Sign in / Sign up tabs
+// stay visible on the first two; recover hides them (its own ← Back).
+function showSigninView(name) {
+  const inTabs = name === "signin" || name === "signup";
+  $("startRow").style.display    = inTabs             ? "flex" : "none";
+  $("signinForm").style.display  = name === "signin"  ? "flex" : "none";
+  $("signupForm").style.display  = name === "signup"  ? "flex" : "none";
+  $("recoverForm").style.display = name === "recover" ? "flex" : "none";
+  $("recoverLinkRow").style.display = inTabs ? "block" : "none";
+
+  const styleTab = (btn, active) => {
+    btn.classList.toggle("tab-active", active);
+    btn.style.background = active ? "var(--sky)" : "transparent";
+    btn.style.color      = active ? "var(--sky-ink)" : "var(--ink)";
+  };
+  styleTab($("startSignInBtn"), name === "signin");
+  styleTab($("startSignUpBtn"), name === "signup");
+
+  err($("signinErr"), "");
+  const focusEl = {
+    signin:  $("signinHandle"),
+    signup:  $("createHandle"),
+    recover: $("mnemonicInput"),
+  }[name];
+  if (focusEl) setTimeout(() => focusEl.focus(), 50);
 }
 
 function openMenu() { $("menu").style.display = "block"; }
@@ -650,7 +688,7 @@ async function initWithOpts(opts) {
   err($("signinErr"), "");
   const btn = opts.create ? $("useCreateBtn")
             : opts.useVault ? $("useVaultBtn")
-            : $("useMnemonicBtn");
+            : $("recoverBtn");
   const prev = btn.textContent;
   btn.disabled = true; btn.textContent = "Opening…";
   try {
@@ -688,14 +726,18 @@ async function initWithOpts(opts) {
     }
   } catch {}
 
-  // Enable "Open with Theseus ID" iff the vault is unlocked AND was set up with a mnemonic.
+  // Enable "Open with Theseus ID" iff the vault is unlocked AND was set up
+  // with a mnemonic. The button hides entirely when unavailable so the
+  // signin form stays clean on untyped vaults.
   try {
     const v = await bridge.invoke("canUseVault");
     state.canUseVault = !!(v && v.available);
-    $("useVaultBtn").disabled = !state.canUseVault;
+    const btn = $("useVaultBtn");
+    btn.disabled = !state.canUseVault;
+    btn.style.display = state.canUseVault ? "block" : "none";
     $("vaultHint").textContent = state.canUseVault
       ? "Uses the same wallet seed as Theseus — nothing new to remember."
-      : "To use Theseus ID, unlock the password vault first (set up with a 12/24-word mnemonic).";
+      : "";
   } catch {}
 
   // Panel event bus — pushes from main.js.
@@ -720,12 +762,16 @@ async function initWithOpts(opts) {
   setInterval(refreshStatus, 7000);
 })();
 
-// ---- events ----
+// ---- events: tab switcher + recover link ----
+$("startSignInBtn").addEventListener("click", () => showSigninView("signin"));
+$("startSignUpBtn").addEventListener("click", () => showSigninView("signup"));
+$("recoverLink").addEventListener("click", (e) => { e.preventDefault(); showSigninView("recover"); });
+$("recoverBack").addEventListener("click", () => showSigninView("signin"));
+showSigninView("signin");
+
+// Theseus-only quick path: unlock Hermes with the vault seed.
 $("useVaultBtn").addEventListener("click", () => initWithOpts({ useVault: true }));
-$("toggleCreateBtn").addEventListener("click", () => {
-  $("createBox").classList.toggle("show");
-  if ($("createBox").classList.contains("show")) $("createHandle").focus();
-});
+
 $("useCreateBtn").addEventListener("click", async () => {
   const handle = $("createHandle").value.trim();
   const p1 = $("createPassword").value;
@@ -743,34 +789,13 @@ $("useCreateBtn").addEventListener("click", async () => {
   }
 });
 
-// --- unified Sign in button + chip switcher ---
-function switchMethod(name) {
-  for (const c of document.querySelectorAll(".signin-chips .chip")) {
-    const active = c.dataset.method === name;
-    c.classList.toggle("chip-active", active);
-    c.style.background = active ? "var(--sky)" : "var(--panel)";
-    c.style.color = active ? "#06111a" : "var(--ink)";
-    c.style.borderColor = active ? "var(--sky)" : "var(--line)";
-    c.style.fontWeight = active ? "600" : "400";
-  }
-  $("methodNamepw").style.display = name === "namepw" ? "flex" : "none";
-  $("methodSeed").style.display   = name === "seed"   ? "flex" : "none";
-  state._signinMethod = name;
-  const focusEl = name === "namepw" ? $("signinHandle") : $("mnemonicInput");
-  setTimeout(() => focusEl && focusEl.focus(), 50);
-}
-state._signinMethod = "namepw";
-for (const c of document.querySelectorAll(".signin-chips .chip")) {
-  c.addEventListener("click", () => switchMethod(c.dataset.method));
-}
 $("signinBtn").addEventListener("click", async () => {
-  const m = state._signinMethod || "namepw";
   err($("signinErr"), "");
-  if (m === "namepw") {
-    const handle = $("signinHandle").value.trim();
-    const password = $("signinPassword").value;
-    if (!handle) { err($("signinErr"), "enter your name"); return; }
-    if (!password) { err($("signinErr"), "enter your password"); return; }
+  const handle = $("signinHandle").value.trim();
+  const password = $("signinPassword").value;
+  if (!handle) { err($("signinErr"), "enter your name"); return; }
+  if (!password) { err($("signinErr"), "enter your password"); return; }
+  {
     const btn = $("signinBtn"); const prev = btn.textContent;
     btn.disabled = true; btn.textContent = "Signing in\u2026";
     try {
@@ -794,15 +819,19 @@ $("signinBtn").addEventListener("click", async () => {
     } catch (e) {
       err($("signinErr"), (e && e.message) || String(e));
     } finally { btn.disabled = false; btn.textContent = prev; }
-  } else {
-    const mnemonic = $("mnemonicInput").value.trim();
-    if (!mnemonic || mnemonic.split(/\s+/).length < 12) {
-      err($("signinErr"), "paste a 12- or 24-word mnemonic"); return;
-    }
-    initWithOpts({ useVault: false, mnemonic });
   }
 });
 
+// Submit: Recover with seed phrase
+$("recoverBtn").addEventListener("click", () => {
+  err($("signinErr"), "");
+  const mnemonic = $("mnemonicInput").value.trim();
+  if (!mnemonic || mnemonic.split(/\s+/).length < 12) {
+    err($("signinErr"), "paste a 12- or 24-word mnemonic"); return;
+  }
+  initWithOpts({ useVault: false, mnemonic });
+});
+
 $("popOutBtn").addEventListener("click", () => bridge.invoke("open-messages"));
 $("menuBtn").addEventListener("click", (e) => {
   e.stopPropagation();