feat(app): /new-session route for new design (#31457)

packages/app/src/pages/directory-layout.tsx

@@ -10,7 +10,7 @@ import { useSync } from "@/context/sync"
 import { decode64 } from "@/utils/base64"
 import { Schema } from "effect"
 
-function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
+export function DirectoryDataProvider(props: ParentProps<{ directory: string; draftID?: string }>) {
   const location = useLocation()
   const navigate = useNavigate()
   const params = useParams()
@@ -18,6 +18,8 @@ function DirectoryDataProvider(props: ParentProps<{ directory: string }>) {
   const slug = createMemo(() => base64Encode(props.directory))
 
   createEffect(() => {
+    // A draft lives at /new-session?draftId=… and has no directory segment to normalize.
+    if (props.draftID) return
     const next = sync.data.path.directory
     if (!next || next === props.directory) return
     const path = location.pathname.slice(slug().length + 1)

packages/app/src/pages/new-session.tsx

@@ -0,0 +1,78 @@
+import { createEffect, createMemo, onMount, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useSearchParams } from "@solidjs/router"
+import { NewSessionDesignView } from "@/components/session"
+import { useComments } from "@/context/comments"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { createSessionComposerState, SessionComposerRegion } from "@/pages/session/composer"
+
+/**
+ * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
+ * composer for a brand-new session — no terminal, review pane, file tree, or message
+ * timeline. Submitting promotes the draft into a real session (see prompt-input/submit).
+ */
+export default function NewSessionPage() {
+  const prompt = usePrompt()
+  const sdk = useSDK()
+  const sync = useSync()
+  const comments = useComments()
+  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
+
+  let inputRef: HTMLDivElement | undefined
+
+  const composer = createSessionComposerState()
+
+  const [store, setStore] = createStore({
+    worktree: "main",
+  })
+
+  const newSessionWorktree = createMemo(() => {
+    if (store.worktree === "create") return "create"
+    const project = sync.project
+    if (project && sdk.directory !== project.worktree) return sdk.directory
+    return "main"
+  })
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    untrack(() => {
+      const text = searchParams.prompt
+      if (!text) return
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      setSearchParams({ ...searchParams, prompt: undefined })
+    })
+  })
+
+  onMount(() => {
+    requestAnimationFrame(() => inputRef?.focus())
+  })
+
+  return (
+    <div class="relative size-full overflow-hidden flex flex-col">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+        <div class="@container relative flex flex-col min-h-0 h-full bg-background-stronger flex-1">
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+            <NewSessionDesignView>
+              <SessionComposerRegion
+                state={composer}
+                ready
+                centered={false}
+                placement="inline"
+                inputRef={(el) => {
+                  inputRef = el
+                }}
+                newSessionWorktree={newSessionWorktree()}
+                onNewSessionWorktreeReset={() => setStore("worktree", "main")}
+                onSubmit={() => comments.clear()}
+                onResponseSubmit={() => {}}
+                setPromptDockRef={() => {}}
+              />
+            </NewSessionDesignView>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/app/src/pages/session.tsx

@@ -31,7 +31,7 @@ import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@/utils/toast"
 import { checksum } from "@opencode-ai/core/util/encode"
 import { useLocation, useSearchParams } from "@solidjs/router"
-import { NewSessionDesignView, NewSessionView, SessionHeader } from "@/components/session"
+import { NewSessionView, SessionHeader } from "@/components/session"
 import { useComments } from "@/context/comments"
 import { getSessionPrefetch, SESSION_PREFETCH_TTL } from "@/context/global-sync/session-prefetch"
 import { useServerSync } from "@/context/server-sync"
@@ -63,7 +63,6 @@ import { SessionSidePanel } from "@/pages/session/session-side-panel"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
-import { shouldUseV2NewSessionPage } from "@/pages/session/new-session-layout"
 import { Identifier } from "@/utils/id"
 import { diffs as list } from "@/utils/diffs"
 import { Persist, persisted } from "@/utils/persist"
@@ -271,13 +270,10 @@ export default function Page() {
 
   const isDesktop = createMediaQuery("(min-width: 768px)")
   const size = createSizing()
-  const isV2NewSessionPage = () =>
-    shouldUseV2NewSessionPage({ newLayoutDesigns: newSessionDesign(), sessionID: params.id })
-  const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened() && !isV2NewSessionPage())
+  const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
   const desktopFileTreeOpen = createMemo(
     () =>
       isDesktop() &&
-      !isV2NewSessionPage() &&
       shouldShowFileTree({
         desktopV2: platform.platform === "desktop" && settings.general.newLayoutDesigns(),
         showFileTree: settings.general.showFileTree(),
@@ -1757,10 +1753,9 @@ export default function Page() {
 
         <div
           classList={{
-            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none": true,
+            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]": true,
             "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
               !size.active() && !ui.reviewSnap,
-            "transition-[width]": !isV2NewSessionPage(),
           }}
           style={{
             width: sessionPanelWidth(),
@@ -1768,9 +1763,7 @@ export default function Page() {
         >
           <div
             classList={{
-              "flex-1 min-h-0 flex flex-col": true,
-              "bg-v2-background-bg-deep": isV2NewSessionPage(),
-              "bg-background-stronger": !isV2NewSessionPage(),
+              "flex-1 min-h-0 flex flex-col bg-background-stronger": true,
               "rounded-[10px] overflow-hidden": settings.general.newLayoutDesigns(),
               "shadow-[var(--v2-elevation-raised)]": settings.general.newLayoutDesigns() && !!params.id,
             }}
@@ -1826,9 +1819,7 @@ export default function Page() {
                   </Show>
                 </Match>
                 <Match when={true}>
-                  <Show when={newSessionDesign()} fallback={<NewSessionView worktree={newSessionWorktree()} />}>
-                    <NewSessionDesignView>{composerRegion("inline")}</NewSessionDesignView>
-                  </Show>
+                  <NewSessionView worktree={newSessionWorktree()} />
                 </Match>
               </Switch>
             </div>

packages/app/src/pages/session/new-session-layout.test.ts

@@ -1,14 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import { shouldUseV2NewSessionPage } from "./new-session-layout"
-
-describe("shouldUseV2NewSessionPage", () => {
-  test("keeps disabled pages on the legacy layout", () => {
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: false, sessionID: "ses_123" })).toBe(false)
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: false })).toBe(false)
-  })
-
-  test("uses the v2 layout only for enabled new-session pages", () => {
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: true })).toBe(true)
-    expect(shouldUseV2NewSessionPage({ newLayoutDesigns: true, sessionID: "ses_123" })).toBe(false)
-  })
-})

packages/app/src/pages/session/new-session-layout.ts

@@ -1,6 +1,2 @@
 /** Inline new-session content width — keep in sync with session composer `placement === "inline"`. */
 export const NEW_SESSION_CONTENT_WIDTH = "w-full max-w-[720px] px-0"
-
-export function shouldUseV2NewSessionPage(input: { newLayoutDesigns: boolean; sessionID?: string }) {
-  return input.newLayoutDesigns && !input.sessionID
-}