From 47a135540bdd53009f6917e89522020992d4a0bf Mon Sep 17 00:00:00 2001
From: Kit Langton <kit.langton@gmail.com>
Date: Thu, 22 Oct 2026 10:21:57 -0700
Subject: [PATCH] feat(app): open the components lab in Beta builds (#58177)

---
 packages/app/src/components-lab/lab.tsx   | 2 +-
 packages/app/src/shell/routes/routes.tsx  | 8 ++++++--
 packages/gui-extensions/src/debug/bar.tsx | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/components-lab/lab.tsx b/packages/app/src/components-lab/lab.tsx
index 6a0b9f670df..bf821be6c7b 100644
--- a/packages/app/src/components-lab/lab.tsx
+++ b/packages/app/src/components-lab/lab.tsx
@@ -331,7 +331,7 @@ function Stage(props: { entry: LabEntry; inspector: HTMLElement; scheme: "dark"
     {
       storage: null,
       persist: "none",
-      // The lab is dev-only, but a dev build can still resolve knobs' production entry, whose panel needs shipping.
+      // Beta is a production build, where knobs resolves its production entry: the panel mounts only when shipped.
       ship: () => import("knobs/panel"),
       defaultLabel: first,
       presets: Object.fromEntries(
diff --git a/packages/app/src/shell/routes/routes.tsx b/packages/app/src/shell/routes/routes.tsx
index b69f1ab6c7b..63322dcc85c 100644
--- a/packages/app/src/shell/routes/routes.tsx
+++ b/packages/app/src/shell/routes/routes.tsx
@@ -23,8 +23,12 @@ const ConnectServerScreen = lazy(() =>
   import("@/servers/connect/screen").then((module) => ({ default: module.ConnectServerScreen })),
 )
 
-// Development builds only: production drops the import, so the lab, its stories and knobs never ship.
-const ComponentsLab = import.meta.env.DEV ? lazy(() => import("@/components-lab/lab")) : undefined
+// The dev server and Beta only. Both are fixed at build time, so other builds, prod included, drop the import and never
+// contain the lab, its stories or knobs. Beta loads it as its own chunk, only when /components opens.
+const ComponentsLab =
+  import.meta.env.DEV || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
+    ? lazy(() => import("@/components-lab/lab"))
+    : undefined
 
 const TargetSessionRouteContent = lazy(() =>
   loadSessionRoute().then((module) => ({ default: module.TargetSessionRouteContent })),
diff --git a/packages/gui-extensions/src/debug/bar.tsx b/packages/gui-extensions/src/debug/bar.tsx
index bd3da2af953..e3add246923 100644
--- a/packages/gui-extensions/src/debug/bar.tsx
+++ b/packages/gui-extensions/src/debug/bar.tsx
@@ -723,8 +723,8 @@ export default function DebugBar(props: {
         </Show>
         <Show when={props.motion}>
           <div class="ms-auto flex items-center gap-[9px]">
-            {/* The lab's route exists only on the dev server. */}
-            {import.meta.env.DEV && (
+            {/* The lab's route exists only on the dev server and in Beta. */}
+            {(import.meta.env.DEV || import.meta.env.VITE_OPENCODE_CHANNEL === "beta") && (
               <Tooltip appearance="compact" value={ctx.t("components.tip")} placement="top">
                 <a
                   href="/components"