From 8e1dc705c9676463c4c7918e5051cf6811455512 Mon Sep 17 00:00:00 2001
From: Adam <2363879+adamdotdevin@users.noreply.github.com>
Date: Fri, 20 Feb 2026 10:59:59 -0600
Subject: [PATCH 1/2] wip(app): beta badge

---
 packages/app/src/components/titlebar.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index a90178abdd87..5ef6a2150bff 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -287,6 +287,9 @@ export function Titlebar() {
           </div>
         </div>
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+        <div class="bg-icon-interactive-base text-background-base font-medium px-2 rounded-sm uppercase font-mono">
+          BETA
+        </div>
       </div>
 
       <div class="min-w-0 flex items-center justify-center pointer-events-none">

From 0cfcee6f497a47e389c3dd922c45ac1f88bed969 Mon Sep 17 00:00:00 2001
From: Brendan Allan <git@brendonovich.dev>
Date: Thu, 16 Apr 2026 13:56:12 +0800
Subject: [PATCH 2/2] derive badge from OPENCODE_CHANNEL + animate

---
 packages/app/src/components/titlebar.tsx      | 76 ++++++++++---------
 packages/app/src/env.d.ts                     |  1 +
 .../desktop-electron/electron.vite.config.ts  |  3 +
 3 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/packages/app/src/components/titlebar.tsx b/packages/app/src/components/titlebar.tsx
index 5ef6a2150bff..b7edb85ede09 100644
--- a/packages/app/src/components/titlebar.tsx
+++ b/packages/app/src/components/titlebar.tsx
@@ -252,44 +252,48 @@ export function Titlebar() {
                 </div>
               </div>
             </Show>
-            <Show when={hasProjects()}>
-              <div
-                class="flex items-center gap-0 transition-transform"
-                classList={{
-                  "translate-x-0": !layout.sidebar.opened(),
-                  "-translate-x-[36px]": layout.sidebar.opened(),
-                  "duration-180 ease-out": !layout.sidebar.opened(),
-                  "duration-180 ease-in": layout.sidebar.opened(),
-                }}
-              >
-                <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-                  <Button
-                    variant="ghost"
-                    icon="chevron-left"
-                    class="titlebar-icon w-6 h-6 p-0 box-border"
-                    disabled={!canBack()}
-                    onClick={back}
-                    aria-label={language.t("common.goBack")}
-                  />
-                </Tooltip>
-                <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
-                  <Button
-                    variant="ghost"
-                    icon="chevron-right"
-                    class="titlebar-icon w-6 h-6 p-0 box-border"
-                    disabled={!canForward()}
-                    onClick={forward}
-                    aria-label={language.t("common.goForward")}
-                  />
-                </Tooltip>
-              </div>
-            </Show>
+            <div
+              class="flex items-center shrink-0"
+              classList={{
+                "translate-x-0": !layout.sidebar.opened(),
+                "-translate-x-[36px]": layout.sidebar.opened(),
+                "duration-180 ease-out": !layout.sidebar.opened(),
+                "duration-180 ease-in": layout.sidebar.opened(),
+              }}
+            >
+              <Show when={hasProjects()}>
+                <div class="flex items-center gap-0 transition-transform">
+                  <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
+                    <Button
+                      variant="ghost"
+                      icon="chevron-left"
+                      class="titlebar-icon w-6 h-6 p-0 box-border"
+                      disabled={!canBack()}
+                      onClick={back}
+                      aria-label={language.t("common.goBack")}
+                    />
+                  </Tooltip>
+                  <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
+                    <Button
+                      variant="ghost"
+                      icon="chevron-right"
+                      class="titlebar-icon w-6 h-6 p-0 box-border"
+                      disabled={!canForward()}
+                      onClick={forward}
+                      aria-label={language.t("common.goForward")}
+                    />
+                  </Tooltip>
+                </div>
+              </Show>
+              <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+              {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
+                <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+                  {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
+                </div>
+              )}
+            </div>
           </div>
         </div>
-        <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
-        <div class="bg-icon-interactive-base text-background-base font-medium px-2 rounded-sm uppercase font-mono">
-          BETA
-        </div>
       </div>
 
       <div class="min-w-0 flex items-center justify-center pointer-events-none">
diff --git a/packages/app/src/env.d.ts b/packages/app/src/env.d.ts
index 89721f34f294..22e52f9919fb 100644
--- a/packages/app/src/env.d.ts
+++ b/packages/app/src/env.d.ts
@@ -3,6 +3,7 @@ import "solid-js"
 interface ImportMetaEnv {
   readonly VITE_OPENCODE_SERVER_HOST: string
   readonly VITE_OPENCODE_SERVER_PORT: string
+  readonly OPENCODE_CHANNEL?: "dev" | "beta" | "prod"
 }
 
 interface ImportMeta {
diff --git a/packages/desktop-electron/electron.vite.config.ts b/packages/desktop-electron/electron.vite.config.ts
index e2b296a3e207..d0e6c42b6c8c 100644
--- a/packages/desktop-electron/electron.vite.config.ts
+++ b/packages/desktop-electron/electron.vite.config.ts
@@ -60,6 +60,9 @@ export default defineConfig({
     plugins: [appPlugin],
     publicDir: "../../../app/public",
     root: "src/renderer",
+    define: {
+      "import.meta.env.VITE_OPENCODE_CHANNEL": JSON.stringify(channel),
+    },
     build: {
       rollupOptions: {
         input: {