feat(app): open the components lab in Beta builds (#58177)

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(

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 })),

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"