From 77c39717a7b31f43f63c8411d09804c03c4ee97a Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <id@shuuji3.xyz>
Date: Mon, 2 Feb 2026 01:20:30 +0900
Subject: [PATCH 1/3] feat: put env string next to 'npmx'

---
 app/components/AppHeader.vue | 4 ++++
 app/pages/index.vue          | 2 ++
 2 files changed, 6 insertions(+)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 19b07fbc23..79cc455832 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -14,6 +14,7 @@ const { isConnected, npmUser } = useConnector()
 
 const showFullSearch = shallowRef(false)
 const showMobileMenu = shallowRef(false)
+const { env } = useAppConfig().buildInfo
 
 // On mobile, clicking logo+search button expands search
 const route = useRoute()
@@ -114,6 +115,9 @@ onKeyStroke(
         >
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
+          <sup class="text-sm ms--1.5 italic text-fg-muted">
+            {{ env === 'release' ? 'alpha' : env }}
+          </sup>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 88098face0..5f17a19be4 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -22,6 +22,7 @@ async function search() {
 const handleInput = isTouchDevice()
   ? search
   : debounce(search, 250, { leading: true, trailing: true })
+const { env } = useAppConfig().buildInfo
 
 useSeoMeta({
   title: () => $t('seo.home.title'),
@@ -53,6 +54,7 @@ defineOgImageComponent('Default', {
             class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
           />
           <span class="pb-4">npmx</span>
+          <sup class="text-3xl italic text-fg-muted">{{ env === 'release' ? 'alpha' : env }}</sup>
         </h1>
 
         <p

From 022ca7c3a2dad397a0741e5993ec31baf0dfe481 Mon Sep 17 00:00:00 2001
From: TAKAHASHI Shuuji <id@shuuji3.xyz>
Date: Sat, 7 Feb 2026 16:34:06 +0900
Subject: [PATCH 2/3] fix: hide 'alpha' with not so good styling

---
 app/components/AppHeader.vue | 3 ++-
 app/pages/index.vue          | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 79cc455832..1627b424f4 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -116,7 +116,8 @@ onKeyStroke(
           <AppLogo class="w-8 h-8 rounded-lg" />
           <span>npmx</span>
           <sup class="text-sm ms--1.5 italic text-fg-muted">
-            {{ env === 'release' ? 'alpha' : env }}
+            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
+            {{ env === 'release' ? '' : env }}
           </sup>
         </NuxtLink>
       </div>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 5f17a19be4..e33e65532a 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -54,7 +54,10 @@ defineOgImageComponent('Default', {
             class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
           />
           <span class="pb-4">npmx</span>
-          <sup class="text-3xl italic text-fg-muted">{{ env === 'release' ? 'alpha' : env }}</sup>
+          <sup class="text-3xl italic text-fg-muted">
+            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
+            {{ env === 'release' ? '' : env }}
+          </sup>
         </h1>
 
         <p

From e78169de065043308109092eed60e4745202976f Mon Sep 17 00:00:00 2001
From: Vordgi <sasha2822222@gmail.com>
Date: Thu, 12 Feb 2026 20:56:48 +0000
Subject: [PATCH 3/3] feat: update env string ui

---
 app/components/AppHeader.vue | 16 +++++++++-------
 app/pages/index.vue          | 12 +++++++-----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/components/AppHeader.vue b/app/components/AppHeader.vue
index 60a5e7efeb..cce4c859fa 100644
--- a/app/components/AppHeader.vue
+++ b/app/components/AppHeader.vue
@@ -213,14 +213,16 @@ onKeyStroke(
           :to="{ name: 'index' }"
           :aria-label="$t('header.home')"
           dir="ltr"
-          class="inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
+          class="relative inline-flex items-center gap-1 header-logo font-mono text-lg font-medium text-fg hover:text-fg/90 transition-colors duration-200 rounded"
         >
-          <AppLogo class="w-8 h-8 rounded-lg" />
-          <span>npmx</span>
-          <sup class="text-sm ms--1.5 italic text-fg-muted">
-            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
-            {{ env === 'release' ? '' : env }}
-          </sup>
+          <AppLogo class="w-7 h-7 rounded-lg" />
+          <span class="pb-0.5">npmx</span>
+          <span
+            aria-hidden="true"
+            class="scale-35 transform-origin-br font-mono tracking-wide text-accent absolute bottom-0.5 -inset-ie-1"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </NuxtLink>
       </div>
       <!-- Spacer when logo is hidden on desktop -->
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 8d51302a01..b969407406 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -34,16 +34,18 @@ defineOgImageComponent('Default', {
       >
         <h1
           dir="ltr"
-          class="flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
+          class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-2 motion-safe:animate-fade-in motion-safe:animate-fill-both"
         >
           <AppLogo
             class="w-12 h-12 -ms-3 sm:w-20 sm:h-20 sm:-ms-5 md:w-24 md:h-24 md:-ms-6 rounded-2xl sm:rounded-3xl"
           />
           <span class="pb-4">npmx</span>
-          <sup class="text-3xl italic text-fg-muted">
-            <!-- TODO: improve styling and show 'alpha' until March 3 annoucement -->
-            {{ env === 'release' ? '' : env }}
-          </sup>
+          <span
+            aria-hidden="true"
+            class="scale-15 transform-origin-br font-mono tracking-widest text-accent absolute bottom-3 -inset-ie-1.5"
+          >
+            {{ env === 'release' ? 'alpha' : env }}
+          </span>
         </h1>
 
         <p