fix(app): fail closed on v2 channel gates

packages/app/src/components/prompt-input.tsx

@@ -1387,7 +1387,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     return getFilename(value)
   }
 
-  const USE_V2_INPUT = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+  const USE_V2_INPUT =
+    import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
 
   return (
     <div class="relative size-full flex flex-col gap-0">

packages/app/src/components/titlebar.tsx

@@ -51,7 +51,8 @@ const legacyTitlebarHeight = 40
 const v2TitlebarHeight = 44
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
-const USE_V2_TITLEBAR = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const USE_V2_TITLEBAR =
+  import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
 
 const makeSessionHref = (b64Dir: string, sessionId: string) => `/${b64Dir}/session/${sessionId}`
 

packages/app/src/pages/home.tsx

@@ -1,5 +1,5 @@
 import type { Session } from "@opencode-ai/sdk/v2/client"
-import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js"
+import { createMemo, For, Match, Show, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useQuery } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
@@ -18,20 +18,19 @@ import { DateTime } from "luxon"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { DialogSelectDirectory } from "@/components/dialog-select-directory"
 import { DialogSelectServer } from "@/components/dialog-select-server"
-import { DialogSelectModel } from "@/components/dialog-select-model"
 import { useServer } from "@/context/server"
 import { useGlobalSync } from "@/context/global-sync"
 import { useLanguage } from "@/context/language"
 import { useNotification } from "@/context/notification"
 import { usePermission } from "@/context/permission"
 import { displayName, getProjectAvatarSource, projectForSession, sortedRootSessions } from "@/pages/layout/helpers"
-import { getFilename } from "@opencode-ai/core/util/path"
 import { sessionTitle } from "@/utils/session-title"
 import { pathKey } from "@/utils/path-key"
 import { messageAgentColor } from "@/utils/agent"
 import { sessionPermissionRequest } from "@/pages/session/composer/session-request-tree"
 
-const USE_HOME_DESIGN = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const USE_HOME_DESIGN =
+  import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
 const HOME_SESSION_LIMIT = 15
 const HOME_ROW =
   "flex min-w-0 w-full shrink-0 cursor-default items-center rounded-[6px] border-0 bg-transparent text-left [font-weight:530] text-v2-text-text-muted transition-colors duration-[120ms] ease-in-out hover:bg-v2-overlay-simple-overlay-hover focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:outline-none"
@@ -468,10 +467,6 @@ function LegacyHome() {
   const server = useServer()
   const language = useLanguage()
 
-  const [promptText, setPromptText] = createSignal("")
-  const [selectedAgent, setSelectedAgent] = createSignal("frontend-specialist")
-  const [showProjectsDropdown, setShowProjectsDropdown] = createSignal(false)
-
   const homedir = createMemo(() => sync.data.path.home)
   const recent = createMemo(() => {
     return sync.data.project
@@ -480,8 +475,6 @@ function LegacyHome() {
       .slice(0, 5)
   })
 
-  const currentProject = createMemo(() => recent()[0]?.worktree)
-
   const serverDotClass = createMemo(() => {
     const healthy = server.healthy()
     if (healthy === true) return "bg-icon-success-base"
@@ -520,185 +513,69 @@ function LegacyHome() {
     }
   }
 
-  function handleModelSelect() {
-    dialog.show(() => <DialogSelectModel />)
-  }
-
-  function toggleAgent() {
-    const agents = ["frontend-specialist", "build", "general"]
-    const nextIndex = (agents.indexOf(selectedAgent()) + 1) % agents.length
-    setSelectedAgent(agents[nextIndex])
-  }
-
-  function handleSubmit() {
-    const projectToOpen = currentProject()
-    if (projectToOpen) {
-      openProject(projectToOpen)
-    } else {
-      chooseProject()
-    }
-  }
-
-  const activeModelName = createMemo(() => {
-    const model = sync.data.config.model
-    if (!model) return "GPT-5.7 Pro"
-    const parts = model.split("/")
-    return parts[parts.length - 1]
-  })
-
   return (
-    <div class="mx-auto mt-24 w-full max-w-2xl px-6 flex flex-col items-center">
-      <div class="flex flex-col items-center gap-3 mb-10">
-        <div onClick={chooseProject} class="cursor-pointer hover:opacity-25 transition-opacity duration-200">
-          <Logo class="w-48 opacity-15" />
-        </div>
-        <Button
-          size="normal"
-          variant="ghost"
-          class="text-12-regular text-text-weak px-3"
-          onClick={() => dialog.show(() => <DialogSelectServer />)}
-        >
-          <div
-            classList={{
-              "size-1.5 rounded-full mr-2": true,
-              [serverDotClass()]: true,
-            }}
-          />
-          {server.name}
-        </Button>
-      </div>
-
+    <div class="mx-auto mt-55 w-full md:w-auto px-4">
+      <Logo class="md:w-xl opacity-12" />
+      <Button
+        size="large"
+        variant="ghost"
+        class="mt-4 mx-auto text-14-regular text-text-weak"
+        onClick={() => dialog.show(() => <DialogSelectServer />)}
+      >
+        <div
+          classList={{
+            "size-2 rounded-full": true,
+            [serverDotClass()]: true,
+          }}
+        />
+        {server.name}
+      </Button>
       <Switch>
-        <Match when={recent().length > 0}>
-          <div class="w-full flex flex-col items-center gap-6">
-            <div class="text-20-medium text-text-strong text-center">{language.t("session.new.title")}</div>
-
-            <div class="w-full bg-surface-base border border-border-base rounded-xl p-4 flex flex-col gap-3 shadow-md relative">
-              <textarea
-                class="bg-transparent border-none outline-none text-14-regular text-text-base placeholder-text-weak w-full resize-none h-20 focus:outline-none"
-                placeholder="Ask anything, / for commands, @ for context..."
-                value={promptText()}
-                onInput={(e) => setPromptText(e.currentTarget.value)}
-                onKeyDown={(e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault()
-                    handleSubmit()
-                  }
-                }}
-              />
-
-              <div class="flex flex-wrap items-center gap-2 pt-3 border-t border-border-weak-base">
-                <Button
-                  size="small"
-                  variant="ghost"
-                  class="text-12-medium text-text-weak hover:text-text-strong flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base hover:bg-surface-raised-base-hover border border-border-weak-base rounded-md"
-                  onClick={toggleAgent}
-                >
-                  <Icon name="sliders" size="small" class="shrink-0" />
-                  <span>Agent: {selectedAgent()}</span>
-                </Button>
-
-                <Button
-                  size="small"
-                  variant="ghost"
-                  class="text-12-medium text-text-weak hover:text-text-strong flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base hover:bg-surface-raised-base-hover border border-border-weak-base rounded-md"
-                  onClick={handleModelSelect}
-                >
-                  <Icon name="brain" size="small" class="shrink-0" />
-                  <span>Model: {activeModelName()}</span>
-                </Button>
-
-                <div class="relative">
-                  <Button
-                    size="small"
-                    variant="ghost"
-                    class="text-12-medium text-text-weak hover:text-text-strong flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base hover:bg-surface-raised-base-hover border border-border-weak-base rounded-md"
-                    onClick={() => setShowProjectsDropdown(!showProjectsDropdown())}
-                  >
-                    <Icon name="folder" size="small" class="shrink-0" />
-                    <span>Project: {currentProject() ? getFilename(currentProject()) : "Select Project"}</span>
-                  </Button>
-
-                  <Show when={showProjectsDropdown()}>
-                    <div class="absolute left-0 mt-1 w-64 bg-surface-raised-base border border-border-base rounded-lg p-2 shadow-lg z-50 flex flex-col gap-1">
-                      <div class="text-10-semibold text-text-weak px-2 py-1 uppercase tracking-wider">
-                        {language.t("home.recentProjects")}
-                      </div>
-                      <For each={recent()}>
-                        {(project) => (
-                          <button
-                            class="text-12-mono text-left px-2 py-1.5 hover:bg-surface-raised-base-hover rounded flex items-center justify-between w-full"
-                            onClick={() => {
-                              openProject(project.worktree)
-                              setShowProjectsDropdown(false)
-                            }}
-                          >
-                            <span class="truncate">{getFilename(project.worktree)}</span>
-                            <span class="text-10-regular text-text-weak shrink-0 pl-2">
-                              {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
-                            </span>
-                          </button>
-                        )}
-                      </For>
-                      <div class="border-t border-border-weak-base my-1" />
-                      <button
-                        class="text-12-medium text-text-strong text-left px-2 py-1.5 hover:bg-surface-raised-base-hover rounded flex items-center gap-2 w-full"
-                        onClick={() => {
-                          setShowProjectsDropdown(false)
-                          chooseProject()
-                        }}
-                      >
-                        <Icon name="folder-add-left" size="small" />
-                        {language.t("command.project.open")}
-                      </button>
-                    </div>
-                  </Show>
-                </div>
-
-                <Button
-                  size="small"
-                  variant="ghost"
-                  class="text-12-medium text-text-weak flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base border border-border-weak-base rounded-md cursor-default pointer-events-none"
-                >
-                  <Icon name="branch" size="small" class="shrink-0" />
-                  <span>Branch: dev</span>
-                </Button>
-              </div>
+        <Match when={sync.data.project.length > 0}>
+          <div class="mt-20 w-full flex flex-col gap-4">
+            <div class="flex gap-2 items-center justify-between pl-3">
+              <div class="text-14-medium text-text-strong">{language.t("home.recentProjects")}</div>
+              <Button icon="folder-add-left" size="normal" class="pl-2 pr-3" onClick={chooseProject}>
+                {language.t("command.project.open")}
+              </Button>
             </div>
+            <ul class="flex flex-col gap-2">
+              <For each={recent()}>
+                {(project) => (
+                  <Button
+                    size="large"
+                    variant="ghost"
+                    class="text-14-mono text-left justify-between px-3"
+                    onClick={() => openProject(project.worktree)}
+                  >
+                    {project.worktree.replace(homedir(), "~")}
+                    <div class="text-14-regular text-text-weak">
+                      {DateTime.fromMillis(project.time.updated ?? project.time.created).toRelative()}
+                    </div>
+                  </Button>
+                )}
+              </For>
+            </ul>
+          </div>
+        </Match>
+        <Match when={!sync.ready}>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <div class="text-12-regular text-text-weak">{language.t("common.loading")}</div>
+            <Button class="px-3" onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
           </div>
         </Match>
-
         <Match when={true}>
-          <div class="w-full flex flex-col items-center gap-6">
-            <div class="text-20-medium text-text-strong text-center">{language.t("home.empty.title")}</div>
-
-            <div class="w-full bg-surface-base border border-border-base rounded-xl p-4 flex flex-col gap-3 shadow-md">
-              <div class="text-14-regular text-text-weak w-full min-h-[4rem] cursor-pointer" onClick={chooseProject}>
-                Ask anything, / for commands, @ for context...
-              </div>
-
-              <div class="flex flex-wrap items-center gap-2 pt-3 border-t border-border-weak-base">
-                <Button
-                  size="small"
-                  variant="ghost"
-                  class="text-12-medium text-text-weak hover:text-text-strong flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base hover:bg-surface-raised-base-hover border border-border-weak-base rounded-md"
-                  onClick={chooseProject}
-                >
-                  <Icon name="folder" size="small" class="shrink-0" />
-                  <span>Open project</span>
-                </Button>
-
-                <Button
-                  size="small"
-                  variant="ghost"
-                  class="text-12-medium text-text-weak hover:text-text-strong flex items-center gap-1.5 px-2.5 py-1 bg-surface-raised-base hover:bg-surface-raised-base-hover border border-border-weak-base rounded-md"
-                  onClick={handleModelSelect}
-                >
-                  <Icon name="brain" size="small" class="shrink-0" />
-                  <span>Model: {activeModelName()}</span>
-                </Button>
-              </div>
+          <div class="mt-30 mx-auto flex flex-col items-center gap-3">
+            <Icon name="folder-add-left" size="large" />
+            <div class="flex flex-col gap-1 items-center justify-center">
+              <div class="text-14-medium text-text-strong">{language.t("home.empty.title")}</div>
+              <div class="text-12-regular text-text-weak">{language.t("home.empty.description")}</div>
             </div>
+            <Button class="px-3 mt-1" onClick={chooseProject}>
+              {language.t("command.project.open")}
+            </Button>
           </div>
         </Match>
       </Switch>

packages/app/src/pages/layout.tsx

@@ -89,7 +89,8 @@ import {
 import { ProjectDragOverlay, SortableProject, type ProjectSidebarContext } from "./layout/sidebar-project"
 import { SidebarContent } from "./layout/sidebar-shell"
 
-const USE_NEW_DESIGN = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const USE_NEW_DESIGN =
+  import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
 
 export default function Layout(props: ParentProps) {
   const [store, setStore, , ready] = persisted(

packages/app/src/pages/session.tsx

@@ -74,7 +74,8 @@ const emptyFollowups: FollowupItem[] = []
 
 type ChangeMode = "git" | "branch" | "turn"
 type VcsMode = "git" | "branch"
-const USE_NEW_SESSION_DESIGN = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const USE_NEW_SESSION_DESIGN =
+  import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
 
 type SessionHistoryWindowInput = {
   sessionID: () => string | undefined
@@ -263,7 +264,7 @@ export default function Page() {
 
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const size = createSizing()
-  const isV2NewSessionPage = () => import.meta.env.VITE_OPENCODE_CHANNEL === "prod" || !params.id
+  const isV2NewSessionPage = () => !USE_NEW_SESSION_DESIGN || !params.id
   const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened() && !isV2NewSessionPage())
   const desktopFileTreeOpen = createMemo(() => isDesktop() && layout.fileTree.opened() && !isV2NewSessionPage())
   const desktopSidePanelOpen = createMemo(() => desktopReviewOpen() || desktopFileTreeOpen())

packages/app/src/pages/session/session-side-panel.tsx

@@ -28,6 +28,9 @@ import { createOpenSessionFileTab, createSessionTabs, getTabReorderIndex, type S
 import { setSessionHandoff } from "@/pages/session/handoff"
 import { useSessionLayout } from "@/pages/session/session-layout"
 
+const USE_NEW_SESSION_DESIGN =
+  import.meta.env.VITE_OPENCODE_CHANNEL === "dev" || import.meta.env.VITE_OPENCODE_CHANNEL === "beta"
+
 type RenderDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
 
 function renderDiff(value: SnapshotFileDiff | VcsFileDiff): value is RenderDiff {
@@ -207,7 +210,7 @@ export function SessionSidePanel(props: {
   })
 
   return (
-    <Show when={isDesktop() && !(import.meta.env.VITE_OPENCODE_CHANNEL !== "prod" && !params.id)}>
+    <Show when={isDesktop() && !(USE_NEW_SESSION_DESIGN && !params.id)}>
       <aside
         id="review-panel"
         aria-label={language.t("session.panel.reviewAndFiles")}

packages/app/vite.js

@@ -5,12 +5,13 @@ import { fileURLToPath } from "url"
 
 const theme = fileURLToPath(new URL("./public/oc-theme-preload.js", import.meta.url))
 
-const channel = (() => {
+const channel = (command) => {
   const raw = process.env.OPENCODE_CHANNEL
   if (raw === "dev" || raw === "beta" || raw === "prod") return raw
   if (process.env.OPENCODE_CHANNEL === "latest") return "prod"
-  return "dev"
-})()
+  if (command === "serve") return "dev"
+  return "prod"
+}
 
 /**
  * @type {import("vite").PluginOption}
@@ -18,7 +19,7 @@ const channel = (() => {
 export default [
   {
     name: "opencode-desktop:config",
-    config() {
+    config(_, env) {
       return {
         resolve: {
           alias: {
@@ -26,7 +27,7 @@ export default [
           },
         },
         define: {
-          "import.meta.env.VITE_OPENCODE_CHANNEL": JSON.stringify(channel),
+          "import.meta.env.VITE_OPENCODE_CHANNEL": JSON.stringify(channel(env.command)),
         },
         worker: {
           format: "es",