fix: ci

packages/client/ui-conversation/src/client/contract/slots.ts

@@ -118,11 +118,13 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 /** Owner share of the strict session content seat. */
 export interface ConversationSessionOwnerProps {
   /**
-   * Active phase only: wrap the view ring in the transcript scrollport that
-   * also hosts the sticky composer. The header stays outside that wrapper as
-   * ordinary column chrome (`flex: none`), while the composer sticks to the
-   * bottom of the same scrollport so wheel over the footer scrolls the flow.
-   * @param view - the session view-ring content.
+   * Wrap the view ring in the transcript scrollport that also hosts the
+   * sticky composer. Supplied for every real session (hero/settling/active)
+   * so the composer keeps one tree seat across the blank → active flip; the
+   * header stays outside that wrapper as ordinary column chrome
+   * (`flex: none`), while active CSS sticks the composer to the bottom of
+   * the same scrollport so wheel over the footer scrolls the flow.
+   * @param view - the session view-ring content (null while blank chrome is hidden).
    * @returns the scrollport containing `view` and the sticky composer.
    */
   wrapActiveBody?: (view: ReactNode) => ReactNode

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.module.css

@@ -17,6 +17,12 @@
   border-bottom: 1px solid var(--dsw-alias-border-l2);
 }
 
+/* Blank hero/settling: keep the header node mounted (stable Session tree for
+   the wrapActiveBody composer) without taking column space. */
+.headerHidden {
+  display: none;
+}
+
 .crumbRow {
   display: flex;
   align-items: center;
@@ -199,8 +205,11 @@
   padding-left: 8px;
 }
 
-.root[data-phase='hero'] {
+/* Hero: the composer sits inside the session scroll body; center there so
+   the tree seat matches active (sticky footer) without a Root remount. */
+.root[data-phase='hero'] .scrollBody {
   justify-content: center;
+  overflow-y: auto;
 }
 
 /* Settling (session replaying, hero/docked unknown): keep the composer

packages/client/ui-conversation/src/client/skeleton/ConversationRoot.tsx

@@ -128,9 +128,10 @@ export function ConversationRoot({
     { fallback: composerBar, overlay: true },
   )
 
-  // Active: header is column chrome above the scrollport; the sticky composer
-  // lives inside the same scrollport as the transcript (wheel over the footer
-  // scrolls the flow). Hero/settling keep the composer as a Root child.
+  // Header stays column chrome above this scrollport; the sticky composer
+  // lives inside it with the transcript. Always wrap while a session exists
+  // (hero/settling/active) so the composer keeps one tree seat across the
+  // blank → active flip — relocating it only in active remounted the textarea.
   const wrapActiveBody = (view: ReactNode): ReactNode => (
     <div className={css.scrollBody} data-conversation-scroll="">
       {view}
@@ -141,14 +142,14 @@ export function ConversationRoot({
   return (
     <div className={css.root} data-phase={phase}>
       {/* Mounted for every real session, hero included: ConversationSession
-          renders no chrome while blank but owns the draft-persistence mirror
-          bind — unmounting it in the hero would lose pre-first-send text on
-          a refresh or scope rebuild. */}
+          keeps a chrome-hidden shell while blank and owns the draft-
+          persistence mirror bind — unmounting it in the hero would lose
+          pre-first-send text on a refresh or scope rebuild. */}
       {sessionId !== undefined && renderSlot(
         'conversation.session',
-        phase === 'active' ? { wrapActiveBody } : {},
+        { wrapActiveBody },
       )}
-      {phase !== 'active' ? composer : null}
+      {sessionId === undefined ? composer : null}
     </div>
   )
 }

packages/client/ui-conversation/src/client/skeleton/ConversationSession.tsx

@@ -44,9 +44,13 @@ export function ConversationSession({
     // the machine mirror, not this seed effect.
   }, [inputActions])
 
-  if (blank && composerPhase === 'blank') return null
+  // Blank hero/settling: keep the same header + body tree shape so a
+  // wrapActiveBody-hosted composer keeps its DOM identity across the first
+  // send (hero → active). Chrome is hidden; the draft-persistence mirror
+  // still runs because this component stays mounted.
+  const hideChrome = blank && composerPhase === 'blank'
 
-  const view: ReactNode = (
+  const view: ReactNode = hideChrome ? null : (
     <div className={css.viewArea}>
       {active !== undefined && renderSlot('conversation.view', {}, { only: active.id })}
     </div>
@@ -54,43 +58,50 @@ export function ConversationSession({
 
   return (
     <>
-      <header className={css.header}>
-        <div className={css.crumbRow}>
-          <nav className={css.crumbs} aria-label="Session hierarchy">
-            {ancestry.map((summary, index) => {
-              const last = index === ancestry.length - 1
-              return (
-                <span key={summary.id} className={css.crumbSeg}>
-                  {index > 0 && <span className={css.crumbSep}>/</span>}
+      <header
+        className={clsx(css.header, hideChrome && css.headerHidden)}
+        aria-hidden={hideChrome || undefined}
+      >
+        {!hideChrome && (
+          <>
+            <div className={css.crumbRow}>
+              <nav className={css.crumbs} aria-label="Session hierarchy">
+                {ancestry.map((summary, index) => {
+                  const last = index === ancestry.length - 1
+                  return (
+                    <span key={summary.id} className={css.crumbSeg}>
+                      {index > 0 && <span className={css.crumbSep}>/</span>}
+                      <button
+                        type="button"
+                        className={clsx(css.crumb, last && css.crumbCurrent)}
+                        disabled={last}
+                        onClick={() => { open(summary.id) }}
+                      >
+                        {summary.displayTitle}
+                      </button>
+                    </span>
+                  )
+                })}
+                {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
+              </nav>
+            </div>
+            {tabs.length > 1 && (
+              <div className={css.tabs} role="tablist">
+                {tabs.map(viewTab => (
                   <button
+                    key={viewTab.id}
                     type="button"
-                    className={clsx(css.crumb, last && css.crumbCurrent)}
-                    disabled={last}
-                    onClick={() => { open(summary.id) }}
+                    role="tab"
+                    aria-selected={viewTab.id === active?.id}
+                    className={clsx(css.tab, viewTab.id === active?.id && css.tabActive)}
+                    onClick={() => { actions.setView(viewTab.id) }}
                   >
-                    {summary.displayTitle}
+                    {viewTab.label}
                   </button>
-                </span>
-              )
-            })}
-            {ancestry.length === 0 && <span className={css.crumbCurrent}>{sessionId}</span>}
-          </nav>
-        </div>
-        {tabs.length > 1 && (
-          <div className={css.tabs} role="tablist">
-            {tabs.map(viewTab => (
-              <button
-                key={viewTab.id}
-                type="button"
-                role="tab"
-                aria-selected={viewTab.id === active?.id}
-                className={clsx(css.tab, viewTab.id === active?.id && css.tabActive)}
-                onClick={() => { actions.setView(viewTab.id) }}
-              >
-                {viewTab.label}
-              </button>
-            ))}
-          </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
       </header>
       {wrapActiveBody !== undefined ? wrapActiveBody(view) : view}

packages/client/ui-conversation/src/client/skeleton/EmptyHero.tsx

@@ -115,9 +115,9 @@ export function HeroShell({ children }: HeroShellProps) {
           Let's start building
         </div>
         <div className={css.body}>
-          {/* The resident composer (rendered by ConversationRoot at its stable
-              tree position; the workspace row rides its accessory hole) is
-              CSS-positioned into this gap during the hero phase — see
+          {/* The resident composer (ConversationRoot wrapActiveBody seat; the
+              workspace row rides the stack above the card) is CSS-centered in
+              the session scroll body during hero — see
               ConversationRoot.module.css [data-phase='hero']. */}
         </div>
       </div>

packages/client/ui-conversation/tests/skeleton.spec.tsx

@@ -187,14 +187,19 @@ describe('ConversationRoot resident composer', () => {
         { ...workspace('second'), title: 'Selected Folder' },
       ],
     )
-    // Hero chrome present, view ring absent; scroll host is active-phase only.
-    expect(b.view.container.querySelector('[data-conversation-scroll]')).toBeNull()
+    // Hero chrome present, view ring absent; scroll host already wraps the
+    // resident composer so the blank → active flip does not remount it.
+    const host = b.view.container.querySelector('[data-conversation-scroll]')
+    const header = b.view.container.querySelector('header')
+    expect(host).not.toBeNull()
+    expect(header?.getAttribute('aria-hidden')).toBe('true')
     expect(b.view.getByText("Let's start building")).toBeTruthy()
     expect(b.view.queryByTestId('view-chat')).toBeNull()
     // The same machine-backed textarea is live in the hero, and the
-    // persistence mirror stays bound (ConversationSession mounts chrome-less
+    // persistence mirror stays bound (ConversationSession mounts chrome-hidden
     // for blank sessions): hero typing reaches the chat store.
     const box = b.view.getByRole('textbox')
+    expect(host?.contains(box)).toBe(true)
     fireEvent.change(box, { target: { value: 'draft in hero' } })
     expect(b.chat.store.getSnapshot().draft).toBe('draft in hero')
     // Picker: open through the chip; a pick switches to the other
@@ -207,16 +212,17 @@ describe('ConversationRoot resident composer', () => {
     expect(b.view.getByText('Selected Folder')).toBeTruthy()
   })
 
-  it('machine draft survives the hero → active flip into the sticky scrollport composer', () => {
+  it('same textarea DOM node survives the hero → active flip into the sticky scrollport', () => {
     const b = mount(conversationSnapshot({ composerPhase: 'blank', blank: true }))
     const before = b.view.getByRole('textbox')
     fireEvent.change(before, { target: { value: 'kept across flip' } })
-    // First message landed: content exists, phase leaves blank. The active
-    // composer lives inside the Session scrollport (sticky footer), so the
-    // textarea may remount; the InputHub draft is the durable carrier.
+    // First message landed: content exists, phase leaves blank. Composer
+    // already sat in the Session scrollport during hero, so the textarea
+    // node and InputHub draft both survive.
     b.session.set(conversationSnapshot({ composerPhase: 'active', blank: false }))
     b.rerender()
     const after = b.view.getByRole('textbox') as HTMLTextAreaElement
+    expect(after).toBe(before)
     expect(after.value).toBe('kept across flip')
     expect(b.chat.store.getSnapshot().draft).toBe('kept across flip')
     expect(b.view.container.querySelector('[data-conversation-scroll]')?.contains(after)).toBe(true)