fix(app): stabilize session opening composer

packages/app/e2e/sidebar/sidebar-session-links.spec.ts

@@ -1,7 +1,7 @@
 import type { Page, Route } from "@playwright/test"
 import { test, expect } from "../fixtures"
 import { cleanupSession, cleanupTestProject, createTestProject, openSidebar, waitSession, withSession } from "../actions"
-import { promptSelector, sessionTurnListSelector } from "../selectors"
+import { promptSelector, sessionComposerDockSelector, sessionTurnListSelector } from "../selectors"
 import type { createSdk } from "../utils"
 
 async function sessionRowPaint(page: Page, sessionID: string) {
@@ -279,6 +279,8 @@ test("opening a delayed sidebar session never shows the previous session as load
       try {
         await gotoSession(source.id)
         await expect(page.locator(sessionTurnListSelector).getByText(sourceText)).toBeVisible()
+        const sourceDockBox = await page.locator(sessionComposerDockSelector).boundingBox()
+        if (!sourceDockBox) throw new Error("Source composer dock did not expose a bounding box")
         await openSidebar(page)
         await expect.poll(() => targetMessageRequests, { timeout: 10_000 }).toBeGreaterThan(0)
 
@@ -289,10 +291,22 @@ test("opening a delayed sidebar session never shows the previous session as load
         await expect(page.locator(sessionTurnListSelector).getByText(sourceText)).toHaveCount(0)
         await expect(page.locator(sessionTurnListSelector).getByText(targetText)).toHaveCount(0)
         await expect(page.locator(promptSelector)).toHaveCount(0)
+        const openingDock = page.locator(
+          `${sessionComposerDockSelector}[data-state="opening-placeholder"]`,
+        )
+        await expect(openingDock).toHaveCount(1)
+        await expect
+          .poll(async () => {
+            const openingDockBox = await openingDock.boundingBox()
+            return openingDockBox ? Math.abs(openingDockBox.height - sourceDockBox.height) : Infinity
+          })
+          .toBeLessThanOrEqual(2)
 
-        await page.locator('[data-component="session-opening-state"]').getByRole("button", { name: "New session" }).click()
-        await expect(page).toHaveURL(new RegExp(`/${slug}/session(?:\\?|#|$)`))
-        await expect(page.locator('[data-component="session-new-home"]')).toBeVisible()
+        releaseMessages?.()
+        releaseMessages = undefined
+        await expect(page.locator(sessionTurnListSelector).getByText(targetText)).toBeVisible()
+        await expect(page.locator(promptSelector)).toHaveCount(1)
+        await expect(openingDock).toHaveCount(0)
       } finally {
         releaseMessages?.()
         await page.unroute(`**/session/${target.id}/message*`, delayTargetMessages)

packages/app/src/pages/session.tsx

@@ -1,3 +1,3 @@
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { createMemo, createEffect, createSignal, on } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
@@ -20,6 +20,7 @@
 import { createSizing } from "@/pages/session/helpers"
 import { createSessionExecutionState } from "@/pages/session/session-execution-directory"
 import { useSessionLayout } from "@/pages/session/session-layout"
+import { shouldShowSessionOpeningState } from "@/pages/session/session-main-view-state"
 import { SessionPageComposerRegion } from "@/pages/session/session-composer-region"
 import { SessionMainView } from "@/pages/session/session-main-view"
 import { createSessionRunning, isSessionRunning } from "@/pages/session/session-running-state"
@@ -123,6 +124,14 @@
   const timelineHistoryMore = timeline.historyMore
   const timelineHistoryLoading = timeline.historyLoading
   const lastUserMessage = timeline.lastUserMessage
+  const sessionOpening = createMemo(() =>
+    shouldShowSessionOpeningState({
+      activeSessionID: params.id,
+      routeSessionID: params.id,
+      routeReady: timelineMessagesReady(),
+      timelineSessionID: timelineSessionID(),
+    }),
+  )
   const turnChangeController = createSessionTurnChanges({ sessionID: timelineSessionID, sessionMessages: timelineMessages })
   const diagnostics = createSessionPageDiagnostics({
     routeSessionID: () => params.id,
@@ -379,6 +388,7 @@
   const renderComposerRegion = (ctx?: { onModeChange: (mode: "normal" | "shell") => void }) => (
     <SessionPageComposerRegion
       state={composer}
+      opening={sessionOpening()}
       ready={!deferRender() && sessionActionReady()}
       actionReady={submitReady()}
       abortReady={sessionActionReady()}
@@ -453,8 +463,7 @@
       mobileTab={mobileTab()}
       setMobileTab={setMobileTab}
       language={language}
-      routeSessionID={params.id}
-      routeReady={timelineMessagesReady()}
+      sessionOpening={sessionOpening()}
       transitioning={timeline.transitioning()}
       timelineSessionID={timelineSessionID()}
       timelineSessionKey={timelineSessionKey()}

packages/app/src/pages/session/session-composer-region.tsx

@@ -1,10 +1,11 @@
-import type { ComponentProps } from "solid-js"
+import { createMemo, type ComponentProps } from "solid-js"
 import { SessionComposerRegion, type createSessionComposerState } from "@/pages/session/composer"
 
 type ComposerRegionProps = ComponentProps<typeof SessionComposerRegion>
 
 export function SessionPageComposerRegion(props: {
   state: ReturnType<typeof createSessionComposerState>
+  opening?: boolean
   ready: boolean
   actionReady?: boolean
   abortReady?: boolean
@@ -21,5 +22,40 @@ export function SessionPageComposerRegion(props: {
   revert?: ComposerRegionProps["revert"]
   setPromptDockRef: (el: HTMLDivElement) => void
 }) {
-  return <SessionComposerRegion {...props} />
+  const content = createMemo(() =>
+    props.opening ? (
+      <SessionOpeningComposerPlaceholder centered={props.centered} setPromptDockRef={props.setPromptDockRef} />
+    ) : (
+      <SessionComposerRegion {...props} />
+    ),
+  )
+
+  return <>{content()}</>
+}
+
+function SessionOpeningComposerPlaceholder(props: {
+  centered: boolean
+  setPromptDockRef: (el: HTMLDivElement) => void
+}) {
+  return (
+    <div
+      ref={props.setPromptDockRef}
+      data-component="session-prompt-dock"
+      data-variant="session"
+      data-dock-kind="composer"
+      data-state="opening-placeholder"
+      aria-hidden="true"
+      class="w-full pointer-events-none absolute inset-x-0 bottom-0 box-border"
+      style={{ height: "var(--composer-dock-height, 112px)" }}
+    >
+      <div
+        data-component="session-composer-column"
+        data-state="opening-placeholder"
+        classList={{
+          "h-full w-full px-4 md:px-3": true,
+          "md:max-w-[720px] md:mx-auto 2xl:max-w-[920px]": props.centered,
+        }}
+      />
+    </div>
+  )
 }

packages/app/src/pages/session/session-main-view.tsx

@@ -1,3 +1,3 @@
 import { createEffect, createSignal, Match, onCleanup, Show, Switch, type ComponentProps, type JSX } from "solid-js"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { NewSessionView, SessionHeader } from "@/components/session"
@@ -6,7 +6,6 @@
 import { MessageTimeline } from "@/pages/session/message-timeline"
 import { SessionOpeningSkeleton } from "@/pages/session/session-opening-skeleton"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
-import { shouldShowSessionOpeningState } from "@/pages/session/session-main-view-state"
 import type { createSessionHistoryWindow } from "@/pages/session/use-session-history-window"
 import type { createSessionReviewState } from "@/pages/session/use-session-review-state"
 import type { createSessionScrollDock } from "@/pages/session/use-session-scroll-dock"
@@ -23,8 +22,7 @@
   mobileTab: "session" | "changes"
   setMobileTab: (tab: "session" | "changes") => void
   language: ReturnType<typeof useLanguage>
-  routeSessionID?: string
-  routeReady: boolean
+  sessionOpening: boolean
   transitioning: boolean
   timelineSessionID?: string
   timelineSessionKey: string
@@ -64,14 +62,8 @@
   files: ReturnType<typeof createSessionReviewState>["artifactFiles"]
   size: ReturnType<typeof createSizing>
 }) {
-  const showSessionOpeningState = () =>
-    shouldShowSessionOpeningState({
-      activeSessionID: props.activeSessionID,
-      routeSessionID: props.routeSessionID,
-      routeReady: props.routeReady,
-      timelineSessionID: props.timelineSessionID,
-    })
-  const [openingSkeletonMounted, setOpeningSkeletonMounted] = createSignal(showSessionOpeningState())
+  const showSessionOpeningState = () => props.sessionOpening
+  const [openingSkeletonMounted, setOpeningSkeletonMounted] = createSignal(props.sessionOpening)
   const [openingSkeletonVisible, setOpeningSkeletonVisible] = createSignal(false)
   let openingShowTimer: ReturnType<typeof setTimeout> | undefined
   let openingHideTimer: ReturnType<typeof setTimeout> | undefined