From e8679f92defed0ff4b8ba6613b2d1b08553ad8f1 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Mon, 12 Oct 2026 23:00:34 +0300
Subject: [PATCH 01/10] fix(landing): improve responsive hero and plugin
 discovery

---
 landing/assets/styles/registry.scss           | 117 +++++++----
 landing/components/registry/HeroDemoVideo.vue |  31 +++
 landing/components/registry/RegistryHero.vue  | 104 +++++-----
 landing/locales/ar.json                       |   3 +-
 landing/locales/en.json                       |   3 +-
 landing/locales/es.json                       |   3 +-
 landing/locales/fr.json                       |   3 +-
 landing/locales/hi.json                       |   3 +-
 landing/locales/pt.json                       |   3 +-
 landing/locales/ru.json                       |   3 +-
 landing/locales/uk.json                       |   3 +-
 landing/locales/zh.json                       |   3 +-
 landing/nuxt.config.ts                        |   2 +
 landing/plugins/scroll-reveal.client.ts       |   6 +-
 landing/tests/browser/hero-layout.spec.ts     | 181 ++++++++++++++++++
 15 files changed, 369 insertions(+), 99 deletions(-)
 create mode 100644 landing/components/registry/HeroDemoVideo.vue
 create mode 100644 landing/tests/browser/hero-layout.spec.ts

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index 14a441700..92d727aeb 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -324,11 +324,52 @@ img {
 .hero__plugin-count {
   font-variant-numeric: tabular-nums;
 }
-.hero__demo {
+.hero__install {
   position: relative;
   isolation: isolate;
 }
 
+.hero-demo-video {
+  width: min(100%, 320px);
+  margin: 0 auto 12px;
+  aspect-ratio: 16 / 9;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--line-strong);
+  border-radius: 12px;
+  background: var(--surface-solid);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
+}
+.hero-demo-video img,
+.hero-demo-video iframe {
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0;
+  object-fit: cover;
+}
+.hero-demo-video button {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 0;
+  color: #fff;
+  background: rgba(4, 7, 15, 0.34);
+  cursor: pointer;
+  font-weight: 750;
+}
+.hero-demo-video button svg {
+  width: 30px;
+  height: 30px;
+  padding: 6px;
+  border-radius: 50%;
+  background: rgba(4, 7, 15, 0.82);
+}
+
 .hero__window {
   position: relative;
   z-index: 1;
@@ -369,11 +410,17 @@ img {
 .hero-quick-start__step {
   padding: 15px 0;
   display: grid;
-  grid-template-columns: 28px 112px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+  align-items: stretch;
   border-bottom: 1px solid var(--line);
 }
+.hero-quick-start__caption {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
 .hero-quick-start__number {
   width: 26px;
   height: 26px;
@@ -393,6 +440,9 @@ img {
 .hero-quick-start__label small {
   display: block;
 }
+.hero-quick-start__label {
+  min-width: 0;
+}
 .hero-quick-start__label strong {
   color: var(--text);
   font-size: 0.75rem;
@@ -403,6 +453,7 @@ img {
   font-size: 0.6rem;
 }
 .hero-quick-start__step .app-multiselect__trigger {
+  width: 100%;
   min-height: 48px;
   padding-inline: 12px;
 }
@@ -412,6 +463,11 @@ img {
 .hero-quick-start__step .command-snippet {
   min-width: 0;
 }
+.hero-quick-start__step .command-snippet--inline pre {
+  overflow-x: visible;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
 .hero-quick-start__command {
   min-width: 0;
 }
@@ -431,22 +487,6 @@ img {
 .hero-quick-start__more-install:focus-visible {
   color: var(--cyan);
 }
-.hero-quick-start__footer {
-  padding: 13px 0 0 152px;
-  display: grid;
-  gap: 6px;
-}
-.hero-quick-start__footer p {
-  margin: 0;
-  color: var(--subtle);
-  font-size: 0.62rem;
-}
-.hero-quick-start__footer span {
-  margin-right: 5px;
-  color: var(--green);
-  font-size: 0.75rem;
-  font-weight: 900;
-}
 .preview-banner {
   padding: 9px 20px;
   border-bottom: 1px solid color-mix(in srgb, var(--coral) 55%, var(--line));
@@ -686,12 +726,16 @@ img {
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(11, minmax(0, 1fr));
+  grid-template-columns: repeat(14, minmax(0, 1fr));
   list-style: none;
 }
 .client-strip li {
+  grid-column: span 2;
   min-width: 0;
 }
+.client-strip li:nth-child(n + 8) {
+  transform: translateX(50%);
+}
 
 .client-strip li > a {
   min-height: 72px;
@@ -735,11 +779,9 @@ img {
   line-height: 1.2;
 }
 .client-strip__copy strong {
-  overflow: hidden;
   color: var(--text);
   font-size: 0.62rem;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
 }
 .client-strip__copy small {
   color: var(--subtle);
@@ -1801,7 +1843,7 @@ img {
   gap: 10px;
 }
 .plugin-card__identity--with-ribbon {
-  padding-right: 102px;
+  padding-right: 92px;
 }
 .plugin-card__identity-copy {
   min-width: 0;
@@ -1871,8 +1913,8 @@ img {
   position: absolute;
   top: 14px;
   right: 14px;
-  min-width: 104px;
-  padding: 6px 9px 6px 11px;
+  min-width: fit-content;
+  padding: 5px 8px;
   border: 1px solid color-mix(in srgb, var(--primary) 45%, var(--line));
   border-radius: 999px;
   color: var(--primary-bright);
@@ -1888,6 +1930,7 @@ img {
   letter-spacing: 0.045em;
   text-align: center;
   text-transform: none;
+  white-space: nowrap;
 }
 .plugin-card__ribbon::after {
   content: none;
@@ -2772,7 +2815,7 @@ img {
     margin: 25px auto 0;
   }
   .client-strip {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
+    grid-template-columns: repeat(14, minmax(0, 1fr));
   }
   .plugin-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2854,15 +2897,6 @@ img {
   .hero-quick-start__header {
     align-items: flex-start;
   }
-  .hero-quick-start__step {
-    grid-template-columns: 28px minmax(0, 1fr);
-  }
-  .hero-quick-start__step > :last-child {
-    grid-column: 1 / -1;
-  }
-  .hero-quick-start__footer {
-    padding-left: 0;
-  }
   .hero-quick-start__step .app-multiselect__trigger {
     width: 100%;
   }
@@ -2894,6 +2928,15 @@ img {
   .client-strip {
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
+  .client-strip li {
+    grid-column: auto;
+  }
+  .client-strip li:nth-child(n + 8) {
+    transform: none;
+  }
+  .client-strip li:last-child {
+    grid-column: 2;
+  }
   .client-strip li > a {
     min-height: 66px;
   }
diff --git a/landing/components/registry/HeroDemoVideo.vue b/landing/components/registry/HeroDemoVideo.vue
new file mode 100644
index 000000000..5671be6fe
--- /dev/null
+++ b/landing/components/registry/HeroDemoVideo.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+const { t } = useI18n();
+const config = useRuntimeConfig();
+const playbackId = computed(() => config.public.muxPlaybackId.trim());
+const playing = ref(false);
+const thumbnailUrl = computed(
+  () => `https://image.mux.com/${playbackId.value}/thumbnail.webp?time=0&width=640`,
+);
+const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?autoplay=true`);
+</script>
+
+<template>
+  <figure v-if="playbackId" class="hero-demo-video" :aria-label="t('shell.hero.demoVideoTitle')">
+    <iframe
+      v-if="playing"
+      :src="playerUrl"
+      :title="t('shell.hero.demoVideoTitle')"
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+    />
+    <template v-else>
+      <img :src="thumbnailUrl" :alt="t('shell.hero.demoVideoTitle')" loading="lazy" />
+      <button type="button" :aria-label="t('shell.hero.watchDemo')" @click="playing = true">
+        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+          <path d="m9 7 8 5-8 5V7Z" fill="currentColor" stroke="none" />
+        </svg>
+        <span>{{ t('shell.hero.watchDemo') }}</span>
+      </button>
+    </template>
+  </figure>
+</template>
diff --git a/landing/components/registry/RegistryHero.vue b/landing/components/registry/RegistryHero.vue
index a8bd70899..bb31ca216 100644
--- a/landing/components/registry/RegistryHero.vue
+++ b/landing/components/registry/RegistryHero.vue
@@ -182,6 +182,7 @@ const fallbackReason = computed(() => {
     t('shell.hero.sourceReason', { reason: resolution.value.fallback_reason ?? '' })
   );
 });
+defineExpose({ fallbackReason });
 const command = computed(() => {
   if (!current.value || (!autoDetect.value && !resolution.value.distribution)) return '';
   return pluginCommands(
@@ -237,58 +238,59 @@ function updateTargets(values: string[]) {
       </div>
 
       <div class="hero__demo">
-        <HeroAgentField />
-        <div class="hero__window">
-          <div class="hero__window-body">
-            <div class="hero-quick-start__header">
-              <h2>{{ t('shell.hero.install', { name: demoPlugin.display_name }) }}</h2>
-              <a href="https://agent-plugins.org/specification" target="_blank" rel="noreferrer"
-                >Agent Plugins 1.0</a
-              >
-            </div>
-            <ol class="hero-quick-start__steps">
-              <li class="hero-quick-start__step">
-                <span class="hero-quick-start__number">1</span>
-                <span class="hero-quick-start__label"
-                  ><strong>{{ t('shell.hero.choose') }}</strong
-                  ><small>{{ t('shell.hero.chooseHint') }}</small></span
-                >
-                <AppMultiSelect
-                  :model-value="selectedTargets"
-                  :auto-selected="autoDetect"
-                  :auto-option="autoOption"
-                  :label="t('shell.accessibility.chooseTargets')"
-                  :options="targetOptions"
-                  @update:auto-selected="autoDetect = $event"
-                  @update:model-value="updateTargets"
-                />
-              </li>
-              <li class="hero-quick-start__step">
-                <span class="hero-quick-start__number hero-quick-start__number--run">2</span>
-                <span class="hero-quick-start__label"
-                  ><strong>{{ t('shell.hero.run') }}</strong
-                  ><small>{{ t('shell.hero.terminal') }}</small></span
+        <HeroDemoVideo />
+        <div class="hero__install">
+          <HeroAgentField />
+          <div class="hero__window">
+            <div class="hero__window-body">
+              <div class="hero-quick-start__header">
+                <h2>{{ t('shell.hero.install', { name: demoPlugin.display_name }) }}</h2>
+                <a href="https://agent-plugins.org/specification" target="_blank" rel="noreferrer"
+                  >Agent Plugins 1.0</a
                 >
-                <div class="hero-quick-start__command">
-                  <CommandSnippet v-if="command" :command="command" kind="add" inline />
-                  <p v-else class="install-panel__notice" role="status">
-                    {{ t('shell.hero.refreshNotice') }}
-                  </p>
-                  <a
-                    class="hero-quick-start__more-install"
-                    href="https://github.com/777genius/universal-agent-plugins#quick-start"
-                    target="_blank"
-                    rel="noreferrer"
-                    >{{ t('shell.hero.otherMethods') }} <span aria-hidden="true">↗</span></a
-                  >
-                </div>
-              </li>
-            </ol>
-            <div class="hero-quick-start__footer">
-              <p><span aria-hidden="true">✓</span> {{ t('shell.hero.planNotice') }}</p>
-              <p v-if="!autoDetect && resolution.fallback_reason">
-                {{ fallbackReason }}
-              </p>
+              </div>
+              <ol class="hero-quick-start__steps">
+                <li class="hero-quick-start__step">
+                  <div class="hero-quick-start__caption">
+                    <span class="hero-quick-start__number">1</span>
+                    <span class="hero-quick-start__label"
+                      ><strong>{{ t('shell.hero.choose') }}</strong
+                      ><small>{{ t('shell.hero.chooseHint') }}</small></span
+                    >
+                  </div>
+                  <AppMultiSelect
+                    :model-value="selectedTargets"
+                    :auto-selected="autoDetect"
+                    :auto-option="autoOption"
+                    :label="t('shell.accessibility.chooseTargets')"
+                    :options="targetOptions"
+                    @update:auto-selected="autoDetect = $event"
+                    @update:model-value="updateTargets"
+                  />
+                </li>
+                <li class="hero-quick-start__step">
+                  <div class="hero-quick-start__caption">
+                    <span class="hero-quick-start__number hero-quick-start__number--run">2</span>
+                    <span class="hero-quick-start__label"
+                      ><strong>{{ t('shell.hero.run') }}</strong
+                      ><small>{{ t('shell.hero.terminal') }}</small></span
+                    >
+                  </div>
+                  <div class="hero-quick-start__command">
+                    <CommandSnippet v-if="command" :command="command" kind="add" inline />
+                    <p v-else class="install-panel__notice" role="status">
+                      {{ t('shell.hero.refreshNotice') }}
+                    </p>
+                    <a
+                      class="hero-quick-start__more-install"
+                      href="https://github.com/777genius/universal-agent-plugins#quick-start"
+                      target="_blank"
+                      rel="noreferrer"
+                      >{{ t('shell.hero.otherMethods') }} <span aria-hidden="true">↗</span></a
+                    >
+                  </div>
+                </li>
+              </ol>
             </div>
           </div>
         </div>
diff --git a/landing/locales/ar.json b/landing/locales/ar.json
index fc8c1c2ff..78b3cb620 100644
--- a/landing/locales/ar.json
+++ b/landing/locales/ar.json
@@ -299,7 +299,8 @@
       "terminal": "في الطرفية لديك",
       "refreshNotice": "جارٍ تحديث بيانات المكونات الإضافية. حاول مرة أخرى بعد قليل.",
       "otherMethods": "طرق تثبيت أخرى",
-      "planNotice": "أمر واحد يخطط لكل وكيل محدد قبل تغيير الملفات",
+      "watchDemo": "شاهد العرض التوضيحي",
+      "demoVideoTitle": "عرض توضيحي لتثبيت Universal Agent Plugins",
       "supportedClients": "العملاء المدعومون",
       "clientNote": "يثبّت CLI أو يحضّر التنسيق الأصلي الذي يدعمه كل عميل. قد يطلب منك بعض العملاء إكمال التفعيل أو تسجيل الدخول.",
       "install": "تثبيت {name}",
diff --git a/landing/locales/en.json b/landing/locales/en.json
index cd85a168f..8cac8e2f1 100644
--- a/landing/locales/en.json
+++ b/landing/locales/en.json
@@ -453,7 +453,8 @@
       "terminal": "In your terminal",
       "refreshNotice": "Plugin data is refreshing. Try again shortly.",
       "otherMethods": "Other installation methods",
-      "planNotice": "One command plans every selected agent before changing files",
+      "watchDemo": "Watch demo",
+      "demoVideoTitle": "Universal Agent Plugins install demo",
       "supportedClients": "Supported clients",
       "clientNote": "The CLI installs or prepares the native format each client supports. Some clients may ask you to finish activation or sign in.",
       "install": "Install {name}",
diff --git a/landing/locales/es.json b/landing/locales/es.json
index 281cb6f68..2ab94dca4 100644
--- a/landing/locales/es.json
+++ b/landing/locales/es.json
@@ -436,7 +436,8 @@
       "terminal": "en tu terminal",
       "refreshNotice": "Los datos del complemento son refrescantes. Vuelve a intentarlo en breve.",
       "otherMethods": "Otros métodos de instalación",
-      "planNotice": "Un comando planifica cada agente seleccionado antes de cambiar archivos",
+      "watchDemo": "Ver demostración",
+      "demoVideoTitle": "Demostración de instalación de Universal Agent Plugins",
       "supportedClients": "Clientes apoyados",
       "clientNote": "La CLI instala o prepara el formato nativo que admite cada cliente. Algunos clientes pueden pedirle que finalice la activación o inicie sesión.",
       "install": "Instalar {name}",
diff --git a/landing/locales/fr.json b/landing/locales/fr.json
index fa80dae8f..f7552a444 100644
--- a/landing/locales/fr.json
+++ b/landing/locales/fr.json
@@ -436,7 +436,8 @@
       "terminal": "Dans votre terminal",
       "refreshNotice": "Les données du plugin sont actualisées. Réessayez sous peu.",
       "otherMethods": "Autres méthodes d'installation",
-      "planNotice": "Une commande planifie chaque agent sélectionné avant de modifier les fichiers",
+      "watchDemo": "Voir la démo",
+      "demoVideoTitle": "Démo d’installation d’Universal Agent Plugins",
       "supportedClients": "Clients pris en charge",
       "clientNote": "La CLI installe ou prépare le format natif pris en charge par chaque client. Certains clients peuvent vous demander de terminer l'activation ou de vous connecter.",
       "install": "Installer {name}",
diff --git a/landing/locales/hi.json b/landing/locales/hi.json
index edd83b337..dfb244929 100644
--- a/landing/locales/hi.json
+++ b/landing/locales/hi.json
@@ -436,7 +436,8 @@
       "terminal": "आपके टर्मिनल में",
       "refreshNotice": "प्लगइन डेटा ताज़ा है. शीघ्र ही पुनः प्रयास करें.",
       "otherMethods": "अन्य स्थापना विधियाँ",
-      "planNotice": "फ़ाइलें बदलने से पहले एक कमांड प्रत्येक चयनित एजेंट की योजना बनाता है",
+      "watchDemo": "डेमो देखें",
+      "demoVideoTitle": "Universal Agent Plugins इंस्टॉलेशन डेमो",
       "supportedClients": "समर्थित ग्राहक",
       "clientNote": "सीएलआई प्रत्येक क्लाइंट द्वारा समर्थित मूल प्रारूप को स्थापित या तैयार करता है। कुछ ग्राहक आपसे सक्रियण समाप्त करने या साइन इन करने के लिए कह सकते हैं।",
       "install": "{name} स्थापित करें",
diff --git a/landing/locales/pt.json b/landing/locales/pt.json
index c5ba81ec8..a4d8c24f3 100644
--- a/landing/locales/pt.json
+++ b/landing/locales/pt.json
@@ -299,7 +299,8 @@
       "terminal": "No seu terminal",
       "refreshNotice": "Os dados de plugins estão sendo atualizados. Tente novamente em instantes.",
       "otherMethods": "Outros métodos de instalação",
-      "planNotice": "Um comando planeja cada agente selecionado antes de alterar arquivos",
+      "watchDemo": "Ver demonstração",
+      "demoVideoTitle": "Demonstração de instalação do Universal Agent Plugins",
       "supportedClients": "Clientes compatíveis",
       "clientNote": "A CLI instala ou prepara o formato nativo compatível com cada cliente. Alguns clientes podem pedir que você conclua a ativação ou faça login.",
       "install": "Instalar {name}",
diff --git a/landing/locales/ru.json b/landing/locales/ru.json
index f040e8e00..90a32e41f 100644
--- a/landing/locales/ru.json
+++ b/landing/locales/ru.json
@@ -436,7 +436,8 @@
       "terminal": "В терминале",
       "refreshNotice": "Данные плагина обновляются. Повторите попытку чуть позже.",
       "otherMethods": "Другие способы установки",
-      "planNotice": "Одна команда планирует действия для каждого выбранного агента до изменения файлов",
+      "watchDemo": "Смотреть демо",
+      "demoVideoTitle": "Демонстрация установки Universal Agent Plugins",
       "supportedClients": "Поддерживаемые клиенты",
       "clientNote": "CLI устанавливает или подготавливает нативный формат, поддерживаемый каждым клиентом. Некоторые клиенты могут попросить завершить активацию или вход.",
       "install": "Установить {name}",
diff --git a/landing/locales/uk.json b/landing/locales/uk.json
index 79a51de01..a6b483538 100644
--- a/landing/locales/uk.json
+++ b/landing/locales/uk.json
@@ -436,7 +436,8 @@
       "terminal": "У вашому терміналі",
       "refreshNotice": "Дані плагіна оновлюються. Спробуйте ще раз невдовзі.",
       "otherMethods": "Інші способи встановлення",
-      "planNotice": "Одна команда планує дії для кожного вибраного агента перед зміною файлів",
+      "watchDemo": "Переглянути демо",
+      "demoVideoTitle": "Демонстрація встановлення Universal Agent Plugins",
       "supportedClients": "Підтримувані клієнти",
       "clientNote": "CLI встановлює або готує нативний формат, який підтримує кожен клієнт. Деякі клієнти можуть попросити завершити активацію або ввійти.",
       "install": "Встановити {name}",
diff --git a/landing/locales/zh.json b/landing/locales/zh.json
index 7ae38c8ad..c69358e07 100644
--- a/landing/locales/zh.json
+++ b/landing/locales/zh.json
@@ -436,7 +436,8 @@
       "terminal": "在您的终端中",
       "refreshNotice": "插件数据正在刷新。稍后再试。",
       "otherMethods": "其他安装方式",
-      "planNotice": "一个命令在更改文件之前规划每个选定的代理",
+      "watchDemo": "观看演示",
+      "demoVideoTitle": "Universal Agent Plugins 安装演示",
       "supportedClients": "支持的客户",
       "clientNote": "CLI 安装或准备每个客户端支持的本机格式。有些客户端可能会要求您完成激活或登录。",
       "install": "安装{name}",
diff --git a/landing/nuxt.config.ts b/landing/nuxt.config.ts
index 056f7d2cb..960423192 100644
--- a/landing/nuxt.config.ts
+++ b/landing/nuxt.config.ts
@@ -35,6 +35,7 @@ const registryPagesOrigin =
 const discoveryKeyID = process.env.NUXT_PUBLIC_DISCOVERY_KEY_ID || 'uap-discovery-2026-01';
 const discoveryPublicKey =
   process.env.NUXT_PUBLIC_DISCOVERY_PUBLIC_KEY || 'IxWvGuscXR9crlCrGyBQZNqroYNVPbBA1B3pnjSffhc=';
+const muxPlaybackId = process.env.NUXT_PUBLIC_MUX_PLAYBACK_ID || '';
 
 function resolveRegistrySnapshot(): string {
   const explicit = process.env.UAP_SIGNED_SNAPSHOT_PATH;
@@ -187,6 +188,7 @@ export default defineNuxtConfig({
       registryPagesOrigin,
       discoveryKeyID,
       discoveryPublicKey,
+      muxPlaybackId,
     },
   },
 });
diff --git a/landing/plugins/scroll-reveal.client.ts b/landing/plugins/scroll-reveal.client.ts
index c1a622ed0..9503c361a 100644
--- a/landing/plugins/scroll-reveal.client.ts
+++ b/landing/plugins/scroll-reveal.client.ts
@@ -32,7 +32,7 @@ export default defineNuxtPlugin((nuxtApp) => {
             observer?.unobserve(section);
           }
         },
-        { rootMargin: '0px 0px -8% 0px', threshold: 0.06 },
+        { rootMargin: '0px 0px 160px 0px', threshold: 0 },
       );
       for (const section of revealable) {
         if (section.isConnected) observer.observe(section);
@@ -40,5 +40,7 @@ export default defineNuxtPlugin((nuxtApp) => {
     });
   };
 
-  nuxtApp.hook('page:finish', () => { requestAnimationFrame(revealSections); });
+  nuxtApp.hook('page:finish', () => {
+    requestAnimationFrame(revealSections);
+  });
 });
diff --git a/landing/tests/browser/hero-layout.spec.ts b/landing/tests/browser/hero-layout.spec.ts
new file mode 100644
index 000000000..338f3670e
--- /dev/null
+++ b/landing/tests/browser/hero-layout.spec.ts
@@ -0,0 +1,181 @@
+import { mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { expect, test, type Page } from '@playwright/test';
+import { setSignedMirrorTestTime, wording } from './i18n-state.helpers';
+
+const exactCommand = 'npx universal-agent-plugins add context7 --target codex,cursor,vscode';
+
+async function capture(page: Page, name: string) {
+  const directory = process.env.UAP_LANDING_SCREENSHOT_DIR;
+  if (!directory) return;
+  mkdirSync(directory, { recursive: true });
+  await page.screenshot({ path: resolve(directory, `${name}.png`) });
+}
+
+async function waitForCommand(page: Page) {
+  await expect(page.locator('.hero__window .command-snippet')).toBeVisible({
+    timeout: 15_000,
+  });
+}
+
+test.beforeEach(async ({ page }) => {
+  await setSignedMirrorTestTime(page);
+  await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
+});
+
+test('hero controls and 13 client links remain complete across four viewports', async ({
+  page,
+}) => {
+  for (const width of [1440, 1024, 390, 320]) {
+    await page.setViewportSize({ width, height: width >= 1024 ? 1000 : 844 });
+    await page.goto('./');
+    await waitForCommand(page);
+
+    expect(
+      await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth),
+    ).toBe(true);
+
+    const items = page.locator('.client-strip > li');
+    await expect(items).toHaveCount(13);
+    const geometry = await items.evaluateAll((nodes) =>
+      nodes.map((node) => {
+        const rect = node.getBoundingClientRect();
+        return {
+          x: rect.x,
+          y: rect.y,
+          width: rect.width,
+          right: rect.right,
+          center: rect.x + rect.width / 2,
+        };
+      }),
+    );
+    const rows = [...new Set(geometry.map((item) => Math.round(item.y)))];
+    if (width >= 1024) {
+      expect(rows).toHaveLength(2);
+      expect(geometry.slice(0, 7).map((item) => Math.round(item.y))).toEqual(
+        Array(7).fill(rows[0]),
+      );
+      expect(geometry.slice(7).map((item) => Math.round(item.y))).toEqual(Array(6).fill(rows[1]));
+      const listCenter = await page
+        .locator('.client-strip')
+        .evaluate(
+          (node) => node.getBoundingClientRect().x + node.getBoundingClientRect().width / 2,
+        );
+      const secondRowCenter = geometry.slice(7).reduce((sum, item) => sum + item.center, 0) / 6;
+      expect(Math.abs(secondRowCenter - listCenter)).toBeLessThan(2);
+    } else {
+      expect(rows.length).toBeGreaterThanOrEqual(3);
+    }
+    for (const item of geometry) {
+      expect(item.x).toBeGreaterThanOrEqual(0);
+      expect(item.right).toBeLessThanOrEqual(width + 0.5);
+    }
+    expect(
+      await page
+        .locator('.client-strip__copy strong')
+        .evaluateAll((nodes) =>
+          nodes.every(
+            (node) =>
+              getComputedStyle(node).textOverflow !== 'ellipsis' &&
+              node.scrollWidth <= node.clientWidth,
+          ),
+        ),
+    ).toBe(true);
+
+    const captions = page.locator('.hero-quick-start__caption');
+    const controls = page.locator(
+      '.hero-quick-start__step .app-multiselect__trigger, .hero-quick-start__command',
+    );
+    await expect(captions).toHaveCount(2);
+    for (let index = 0; index < 2; index += 1) {
+      const caption = (await captions.nth(index).boundingBox())!;
+      const control = (await controls.nth(index).boundingBox())!;
+      const step = (await page.locator('.hero-quick-start__step').nth(index).boundingBox())!;
+      expect(caption.y + caption.height).toBeLessThanOrEqual(control.y + 0.5);
+      expect(control.width).toBeGreaterThanOrEqual(step.width - 1);
+    }
+
+    const code = page.locator('.hero-quick-start__command pre');
+    const copy = page.locator('.hero-quick-start__command button');
+    const codeBox = (await code.boundingBox())!;
+    const copyBox = (await copy.boundingBox())!;
+    expect(codeBox.x + codeBox.width).toBeLessThanOrEqual(copyBox.x + 0.5);
+    expect(await code.evaluate((node) => node.scrollWidth <= node.clientWidth)).toBe(true);
+
+    await capture(page, `hero-layout-${width}`);
+  }
+});
+
+test('selected targets produce one complete copyable command with keyboard activation', async ({
+  page,
+}) => {
+  for (const width of [1440, 320]) {
+    await page.setViewportSize({ width, height: width === 1440 ? 1000 : 844 });
+    await page.goto('./');
+    await waitForCommand(page);
+
+    const trigger = page.locator('.hero-quick-start__step .app-multiselect__trigger');
+    await trigger.focus();
+    await page.keyboard.press('Enter');
+    for (const name of [/^Codex /, /^Cursor /, /^VS Code /]) {
+      await page.getByRole('checkbox', { name }).click();
+    }
+    await page.keyboard.press('Escape');
+    await expect(trigger).toBeFocused();
+
+    const command = page.locator('.hero-quick-start__command');
+    await expect(command.locator('code')).toHaveText(exactCommand);
+    const copy = command.locator('button');
+    await expect(copy).toHaveAccessibleName('Copy command');
+    await copy.focus();
+    await page.keyboard.press('Enter');
+    await expect(copy).toHaveAccessibleName(wording('en')('registryUi.command.copiedLabel'));
+    expect(await page.evaluate(() => navigator.clipboard.readText())).toBe(exactCommand);
+    await capture(page, `hero-command-${width}`);
+  }
+});
+
+test('catalog reveal is early on navigation, compact trust badges stay compact, and no Mux surface is fabricated', async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1440, height: 600 });
+  await page.goto('./');
+  await expect(page.locator('html')).toHaveClass(/scroll-reveal-active/);
+  const catalog = page.locator('.catalog-wrap');
+  await catalog.evaluate((node) => {
+    window.scrollTo({
+      top: node.getBoundingClientRect().top + window.scrollY - window.innerHeight + 20,
+      behavior: 'instant',
+    });
+  });
+  await expect
+    .poll(() => catalog.evaluate((node) => node.getBoundingClientRect().top))
+    .toBeLessThanOrEqual(580);
+  await expect(catalog).toHaveClass(/scroll-reveal--visible/);
+  await page.goto('./');
+  await page.locator('.hero__actions .button--primary').click();
+  await expect(catalog).toHaveClass(/scroll-reveal--visible/);
+  await expect(catalog).toHaveCSS('opacity', '1');
+
+  await page.goto('./#plugins');
+  await expect(catalog).toHaveClass(/scroll-reveal--visible/);
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.goto('./');
+  await expect(catalog).toHaveClass(/scroll-reveal--visible/);
+
+  await page.goto('./plugins/');
+  await expect(page.locator('.catalog')).toHaveAttribute('data-discovery-state', /current|cached/, {
+    timeout: 15_000,
+  });
+  await page.getByRole('searchbox', { name: 'Search plugins' }).fill('context7');
+  const badge = page.locator('.plugin-card__ribbon').first();
+  await expect(badge).toHaveText('Reviewed');
+  const badgeBox = (await badge.boundingBox())!;
+  expect(badgeBox.width).toBeLessThan(90);
+
+  await page.goto('./');
+  await expect(page.locator('.hero-demo-video')).toHaveCount(0);
+  await expect(page.locator('iframe[src*="player.mux.com"]')).toHaveCount(0);
+  await expect(page.locator('.hero-quick-start__footer')).toHaveCount(0);
+  await capture(page, 'hero-early-reveal');
+});

From 169ee7c32aa973d51b3171f9e996ea9bd16bd8da Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Mon, 12 Oct 2026 23:36:46 +0300
Subject: [PATCH 02/10] fix(landing): compact hero steps and show demo preview

Fit supported clients in one desktop row and keep a visible video layout before the owner supplies the asset. Refs #425
---
 landing/assets/styles/registry.scss           | 71 ++++++++++++-------
 landing/components/registry/HeroDemoVideo.vue | 17 ++++-
 landing/components/registry/RegistryHero.vue  |  6 +-
 landing/tests/browser/hero-layout.spec.ts     | 27 +++----
 4 files changed, 75 insertions(+), 46 deletions(-)

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index 92d727aeb..faaece962 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -334,12 +334,45 @@ img {
   margin: 0 auto 12px;
   aspect-ratio: 16 / 9;
   position: relative;
+  z-index: 2;
   overflow: hidden;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   background: var(--surface-solid);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
 }
+.hero-demo-video__preview {
+  height: 100%;
+  display: grid;
+  align-content: center;
+  gap: 12px;
+  padding: 18px;
+  background: radial-gradient(ellipse at top right, rgba(153, 55, 234, 0.22), transparent 75%);
+}
+.hero-demo-video__terminal {
+  display: grid;
+  gap: 9px;
+  color: var(--cyan);
+  font-size: 0.64rem;
+}
+.hero-demo-video__terminal > span {
+  color: var(--subtle);
+  font-size: 0.5rem;
+  letter-spacing: 4px;
+}
+.hero-demo-video__caption {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  color: var(--text);
+  font-size: 0.72rem;
+  font-weight: 700;
+}
+.hero-demo-video__caption svg {
+  width: 24px;
+  height: 24px;
+  color: var(--primary-bright);
+}
 .hero-demo-video img,
 .hero-demo-video iframe {
   width: 100%;
@@ -388,7 +421,6 @@ img {
   align-items: center;
   justify-content: space-between;
   gap: 18px;
-  border-bottom: 1px solid var(--line);
 }
 .hero-quick-start__header h2 {
   margin: 0;
@@ -408,22 +440,22 @@ img {
   list-style: none;
 }
 .hero-quick-start__step {
-  padding: 15px 0;
+  padding: 8px 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 8px;
   align-items: stretch;
-  border-bottom: 1px solid var(--line);
 }
 .hero-quick-start__caption {
   min-width: 0;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 6px;
 }
 .hero-quick-start__number {
-  width: 26px;
-  height: 26px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
   display: grid;
   place-items: center;
   border-radius: 50%;
@@ -436,21 +468,18 @@ img {
   color: var(--green);
   background: color-mix(in srgb, var(--green) 11%, var(--surface-raised));
 }
-.hero-quick-start__label strong,
-.hero-quick-start__label small {
-  display: block;
+.hero-quick-start__label strong {
+  display: inline;
 }
 .hero-quick-start__label {
   min-width: 0;
+  display: flex;
+  align-items: baseline;
+  white-space: nowrap;
 }
 .hero-quick-start__label strong {
   color: var(--text);
-  font-size: 0.75rem;
-}
-.hero-quick-start__label small {
-  margin-top: 2px;
-  color: var(--subtle);
-  font-size: 0.6rem;
+  font-size: 0.68rem;
 }
 .hero-quick-start__step .app-multiselect__trigger {
   width: 100%;
@@ -726,16 +755,13 @@ img {
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(14, minmax(0, 1fr));
+  grid-template-columns: repeat(13, minmax(0, 1fr));
+  gap: 4px;
   list-style: none;
 }
 .client-strip li {
-  grid-column: span 2;
   min-width: 0;
 }
-.client-strip li:nth-child(n + 8) {
-  transform: translateX(50%);
-}
 
 .client-strip li > a {
   min-height: 72px;
@@ -2815,7 +2841,7 @@ img {
     margin: 25px auto 0;
   }
   .client-strip {
-    grid-template-columns: repeat(14, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
   }
   .plugin-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -2931,9 +2957,6 @@ img {
   .client-strip li {
     grid-column: auto;
   }
-  .client-strip li:nth-child(n + 8) {
-    transform: none;
-  }
   .client-strip li:last-child {
     grid-column: 2;
   }
diff --git a/landing/components/registry/HeroDemoVideo.vue b/landing/components/registry/HeroDemoVideo.vue
index 5671be6fe..9aacdd8cb 100644
--- a/landing/components/registry/HeroDemoVideo.vue
+++ b/landing/components/registry/HeroDemoVideo.vue
@@ -10,7 +10,7 @@ const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?aut
 </script>
 
 <template>
-  <figure v-if="playbackId" class="hero-demo-video" :aria-label="t('shell.hero.demoVideoTitle')">
+  <figure class="hero-demo-video" :aria-label="t('shell.hero.demoVideoTitle')">
     <iframe
       v-if="playing"
       :src="playerUrl"
@@ -18,7 +18,7 @@ const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?aut
       allow="autoplay; fullscreen; picture-in-picture"
       allowfullscreen
     />
-    <template v-else>
+    <template v-else-if="playbackId">
       <img :src="thumbnailUrl" :alt="t('shell.hero.demoVideoTitle')" loading="lazy" />
       <button type="button" :aria-label="t('shell.hero.watchDemo')" @click="playing = true">
         <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
@@ -27,5 +27,18 @@ const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?aut
         <span>{{ t('shell.hero.watchDemo') }}</span>
       </button>
     </template>
+    <div v-else class="hero-demo-video__preview">
+      <div class="hero-demo-video__terminal" aria-hidden="true">
+        <span>● ● ●</span>
+        <code>$ npx universal-agent-plugins</code>
+        <code>✓ Codex &nbsp; ✓ Cursor &nbsp; ✓ VS Code</code>
+      </div>
+      <div class="hero-demo-video__caption">
+        <svg viewBox="0 0 24 24" aria-hidden="true">
+          <path d="m9 7 8 5-8 5V7Z" fill="currentColor" />
+        </svg>
+        <span>{{ t('shell.hero.demoVideoTitle') }}</span>
+      </div>
+    </div>
   </figure>
 </template>
diff --git a/landing/components/registry/RegistryHero.vue b/landing/components/registry/RegistryHero.vue
index bb31ca216..aafe8eef0 100644
--- a/landing/components/registry/RegistryHero.vue
+++ b/landing/components/registry/RegistryHero.vue
@@ -254,8 +254,7 @@ function updateTargets(values: string[]) {
                   <div class="hero-quick-start__caption">
                     <span class="hero-quick-start__number">1</span>
                     <span class="hero-quick-start__label"
-                      ><strong>{{ t('shell.hero.choose') }}</strong
-                      ><small>{{ t('shell.hero.chooseHint') }}</small></span
+                      ><strong>{{ t('shell.hero.choose') }}</strong></span
                     >
                   </div>
                   <AppMultiSelect
@@ -272,8 +271,7 @@ function updateTargets(values: string[]) {
                   <div class="hero-quick-start__caption">
                     <span class="hero-quick-start__number hero-quick-start__number--run">2</span>
                     <span class="hero-quick-start__label"
-                      ><strong>{{ t('shell.hero.run') }}</strong
-                      ><small>{{ t('shell.hero.terminal') }}</small></span
+                      ><strong>{{ t('shell.hero.run') }}</strong></span
                     >
                   </div>
                   <div class="hero-quick-start__command">
diff --git a/landing/tests/browser/hero-layout.spec.ts b/landing/tests/browser/hero-layout.spec.ts
index 338f3670e..ebd03b5af 100644
--- a/landing/tests/browser/hero-layout.spec.ts
+++ b/landing/tests/browser/hero-layout.spec.ts
@@ -50,20 +50,9 @@ test('hero controls and 13 client links remain complete across four viewports',
       }),
     );
     const rows = [...new Set(geometry.map((item) => Math.round(item.y)))];
-    if (width >= 1024) {
-      expect(rows).toHaveLength(2);
-      expect(geometry.slice(0, 7).map((item) => Math.round(item.y))).toEqual(
-        Array(7).fill(rows[0]),
-      );
-      expect(geometry.slice(7).map((item) => Math.round(item.y))).toEqual(Array(6).fill(rows[1]));
-      const listCenter = await page
-        .locator('.client-strip')
-        .evaluate(
-          (node) => node.getBoundingClientRect().x + node.getBoundingClientRect().width / 2,
-        );
-      const secondRowCenter = geometry.slice(7).reduce((sum, item) => sum + item.center, 0) / 6;
-      expect(Math.abs(secondRowCenter - listCenter)).toBeLessThan(2);
-    } else {
+    if (width >= 1440) {
+      expect(rows).toHaveLength(1);
+    } else if (width < 1024) {
       expect(rows.length).toBeGreaterThanOrEqual(3);
     }
     for (const item of geometry) {
@@ -91,6 +80,7 @@ test('hero controls and 13 client links remain complete across four viewports',
       const caption = (await captions.nth(index).boundingBox())!;
       const control = (await controls.nth(index).boundingBox())!;
       const step = (await page.locator('.hero-quick-start__step').nth(index).boundingBox())!;
+      expect(caption.height).toBeLessThanOrEqual(24);
       expect(caption.y + caption.height).toBeLessThanOrEqual(control.y + 0.5);
       expect(control.width).toBeGreaterThanOrEqual(step.width - 1);
     }
@@ -135,7 +125,7 @@ test('selected targets produce one complete copyable command with keyboard activ
   }
 });
 
-test('catalog reveal is early on navigation, compact trust badges stay compact, and no Mux surface is fabricated', async ({
+test('catalog reveal is early on navigation, compact trust badges stay compact, and video preview waits for a real Mux asset', async ({
   page,
 }) => {
   await page.setViewportSize({ width: 1440, height: 600 });
@@ -174,7 +164,12 @@ test('catalog reveal is early on navigation, compact trust badges stay compact,
   expect(badgeBox.width).toBeLessThan(90);
 
   await page.goto('./');
-  await expect(page.locator('.hero-demo-video')).toHaveCount(0);
+  await expect(page.locator('.hero-demo-video')).toBeVisible();
+  await expect(page.locator('.hero-demo-video button')).toHaveCount(0);
+  const preview = (await page.locator('.hero-demo-video').boundingBox())!;
+  const install = (await page.locator('.hero__window').boundingBox())!;
+  expect(preview.width).toBeLessThanOrEqual(320);
+  expect(preview.y + preview.height).toBeLessThanOrEqual(install.y);
   await expect(page.locator('iframe[src*="player.mux.com"]')).toHaveCount(0);
   await expect(page.locator('.hero-quick-start__footer')).toHaveCount(0);
   await capture(page, 'hero-early-reveal');

From 4b895e6a8e34790ed7614ddbf9bb4efd33e71f81 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Mon, 12 Oct 2026 23:41:22 +0300
Subject: [PATCH 03/10] fix(landing): reduce installation card bottom spacing

Refs #425
---
 landing/assets/styles/registry.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index faaece962..59e449d17 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -413,7 +413,7 @@ img {
   box-shadow: var(--shadow);
 }
 .hero__window-body {
-  padding: 24px 26px 22px;
+  padding: 24px 26px 10px;
 }
 .hero-quick-start__header {
   padding: 0 0 18px;
@@ -446,6 +446,9 @@ img {
   gap: 8px;
   align-items: stretch;
 }
+.hero-quick-start__step:last-child {
+  padding-bottom: 0;
+}
 .hero-quick-start__caption {
   min-width: 0;
   display: flex;
@@ -2918,7 +2921,7 @@ img {
     display: grid;
   }
   .hero__window-body {
-    padding: 18px 14px;
+    padding: 18px 14px 10px;
   }
   .hero-quick-start__header {
     align-items: flex-start;

From eafd3e8211a2e1d1e023a1e61c66a6021658cc14 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 00:13:14 +0300
Subject: [PATCH 04/10] feat(landing): connect uploaded Mux product film

---
 landing/components/registry/HeroDemoVideo.vue |  4 +-
 landing/nuxt.config.ts                        |  4 +-
 landing/tests/browser/hero-demo-video.spec.ts | 97 +++++++++++++++++++
 landing/tests/browser/hero-layout.spec.ts     |  5 +-
 landing/tests/browser/visual-controls.spec.ts |  2 +-
 5 files changed, 106 insertions(+), 6 deletions(-)
 create mode 100644 landing/tests/browser/hero-demo-video.spec.ts

diff --git a/landing/components/registry/HeroDemoVideo.vue b/landing/components/registry/HeroDemoVideo.vue
index 9aacdd8cb..b011e38ae 100644
--- a/landing/components/registry/HeroDemoVideo.vue
+++ b/landing/components/registry/HeroDemoVideo.vue
@@ -4,7 +4,7 @@ const config = useRuntimeConfig();
 const playbackId = computed(() => config.public.muxPlaybackId.trim());
 const playing = ref(false);
 const thumbnailUrl = computed(
-  () => `https://image.mux.com/${playbackId.value}/thumbnail.webp?time=0&width=640`,
+  () => `https://image.mux.com/${playbackId.value}/thumbnail.webp?time=1&width=640`,
 );
 const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?autoplay=true`);
 </script>
@@ -15,7 +15,7 @@ const playerUrl = computed(() => `https://player.mux.com/${playbackId.value}?aut
       v-if="playing"
       :src="playerUrl"
       :title="t('shell.hero.demoVideoTitle')"
-      allow="autoplay; fullscreen; picture-in-picture"
+      allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
       allowfullscreen
     />
     <template v-else-if="playbackId">
diff --git a/landing/nuxt.config.ts b/landing/nuxt.config.ts
index 960423192..9aa5bcee9 100644
--- a/landing/nuxt.config.ts
+++ b/landing/nuxt.config.ts
@@ -35,7 +35,9 @@ const registryPagesOrigin =
 const discoveryKeyID = process.env.NUXT_PUBLIC_DISCOVERY_KEY_ID || 'uap-discovery-2026-01';
 const discoveryPublicKey =
   process.env.NUXT_PUBLIC_DISCOVERY_PUBLIC_KEY || 'IxWvGuscXR9crlCrGyBQZNqroYNVPbBA1B3pnjSffhc=';
-const muxPlaybackId = process.env.NUXT_PUBLIC_MUX_PLAYBACK_ID || '';
+// Public playback ID for the owner-uploaded product film; an empty override disables it.
+const muxPlaybackId =
+  process.env.NUXT_PUBLIC_MUX_PLAYBACK_ID ?? 'whg5hoTZLPJclfEYfp8OEJQu6Gcuqc2519U6nhx7AP8';
 
 function resolveRegistrySnapshot(): string {
   const explicit = process.env.UAP_SIGNED_SNAPSHOT_PATH;
diff --git a/landing/tests/browser/hero-demo-video.spec.ts b/landing/tests/browser/hero-demo-video.spec.ts
new file mode 100644
index 000000000..45e0a89f0
--- /dev/null
+++ b/landing/tests/browser/hero-demo-video.spec.ts
@@ -0,0 +1,97 @@
+import { mkdirSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { expect, test } from '@playwright/test';
+import { setSignedMirrorTestTime } from './i18n-state.helpers';
+
+test('demo loads its player only after keyboard activation and keeps installation in place', async ({
+  page,
+}) => {
+  await setSignedMirrorTestTime(page);
+  const playerRequests: string[] = [];
+  await page.route('https://player.mux.com/**', (route) => {
+    playerRequests.push(route.request().url());
+    return route.fulfill({
+      contentType: 'text/html',
+      body: '<html><body>Player boundary</body></html>',
+    });
+  });
+  for (const width of [1440, 390, 320]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto('./');
+    const demo = page.locator('.hero-demo-video');
+    const button = demo.getByRole('button', { name: 'Watch demo' });
+    await expect(button).toBeVisible();
+    await expect(demo.locator('iframe')).toHaveCount(0);
+    const requestsBefore = playerRequests.length;
+    const installBefore = (await page.locator('.hero__window').boundingBox())!;
+    const demoBefore = (await demo.boundingBox())!;
+    expect(demoBefore.width).toBeLessThanOrEqual(320);
+    expect(demoBefore.y + demoBefore.height).toBeLessThanOrEqual(installBefore.y);
+    await button.focus();
+    await page.keyboard.press('Enter');
+    const frame = demo.locator('iframe');
+    await expect(frame).toBeVisible();
+    await expect(frame).toHaveAttribute(
+      'src',
+      /^https:\/\/player\.mux\.com\/[a-zA-Z0-9]+\?autoplay=true$/,
+    );
+    await expect(frame).toHaveAttribute('title', 'Universal Agent Plugins install demo');
+    await expect(frame).toHaveAttribute('allowfullscreen', '');
+    await expect.poll(() => playerRequests.length).toBe(requestsBefore + 1);
+    const installAfter = (await page.locator('.hero__window').boundingBox())!;
+    expect(Math.abs(installAfter.y - installBefore.y)).toBeLessThan(1);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(
+      true,
+    );
+  }
+});
+
+test('owner-uploaded Mux film actually plays on desktop and mobile', async ({ page }) => {
+  test.skip(
+    process.env.UAP_E2E_LIVE_VIDEO !== '1',
+    'Explicit live CDN check; ordinary CI tests the player boundary offline.',
+  );
+  test.setTimeout(120_000);
+  await setSignedMirrorTestTime(page);
+  for (const width of [1440, 390]) {
+    await page.setViewportSize({ width, height: 1000 });
+    await page.goto('./');
+    const demo = page.locator('.hero-demo-video');
+    await demo.scrollIntoViewIfNeeded();
+    await expect(page.getByRole('link', { name: /^Explore [1-9]/ })).toBeVisible({ timeout: 30_000 });
+    await expect
+      .poll(
+        () =>
+          demo
+            .locator('img')
+            .evaluate((image: HTMLImageElement) => image.complete && image.naturalWidth > 0),
+        { timeout: 30_000 },
+      )
+      .toBe(true);
+    const directory = process.env.UAP_LANDING_SCREENSHOT_DIR;
+    if (directory) {
+      mkdirSync(directory, { recursive: true });
+      await page.screenshot({ path: resolve(directory, `hero-video-poster-${width}.png`) });
+    }
+    await demo.getByRole('button', { name: 'Watch demo' }).click();
+    const video = page.frameLocator('.hero-demo-video iframe').locator('video');
+    await expect(video).toBeAttached({ timeout: 30_000 });
+    await expect
+      .poll(() => video.evaluate((element: HTMLVideoElement) => element.currentTime), {
+        timeout: 30_000,
+      })
+      .toBeGreaterThan(1);
+    const media = await video.evaluate((element: HTMLVideoElement) => ({
+      duration: element.duration,
+      error: element.error?.code ?? null,
+      paused: element.paused,
+    }));
+    expect(media.duration).toBeGreaterThan(42);
+    expect(media.duration).toBeLessThan(43);
+    expect(media.error).toBeNull();
+    expect(media.paused).toBe(false);
+    if (directory)
+      await page.screenshot({ path: resolve(directory, `hero-video-playing-${width}.png`) });
+    await video.evaluate((element: HTMLVideoElement) => element.pause());
+  }
+});
diff --git a/landing/tests/browser/hero-layout.spec.ts b/landing/tests/browser/hero-layout.spec.ts
index ebd03b5af..4edc1512f 100644
--- a/landing/tests/browser/hero-layout.spec.ts
+++ b/landing/tests/browser/hero-layout.spec.ts
@@ -128,9 +128,10 @@ test('selected targets produce one complete copyable command with keyboard activ
 test('catalog reveal is early on navigation, compact trust badges stay compact, and video preview waits for a real Mux asset', async ({
   page,
 }) => {
+  await page.emulateMedia({ reducedMotion: 'no-preference' });
   await page.setViewportSize({ width: 1440, height: 600 });
   await page.goto('./');
-  await expect(page.locator('html')).toHaveClass(/scroll-reveal-active/);
+  await expect(page.locator('html')).toHaveClass(/scroll-reveal-active/, { timeout: 15_000 });
   const catalog = page.locator('.catalog-wrap');
   await catalog.evaluate((node) => {
     window.scrollTo({
@@ -165,7 +166,7 @@ test('catalog reveal is early on navigation, compact trust badges stay compact,
 
   await page.goto('./');
   await expect(page.locator('.hero-demo-video')).toBeVisible();
-  await expect(page.locator('.hero-demo-video button')).toHaveCount(0);
+  await expect(page.locator('.hero-demo-video button')).toHaveAccessibleName('Watch demo');
   const preview = (await page.locator('.hero-demo-video').boundingBox())!;
   const install = (await page.locator('.hero__window').boundingBox())!;
   expect(preview.width).toBeLessThanOrEqual(320);
diff --git a/landing/tests/browser/visual-controls.spec.ts b/landing/tests/browser/visual-controls.spec.ts
index c9f4ca283..3bac82952 100644
--- a/landing/tests/browser/visual-controls.spec.ts
+++ b/landing/tests/browser/visual-controls.spec.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 
 test('flat filters retain keyboard selection, category search, and reset', async ({ page }) => {
   await page.goto('./');
-  await expect(page.getByText('In your terminal', { exact: true })).toBeVisible();
+  await expect(page.locator('.hero-quick-start__label').filter({ hasText: 'Copy and run' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'Other installation methods' })).toHaveAttribute(
     'href',
     'https://github.com/777genius/universal-agent-plugins#quick-start',

From 05d7c837b247085159ef7d16c68cd6c92e062f80 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 00:24:51 +0300
Subject: [PATCH 05/10] style(landing): enlarge hero video and rebalance
 spacing

---
 landing/assets/styles/registry.scss           | 14 ++++++++------
 landing/tests/browser/hero-demo-video.spec.ts | 11 +++++++++--
 landing/tests/browser/hero-layout.spec.ts     |  4 ++--
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index 59e449d17..a70aab140 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -278,7 +278,7 @@ img {
   position: relative;
   z-index: 2;
   min-height: 600px;
-  padding-block: clamp(36px, 4vw, 56px);
+  padding-block: 24px 40px;
   display: grid;
   grid-template-columns: minmax(0, 0.9fr) minmax(500px, 1.1fr);
   align-items: center;
@@ -330,8 +330,8 @@ img {
 }
 
 .hero-demo-video {
-  width: min(100%, 320px);
-  margin: 0 auto 12px;
+  width: min(100%, 480px);
+  margin: 0 auto 28px;
   aspect-ratio: 16 / 9;
   position: relative;
   z-index: 2;
@@ -2828,7 +2828,8 @@ img {
 @media (max-width: 980px) {
   .hero {
     grid-template-columns: 1fr;
-    padding-top: 70px;
+    padding-top: 32px;
+    gap: 32px;
   }
   .hero__copy {
     text-align: center;
@@ -2841,7 +2842,7 @@ img {
   }
   .hero__demo {
     width: min(100%, 610px);
-    margin: 25px auto 0;
+    margin: 0 auto;
   }
   .client-strip {
     grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
@@ -2912,7 +2913,8 @@ img {
   }
   .hero {
     min-height: auto;
-    padding-block: 58px 80px;
+    padding-block: 32px 56px;
+    gap: 32px;
   }
   .hero h1 {
     font-size: clamp(2.2rem, 11vw, 3.2rem);
diff --git a/landing/tests/browser/hero-demo-video.spec.ts b/landing/tests/browser/hero-demo-video.spec.ts
index 45e0a89f0..f9831a30b 100644
--- a/landing/tests/browser/hero-demo-video.spec.ts
+++ b/landing/tests/browser/hero-demo-video.spec.ts
@@ -25,8 +25,15 @@ test('demo loads its player only after keyboard activation and keeps installatio
     const requestsBefore = playerRequests.length;
     const installBefore = (await page.locator('.hero__window').boundingBox())!;
     const demoBefore = (await demo.boundingBox())!;
-    expect(demoBefore.width).toBeLessThanOrEqual(320);
-    expect(demoBefore.y + demoBefore.height).toBeLessThanOrEqual(installBefore.y);
+    expect(demoBefore.width).toBeLessThanOrEqual(480);
+    expect(installBefore.y - (demoBefore.y + demoBefore.height)).toBeGreaterThanOrEqual(27);
+    if (width === 1440) {
+      const header = (await page.getByRole('banner').boundingBox())!;
+      const topGap = demoBefore.y - (header.y + header.height);
+      expect(demoBefore.width).toBe(480);
+      expect(topGap).toBeGreaterThanOrEqual(16);
+      expect(topGap).toBeLessThanOrEqual(32);
+    }
     await button.focus();
     await page.keyboard.press('Enter');
     const frame = demo.locator('iframe');
diff --git a/landing/tests/browser/hero-layout.spec.ts b/landing/tests/browser/hero-layout.spec.ts
index 4edc1512f..11d821b31 100644
--- a/landing/tests/browser/hero-layout.spec.ts
+++ b/landing/tests/browser/hero-layout.spec.ts
@@ -169,8 +169,8 @@ test('catalog reveal is early on navigation, compact trust badges stay compact,
   await expect(page.locator('.hero-demo-video button')).toHaveAccessibleName('Watch demo');
   const preview = (await page.locator('.hero-demo-video').boundingBox())!;
   const install = (await page.locator('.hero__window').boundingBox())!;
-  expect(preview.width).toBeLessThanOrEqual(320);
-  expect(preview.y + preview.height).toBeLessThanOrEqual(install.y);
+  expect(preview.width).toBe(480);
+  expect(install.y - (preview.y + preview.height)).toBeGreaterThanOrEqual(27);
   await expect(page.locator('iframe[src*="player.mux.com"]')).toHaveCount(0);
   await expect(page.locator('.hero-quick-start__footer')).toHaveCount(0);
   await capture(page, 'hero-early-reveal');

From c353b703f078b460098e75a5427286ebe961b5c2 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 00:27:06 +0300
Subject: [PATCH 06/10] style(landing): emphasize demo playback control

---
 landing/assets/styles/registry.scss | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index a70aab140..5c5df4646 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -388,17 +388,18 @@ img {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8px;
+  gap: 10px;
   border: 0;
-  color: #fff;
+  color: var(--primary);
   background: rgba(4, 7, 15, 0.34);
   cursor: pointer;
+  font-size: 1.125rem;
   font-weight: 750;
 }
 .hero-demo-video button svg {
-  width: 30px;
-  height: 30px;
-  padding: 6px;
+  width: 36px;
+  height: 36px;
+  padding: 8px;
   border-radius: 50%;
   background: rgba(4, 7, 15, 0.82);
 }

From fd6c5f2ce8f70ead68ee7b8333e61d32c758a56b Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 12:32:44 +0300
Subject: [PATCH 07/10] fix(landing): wrap long hero command tokens

---
 landing/assets/styles/registry.scss | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/landing/assets/styles/registry.scss b/landing/assets/styles/registry.scss
index 5c5df4646..8e5cae4d3 100644
--- a/landing/assets/styles/registry.scss
+++ b/landing/assets/styles/registry.scss
@@ -499,7 +499,10 @@ img {
 .hero-quick-start__step .command-snippet--inline pre {
   overflow-x: visible;
   white-space: pre-wrap;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+.hero-quick-start__step .command-snippet--inline code {
+  min-width: 0;
 }
 .hero-quick-start__command {
   min-width: 0;

From 034f877f920507f766eb94932e0bd266528ee960 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 12:57:34 +0300
Subject: [PATCH 08/10] test(landing): stabilize live catalog and hydration
 checks

---
 landing/tests/browser/hero-layout.spec.ts |  5 +++-
 landing/tests/browser/landing.spec.ts     | 29 +++++++++++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/landing/tests/browser/hero-layout.spec.ts b/landing/tests/browser/hero-layout.spec.ts
index 11d821b31..c52468b5f 100644
--- a/landing/tests/browser/hero-layout.spec.ts
+++ b/landing/tests/browser/hero-layout.spec.ts
@@ -1,7 +1,7 @@
 import { mkdirSync } from 'node:fs';
 import { resolve } from 'node:path';
 import { expect, test, type Page } from '@playwright/test';
-import { setSignedMirrorTestTime, wording } from './i18n-state.helpers';
+import { hydrated, setSignedMirrorTestTime, wording } from './i18n-state.helpers';
 
 const exactCommand = 'npx universal-agent-plugins add context7 --target codex,cursor,vscode';
 
@@ -13,6 +13,7 @@ async function capture(page: Page, name: string) {
 }
 
 async function waitForCommand(page: Page) {
+  await hydrated(page);
   await expect(page.locator('.hero__window .command-snippet')).toBeVisible({
     timeout: 15_000,
   });
@@ -99,6 +100,7 @@ test('hero controls and 13 client links remain complete across four viewports',
 test('selected targets produce one complete copyable command with keyboard activation', async ({
   page,
 }) => {
+  test.setTimeout(60_000);
   for (const width of [1440, 320]) {
     await page.setViewportSize({ width, height: width === 1440 ? 1000 : 844 });
     await page.goto('./');
@@ -128,6 +130,7 @@ test('selected targets produce one complete copyable command with keyboard activ
 test('catalog reveal is early on navigation, compact trust badges stay compact, and video preview waits for a real Mux asset', async ({
   page,
 }) => {
+  test.setTimeout(60_000);
   await page.emulateMedia({ reducedMotion: 'no-preference' });
   await page.setViewportSize({ width: 1440, height: 600 });
   await page.goto('./');
diff --git a/landing/tests/browser/landing.spec.ts b/landing/tests/browser/landing.spec.ts
index 0d55d440d..1becc0600 100644
--- a/landing/tests/browser/landing.spec.ts
+++ b/landing/tests/browser/landing.spec.ts
@@ -5,6 +5,25 @@ import { hydrated, setSignedMirrorTestTime } from './i18n-state.helpers';
 
 test.beforeEach(async ({ page }) => setSignedMirrorTestTime(page));
 
+async function waitForFullDirectory(page: import('@playwright/test').Page) {
+  await expect(page.locator('.catalog')).toHaveAttribute('data-discovery-state', /current|cached/, {
+    timeout: 15_000,
+  });
+  // The live catalog changes size. Prove pagination beyond the rendered cards,
+  // rather than requiring a historical number of community packages.
+  await expect
+    .poll(
+      async () => {
+        const summary = await page.locator('.catalog-count').innerText();
+        const total = Number(summary.match(/([\d,]+) plugins/)?.[1]?.replaceAll(',', '') ?? 0);
+        const shown = await page.locator('.plugin-card').count();
+        return shown > 0 && total > shown;
+      },
+      { timeout: 15_000 },
+    )
+    .toBe(true);
+}
+
 const parseJsonLd = async (page: import('@playwright/test').Page) => {
   const values = await page.locator('script[type="application/ld+json"]').allTextContents();
   return values.flatMap((value) => {
@@ -69,9 +88,7 @@ test('homepage installs with auto-detection and exposes the full directory', asy
   await expect(securityTooltip).toContainText(/exact indexed revision [0-9a-f]{12}/);
   await expect(securityTooltip).toContainText(/does not run the plugin or guarantee safety/i);
   await expect(page.getByText(/guarantee of safety/i)).toHaveCount(0);
-  await expect(page.locator('.catalog-count')).toContainText(/[2-9],?\d{3} plugins/, {
-    timeout: 15_000,
-  });
+  await waitForFullDirectory(page);
   const catalogSummary = await page.locator('.catalog-count').innerText();
   const totalPlugins = Number(catalogSummary.match(/([\d,]+) plugins/)![1].replaceAll(',', ''));
   await expect(explorePlugins).toHaveAccessibleName(
@@ -136,7 +153,7 @@ test('community catalog uses the live registry when the baked snapshot is unavai
   await expect(page.locator('.catalog')).toHaveAttribute('data-discovery-state', /current|cached/, {
     timeout: 45_000,
   });
-  await expect(page.locator('.catalog-count')).toContainText(/[2-9],?\d{3} plugins/);
+  await waitForFullDirectory(page);
   await expect(page.locator('.discovery-status--stale')).toHaveCount(0);
   await expect(page.locator('.discovery-status--unavailable')).toHaveCount(0);
 });
@@ -456,9 +473,7 @@ test('directory filters and reviewed detail keep automatic detection as the defa
   page,
 }) => {
   await page.goto('./plugins');
-  await expect(page.locator('.catalog-count')).toContainText(/[2-9],?\d{3}/, {
-    timeout: 15_000,
-  });
+  await waitForFullDirectory(page);
   await page.getByPlaceholder(/Search by name/).fill('gitlab');
   const gitlabCard = page
     .locator('.plugin-card')

From 4fcddb8204b2c11a4c191179372ed5e4c5bededc Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 13:38:21 +0300
Subject: [PATCH 09/10] ci(landing): install only the headless browser used by
 tests

---
 .github/workflows/landing.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/landing.yml b/.github/workflows/landing.yml
index b05c74730..6715d6a5e 100644
--- a/.github/workflows/landing.yml
+++ b/.github/workflows/landing.yml
@@ -25,7 +25,7 @@ permissions:
 jobs:
   test:
     runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || vars.CI_LINUX_RUNNER || 'ubuntu-latest' }}
-    timeout-minutes: 20
+    timeout-minutes: 35
     steps:
       - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
@@ -87,7 +87,7 @@ jobs:
 
       - name: Install browser
         working-directory: landing
-        run: pnpm exec playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps --only-shell chromium
 
       - name: Run browser E2E
         id: browser-e2e

From 36c108bd5e961534c5e944328f02fd7aaa8adf09 Mon Sep 17 00:00:00 2001
From: iliya <iliyazelenkog@gmail.com>
Date: Tue, 13 Oct 2026 14:02:44 +0300
Subject: [PATCH 10/10] ci(landing): use headless shell for Pages validation

---
 .github/workflows/landing.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/landing.yml b/.github/workflows/landing.yml
index 6715d6a5e..7479412e6 100644
--- a/.github/workflows/landing.yml
+++ b/.github/workflows/landing.yml
@@ -108,7 +108,7 @@ jobs:
   combined-pages-validation:
     if: github.event_name == 'pull_request'
     runs-on: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name != github.repository && 'ubuntu-latest' || vars.CI_LINUX_RUNNER || 'ubuntu-latest' }}
-    timeout-minutes: 20
+    timeout-minutes: 35
     permissions:
       contents: read
     strategy:
@@ -234,7 +234,7 @@ jobs:
 
       - name: Install browser
         working-directory: landing
-        run: pnpm exec playwright install --with-deps chromium
+        run: pnpm exec playwright install --with-deps --only-shell chromium
 
       - name: Serve assembled artifact at deployment base
         run: |