feat(console): promote desktop tabs launch (#35972)

packages/console/app/src/app.tsx

@@ -9,6 +9,7 @@ import "./app.css"
 import { LanguageProvider } from "~/context/language"
 import { I18nProvider, useI18n } from "~/context/i18n"
 import { strip } from "~/lib/language"
+import { DesktopPromo } from "~/component/desktop-promo"
 
 function AppMeta() {
   const i18n = useI18n()
@@ -33,6 +34,7 @@ export default function App() {
             <MetaProvider>
               <AppMeta />
               <Suspense>{props.children}</Suspense>
+              <DesktopPromo />
             </MetaProvider>
           </I18nProvider>
         </LanguageProvider>

packages/console/app/src/component/desktop-promo.css

@@ -0,0 +1,101 @@
+[data-component="desktop-promo"] {
+  --promo-background: hsl(0, 20%, 99%);
+  --promo-background-weak: hsl(0, 8%, 97%);
+  --promo-text: hsl(0, 1%, 39%);
+  --promo-text-strong: hsl(0, 5%, 12%);
+  --promo-border: hsla(0, 100%, 3%, 0.12);
+
+  position: fixed;
+  z-index: 20;
+  right: 1.5rem;
+  bottom: 1.5rem;
+  width: min(28rem, calc(100vw - 2rem));
+  padding: 4px;
+  overflow: hidden;
+  color: var(--promo-text);
+  border: 1px solid var(--promo-border);
+  border-radius: 8px;
+  background: var(--promo-background);
+  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 15%);
+  font-family: var(--font-mono);
+
+  @media (prefers-color-scheme: dark) {
+    --promo-background: hsl(0, 9%, 7%);
+    --promo-background-weak: hsl(0, 6%, 10%);
+    --promo-text: hsl(0, 4%, 71%);
+    --promo-text-strong: hsl(0, 15%, 94%);
+    --promo-border: hsl(0, 4%, 23%);
+  }
+
+  @media (max-width: 40rem) {
+    right: 1rem;
+    bottom: 1rem;
+  }
+
+  [data-slot="desktop-promo-link"] {
+    display: block;
+    color: var(--promo-text);
+    text-decoration: none;
+  }
+
+  [data-slot="desktop-promo-link"]:focus-visible {
+    outline: 2px solid var(--promo-text-strong);
+    outline-offset: -3px;
+  }
+
+  video {
+    display: block;
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: 4px;
+    background: var(--promo-background-weak);
+  }
+
+  [data-slot="desktop-promo-copy"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    padding: 1rem;
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  [data-slot="desktop-promo-copy"] strong {
+    color: var(--promo-text-strong);
+    font-weight: 500;
+  }
+
+  [data-slot="desktop-promo-close"] {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+    display: grid;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    place-items: center;
+    cursor: pointer;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    background: rgb(0 0 0 / 70%);
+    opacity: 0;
+    transition: opacity 150ms ease, background 150ms ease;
+  }
+
+  &:hover [data-slot="desktop-promo-close"],
+  [data-slot="desktop-promo-close"]:focus-visible {
+    opacity: 1;
+  }
+
+  [data-slot="desktop-promo-close"]:hover {
+    background: rgb(0 0 0 / 90%);
+  }
+
+  @media (hover: none) {
+    [data-slot="desktop-promo-close"] {
+      opacity: 1;
+    }
+  }
+}

packages/console/app/src/component/desktop-promo.tsx

@@ -0,0 +1,48 @@
+import "./desktop-promo.css"
+import { A, useLocation } from "@solidjs/router"
+import { createSignal, Show } from "solid-js"
+import { getRequestEvent } from "solid-js/web"
+import desktopPromoVideo from "~/asset/lander/desktop-tabs-landscape.mp4"
+import { useI18n } from "~/context/i18n"
+import { useLanguage } from "~/context/language"
+import { strip } from "~/lib/language"
+
+export function DesktopPromo() {
+  const i18n = useI18n()
+  const language = useLanguage()
+  const location = useLocation()
+  const [visible, setVisible] = createSignal(true)
+  const request = getRequestEvent()?.request
+  const hostname = request ? new URL(request.url).hostname : typeof window === "object" ? window.location.hostname : ""
+  const primaryHost =
+    hostname === "opencode.ai" || hostname === "localhost" || hostname === "127.0.0.1" || hostname === "::1"
+
+  return (
+    <Show
+      when={
+        visible() &&
+        primaryHost &&
+        strip(location.pathname) !== "/download" &&
+        !strip(location.pathname).startsWith("/download/")
+      }
+    >
+      <aside data-component="desktop-promo">
+        <A href={language.route("/download")} data-slot="desktop-promo-link">
+          <video src={desktopPromoVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
+          <span data-slot="desktop-promo-copy">
+            <strong>{i18n.t("home.promo.title")}</strong>
+            <span>
+              {i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
+            </span>
+          </span>
+        </A>
+        <button type="button" data-slot="desktop-promo-close" onClick={() => setVisible(false)}>
+          <span class="sr-only">{i18n.t("home.promo.close")}</span>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+            <path d="M5 5L15 15M15 5L5 15" stroke="currentColor" stroke-width="1.5" />
+          </svg>
+        </button>
+      </aside>
+    </Show>
+  )
+}

packages/console/app/src/i18n/ar.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "شعار opencode الداكن",
 
   "home.banner.badge": "جديد",
-  "home.banner.text": "تطبيق سطح المكتب متاح بنسخة تجريبية",
-  "home.banner.platforms": "على macOS، Windows، وLinux",
+  "home.banner.text": "نقدّم علامات التبويب لتطبيق سطح المكتب.",
+  "home.banner.platforms": "متاحة على macOS وWindows وLinux",
   "home.banner.downloadNow": "حمّل الآن",
   "home.banner.downloadBetaNow": "حمّل النسخة التجريبية لتطبيق سطح المكتب الآن",
+  "home.promo.title": "نقدّم علامات التبويب لتطبيق سطح المكتب",
+  "home.promo.body": "نظّم عملك وجلساتك النشطة باستخدام علامات التبويب.",
+  "home.promo.cta": "نزّل أحدث إصدار للبدء.",
+  "home.promo.close": "إغلاق إعلان تطبيق سطح المكتب",
 
   "home.hero.title": "وكيل برمجة بالذكاء الاصطناعي مفتوح المصدر",
   "home.hero.subtitle.a": "نماذج مجانية مضمّنة أو اربط أي نموذج من أي مزوّد،",
@@ -700,11 +704,11 @@ export const dict = {
 
   "download.title": "OpenCode | تنزيل",
   "download.meta.description": "نزّل OpenCode لـ macOS، Windows، وLinux",
-  "download.hero.title": "تنزيل OpenCode",
+  "download.hero.title": "تنزيل OpenCode لسطح المكتب",
   "download.hero.subtitle": "متاح في نسخة تجريبية لـ macOS، Windows، وLinux",
   "download.hero.button": "تنزيل لـ {{os}}",
   "download.section.terminal": "OpenCode للطرفية",
-  "download.section.desktop": "OpenCode لسطح المكتب (Beta)",
+  "download.section.desktop": "OpenCode لسطح المكتب",
   "download.section.extensions": "امتدادات OpenCode",
   "download.section.integrations": "تكاملات OpenCode",
   "download.action.download": "تنزيل",

packages/console/app/src/i18n/br.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "logo opencode escuro",
 
   "home.banner.badge": "Novo",
-  "home.banner.text": "App desktop disponível em beta",
-  "home.banner.platforms": "no macOS, Windows e Linux",
+  "home.banner.text": "Conheça as abas no app desktop.",
+  "home.banner.platforms": "Disponível no macOS, Windows e Linux",
   "home.banner.downloadNow": "Baixar agora",
   "home.banner.downloadBetaNow": "Baixe agora o beta do desktop",
+  "home.promo.title": "Conheça as abas no app desktop",
+  "home.promo.body": "Organize seu trabalho e suas sessões ativas com abas.",
+  "home.promo.cta": "Baixe a versão mais recente para começar.",
+  "home.promo.close": "Fechar anúncio do app desktop",
 
   "home.hero.title": "O agente de codificação de código aberto com IA",
   "home.hero.subtitle.a": "Modelos grátis incluídos ou conecte qualquer modelo de qualquer provedor,",
@@ -711,11 +715,11 @@ export const dict = {
 
   "download.title": "OpenCode | Baixar",
   "download.meta.description": "Baixe o OpenCode para macOS, Windows e Linux",
-  "download.hero.title": "Baixar OpenCode",
+  "download.hero.title": "Baixar OpenCode Desktop",
   "download.hero.subtitle": "Disponível em Beta para macOS, Windows e Linux",
   "download.hero.button": "Baixar para {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "Extensões OpenCode",
   "download.section.integrations": "Integrações OpenCode",
   "download.action.download": "Baixar",

packages/console/app/src/i18n/da.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode logo dark",
 
   "home.banner.badge": "Ny",
-  "home.banner.text": "Desktop-app tilgængelig i beta",
-  "home.banner.platforms": "på macOS, Windows og Linux",
+  "home.banner.text": "Introduktion af Tabs til Desktop.",
+  "home.banner.platforms": "Tilgængelig på macOS, Windows og Linux",
   "home.banner.downloadNow": "Download nu",
   "home.banner.downloadBetaNow": "Download desktop-betaen nu",
+  "home.promo.title": "Introduktion af Tabs til Desktop",
+  "home.promo.body": "Organiser dit arbejde og aktive sessioner med faner.",
+  "home.promo.cta": "Download den nyeste version for at komme i gang.",
+  "home.promo.close": "Luk meddelelsen om Desktop-appen",
 
   "home.hero.title": "Den open source AI-kodningsagent",
   "home.hero.subtitle.a": "Gratis modeller inkluderet, eller forbind enhver model fra enhver udbyder,",
@@ -706,11 +710,11 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Download OpenCode til macOS, Windows og Linux",
-  "download.hero.title": "Download OpenCode",
+  "download.hero.title": "Download OpenCode Desktop",
   "download.hero.subtitle": "Tilgængelig i beta til macOS, Windows og Linux",
   "download.hero.button": "Download til {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrations",
   "download.action.download": "Download",

packages/console/app/src/i18n/de.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "OpenCode Logo dunkel",
 
   "home.banner.badge": "Neu",
-  "home.banner.text": "Desktop-App in der Beta verfügbar",
-  "home.banner.platforms": "auf macOS, Windows und Linux",
+  "home.banner.text": "Neu: Tabs für Desktop.",
+  "home.banner.platforms": "Verfügbar für macOS, Windows und Linux",
   "home.banner.downloadNow": "Jetzt herunterladen",
   "home.banner.downloadBetaNow": "Desktop-Beta jetzt herunterladen",
+  "home.promo.title": "Neu: Tabs für Desktop",
+  "home.promo.body": "Organisiere deine Arbeit und aktiven Sitzungen mit Tabs.",
+  "home.promo.cta": "Lade die neueste Version herunter, um loszulegen.",
+  "home.promo.close": "Ankündigung zur Desktop-App schließen",
 
   "home.hero.title": "Der Open-Source AI-Coding-Agent",
   "home.hero.subtitle.a": "Kostenlose Modelle inklusive oder verbinde jedes Modell eines beliebigen Anbieters,",
@@ -711,11 +715,11 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Lade OpenCode für macOS, Windows und Linux herunter",
-  "download.hero.title": "OpenCode herunterladen",
+  "download.hero.title": "OpenCode Desktop herunterladen",
   "download.hero.subtitle": "In Beta verfügbar für macOS, Windows und Linux",
   "download.hero.button": "Download für {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrationen",
   "download.action.download": "Download",

packages/console/app/src/i18n/en.ts

@@ -102,11 +102,16 @@ export const dict = {
   "temp.logoDarkAlt": "opencode logo dark",
 
   "home.banner.badge": "New",
-  "home.banner.text": "Desktop app available in beta",
-  "home.banner.platforms": "on macOS, Windows, and Linux",
+  "home.banner.text": "Introducing tabs for desktop.",
+  "home.banner.platforms": "Available on macOS, Windows, and Linux",
   "home.banner.downloadNow": "Download now",
   "home.banner.downloadBetaNow": "Download the desktop beta now",
 
+  "home.promo.title": "Introducing Tabs for Desktop",
+  "home.promo.body": "Organize your work and active sessions with tabs.",
+  "home.promo.cta": "Download the latest to get started.",
+  "home.promo.close": "Dismiss desktop app announcement",
+
   "home.hero.title": "The open source AI coding agent",
   "home.hero.subtitle.a": "Free models included or connect any model from any provider,",
   "home.hero.subtitle.b": "including Claude, GPT, Gemini and more.",
@@ -703,11 +708,11 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Download OpenCode for macOS, Windows, and Linux",
-  "download.hero.title": "Download OpenCode",
+  "download.hero.title": "Download OpenCode Desktop",
   "download.hero.subtitle": "Available in Beta for macOS, Windows, and Linux",
   "download.hero.button": "Download for {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrations",
   "download.action.download": "Download",

packages/console/app/src/i18n/es.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "logo de opencode oscuro",
 
   "home.banner.badge": "Nuevo",
-  "home.banner.text": "Aplicación de escritorio disponible en beta",
-  "home.banner.platforms": "en macOS, Windows y Linux",
+  "home.banner.text": "Presentamos Tabs para Desktop.",
+  "home.banner.platforms": "Disponible en macOS, Windows y Linux",
   "home.banner.downloadNow": "Descargar ahora",
   "home.banner.downloadBetaNow": "Descargar la beta de escritorio ahora",
+  "home.promo.title": "Presentamos Tabs para Desktop",
+  "home.promo.body": "Organiza tu trabajo y tus sesiones activas con pestañas.",
+  "home.promo.cta": "Descarga la última versión para empezar.",
+  "home.promo.close": "Cerrar el anuncio de la aplicación Desktop",
 
   "home.hero.title": "El agente de codificación IA de código abierto",
   "home.hero.subtitle.a": "Modelos gratuitos incluidos o conecta cualquier modelo de cualquier proveedor,",
@@ -711,11 +715,11 @@ export const dict = {
 
   "download.title": "OpenCode | Descargar",
   "download.meta.description": "Descarga OpenCode para macOS, Windows y Linux",
-  "download.hero.title": "Descargar OpenCode",
+  "download.hero.title": "Descargar OpenCode Desktop",
   "download.hero.subtitle": "Disponible en Beta para macOS, Windows y Linux",
   "download.hero.button": "Descargar para {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "Extensiones OpenCode",
   "download.section.integrations": "Integraciones OpenCode",
   "download.action.download": "Descargar",

packages/console/app/src/i18n/fr.ts

@@ -100,10 +100,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode logo dark",
 
   "home.banner.badge": "Nouveau",
-  "home.banner.text": "Application desktop disponible en bêta",
-  "home.banner.platforms": "sur macOS, Windows et Linux",
+  "home.banner.text": "Découvrez Tabs pour Desktop.",
+  "home.banner.platforms": "Disponible sur macOS, Windows et Linux",
   "home.banner.downloadNow": "Télécharger maintenant",
   "home.banner.downloadBetaNow": "Télécharger la bêta desktop maintenant",
+  "home.promo.title": "Découvrez Tabs pour Desktop",
+  "home.promo.body": "Organisez votre travail et vos sessions actives avec des onglets.",
+  "home.promo.cta": "Téléchargez la dernière version pour commencer.",
+  "home.promo.close": "Fermer l’annonce de l’application Desktop",
 
   "home.hero.title": "L'agent de code IA open source",
   "home.hero.subtitle.a":
@@ -718,11 +722,11 @@ export const dict = {
 
   "download.title": "OpenCode | Téléchargement",
   "download.meta.description": "Téléchargez OpenCode pour macOS, Windows et Linux",
-  "download.hero.title": "Télécharger OpenCode",
+  "download.hero.title": "Télécharger OpenCode Desktop",
   "download.hero.subtitle": "Disponible en bêta pour macOS, Windows et Linux",
   "download.hero.button": "Télécharger pour {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Bêta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "Extensions OpenCode",
   "download.section.integrations": "Intégrations OpenCode",
   "download.action.download": "Télécharger",

packages/console/app/src/i18n/it.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "logo scuro di opencode",
 
   "home.banner.badge": "Nuovo",
-  "home.banner.text": "App desktop disponibile in beta",
-  "home.banner.platforms": "su macOS, Windows e Linux",
+  "home.banner.text": "Scopri Tabs per Desktop.",
+  "home.banner.platforms": "Disponibile su macOS, Windows e Linux",
   "home.banner.downloadNow": "Scarica ora",
   "home.banner.downloadBetaNow": "Scarica ora la beta desktop",
+  "home.promo.title": "Scopri Tabs per Desktop",
+  "home.promo.body": "Organizza il tuo lavoro e le sessioni attive con le schede.",
+  "home.promo.cta": "Scarica l’ultima versione per iniziare.",
+  "home.promo.close": "Chiudi l’annuncio dell’app Desktop",
 
   "home.hero.title": "L'agente di coding IA open source",
   "home.hero.subtitle.a": "Modelli gratuiti inclusi o collega qualsiasi modello da qualsiasi provider,",
@@ -709,11 +713,11 @@ export const dict = {
 
   "download.title": "OpenCode | Download",
   "download.meta.description": "Scarica OpenCode per macOS, Windows e Linux",
-  "download.hero.title": "Scarica OpenCode",
+  "download.hero.title": "Scarica OpenCode Desktop",
   "download.hero.subtitle": "Disponibile in Beta per macOS, Windows e Linux",
   "download.hero.button": "Scarica per {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrations",
   "download.action.download": "Scarica",

packages/console/app/src/i18n/ja.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencodeのロゴ（ダーク）",
 
   "home.banner.badge": "新着",
-  "home.banner.text": "デスクトップアプリのベータ版が利用可能",
-  "home.banner.platforms": "macOS、Windows、Linux で",
+  "home.banner.text": "デスクトップ版にタブが登場。",
+  "home.banner.platforms": "macOS、Windows、Linux で利用できます",
   "home.banner.downloadNow": "今すぐダウンロード",
   "home.banner.downloadBetaNow": "デスクトップベータ版を今すぐダウンロード",
+  "home.promo.title": "デスクトップ版にタブが登場",
+  "home.promo.body": "タブで作業とアクティブなセッションを整理できます。",
+  "home.promo.cta": "始めるには最新版をダウンロードしてください。",
+  "home.promo.close": "デスクトップアプリのお知らせを閉じる",
 
   "home.hero.title": "オープンソースのAIコーディングエージェント",
   "home.hero.subtitle.a": "無料モデルが含まれています。また、任意のプロバイダーの任意のモデルに接続でき、",
@@ -708,11 +712,11 @@ export const dict = {
 
   "download.title": "OpenCode | ダウンロード",
   "download.meta.description": "OpenCode を macOS、Windows、Linux 向けにダウンロード",
-  "download.hero.title": "OpenCode をダウンロード",
+  "download.hero.title": "OpenCode デスクトップ版をダウンロード",
   "download.hero.subtitle": "macOS、Windows、Linux 向けベータ版を利用可能",
   "download.hero.button": "{{os}} 向けダウンロード",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrations",
   "download.action.download": "ダウンロード",

packages/console/app/src/i18n/ko.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode 어두운 로고",
 
   "home.banner.badge": "신규",
-  "home.banner.text": "데스크톱 앱 베타 버전 출시",
-  "home.banner.platforms": "macOS, Windows, Linux 지원",
+  "home.banner.text": "데스크톱 탭을 소개합니다.",
+  "home.banner.platforms": "macOS, Windows, Linux에서 사용할 수 있습니다",
   "home.banner.downloadNow": "지금 다운로드",
   "home.banner.downloadBetaNow": "데스크톱 베타 다운로드",
+  "home.promo.title": "데스크톱 탭을 소개합니다",
+  "home.promo.body": "탭으로 작업과 활성 세션을 정리하세요.",
+  "home.promo.cta": "최신 버전을 다운로드하여 시작하세요.",
+  "home.promo.close": "데스크톱 앱 안내 닫기",
 
   "home.hero.title": "오픈 소스 AI 코딩 에이전트",
   "home.hero.subtitle.a": "무료 모델이 포함되어 있으며, 어떤 제공자의 모델이든 연결 가능합니다.",
@@ -700,11 +704,11 @@ export const dict = {
 
   "download.title": "OpenCode | 다운로드",
   "download.meta.description": "macOS, Windows, Linux용 OpenCode 다운로드",
-  "download.hero.title": "OpenCode 다운로드",
+  "download.hero.title": "OpenCode 데스크톱 다운로드",
   "download.hero.subtitle": "macOS, Windows, Linux용 베타 버전 사용 가능",
   "download.hero.button": "{{os}}용 다운로드",
   "download.section.terminal": "OpenCode 터미널",
-  "download.section.desktop": "OpenCode 데스크톱 (베타)",
+  "download.section.desktop": "OpenCode 데스크톱",
   "download.section.extensions": "OpenCode 확장 프로그램",
   "download.section.integrations": "OpenCode 통합",
   "download.action.download": "다운로드",

packages/console/app/src/i18n/no.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode logo mørk",
 
   "home.banner.badge": "Ny",
-  "home.banner.text": "Desktop-app tilgjengelig i beta",
-  "home.banner.platforms": "på macOS, Windows og Linux",
+  "home.banner.text": "Vi introduserer Tabs for Desktop.",
+  "home.banner.platforms": "Tilgjengelig på macOS, Windows og Linux",
   "home.banner.downloadNow": "Last ned nå",
   "home.banner.downloadBetaNow": "Last ned desktop-betaen nå",
+  "home.promo.title": "Vi introduserer Tabs for Desktop",
+  "home.promo.body": "Organiser arbeidet ditt og aktive økter med faner.",
+  "home.promo.cta": "Last ned den nyeste versjonen for å komme i gang.",
+  "home.promo.close": "Lukk kunngjøringen om Desktop-appen",
 
   "home.hero.title": "Den åpne kildekode AI-kodingsagenten",
   "home.hero.subtitle.a":
@@ -707,11 +711,11 @@ export const dict = {
 
   "download.title": "OpenCode | Last ned",
   "download.meta.description": "Last ned OpenCode for macOS, Windows og Linux",
-  "download.hero.title": "Last ned OpenCode",
+  "download.hero.title": "Last ned OpenCode Desktop",
   "download.hero.subtitle": "Tilgjengelig i beta for macOS, Windows og Linux",
   "download.hero.button": "Last ned for {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Extensions",
   "download.section.integrations": "OpenCode Integrations",
   "download.action.download": "Last ned",

packages/console/app/src/i18n/pl.ts

@@ -101,10 +101,14 @@ export const dict = {
   "temp.logoDarkAlt": "ciemne logo opencode",
 
   "home.banner.badge": "Nowość",
-  "home.banner.text": "Aplikacja desktopowa dostępna w wersji beta",
-  "home.banner.platforms": "na macOS, Windows i Linux",
+  "home.banner.text": "Przedstawiamy karty w aplikacji desktopowej.",
+  "home.banner.platforms": "Dostępne na macOS, Windows i Linux",
   "home.banner.downloadNow": "Pobierz teraz",
   "home.banner.downloadBetaNow": "Pobierz betę wersji desktopowej",
+  "home.promo.title": "Przedstawiamy karty w aplikacji desktopowej",
+  "home.promo.body": "Organizuj swoją pracę i aktywne sesje za pomocą kart.",
+  "home.promo.cta": "Pobierz najnowszą wersję, aby rozpocząć.",
+  "home.promo.close": "Zamknij ogłoszenie o aplikacji desktopowej",
 
   "home.hero.title": "Open source'owy agent AI do kodowania",
   "home.hero.subtitle.a": "Darmowe modele w zestawie lub podłącz dowolny model od dowolnego dostawcy,",
@@ -708,11 +712,11 @@ export const dict = {
 
   "download.title": "OpenCode | Pobierz",
   "download.meta.description": "Pobierz OpenCode na macOS, Windows i Linux",
-  "download.hero.title": "Pobierz OpenCode",
+  "download.hero.title": "Pobierz OpenCode Desktop",
   "download.hero.subtitle": "Dostępne w wersji Beta na macOS, Windows i Linux",
   "download.hero.button": "Pobierz na {{os}}",
   "download.section.terminal": "Terminal OpenCode",
-  "download.section.desktop": "Pulpit OpenCode (Beta)",
+  "download.section.desktop": "Pulpit OpenCode",
   "download.section.extensions": "Rozszerzenia OpenCode",
   "download.section.integrations": "Integracje OpenCode",
   "download.action.download": "Pobierz",

packages/console/app/src/i18n/ru.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "темный логотип opencode",
 
   "home.banner.badge": "Новое",
-  "home.banner.text": "Доступно десктопное приложение (бета)",
-  "home.banner.platforms": "на macOS, Windows и Linux",
+  "home.banner.text": "Представляем вкладки в десктопном приложении.",
+  "home.banner.platforms": "Доступно на macOS, Windows и Linux",
   "home.banner.downloadNow": "Скачать",
   "home.banner.downloadBetaNow": "Скачать бету для десктопа",
+  "home.promo.title": "Представляем вкладки в десктопном приложении",
+  "home.promo.body": "Организуйте работу и активные сессии с помощью вкладок.",
+  "home.promo.cta": "Скачайте последнюю версию, чтобы начать.",
+  "home.promo.close": "Закрыть объявление о десктопном приложении",
 
   "home.hero.title": "AI-агент с открытым кодом для программирования",
   "home.hero.subtitle.a": "Бесплатные модели включены, или подключите любую модель от любого провайдера,",
@@ -716,11 +720,11 @@ export const dict = {
 
   "download.title": "OpenCode | Скачать",
   "download.meta.description": "Скачать OpenCode для macOS, Windows и Linux",
-  "download.hero.title": "Скачать OpenCode",
+  "download.hero.title": "Скачать OpenCode Desktop",
   "download.hero.subtitle": "Доступна бета для macOS, Windows и Linux",
   "download.hero.button": "Скачать для {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "Расширения OpenCode",
   "download.section.integrations": "Интеграции OpenCode",
   "download.action.download": "Скачать",

packages/console/app/src/i18n/th.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "โลโก้ opencode แบบมืด",
 
   "home.banner.badge": "ใหม่",
-  "home.banner.text": "แอปเดสก์ท็อปพร้อมใช้งานในเวอร์ชันเบต้า",
-  "home.banner.platforms": "บน macOS, Windows และ Linux",
+  "home.banner.text": "ขอแนะนำแท็บสำหรับเดสก์ท็อป.",
+  "home.banner.platforms": "พร้อมใช้งานบน macOS, Windows และ Linux",
   "home.banner.downloadNow": "ดาวน์โหลดตอนนี้",
   "home.banner.downloadBetaNow": "ดาวน์โหลดเบต้าเดสก์ท็อปตอนนี้",
+  "home.promo.title": "ขอแนะนำแท็บสำหรับเดสก์ท็อป",
+  "home.promo.body": "จัดระเบียบงานและเซสชันที่ใช้งานอยู่ด้วยแท็บ",
+  "home.promo.cta": "ดาวน์โหลดเวอร์ชันล่าสุดเพื่อเริ่มต้นใช้งาน",
+  "home.promo.close": "ปิดประกาศเกี่ยวกับแอปเดสก์ท็อป",
 
   "home.hero.title": "เอเจนต์เขียนโค้ดด้วย AI แบบโอเพนซอร์ส",
   "home.hero.subtitle.a": "มีโมเดลฟรีรวมอยู่ หรือเชื่อมต่อโมเดลใดก็ได้จากผู้ให้บริการรายใดก็ได้,",
@@ -703,11 +707,11 @@ export const dict = {
 
   "download.title": "OpenCode | ดาวน์โหลด",
   "download.meta.description": "ดาวน์โหลด OpenCode สำหรับ macOS, Windows และ Linux",
-  "download.hero.title": "ดาวน์โหลด OpenCode",
+  "download.hero.title": "ดาวน์โหลด OpenCode สำหรับเดสก์ท็อป",
   "download.hero.subtitle": "พร้อมใช้งานในเวอร์ชันเบต้าสำหรับ macOS, Windows และ Linux",
   "download.hero.button": "ดาวน์โหลดสำหรับ {{os}}",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "ส่วนขยาย OpenCode",
   "download.section.integrations": "การเชื่อมต่อ OpenCode",
   "download.action.download": "ดาวน์โหลด",

packages/console/app/src/i18n/tr.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode koyu logo",
 
   "home.banner.badge": "Yeni",
-  "home.banner.text": "Masaüstü uygulaması beta olarak mevcut",
-  "home.banner.platforms": "macOS, Windows ve Linux'ta",
+  "home.banner.text": "Masaüstü uygulamasında sekmelerle tanışın.",
+  "home.banner.platforms": "macOS, Windows ve Linux'ta kullanılabilir",
   "home.banner.downloadNow": "Şimdi indir",
   "home.banner.downloadBetaNow": "Masaüstü betayı şimdi indir",
+  "home.promo.title": "Masaüstü uygulamasında sekmelerle tanışın",
+  "home.promo.body": "Çalışmalarınızı ve etkin oturumlarınızı sekmelerle düzenleyin.",
+  "home.promo.cta": "Başlamak için en son sürümü indirin.",
+  "home.promo.close": "Masaüstü uygulaması duyurusunu kapat",
 
   "home.hero.title": "Açık kaynaklı yapay zeka kodlama ajanı",
   "home.hero.subtitle.a": "Ücretsiz modeller dahil veya herhangi bir sağlayıcıdan herhangi bir modeli bağlayın,",
@@ -711,11 +715,11 @@ export const dict = {
 
   "download.title": "OpenCode | İndir",
   "download.meta.description": "OpenCode'u macOS, Windows ve Linux için indirin",
-  "download.hero.title": "OpenCode'u İndir",
+  "download.hero.title": "OpenCode Desktop'u İndir",
   "download.hero.subtitle": "macOS, Windows ve Linux için Beta olarak sunuluyor",
   "download.hero.button": "{{os}} için indir",
   "download.section.terminal": "OpenCode Terminal",
-  "download.section.desktop": "OpenCode Desktop (Beta)",
+  "download.section.desktop": "OpenCode Desktop",
   "download.section.extensions": "OpenCode Eklentileri",
   "download.section.integrations": "OpenCode Entegrasyonları",
   "download.action.download": "İndir",

packages/console/app/src/i18n/uk.ts

@@ -102,10 +102,14 @@ export const dict = {
   "temp.logoDarkAlt": "темний логотип opencode",
 
   "home.banner.badge": "Нове",
-  "home.banner.text": "Десктопний застосунок доступний у бета-версії",
-  "home.banner.platforms": "на macOS, Windows та Linux",
+  "home.banner.text": "Представляємо вкладки в десктопному застосунку.",
+  "home.banner.platforms": "Доступно на macOS, Windows та Linux",
   "home.banner.downloadNow": "Завантажити зараз",
   "home.banner.downloadBetaNow": "Завантажити бета-версію десктопного застосунку",
+  "home.promo.title": "Представляємо вкладки в десктопному застосунку",
+  "home.promo.body": "Упорядковуйте роботу й активні сесії за допомогою вкладок.",
+  "home.promo.cta": "Завантажте останню версію, щоб почати.",
+  "home.promo.close": "Закрити оголошення про десктопний застосунок",
 
   "home.hero.title": "Відкритий AI-агент для кодування",
   "home.hero.subtitle.a": "Безкоштовні моделі включено або підключіть будь-яку модель від будь-якого провайдера,",
@@ -670,11 +674,11 @@ export const dict = {
 
   "download.title": "OpenCode | Завантажити",
   "download.meta.description": "Завантажте OpenCode для macOS, Windows та Linux",
-  "download.hero.title": "Завантажити OpenCode",
+  "download.hero.title": "Завантажити OpenCode Desktop",
   "download.hero.subtitle": "Доступно в бета-версії для macOS, Windows та Linux",
   "download.hero.button": "Завантажити для {{os}}",
   "download.section.terminal": "Термінал OpenCode",
-  "download.section.desktop": "Десктоп OpenCode (Бета)",
+  "download.section.desktop": "Десктоп OpenCode",
   "download.section.extensions": "Розширення OpenCode",
   "download.section.integrations": "Інтеграції OpenCode",
   "download.action.download": "Завантажити",

packages/console/app/src/i18n/zh.ts

@@ -103,10 +103,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode logo 暗色",
 
   "home.banner.badge": "新",
-  "home.banner.text": "桌面应用 Beta 版现已推出",
-  "home.banner.platforms": "支持 macOS, Windows, 和 Linux",
+  "home.banner.text": "桌面版标签页现已推出。",
+  "home.banner.platforms": "适用于 macOS、Windows 和 Linux",
   "home.banner.downloadNow": "立即下载",
   "home.banner.downloadBetaNow": "立即下载桌面 Beta 版",
+  "home.promo.title": "桌面版标签页现已推出",
+  "home.promo.body": "使用标签页整理工作和活跃会话。",
+  "home.promo.cta": "下载最新版本即可开始使用。",
+  "home.promo.close": "关闭桌面应用公告",
 
   "home.hero.title": "开源 AI 编程代理",
   "home.hero.subtitle.a": "内置免费模型，或连接任意提供商的任意模型，",
@@ -682,11 +686,11 @@ export const dict = {
 
   "download.title": "OpenCode | 下载",
   "download.meta.description": "下载适用于 macOS, Windows, 和 Linux 的 OpenCode",
-  "download.hero.title": "下载 OpenCode",
+  "download.hero.title": "下载 OpenCode 桌面版",
   "download.hero.subtitle": "适用于 macOS, Windows, 和 Linux 的 Beta 版",
   "download.hero.button": "下载 {{os}} 版",
   "download.section.terminal": "OpenCode 终端",
-  "download.section.desktop": "OpenCode 桌面版 (Beta)",
+  "download.section.desktop": "OpenCode 桌面版",
   "download.section.extensions": "OpenCode 扩展",
   "download.section.integrations": "OpenCode 集成",
   "download.action.download": "下载",

packages/console/app/src/i18n/zht.ts

@@ -103,10 +103,14 @@ export const dict = {
   "temp.logoDarkAlt": "opencode 深色標誌",
 
   "home.banner.badge": "新",
-  "home.banner.text": "桌面應用已推出 Beta",
-  "home.banner.platforms": "支援 macOS、Windows 與 Linux",
+  "home.banner.text": "桌面版分頁功能全新推出。",
+  "home.banner.platforms": "適用於 macOS、Windows 與 Linux",
   "home.banner.downloadNow": "立即下載",
   "home.banner.downloadBetaNow": "立即下載桌面 Beta 版",
+  "home.promo.title": "桌面版分頁功能全新推出",
+  "home.promo.body": "使用分頁整理工作和作用中的工作階段。",
+  "home.promo.cta": "下載最新版本即可開始使用。",
+  "home.promo.close": "關閉桌面應用程式公告",
 
   "home.hero.title": "開源 AI 編碼代理",
   "home.hero.subtitle.a": "內建免費模型，或連接任意供應商的任意模型，",
@@ -682,11 +686,11 @@ export const dict = {
 
   "download.title": "OpenCode | 下載",
   "download.meta.description": "下載適用於 macOS、Windows 與 Linux 的 OpenCode",
-  "download.hero.title": "下載 OpenCode",
+  "download.hero.title": "下載 OpenCode 桌面版",
   "download.hero.subtitle": "適用於 macOS、Windows 與 Linux 的 Beta 版現已提供",
   "download.hero.button": "下載 {{os}} 版",
   "download.section.terminal": "OpenCode 終端",
-  "download.section.desktop": "OpenCode 桌面版（Beta）",
+  "download.section.desktop": "OpenCode 桌面版",
   "download.section.extensions": "OpenCode 擴充功能",
   "download.section.integrations": "OpenCode 整合",
   "download.action.download": "下載",

packages/console/app/src/routes/download/index.css

@@ -284,7 +284,7 @@
   }
 
   [data-component="content"] {
-    padding: 6rem 5rem;
+    padding: 3rem 5rem 6rem;
 
     @media (max-width: 60rem) {
       padding: 4rem 1.5rem;
@@ -316,67 +316,43 @@
 
   /* Download Hero Section */
   [data-component="download-hero"] {
-    /* display: grid; */
-    display: none;
-    grid-template-columns: 260px 1fr;
+    display: grid;
+    grid-template-columns: 255px 1fr;
     gap: 4rem;
-    padding-bottom: 2rem;
+    padding: 4px;
+    border: 1px solid var(--color-border-weak);
+    border-radius: 8px;
     margin-bottom: 4rem;
 
     @media (max-width: 50rem) {
       grid-template-columns: 1fr;
-      gap: 1.5rem;
-      padding-bottom: 2rem;
+      gap: 0;
       margin-bottom: 2rem;
     }
 
-    [data-component="hero-icon"] {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-      @media (max-width: 40rem) {
-        display: none;
-      }
-
-      [data-slot="icon-placeholder"] {
-        width: 120px;
-        height: 120px;
-        background: var(--color-background-weak);
-        border: 1px solid var(--color-border-weak);
-        border-radius: 24px;
-
-        @media (max-width: 50rem) {
-          width: 80px;
-          height: 80px;
-        }
-      }
-
-      img {
-        width: 120px;
-        height: 120px;
-        border-radius: 24px;
-        box-shadow:
-          0 1.467px 2.847px 0 rgba(0, 0, 0, 0.42),
-          0 0.779px 1.512px 0 rgba(0, 0, 0, 0.34),
-          0 0.324px 0.629px 0 rgba(0, 0, 0, 0.24);
+    [data-component="hero-video"] {
+      video {
+        display: block;
+        width: 100%;
+        aspect-ratio: 1;
+        object-fit: cover;
+        border-radius: 4px;
 
         @media (max-width: 50rem) {
-          width: 80px;
-          height: 80px;
-          border-radius: 16px;
+          aspect-ratio: 16 / 9;
         }
       }
-
-      @media (max-width: 50rem) {
-        justify-content: flex-start;
-      }
     }
 
     [data-component="hero-text"] {
       display: flex;
       flex-direction: column;
       justify-content: center;
+      padding-right: 3rem;
+
+      @media (max-width: 50rem) {
+        padding: 1.5rem;
+      }
 
       h1 {
         font-size: 1.5rem;

packages/console/app/src/routes/download/index.tsx

@@ -11,7 +11,7 @@ import { LocaleLinks } from "~/component/locale-links"
 import { config } from "~/config"
 import { useI18n } from "~/context/i18n"
 import { useLanguage } from "~/context/language"
-import desktopAppIcon from "../../asset/lander/opencode-desktop-icon.png"
+import desktopTabsVideo from "../../asset/lander/desktop-tabs-landscape.mp4"
 import type { DownloadPlatform } from "./types"
 
 type OS = "macOS" | "Windows" | "Linux" | null
@@ -93,12 +93,14 @@ export default function Download() {
 
         <div data-component="content">
           <section data-component="download-hero">
-            <div data-component="hero-icon">
-              <img src={desktopAppIcon} alt="" />
+            <div data-component="hero-video">
+              <video src={desktopTabsVideo} autoplay playsinline loop muted preload="metadata" aria-hidden="true" />
             </div>
             <div data-component="hero-text">
               <h1>{i18n.t("download.hero.title")}</h1>
-              <p>{i18n.t("download.hero.subtitle")}</p>
+              <p>
+                {i18n.t("home.promo.body")} {i18n.t("home.promo.cta")}
+              </p>
               <Show when={detectedOS()}>
                 <a
                   href={language.route(getDownloadHref(getDownloadPlatform(detectedOS())))}