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

2026-06-10 11:35:50 +08:00
parent 6c6ed68b5a
commit 0fc33e2a06
15 changed files with 320 additions and 61 deletions
@@ -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>
+  )
+}