Merge remote-tracking branch 'origin/master' into worktree/web-multimodal-image-input

packages/client/runtime/src/client/sessions/conversation.ts

@@ -49,6 +49,8 @@ export function toAssistantBlock(block: ContentBlock): AssistantBlock {
 export interface UserMessageNode {
   kind: 'user'
   seq: number
+  /** Unix epoch ms from the source session event. */
+  time: number
   content: readonly ContentBlock[]
   source: unknown
 }
@@ -57,6 +59,8 @@ export interface UserMessageNode {
 export interface AssistantMessageNode {
   kind: 'assistant'
   seq: number
+  /** Unix epoch ms from the source session event (or turn/end when frozen from a partial). */
+  time: number
   turn: number
   step: number
   blocks: readonly AssistantBlock[]
@@ -70,6 +74,8 @@ export interface AssistantMessageNode {
 export interface SteeringMessageNode {
   kind: 'steering'
   seq: number
+  /** Unix epoch ms from the source session event. */
+  time: number
   turn: number
   content: readonly ContentBlock[]
   source: unknown
@@ -79,6 +85,8 @@ export interface SteeringMessageNode {
 export interface ContextMessageNode {
   kind: 'context'
   seq: number
+  /** Unix epoch ms from the source session event. */
+  time: number
   content: readonly ContentBlock[]
   source: unknown
   meta?: unknown
@@ -88,9 +96,13 @@ export interface ContextMessageNode {
 export interface ToolResultNode {
   kind: 'tool-result'
   seq: number
+  /** Unix epoch ms from the tool/result session event. */
+  time: number
   callId: string
   /** Call head backfilled from the in-window tool/call; null when window truncation left the call outside (card head shows callId). */
   call: { name: string; argsRaw: string } | null
+  /** Unix epoch ms of the paired tool/call when the call is still in-window; used for call-row duration. */
+  callTime: number | null
   content: readonly ContentBlock[]
   isError: boolean
   error?: { name: string; code: string }
@@ -105,6 +117,8 @@ export interface ToolResultNode {
 export interface UnknownSurfaceNode {
   kind: 'unknown'
   seq: number
+  /** Unix epoch ms from the source session event when known. */
+  time: number
   type: string
   data: unknown
 }
@@ -125,6 +139,8 @@ export interface RunningToolCall {
   argsRaw: string
   turn: number
   step: number
+  /** Unix epoch ms when the tool/call event was logged. */
+  time: number
   /** Host-computed render intent riding the tool/call frame; null = generic JSON card. */
   callView: ToolCallView | null
 }

packages/client/runtime/src/client/sessions/fold-adapter.ts

@@ -18,6 +18,8 @@ export interface CallIndexEntry {
   argsRaw: string
   turn: number
   step: number
+  /** Unix epoch ms of the tool/call event. */
+  time: number
   /** Wire view riding the tool/call (envelope-level; never inside the event). */
   callView: ToolCallView | null
 }
@@ -38,24 +40,34 @@ function materializeNode(
 ): ConversationNode {
   switch (event.type) {
     case 'user/message':
-      return { kind: 'user', seq: event.seq, content: event.data.content, source: event.data.source }
+      return {
+        kind: 'user', seq: event.seq, time: event.time,
+        content: event.data.content, source: event.data.source,
+      }
     case 'assistant/message':
       return {
-        kind: 'assistant', seq: event.seq, turn: event.data.turn, step: event.data.step,
+        kind: 'assistant', seq: event.seq, time: event.time,
+        turn: event.data.turn, step: event.data.step,
         blocks: toAssistantBlocks(event.data.content), usage: event.data.usage,
       }
     case 'steering/message':
-      return { kind: 'steering', seq: event.seq, turn: event.data.turn, content: event.data.content, source: event.data.source }
+      return {
+        kind: 'steering', seq: event.seq, time: event.time, turn: event.data.turn,
+        content: event.data.content, source: event.data.source,
+      }
     case 'context/message':
       return {
-        kind: 'context', seq: event.seq, content: event.data.content, source: event.data.source,
+        kind: 'context', seq: event.seq, time: event.time,
+        content: event.data.content, source: event.data.source,
         meta: event.data.meta,
       }
     case 'tool/result': {
       const call = callIndex.get(String(event.data.callId))
       return {
-        kind: 'tool-result', seq: event.seq, callId: String(event.data.callId),
+        kind: 'tool-result', seq: event.seq, time: event.time,
+        callId: String(event.data.callId),
         call: call ? { name: call.name, argsRaw: call.argsRaw } : null,
+        callTime: call?.time ?? null,
         content: event.data.content, isError: event.data.isError,
         ...(event.data.error !== undefined ? { error: event.data.error } : {}),
         meta: event.data.meta,
@@ -67,7 +79,10 @@ function materializeNode(
     surface-eligible types, and each has a case above; reachable only if core
     adds an eligible type. */
     default:
-      return { kind: 'unknown', seq: event.seq, type: event.type, data: (event as { data?: unknown }).data }
+      return {
+        kind: 'unknown', seq: event.seq, time: event.time,
+        type: event.type, data: (event as { data?: unknown }).data,
+      }
   }
 }
 
@@ -186,6 +201,7 @@ export class FoldAdapter {
     if (event.type !== 'tool/call') return
     this.callIdx.set(String(event.data.callId), {
       name: event.data.name, argsRaw: event.data.arguments, turn: event.data.turn, step: event.data.step,
+      time: event.time,
       callView: view?.for === 'call' ? view.view : null,
     })
     // No backfill into already-materialized tool-result nodes for this callId

packages/client/runtime/src/client/sessions/service.ts

@@ -95,9 +95,10 @@ export class SessionsService {
   /**
    * Persisted selection cell (the durable half of `list.current`). Private on
    * purpose: reads go through the list snapshot; writes through {@link
-   * SessionsService.open}. Projection validates it against the live list
-   * instead of destructively pruning, so a selection survives transient list
-   * states (reconnect re-pull) and resurfaces when its session returns.
+   * SessionsService.open} / {@link SessionsService.clear}. Projection
+   * validates it against the live list instead of destructively pruning, so a
+   * selection survives transient list states (reconnect re-pull) and
+   * resurfaces when its session returns.
    */
   private readonly selection: SnapshotStore<{ sessionId?: SessionId }>
 
@@ -117,7 +118,7 @@ export class SessionsService {
    * @param ctx - client root context (scope fibers mount under it).
    * @param api - wire client shared with every Session.
    */
-  constructor(private readonly rootCtx: Context, api: IApiClient) {
+  constructor(private readonly rootCtx: Context, private readonly api: IApiClient) {
     this.manager = new SessionManager(api)
     this.selection = createSnapshotStore<{ sessionId?: SessionId }>(
       {},
@@ -154,7 +155,7 @@ export class SessionsService {
 
   /**
    * Select a session as current. Unknown ids fail loud instead of navigating
-   * nowhere (the sole selection write path).
+   * nowhere.
    * @param id - session id (must exist in the list store).
    */
   open(id: SessionId): void {
@@ -165,6 +166,17 @@ export class SessionsService {
     this.list.update((draft) => { draft.current = id })
   }
 
+  /**
+   * Clear the current selection so the layout shows the no-session empty
+   * state. Wipes the persisted selection too — a reload stays on empty until
+   * the user opens or starts a session. Staging holds the previous occupant
+   * across the blank (same masked-gap rule as a transient list miss).
+   */
+  clear(): void {
+    this.selection.set({})
+    this.list.update((draft) => { draft.current = undefined })
+  }
+
   /**
    * Create a session on the host.
    * @param opts - creation options (project directory).
@@ -176,6 +188,27 @@ export class SessionsService {
     return result.value.sessionId
   }
 
+  /**
+   * Create a workspace folder under the host process cwd and a session in it.
+   * Name is a single path segment (no separators); the host mkdir runs inside
+   * session.create. Caller opens the returned id when it wants the session staged.
+   * @param name - workspace folder basename.
+   * @returns the new session id.
+   */
+  async createWorkspace(name: string): Promise<SessionId> {
+    const trimmed = name.trim()
+    if (trimmed === '') throw new Error('sessions.createWorkspace: name is required')
+    if (/[/\\]/.test(trimmed)) {
+      throw new Error('sessions.createWorkspace: name must not contain path separators')
+    }
+    const { result } = await this.api.host.describe({})
+    if (!result.ok) {
+      throw new Error(`host.describe failed: ${result.error.code}: ${result.error.message}`)
+    }
+    const hostCwd = result.value.cwd.replace(/[/\\]+$/, '')
+    return this.create({ cwd: `${hostCwd}/${trimmed}` })
+  }
+
   /**
    * Resolve a session-scoped context view (use-and-discard).
    * @param id - session id.

packages/client/runtime/src/client/sessions/session.ts

@@ -456,7 +456,7 @@ export class Session implements ObservableSnapshot<ConversationSnapshot> {
       case 'tool/call': {
         this.openCalls.set(String(event.data.callId), {
           callId: String(event.data.callId), name: event.data.name, argsRaw: event.data.arguments,
-          turn: event.data.turn, step: event.data.step,
+          turn: event.data.turn, step: event.data.step, time: event.time,
           callView: view?.for === 'call' ? view.view : null,
         })
         this.callsRev++
@@ -477,7 +477,8 @@ export class Session implements ObservableSnapshot<ConversationSnapshot> {
           if (visible) {
             // Fractional seq: strictly after every event of this turn (all < turn/end seq), before the next turn.
             this.frozenNodes.push({
-              kind: 'assistant', seq: event.seq - 0.9, turn: this.partial.turn, step: this.partial.step,
+              kind: 'assistant', seq: event.seq - 0.9, time: event.time,
+              turn: this.partial.turn, step: this.partial.step,
               blocks, interrupted: true,
             })
             this.frozenRev++
@@ -491,8 +492,10 @@ export class Session implements ObservableSnapshot<ConversationSnapshot> {
           this.callsRev++
           // The spinner card becomes an interrupted terminal card (never vanishes mid-flow).
           this.frozenNodes.push({
-            kind: 'tool-result', seq: event.seq - 0.8 + callOffset++ * 0.01, callId,
+            kind: 'tool-result', seq: event.seq - 0.8 + callOffset++ * 0.01, time: event.time,
+            callId,
             call: { name: call.name, argsRaw: call.argsRaw },
+            callTime: call.time,
             content: [], isError: true, error: { name: 'Interrupted', code: 'interrupted' },
             callView: call.callView, resultView: null,
           })

packages/client/runtime/tests/sessions-service.spec.ts

@@ -133,6 +133,26 @@ describe('current selection (migrated from ui-layout, arbitrated into the list s
     expect(b.svc.list.getSnapshot().current).toBe('s1') // failed open leaves the selection alone
   })
 
+  it('clear() blanks list.current and the persisted selection', async () => {
+    const storage = new Map<string, string>()
+    vi.stubGlobal('localStorage', {
+      getItem: (k: string) => storage.get(k) ?? null,
+      setItem: (k: string, v: string) => { storage.set(k, v) },
+      removeItem: (k: string) => { storage.delete(k) },
+      clear: () => { storage.clear() },
+    })
+    const b = bench()
+    await feedList(b, [{ id: 's1' }])
+    b.svc.open(sid('s1'))
+    expect(storage.get('dsh.sessions.current')).toContain('s1')
+    b.svc.clear()
+    expect(b.svc.list.getSnapshot().current).toBeUndefined()
+    // Persisted wipe: a fresh service with the same storage stays on empty.
+    const again = bench()
+    await feedList(again, [{ id: 's1' }])
+    expect(again.svc.list.getSnapshot().current).toBeUndefined()
+  })
+
   it('masks (not destroys) the selection while its session is off the list', async () => {
     const b = bench()
     await feedList(b, [{ id: 's1' }, { id: 's2' }])
@@ -277,6 +297,27 @@ describe('create', () => {
   })
 })
 
+describe('createWorkspace', () => {
+  it('joins host.describe cwd with the name and creates there', async () => {
+    const b = bench()
+    b.api.onDescribe = () => Promise.resolve(ok({ version: '0', cwd: '/host/root', attachedSessions: 0 }))
+    b.api.onCreate = () => Promise.resolve(ok({ sessionId: sid('ws') }))
+    await expect(b.svc.createWorkspace('My Proj')).resolves.toBe('ws')
+    expect(b.api.callsOf('session.create')).toEqual([{ cwd: '/host/root/My Proj' }])
+  })
+
+  it('rejects empty names and path separators; surfaces describe failures', async () => {
+    const b = bench()
+    await expect(b.svc.createWorkspace('  ')).rejects.toThrow(/name is required/)
+    await expect(b.svc.createWorkspace('a/b')).rejects.toThrow(/path separators/)
+    b.api.onDescribe = () => Promise.resolve({
+      rpcId: 'e' as never,
+      result: { ok: false as const, error: { code: 'internal' as const, message: 'down', details: {} } },
+    } as never)
+    await expect(b.svc.createWorkspace('ok')).rejects.toThrow(/host.describe failed/)
+  })
+})
+
 describe('coverage tails (branch duals)', () => {
   it('displayTitleOf falls back to the id for empty and separator-only cwd', async () => {
     const b = bench()

packages/client/ui-conversation/src/client/apply.ts

@@ -189,6 +189,10 @@ export function apply(ctx: Context): void {
         releaseDraftImage: (id) => { conversation().releaseDraftImage(id) },
         releaseDraftImages: (attachments) => { conversation().releaseDraftImages(attachments) },
         startSession: opts => conversation().startSession(opts),
+        createWorkspaceSession: async (name) => {
+          const id = await sessions.createWorkspace(name)
+          sessions.open(id)
+        },
       }
     },
   }, EmptyState)

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

@@ -194,6 +194,11 @@ export interface EmptyStateInjected {
     images?: readonly File[]
     mode: 'queue' | 'steer'
   }): Promise<void>
+  /**
+   * Create a workspace folder under the host cwd, mint a session there, and
+   * open it (Create-new modal success path).
+   */
+  createWorkspaceSession(name: string): Promise<void>
 }
 
 /** Full empty-state component props (root slot: no store; cwd options derive from useSessions in-component). */

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

@@ -1,6 +1,6 @@
-/* NEW SESSION hero: headline over the shared InputBar card, centered in the
-   conversation column. The card is the same component as the composer —
-   only positioning lives here. */
+/* NEW SESSION hero (figma Input_Bottom 75:8208): fish + title, workspace chip
+   above the shared InputBar card. The input itself is InputBar — only stack
+   geometry and the chip live here. */
 
 .root {
   display: flex;
@@ -11,58 +11,154 @@
   padding: 24px;
 }
 
-/* figma hero group 34:10409: headline block sits 36px above the input card. */
-.card {
+/* Cap matches InputBar card width (800). Glow may paint past the sides. */
+.stack {
   display: flex;
   flex-direction: column;
-  gap: 36px;
+  align-items: stretch;
+  /* figma 75:8208: 12 between title block / workspace / card. */
+  gap: 12px;
   width: 100%;
-  max-width: 776px;
+  max-width: 800px;
+  overflow: visible;
 }
 
-/* figma 34:10411: fish + title row, gap 10, centered; title 26/32 wt600 (34:10414). */
+/* figma 34:10411: fish + title, gap 10, centered; 26/32 wt600; title block
+   keeps 36px below the headline before the flex gap. */
 .headline {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
+  padding-bottom: 36px;
   font-size: 26px;
   line-height: 32px;
   font-weight: 600;
   color: var(--dsw-alias-label-primary);
 }
 
-/* figma 34:10412/10413: brand-blue vector. */
+/* figma fish fill rides business blue. */
 .fish {
   flex: none;
   color: var(--dsw-alias-state-business-primary);
 }
 
-.picker {
+/* Workspace row sits 12px above the input card (figma y80 → y112). Glow is
+   centered on this block so it stays under the picker + InputBar together. */
+.body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  overflow: visible;
+}
+
+/* Design input 776 → glow SVG 1051×468 (ellipse 851×268 + blur pad). */
+.glow {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: 0;
+  width: calc(100% * 1051 / 776);
+  aspect-ratio: 1051 / 468;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.body > :not(.glow) {
+  position: relative;
+  z-index: 1;
+}
+
+/* Must beat `.body > :not(.glow)` specificity so the open Menu (and its
+   right-hand submenu) paints above the InputBar card. */
+.body > .workspaceRow {
+  z-index: 10;
   display: flex;
   align-items: center;
   min-width: 0;
+  /* figma 75:8208 workspace row: px 8 above the card. */
+  padding-left: 8px;
 }
 
-.select,
-.customInput {
-  max-width: 320px;
-  padding: 4px 10px;
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+/* Folder + label + chevron — transparent at rest; fill only on hover / open. */
+.workspace {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  min-height: 28px;
+  padding: 0 8px;
+  border: none;
   border-radius: 12px;
-  background: var(--dsw-alias-bg-base);
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
   font-size: 13px;
   line-height: 20px;
-  color: var(--dsw-alias-label-secondary);
+  font-weight: 500;
+  cursor: pointer;
 }
 
-.customInput {
-  width: 320px;
-  outline: none;
+.workspace:hover,
+.workspace[aria-expanded='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
 }
 
-.customInput:focus {
-  /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
-  border-color: var(--dsw-alias-state-business-primary);
+.folder {
+  flex: none;
   color: var(--dsw-alias-label-primary);
 }
+
+.workspaceLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
+}
+
+/* Workspace menu width tracks the longest basename in the Figma frame. */
+.workspaceMenu :global([role='menu']) {
+  min-width: 240px;
+}
+
+/* Dialog field (figma 451:18655 Input): h44, r22, px 14, caption placeholder. */
+.modalInput {
+  width: 100%;
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 22px;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  line-height: 24px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.modalInput::placeholder {
+  color: var(--dsw-alias-label-caption);
+}
+
+.modalInput:focus {
+  border-color: var(--dsw-alias-state-business-primary);
+}
+
+.modalInput:disabled {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.modalAction {
+  min-width: 72px;
+}
+
+.modalError {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--dsw-alias-state-error-primary);
+}

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

@@ -1,21 +1,37 @@
-// EmptyState (figma NEW SESSION screen): centered hero card built around the
-// SAME InputBar component the resident composer uses (the empty→content
-// transition is one component changing position, never a swap). Project
-// picker: cwd set derived in-component from the standard useSessions hook
-// (subscription is the framework's, derivation is a pure function — design
-// §6) plus a free-form new-directory input; submit runs the startSession
-// chain (create → open → send) in one service call.
+// EmptyState (figma NEW SESSION screen): centered hero — fish + title,
+// workspace picker row (MenuDropdown 122:9481 + New Workspace submenu
+// 419:16920 + Dialog 451:18655), then the SAME InputBar the resident
+// composer uses (empty→content is a position move, never a swap). Project
+// options derive in-component from useSessions; Create new runs
+// createWorkspaceSession (host mkdir + session.create + open).
 
-import { useEffect, useMemo, useRef, useState } from 'react'
-import { FishLogo } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import {
+  Button,
+  FishLogo,
+  IconChevronDownOutline14,
+  IconFolderClose16,
+  IconFolderOpen16,
+  IconPlusOutline16,
+  Menu,
+  Modal,
+  type MenuEntry,
+} from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SessionListState } from '@deepseek-ai/dsh-client-runtime/client'
 import type { ComposerAttachment, EmptyStateSlotProps } from '../contract/slots.ts'
 import { InputBar } from './InputBar.tsx'
 import type { InputBarError } from './InputBar.tsx'
 import css from './EmptyState.module.css'
 
-/** Select sentinel for the free-form directory entry (impossible as a real path: not absolute). */
-const NEW_DIR = '::new-directory'
+/** Menu id for "New Workspace" (opens submenu; not a cwd). */
+const NEW_WORKSPACE = '::new-workspace'
+/** Submenu: path modal (figma 451:18655 copy). */
+const USE_EXISTING = '::use-existing'
+/** Submenu: create-workspace modal → mkdir + default session. */
+const CREATE_NEW = '::create-new'
+
+/** Which full-page dialog is open (null = none). */
+type ModalKind = 'path' | 'create' | null
 
 /** Full props composed by reference from the contract (runtime share & injected share; no store). */
 export type EmptyStateProps = EmptyStateSlotProps
@@ -30,12 +46,20 @@ function deriveCwds(state: SessionListState): readonly string[] {
   return [...seen]
 }
 
+/** Basename for the workspace chip / menu row; empty → the design's "New Workspace" label. */
+function workspaceLabel(cwd: string): string {
+  if (cwd === '') return 'New Workspace'
+  const base = cwd.replace(/[/\\]+$/, '').split(/[/\\]/).pop()
+  return base !== undefined && base !== '' ? base : cwd
+}
+
 export function EmptyState({
   useSessions,
   createDraftImages,
   releaseDraftImage,
   releaseDraftImages,
   startSession,
+  createWorkspaceSession,
 }: EmptyStateProps) {
   const list = useSessions(s => s)
   const cwds = useMemo(() => deriveCwds(list), [list])
@@ -45,10 +69,17 @@ export function EmptyState({
   const [attachments, setAttachments] = useState<readonly ComposerAttachment[]>([])
   const attachmentsRef = useRef(attachments)
   attachmentsRef.current = attachments
-  const [cwd, setCwd] = useState<string>('')
-  const [custom, setCustom] = useState(false)
+  const [cwd, setCwd] = useState('')
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [modalKind, setModalKind] = useState<ModalKind>(null)
+  const [pathDraft, setPathDraft] = useState('')
+  const [workspaceName, setWorkspaceName] = useState('New WorkSpace')
+  const [creating, setCreating] = useState(false)
+  const [modalError, setModalError] = useState<string | null>(null)
   const [sending, setSending] = useState(false)
   const [error, setError] = useState<InputBarError | null>(null)
+  // Stable filter id so multiple EmptyState mounts do not collide in the DOM.
+  const glowFilterId = `empty-glow-${useId().replace(/:/g, '')}`
 
   const submit = (mode: 'queue' | 'steer'): void => {
     const text = draft.trim()
@@ -91,65 +122,221 @@ export function EmptyState({
     setAttachments(current => current.filter(item => item.id !== id))
   }
 
-  const picker = (
-    <div className={css.picker}>
-      {custom
-        ? (
-            <input
-              className={css.customInput}
-              value={cwd}
-              autoFocus
-              placeholder="目录路径，如 /home/me/proj"
-              onChange={(e) => { setCwd(e.target.value) }}
-            />
-          )
-        : (
-            <select
-              className={css.select}
-              value={cwd}
-              aria-label="项目目录"
-              onChange={(e) => {
-                if (e.target.value === NEW_DIR) {
-                  setCustom(true)
-                  setCwd('')
-                } else {
-                  setCwd(e.target.value)
-                }
-              }}
-            >
-              <option value="">默认目录</option>
-              {cwds.map(c => <option key={c} value={c}>{c}</option>)}
-              <option value={NEW_DIR}>新目录…</option>
-            </select>
-          )}
-    </div>
-  )
+  const items: MenuEntry[] = [
+    ...cwds.map(c => ({
+      id: c,
+      label: workspaceLabel(c),
+      icon: <IconFolderClose16 size={16} />,
+    })),
+    ...(cwds.length > 0 ? [{ type: 'separator' as const, id: 'sep-new' }] : []),
+    {
+      id: NEW_WORKSPACE,
+      label: 'New Workspace',
+      icon: <IconPlusOutline16 size={16} />,
+      submenu: [
+        { id: USE_EXISTING, label: 'Use a existing folder' },
+        { id: CREATE_NEW, label: 'Create new' },
+      ],
+    },
+  ]
+
+  const closeModal = (): void => {
+    if (creating) return
+    setModalKind(null)
+    setModalError(null)
+  }
+
+  const openPathModal = (): void => {
+    setPathDraft(cwd)
+    setModalError(null)
+    setModalKind('path')
+  }
+
+  const openCreateModal = (): void => {
+    setWorkspaceName('New WorkSpace')
+    setModalError(null)
+    setModalKind('create')
+  }
+
+  const confirmPath = (): void => {
+    const next = pathDraft.trim()
+    if (next === '') return
+    setCwd(next)
+    setModalKind(null)
+  }
+
+  const confirmCreate = (): void => {
+    if (creating) return
+    setCreating(true)
+    setModalError(null)
+    createWorkspaceSession(workspaceName)
+      .catch((reason: unknown) => {
+        setModalError(reason instanceof Error ? reason.message : String(reason))
+        setCreating(false)
+      })
+    // Success swaps this slot out for the new session body — no local cleanup.
+  }
+
+  const modalBusy = creating
+  const isPath = modalKind === 'path'
+  const isCreate = modalKind === 'create'
 
   return (
     <div className={css.root}>
-      <div className={css.card}>
+      <div className={css.stack}>
         <div className={css.headline}>
-          {/* figma 34:10412: fish 34x25 leading the headline, gap 10. */}
+          {/* figma 34:10412: fish 34×25 leading the headline, gap 10. */}
           <FishLogo size={34} className={css.fish} />
           Let&apos;s start building
         </div>
-        <InputBar
-          draft={draft}
-          attachments={attachments}
-          running={false}
-          disabled={sending}
-          error={error}
-          variant="hero"
-          placeholder="Message to run task, plan and build"
-          accessory={picker}
-          onDraftChange={setDraft}
-          onAddImages={addImages}
-          onRemoveAttachment={removeImage}
-          onSend={submit}
-          /* v8 ignore next -- structural noop: hero never passes running=true, so stop is unreachable. */
-          onStop={() => {}}
-        />
+        <div className={css.body}>
+          {/* figma 313:14109: soft ellipse behind workspace + InputBar; width
+              tracks the card (glow asset 1051 vs design card 776) so blur
+              scales in userSpace with it. */}
+          <svg className={css.glow} viewBox="0 0 1051 468" fill="none" aria-hidden="true">
+            <defs>
+              <filter
+                id={glowFilterId}
+                x="0"
+                y="0"
+                width="1051"
+                height="468"
+                filterUnits="userSpaceOnUse"
+                colorInterpolationFilters="sRGB"
+              >
+                <feFlood floodOpacity="0" result="BackgroundImageFix" />
+                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+                <feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur" />
+              </filter>
+            </defs>
+            <g filter={`url(#${glowFilterId})`}>
+              <ellipse cx="525.5" cy="234" rx="425.5" ry="134" fill="#6187D8" fillOpacity="0.1" />
+            </g>
+          </svg>
+          <div className={css.workspaceRow}>
+            <Menu
+              open={menuOpen}
+              onClose={() => { setMenuOpen(false) }}
+              {...(cwd !== '' ? { selectedId: cwd } : {})}
+              items={items}
+              side="top"
+              className={css.workspaceMenu!}
+              onSelect={(id) => {
+                if (id === USE_EXISTING) {
+                  setMenuOpen(false)
+                  openPathModal()
+                  return
+                }
+                if (id === CREATE_NEW) {
+                  setMenuOpen(false)
+                  openCreateModal()
+                  return
+                }
+                setCwd(id)
+                setMenuOpen(false)
+              }}
+              anchor={(
+                <button
+                  type="button"
+                  className={css.workspace}
+                  aria-label="项目目录"
+                  aria-haspopup="menu"
+                  aria-expanded={menuOpen}
+                  onClick={() => { setMenuOpen(!menuOpen) }}
+                >
+                  <IconFolderOpen16 className={css.folder} size={16} />
+                  <span className={css.workspaceLabel}>{workspaceLabel(cwd)}</span>
+                  <IconChevronDownOutline14 className={css.chevron} size={12} />
+                </button>
+              )}
+            />
+          </div>
+          <InputBar
+            draft={draft}
+            attachments={attachments}
+            running={false}
+            disabled={sending}
+            error={error}
+            variant="hero"
+            placeholder="Message to run task, plan and build, enter for / commands"
+            onDraftChange={setDraft}
+            onAddImages={addImages}
+            onRemoveAttachment={removeImage}
+            onSend={submit}
+            /* v8 ignore next -- structural noop: hero never passes running=true, so stop is unreachable. */
+            onStop={() => {}}
+          />
+        </div>
       </div>
+      <Modal
+        open={isPath}
+        onClose={closeModal}
+        title="Enter an existing folder path"
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} onClick={closeModal}>Cancel</Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={pathDraft.trim() === ''}
+              onClick={confirmPath}
+            >
+              Open Folder
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={pathDraft}
+          aria-label="Folder path"
+          autoFocus
+          placeholder="ex. User/Documents/Harness/Space"
+          onChange={(e) => { setPathDraft(e.target.value) }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              confirmPath()
+            }
+          }}
+        />
+      </Modal>
+      <Modal
+        open={isCreate}
+        onClose={closeModal}
+        title="Create new workspace"
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} disabled={modalBusy} onClick={closeModal}>
+              Cancel
+            </Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={modalBusy || workspaceName.trim() === ''}
+              onClick={confirmCreate}
+            >
+              Create
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={workspaceName}
+          aria-label="Workspace name"
+          autoFocus
+          disabled={modalBusy}
+          onChange={(e) => { setWorkspaceName(e.target.value) }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault()
+              confirmCreate()
+            }
+          }}
+        />
+        {modalError !== null && <div className={css.modalError} role="alert">{modalError}</div>}
+      </Modal>
     </div>
   )
 }

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

@@ -1,7 +1,7 @@
-/* Floating capsule input (figma Input_Bottom 34:11445): card floats above the
+/* Floating capsule input (figma Input_Bottom 75:8208): card floats above the
    viewport bottom inside the centered message column; textarea on top, action
    row below, one primary circle button bottom-right. Input width rides the
-   column (776 is a cap, not a fixed size — layout rule: the box shrinks with
+   column (800 is a cap, not a fixed size — layout rule: the box shrinks with
    the center column keeping its padding). Hero variant = the same card
    centered in the empty state; the transition between the two is a position
    move of one component. */
@@ -10,8 +10,8 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  /* figma Input_Bottom 34:11445: pad L32/R32/B12; the bottom gradient mask is
-     owned by the chat scroller. Top 8 hosts the error strip's breathing room. */
+  /* figma Input_Bottom: pad L32/R32/B12; the bottom gradient mask is owned by
+     the chat scroller. Top 8 hosts the error strip's breathing room. */
   padding: 8px 32px 12px;
 }
 
@@ -21,7 +21,7 @@
 
 .error {
   width: 100%;
-  max-width: 776px;
+  max-width: 800px;
   margin-bottom: 6px;
   padding: 4px 8px;
   border-radius: 8px;
@@ -35,10 +35,12 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  /* figma Input 34:11458: 12px between the text area and the button row. */
+  /* figma Input 75:8208: 12px between the text area and the button row; 10px
+     top pad on the card before .InputText. */
   gap: 12px;
   width: 100%;
-  max-width: 776px;
+  max-width: 800px;
+  padding-top: 10px;
   /* Input stroke: black/0.10 light, white/0.06 dark (figma darkmode note says
      the input border is one notch weaker than buttons) — exactly the
      l2-darkmode-thin pair. Fill: the input surface token (elevated in dark). */
@@ -69,11 +71,6 @@
   pointer-events: none;
 }
 
-/* New-session state rounds up (figma: r24 and a taller box). */
-.hero .card {
-  border-radius: 24px;
-}
-
 .accessory {
   display: flex;
   align-items: center;
@@ -156,7 +153,8 @@
 
 .input,
 .mirror {
-  padding: 12px 16px 0;
+  /* figma .InputText 34:10434: pl 16 / pr 12 / pt 4. */
+  padding: 4px 12px 0 16px;
   font-size: inherit;
   line-height: inherit;
   white-space: pre-wrap;
@@ -179,23 +177,98 @@
 .mirror {
   visibility: hidden;
   pointer-events: none;
-  /* 2-line floor: 2 × 24px line + 12px top padding; 14-line cap (336px). */
-  min-height: 60px;
+  /* figma min-h 52 (= ~2 × 24 line + 4pt); 14-line cap (336px). */
+  min-height: 52px;
   max-height: 336px;
   overflow: hidden;
 }
 
-.hero .mirror {
-  /* New-session box is taller at rest (figma 118px input area). */
-  min-height: 84px;
-}
-
-/* figma Frame 1123 (34:11463): pad 12/0/10/10, buttons vertically centered. */
+/* Toolbar: attach + Plan + Read-only on the left; model + send on the right
+   (figma Input_Bottom chrome). */
 .row {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  padding: 0 10px 10px 12px;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 0 10px 10px 10px;
+  min-width: 0;
+}
+
+.tools,
+.modes,
+.trailing {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* figma 75:8208: 16 between + and the mode chips; 4 between Plan / Read-only. */
+.tools {
+  gap: 16px;
+}
+
+.modes {
+  gap: 4px;
+}
+
+.trailing {
+  flex: none;
+  gap: 12px;
+}
+
+/* Attach circle (figma + control): 28px, selector fill, primary glyph. */
+.add {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 999px;
+  background: var(--dsw-specific-selector);
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+}
+
+.add:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover-solid);
+}
+
+.add:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* Plan / Read-only / model — native <select>, chip-like closed chrome
+   (figma ToggleButton: 13/20 medium secondary, 12px chevron). */
+.select {
+  max-width: 220px;
+  height: 28px;
+  padding: 0 20px 0 8px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  background-color: transparent;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%2381858C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 4px center;
+  background-size: 12px 12px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 13px;
+  line-height: 20px;
+  font-weight: 500;
+  white-space: nowrap;
+  cursor: pointer;
+  appearance: none;
+}
+
+.select:hover:not(:disabled) {
+  background-color: var(--dsw-alias-interactive-bg-hover);
+}
+
+.select:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
 /* Primary send (figma IconButton 34:10465): 34px circle, #3964FE light /
@@ -204,6 +277,7 @@
 .primary {
   display: grid;
   place-items: center;
+  flex: none;
   width: 34px;
   height: 34px;
   border: none;

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

@@ -4,10 +4,14 @@
 // position move of this component, never a swap (layout ruling). Running
 // LOCKS the input: textarea disabled with the draft visible, stop is the only
 // action; the turn ending re-enables and refocuses.
+//
+// Bottom chrome (attach / Plan / Read-only / model) is visual-only for now —
+// local native <select> state, no host wiring.
 
 import { useCallback, useEffect, useRef, useState } from 'react'
-import type { ClipboardEvent, DragEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
+import type { ChangeEvent, ClipboardEvent, DragEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
+import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { ComposerAttachment } from '../contract/slots.ts'
 import { ImageLightbox } from './ImageLightbox.tsx'
 import css from './InputBar.module.css'
@@ -27,7 +31,7 @@ export interface InputBarProps {
   /** Hero = empty-state centered card; composer = resident bottom bar. */
   variant: 'hero' | 'composer'
   placeholder?: string
-  /** Optional leading accessory row content (the empty state mounts its cwd picker here). */
+  /** Optional leading accessory row above the textarea (kept for callers; empty state no longer uses it). */
   accessory?: ReactNode
   onDraftChange: (text: string) => void
   onAddImages?: (files: readonly File[]) => string | null
@@ -36,6 +40,26 @@ export interface InputBarProps {
   onStop: () => void
 }
 
+interface SelectOption {
+  id: string
+  label: string
+}
+
+const PLAN_OPTIONS: readonly SelectOption[] = [
+  { id: 'plan', label: 'Plan' },
+  { id: 'agent', label: 'Agent' },
+]
+
+const READONLY_OPTIONS: readonly SelectOption[] = [
+  { id: 'readonly', label: 'Read-only' },
+  { id: 'readwrite', label: 'Read-write' },
+]
+
+const MODEL_OPTIONS: readonly SelectOption[] = [
+  { id: 'v4-pro-high', label: 'DeepSeek-V4-Pro High' },
+  { id: 'v4-pro', label: 'DeepSeek-V4-Pro' },
+]
+
 export function InputBar({
   draft, attachments = [], running, disabled, error, variant, placeholder, accessory,
   onDraftChange, onAddImages = () => null, onRemoveAttachment = () => {}, onSend, onStop,
@@ -58,6 +82,11 @@ export function InputBar({
     }, 10)
   }
 
+  // Placeholder chrome: selection is local until plan/mode/model seams land.
+  const [planId, setPlanId] = useState('plan')
+  const [readonlyId, setReadonlyId] = useState('readonly')
+  const [modelId, setModelId] = useState('v4-pro-high')
+
   // Locked while running: the browser drops keystrokes AND focus on a disabled
   // textarea — no sending mid-turn, stop or wait.
   const locked = disabled || running
@@ -142,6 +171,25 @@ export function InputBar({
     if (!empty && !disabled) onSend('queue')
   }
 
+  const renderSelect = (
+    aria: string,
+    value: string,
+    options: readonly SelectOption[],
+    onPick: (id: string) => void,
+  ): ReactNode => (
+    <select
+      className={css.select}
+      aria-label={aria}
+      value={value}
+      disabled={locked}
+      onChange={(e: ChangeEvent<HTMLSelectElement>) => { onPick(e.target.value) }}
+    >
+      {options.map(opt => (
+        <option key={opt.id} value={opt.id}>{opt.label}</option>
+      ))}
+    </select>
+  )
+
   return (
     <div className={clsx(css.root, variant === 'hero' && css.hero)}>
       {error !== null && (
@@ -207,25 +255,44 @@ export function InputBar({
           <div aria-hidden className={css.mirror}>{`${draft}\n`}</div>
         </div>
         <div className={css.row}>
-          <button
-            type="button"
-            className={clsx(css.primary, running && css.stopping)}
-            aria-label={primaryLabel}
-            title={running ? '停止本轮' : '发送（Enter）'}
-            disabled={!running && (empty || disabled)}
-            onMouseDown={keepFocus}
-            onClick={onPrimary}
-          >
-            {running ? (
-              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
-                <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
-              </svg>
-            ) : (
-              <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden>
-                <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
-              </svg>
-            )}
-          </button>
+          <div className={css.tools}>
+            <button
+              type="button"
+              className={css.add}
+              aria-label="添加"
+              title="添加"
+              disabled={locked}
+              onMouseDown={keepFocus}
+            >
+              <IconPlusOutline16 size={14} />
+            </button>
+            <div className={css.modes}>
+              {renderSelect('Plan mode', planId, PLAN_OPTIONS, setPlanId)}
+              {renderSelect('Access mode', readonlyId, READONLY_OPTIONS, setReadonlyId)}
+            </div>
+          </div>
+          <div className={css.trailing}>
+            {renderSelect('Model', modelId, MODEL_OPTIONS, setModelId)}
+            <button
+              type="button"
+              className={clsx(css.primary, running && css.stopping)}
+              aria-label={primaryLabel}
+              title={running ? '停止本轮' : '发送（Enter）'}
+              disabled={!running && (empty || disabled)}
+              onMouseDown={keepFocus}
+              onClick={onPrimary}
+            >
+              {running ? (
+                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                  <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" />
+                </svg>
+              ) : (
+                <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden>
+                  <path d="M8 13V3.8M8 3.8L3.8 8M8 3.8L12.2 8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+                </svg>
+              )}
+            </button>
+          </div>
         </div>
       </div>
       {preview !== null && <ImageLightbox src={preview.previewUrl} alt={preview.file.name || '原图'} onClose={closePreview} />}

packages/client/ui-conversation/tests/apply-inject.spec.tsx

@@ -80,6 +80,7 @@ async function bench() {
     scopeOf,
     hostDescription: () => undefined,
     create: vi.fn(() => Promise.resolve(ROOT)),
+    createWorkspace: vi.fn(() => Promise.resolve(ROOT)),
     open: vi.fn(),
   }
   ctx.provide('sessions', sessionsFake)
@@ -241,13 +242,14 @@ describe('details and empty inject surfaces', () => {
     expect(details).toBe(conv)
   })
 
-  it('empty injects draft-image lifecycle and the startSession chain without a store', async () => {
+  it('empty injects draft-image lifecycle, startSession, and createWorkspaceSession without a store', async () => {
     const b = await bench()
     const entry = b.entryOf('conversation.empty')
     expect(entry.store).toBeUndefined()
     const injected = (entry.inject as unknown as () => EmptyStateInjected)()
-    expect(Object.keys(injected)).toEqual([
+    expect(Object.keys(injected).sort()).toEqual([
       'createDraftImages',
+      'createWorkspaceSession',
       'releaseDraftImage',
       'releaseDraftImages',
       'startSession',
@@ -256,6 +258,10 @@ describe('details and empty inject surfaces', () => {
     expect(b.sessionsFake.create).toHaveBeenCalled()
     expect(b.sessionsFake.open).toHaveBeenCalledWith(ROOT)
     expect(b.sessionFake.prompt).toHaveBeenCalledWith([{ type: 'text', text: 'go' }], 'queue')
+    b.sessionsFake.open.mockClear()
+    await injected.createWorkspaceSession('Fresh')
+    expect(b.sessionsFake.createWorkspace).toHaveBeenCalledWith('Fresh')
+    expect(b.sessionsFake.open).toHaveBeenCalledWith(ROOT)
   })
 
   it('startSession fails loud on a torn boot (conversation service fiber gone)', async () => {

packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx

@@ -20,7 +20,7 @@ afterEach(cleanup)
 const SID = 's1' as SessionId
 
 const assistant = (seq: number, turn: number, usage?: unknown): AssistantMessageNode => ({
-  kind: 'assistant', seq, turn, step: seq, blocks: [{ kind: 'text', text: `t${seq}` }],
+  kind: 'assistant', seq, time: seq * 1_000, turn, step: seq, blocks: [{ kind: 'text', text: `t${seq}` }],
   ...(usage === undefined ? {} : { usage }),
 })
 
@@ -65,7 +65,7 @@ describe('deriveStats', () => {
 
   it('cache hit stays null with no cache accounting; non-assistant nodes ignored', () => {
     const tool: ToolResultNode = {
-      kind: 'tool-result', seq: 5, callId: 'c', call: null, content: [],
+      kind: 'tool-result', seq: 5, time: 5_000, callId: 'c', call: null, callTime: null, content: [],
       isError: false, callView: null, resultView: null,
     }
     const stats = deriveStats([tool, assistant(1, 1)])
@@ -112,8 +112,9 @@ describe('bash sample row', () => {
   const CHILD = 'child-1' as SessionId
 
   const result = (callId: string): ToolResultNode => ({
-    kind: 'tool-result', seq: 3, callId,
+    kind: 'tool-result', seq: 3, time: 3_000, callId,
     call: { name: 'bash', argsRaw: '{"command":"make build","description":"Build"}' },
+    callTime: 2_000,
     content: [], isError: false, callView: null, resultView: null,
   })
 

packages/client/ui-conversation/tests/chat-tool-row.spec.tsx

@@ -12,12 +12,13 @@ import type { ToolRowOwnerProps } from '@deepseek-ai/dsh-client-ui-conversation/
 
 const running = (over?: Partial<RunningToolCall>): RunningToolCall => ({
   callId: 'c1', name: 'bash', argsRaw: '{"command":"ls -la","description":"List files"}',
-  turn: 1, step: 1, callView: null, ...over,
+  turn: 1, step: 1, time: 1_000, callView: null, ...over,
 })
 
 const result = (over?: Partial<ToolResultNode>): ToolResultNode => ({
-  kind: 'tool-result', seq: 10, callId: 'c1',
+  kind: 'tool-result', seq: 10, time: 2_000, callId: 'c1',
   call: { name: 'bash', argsRaw: '{"command":"ls -la","description":"List files"}' },
+  callTime: 1_000,
   content: [], isError: false, callView: null, resultView: null, ...over,
 })
 

packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx

@@ -31,8 +31,9 @@ beforeEach(() => {
 })
 
 const toolResult = (seq: number, callId: string, name: string, args = '{"command":"make build","description":"Build"}'): ToolResultNode => ({
-  kind: 'tool-result', seq, callId,
+  kind: 'tool-result', seq, time: seq * 1_000, callId,
   call: { name, argsRaw: args },
+  callTime: seq * 1_000 - 500,
   content: [], isError: false, callView: null, resultView: null,
 })
 

packages/client/ui-conversation/tests/chat-view.spec.tsx

@@ -54,18 +54,19 @@ function makeSource(init?: Partial<ConversationSnapshot>) {
 }
 
 const user = (seq: number, text: string): UserMessageNode => ({
-  kind: 'user', seq, content: [{ type: 'text', text }] as never, source: null,
+  kind: 'user', seq, time: seq * 1_000, content: [{ type: 'text', text }] as never, source: null,
 })
 const assistant = (seq: number, text: string): AssistantMessageNode => ({
-  kind: 'assistant', seq, turn: 1, step: 1, blocks: [{ kind: 'text', text }],
+  kind: 'assistant', seq, time: seq * 1_000, turn: 1, step: 1, blocks: [{ kind: 'text', text }],
 })
 const toolResult = (seq: number, callId: string, name = 'bash'): ToolResultNode => ({
-  kind: 'tool-result', seq, callId,
+  kind: 'tool-result', seq, time: seq * 1_000, callId,
   call: { name, argsRaw: `{"command":"cmd-${callId}","description":"run ${callId}"}` },
+  callTime: seq * 1_000 - 500,
   content: [], isError: false, callView: null, resultView: null,
 })
 const runningCall = (callId: string, name = 'bash'): RunningToolCall => ({
-  callId, name, argsRaw: `{"command":"cmd-${callId}"}`, turn: 2, step: 1, callView: null,
+  callId, name, argsRaw: `{"command":"cmd-${callId}"}`, turn: 2, step: 1, time: 1_000, callView: null,
 })
 
 /** Empty sessions-list hook stub (the global standard-kit seat; engines carry no hook since the store migration — bind here). */

packages/client/ui-conversation/tests/coverage-tails.spec.tsx

@@ -62,8 +62,9 @@ describe('tails', () => {
 
   it('a settled others-variant row renders the sparkle icon in the leading slot', () => {
     const settled: ToolResultNode = {
-      kind: 'tool-result', seq: 2, callId: 'c5',
+      kind: 'tool-result', seq: 2, time: 2_000, callId: 'c5',
       call: { name: 'todo_write', argsRaw: '{"note":"x"}' },
+      callTime: 1_000,
       content: [], isError: false, callView: null, resultView: null,
     }
     const props: ToolRowOwnerProps = {
@@ -77,8 +78,9 @@ describe('tails', () => {
 
   it('BashRow shows the failed pill on error results (root session arm)', () => {
     const errorResult: ToolResultNode = {
-      kind: 'tool-result', seq: 1, callId: 'c1',
+      kind: 'tool-result', seq: 1, time: 1_000, callId: 'c1',
       call: { name: 'bash', argsRaw: '{"command":"boom"}' },
+      callTime: 500,
       content: [], isError: true, callView: null, resultView: null,
     }
     // Root session (no parentId): the global arm renders, error pill visible.

packages/client/ui-conversation/tests/input-bar.spec.tsx

@@ -19,7 +19,10 @@ function setup(over?: Partial<InputBarProps>) {
   }
   const view = render(<InputBar {...props} />)
   const textarea = view.container.querySelector('textarea')!
-  const button = view.container.querySelector('button')!
+  // aria-label (not role name): title also contains 发送/停止 and would double-match.
+  const button = view.container.querySelector<HTMLButtonElement>(
+    `button[aria-label="${over?.running === true ? '停止' : '发送'}"]`,
+  )!
   return { view, textarea, button, props }
 }
 
@@ -97,7 +100,7 @@ describe('running lock and primary button', () => {
     const textarea = view.container.querySelector('textarea')!
     expect(document.activeElement).toBe(textarea)
     textarea.blur()
-    fireEvent.mouseDown(view.container.querySelector('button')!)
+    fireEvent.mouseDown(view.container.querySelector('button[aria-label="发送"]')!)
     expect(document.activeElement).toBe(textarea)
   })
 
@@ -223,3 +226,38 @@ describe('image draft rail', () => {
     expect(view.queryByRole('dialog', { name: '原图预览' })).toBeNull()
   })
 })
+
+describe('placeholder chrome', () => {
+  it('renders attach / Plan / Read-only / model controls', () => {
+    const { view } = setup()
+    expect(view.getByLabelText('添加')).toBeTruthy()
+    expect((view.getByLabelText('Plan mode') as HTMLSelectElement).value).toBe('plan')
+    expect((view.getByLabelText('Access mode') as HTMLSelectElement).value).toBe('readonly')
+    expect((view.getByLabelText('Model') as HTMLSelectElement).value).toBe('v4-pro-high')
+  })
+
+  it('native select change updates the selected option', () => {
+    const { view } = setup()
+    const plan = view.getByLabelText('Plan mode') as HTMLSelectElement
+    fireEvent.change(plan, { target: { value: 'agent' } })
+    expect(plan.value).toBe('agent')
+    const access = view.getByLabelText('Access mode') as HTMLSelectElement
+    fireEvent.change(access, { target: { value: 'readwrite' } })
+    expect(access.value).toBe('readwrite')
+  })
+
+  it('model select can drop the High option', () => {
+    const { view } = setup()
+    const model = view.getByLabelText('Model') as HTMLSelectElement
+    fireEvent.change(model, { target: { value: 'v4-pro' } })
+    expect(model.value).toBe('v4-pro')
+    expect(model.selectedOptions[0]?.textContent).toBe('DeepSeek-V4-Pro')
+  })
+
+  it('running locks the chrome selects and attach control', () => {
+    const { view } = setup({ running: true })
+    expect((view.getByLabelText('添加') as HTMLButtonElement).disabled).toBe(true)
+    expect((view.getByLabelText('Plan mode') as HTMLSelectElement).disabled).toBe(true)
+    expect((view.getByLabelText('Model') as HTMLSelectElement).disabled).toBe(true)
+  })
+})

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

@@ -3,7 +3,7 @@
 // acceptance flows), four-share props form: breadcrumb ancestry derivation +
 // error strip in ConversationRoot, DetailsPanel non-JSON args / non-text
 // result blocks / error-only results over the shared store, EmptyState
-// failure surface and custom-directory swap with in-component cwd derivation.
+// failure surface and path-modal confirm with in-component cwd derivation.
 
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, waitFor } from '@testing-library/react'
@@ -173,7 +173,7 @@ describe('DetailsPanel branches', () => {
 
   it('shows non-JSON args verbatim (streaming fragment path)', () => {
     const view = panel({ turnSeq: 1, callId: 'c1', toolName: 'bash' }, {
-      runningCalls: [{ callId: 'c1', name: 'bash', argsRaw: '{"cmd": tru', turn: 1, step: 1, callView: null }],
+      runningCalls: [{ callId: 'c1', name: 'bash', argsRaw: '{"cmd": tru', turn: 1, step: 1, time: 1_000, callView: null }],
     })
     expect(view.getByText('{"cmd": tru')).toBeTruthy()
   })
@@ -184,7 +184,7 @@ describe('DetailsPanel branches', () => {
   })
 
   it('snapshot updates re-run the material selector through the shallow equality arm', () => {
-    let snap = { ...snapshotBase(), runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{"a":1}', turn: 1, step: 1, callView: null }] } as ConversationSnapshot
+    let snap = { ...snapshotBase(), runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{"a":1}', turn: 1, step: 1, time: 1_000, callView: null }] } as ConversationSnapshot
     const subs = new Set<() => void>()
     const source = {
       getSnapshot: () => snap,
@@ -246,6 +246,8 @@ describe('DetailsPanel branches', () => {
 })
 
 describe('EmptyState branches', () => {
+  const noopCreate = () => Promise.resolve()
+
   it('keeps the draft and surfaces a local error strip when startSession rejects', async () => {
     const startSession = vi.fn(() => Promise.reject(new Error('create down')))
     const view = render(
@@ -255,6 +257,7 @@ describe('EmptyState branches', () => {
         releaseDraftImage={() => {}}
         releaseDraftImages={() => {}}
         startSession={startSession}
+        createWorkspaceSession={noopCreate}
       />,
     )
     const textarea = view.container.querySelector('textarea')!
@@ -273,6 +276,7 @@ describe('EmptyState branches', () => {
         releaseDraftImage={() => {}}
         releaseDraftImages={() => {}}
         startSession={startSession}
+        createWorkspaceSession={noopCreate}
       />,
     )
     const textarea = view.container.querySelector('textarea')!
@@ -281,7 +285,7 @@ describe('EmptyState branches', () => {
     await waitFor(() => expect(view.getByText(/发送失败：plain-string/)).toBeTruthy())
   })
 
-  it('cwd derivation skips blank cwds; select picks, swaps to free-form, submits the typed path', async () => {
+  it('cwd derivation skips blank cwds; menu picks, path modal confirms, submits the typed path', async () => {
     const startSession = vi.fn(() => Promise.resolve())
     const view = render(
       <EmptyState
@@ -293,19 +297,42 @@ describe('EmptyState branches', () => {
         releaseDraftImage={() => {}}
         releaseDraftImages={() => {}}
         startSession={startSession}
+        createWorkspaceSession={noopCreate}
       />,
     )
-    const select = view.container.querySelector('select')!
-    expect([...(select as HTMLSelectElement).options].map(o => o.value))
-      .toEqual(['', '/proj', '::new-directory'])
-    fireEvent.change(select, { target: { value: '/proj' } })
-    expect((select as HTMLSelectElement).value).toBe('/proj')
-    fireEvent.change(select, { target: { value: '::new-directory' } })
-    const custom = view.container.querySelector('input')!
+    fireEvent.click(view.getByRole('button', { name: '项目目录' }))
+    expect([...view.getByRole('menu').querySelectorAll('[role="menuitem"]')].map(el => el.textContent))
+      .toEqual(['proj', 'New Workspace'])
+    fireEvent.click(view.getByRole('menuitem', { name: 'proj' }))
+    expect(view.getByRole('button', { name: '项目目录' }).textContent).toContain('proj')
+    fireEvent.click(view.getByRole('button', { name: '项目目录' }))
+    fireEvent.mouseEnter(view.getByRole('menuitem', { name: 'New Workspace' }).parentElement as HTMLElement)
+    fireEvent.click(view.getByRole('menuitem', { name: 'Use a existing folder' }))
+    const custom = view.getByLabelText('Folder path')
     fireEvent.change(custom, { target: { value: '/typed/dir' } })
+    fireEvent.click(view.getByRole('button', { name: 'Open Folder' }))
     const textarea = view.container.querySelector('textarea')!
     fireEvent.change(textarea, { target: { value: 'task' } })
     fireEvent.keyDown(textarea, { key: 'Enter' })
     await waitFor(() => expect(startSession).toHaveBeenCalledWith({ text: 'task', mode: 'queue', cwd: '/typed/dir' }))
   })
+
+  it('Create modal surfaces inject failures inline', async () => {
+    const createWorkspaceSession = vi.fn(() => Promise.reject(new Error('mkdir blocked')))
+    const view = render(
+      <EmptyState
+        useSessions={listHook([])}
+        createDraftImages={() => []}
+        releaseDraftImage={() => {}}
+        releaseDraftImages={() => {}}
+        startSession={() => Promise.resolve()}
+        createWorkspaceSession={createWorkspaceSession}
+      />,
+    )
+    fireEvent.click(view.getByRole('button', { name: '项目目录' }))
+    fireEvent.mouseEnter(view.getByRole('menuitem', { name: 'New Workspace' }).parentElement as HTMLElement)
+    fireEvent.click(view.getByRole('menuitem', { name: 'Create new' }))
+    fireEvent.click(view.getByRole('button', { name: 'Create' }))
+    await waitFor(() => expect(view.getByRole('alert').textContent).toContain('mkdir blocked'))
+  })
 })

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

@@ -28,13 +28,33 @@ const sid = (s: string): SessionId => s as SessionId
 
 afterEach(cleanup)
 beforeEach(() => {
-  localStorage.clear()
+  // jsdom normally provides localStorage; some host Node builds surface it as undefined.
+  globalThis.localStorage?.clear()
 })
 
 /** Minimal conversation snapshot slice the skeleton reads. */
 interface FakeSnapshot {
-  nodes: readonly { kind: string; callId?: string; call?: { name: string; argsRaw: string } | null; content?: readonly { type: string; text?: string }[]; isError?: boolean }[]
-  runningCalls: readonly { callId: string; name: string; argsRaw: string }[]
+  nodes: readonly {
+    kind: string
+    seq?: number
+    time?: number
+    callId?: string
+    call?: { name: string; argsRaw: string } | null
+    callTime?: number | null
+    content?: readonly { type: string; text?: string }[]
+    isError?: boolean
+    callView?: null
+    resultView?: null
+  }[]
+  runningCalls: readonly {
+    callId: string
+    name: string
+    argsRaw: string
+    turn?: number
+    step?: number
+    time?: number
+    callView?: null
+  }[]
   running: boolean
   removed: boolean
   promptError: { op: 'send' | 'stop'; error: { message: string; code: string } } | null
@@ -66,6 +86,14 @@ function fakeSessions(rows: { id: string; title: string; cwd?: string; parentId?
 const SessionProviderStub: ConversationRootProps['SessionProvider'] = ({ children }) => <>{children(sid('s1'))}</>
 
 describe('EmptyState', () => {
+  const noopCreate = () => Promise.resolve()
+  /** Required draft-image lifecycle props for tests not exercising images. */
+  const noopImages = {
+    createDraftImages: () => [],
+    releaseDraftImage: () => {},
+    releaseDraftImages: () => {},
+  }
+
   it('derives cwd options from the sessions list, submits startSession, failure surfaces locally', async () => {
     const { useSessions } = fakeSessions([
       { id: 'a', title: 'a', cwd: '/w/app' },
@@ -77,18 +105,19 @@ describe('EmptyState', () => {
     render(
       <EmptyState
         useSessions={useSessions}
-        createDraftImages={() => []}
-        releaseDraftImage={() => {}}
-        releaseDraftImages={() => {}}
+        {...noopImages}
         startSession={startSession}
+        createWorkspaceSession={noopCreate}
       />,
     )
 
-    const select = screen.getByRole('combobox', { name: '项目目录' })
-    expect([...(select as HTMLSelectElement).options].map(o => o.value))
-      .toEqual(['', '/w/app', '/w/lib', '::new-directory'])
-    fireEvent.change(select, { target: { value: '/w/app' } })
-    const box = screen.getByPlaceholderText('Message to run task, plan and build')
+    const trigger = screen.getByRole('button', { name: '项目目录' })
+    fireEvent.click(trigger)
+    const menu = screen.getByRole('menu')
+    expect([...menu.querySelectorAll('[role="menuitem"]')].map(el => el.textContent))
+      .toEqual(['app', 'lib', 'New Workspace'])
+    fireEvent.click(screen.getByRole('menuitem', { name: 'app' }))
+    const box = screen.getByPlaceholderText('Message to run task, plan and build, enter for / commands')
     fireEvent.change(box, { target: { value: '造一个轮子' } })
     fireEvent.keyDown(box, { key: 'Enter' })
     expect(startSession).toHaveBeenCalledWith({ text: '造一个轮子', mode: 'queue', cwd: '/w/app' })
@@ -99,21 +128,67 @@ describe('EmptyState', () => {
     expect((box as HTMLTextAreaElement).value).toBe('造一个轮子')
   })
 
-  it('new-directory option swaps the select for a free-form input', () => {
+  it('Use a existing folder opens the path modal and Open Folder sets the chip', () => {
     const { useSessions } = fakeSessions([])
     render(
       <EmptyState
         useSessions={useSessions}
-        createDraftImages={() => []}
-        releaseDraftImage={() => {}}
-        releaseDraftImages={() => {}}
+        {...noopImages}
         startSession={() => Promise.resolve()}
+        createWorkspaceSession={noopCreate}
       />,
     )
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: '::new-directory' } })
-    const custom = screen.getByPlaceholderText(/目录路径/)
-    fireEvent.change(custom, { target: { value: '/tmp/fresh' } })
-    expect((custom as HTMLInputElement).value).toBe('/tmp/fresh')
+    fireEvent.click(screen.getByRole('button', { name: '项目目录' }))
+    const newWs = screen.getByRole('menuitem', { name: 'New Workspace' })
+    fireEvent.mouseEnter(newWs.parentElement as HTMLElement)
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Use a existing folder' }))
+    expect(screen.getByRole('dialog', { name: 'Enter an existing folder path' })).toBeTruthy()
+    const path = screen.getByLabelText('Folder path') as HTMLInputElement
+    fireEvent.change(path, { target: { value: '/tmp/fresh' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Open Folder' }))
+    expect(screen.queryByRole('dialog')).toBeNull()
+    expect(screen.getByRole('button', { name: '项目目录' }).textContent).toContain('fresh')
+  })
+
+  it('Create new opens the modal and createWorkspaceSession succeeds', async () => {
+    const { useSessions } = fakeSessions([])
+    const createWorkspaceSession = vi.fn(() => Promise.resolve())
+    render(
+      <EmptyState
+        useSessions={useSessions}
+        {...noopImages}
+        startSession={() => Promise.resolve()}
+        createWorkspaceSession={createWorkspaceSession}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: '项目目录' }))
+    fireEvent.mouseEnter(screen.getByRole('menuitem', { name: 'New Workspace' }).parentElement as HTMLElement)
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Create new' }))
+    expect(screen.getByRole('dialog', { name: 'Create new workspace' })).toBeTruthy()
+    const name = screen.getByLabelText('Workspace name') as HTMLInputElement
+    expect(name.value).toBe('New WorkSpace')
+    fireEvent.change(name, { target: { value: 'My Proj' } })
+    fireEvent.keyDown(name, { key: 'Enter' })
+    await vi.waitFor(() => expect(createWorkspaceSession).toHaveBeenCalledWith('My Proj'))
+  })
+
+  it('Create modal Cancel dismisses without calling createWorkspaceSession', () => {
+    const { useSessions } = fakeSessions([])
+    const createWorkspaceSession = vi.fn(() => Promise.resolve())
+    render(
+      <EmptyState
+        useSessions={useSessions}
+        {...noopImages}
+        startSession={() => Promise.resolve()}
+        createWorkspaceSession={createWorkspaceSession}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: '项目目录' }))
+    fireEvent.mouseEnter(screen.getByRole('menuitem', { name: 'New Workspace' }).parentElement as HTMLElement)
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Create new' }))
+    fireEvent.click(screen.getByRole('button', { name: 'Cancel' }))
+    expect(screen.queryByRole('dialog')).toBeNull()
+    expect(createWorkspaceSession).not.toHaveBeenCalled()
   })
 
   it('routes empty-state draft image creation and release through the injected lifecycle', () => {
@@ -137,6 +212,7 @@ describe('EmptyState', () => {
         releaseDraftImage={releaseDraftImage}
         releaseDraftImages={releaseDraftImages}
         startSession={() => Promise.resolve()}
+        createWorkspaceSession={noopCreate}
       />,
     )
     const textarea = view.container.querySelector('textarea')!
@@ -293,10 +369,11 @@ describe('DetailsPanel', () => {
   it('renders the selected call args and result off the shared store; close fires the injected callback', () => {
     const { closeDetails } = benchDetails({
       nodes: [{
-        kind: 'tool-result', callId: 'c1',
+        kind: 'tool-result', seq: 1, time: 1_000, callId: 'c1',
         call: { name: 'bash', argsRaw: '{"cmd":"ls"}' },
+        callTime: 500,
         content: [{ type: 'text', text: 'file-a\nfile-b' }],
-        isError: false,
+        isError: false, callView: null, resultView: null,
       }],
     }, { turnSeq: 1, callId: 'c1' })
     expect(screen.getByText('bash')).toBeTruthy()
@@ -307,10 +384,10 @@ describe('DetailsPanel', () => {
   })
 
   it('shows the empty hint without a selection and the running state for open calls', () => {
-    benchDetails({ runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{}' }] }, null)
+    benchDetails({ runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{}', turn: 1, step: 1, time: 1_000, callView: null }] }, null)
     expect(screen.getByText(/点击消息流中的工具行/)).toBeTruthy()
     cleanup()
-    benchDetails({ runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{}' }] }, { turnSeq: 1, callId: 'c9' })
+    benchDetails({ runningCalls: [{ callId: 'c9', name: 'bash', argsRaw: '{}', turn: 1, step: 1, time: 1_000, callView: null }] }, { turnSeq: 1, callId: 'c9' })
     expect(screen.getByText('运行中…')).toBeTruthy()
   })
 

packages/client/ui-primitives/README.md

@@ -1,6 +1,6 @@
 # @deepseek-ai/dsh-client-ui-primitives
 
-Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Input, markdown family (MessageText/MarkdownText/JsonBlock). Contract: api-contracts v3 §8.
+Pure React atoms (zero cordis): StateDot, ic_ds_* icons, Button/Pill/Menu/Modal/Input, markdown family (MessageText/MarkdownText/JsonBlock). Contract: api-contracts v3 §8.
 
 ## Markdown rendering
 

packages/client/ui-primitives/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deepseek-ai/dsh-client-ui-primitives",
-  "description": "Pure React atoms for the dsh web UI: StateDot, ic_ds_* icon set, Button/Pill/Menu/Input, markdown family (zero cordis)",
+  "description": "Pure React atoms for the dsh web UI: StateDot, ic_ds_* icon set, Button/Pill/Menu/Modal/Input, markdown family (zero cordis)",
   "version": "0.0.1",
   "private": true,
   "type": "module",

packages/client/ui-primitives/src/Button.module.css

@@ -56,6 +56,20 @@
   background: var(--dsw-alias-interactive-bg-active);
 }
 
+/* Dialog Cancel (figma 451:18655): bordered capsule on transparent fill. */
+.outline {
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: transparent;
+}
+
+.outline:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.outline:disabled {
+  border-color: var(--dsw-alias-border-l1);
+}
+
 .toolbar {
   background: var(--dsw-alias-button-tool-bar-fill);
 }

packages/client/ui-primitives/src/Button.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx'
 import css from './Button.module.css'
 
 /** Visual variant, each backed by its --dsw-alias-button-* token family. */
-export type ButtonVariant = 'primary' | 'ghost' | 'toolbar'
+export type ButtonVariant = 'primary' | 'ghost' | 'outline' | 'toolbar'
 
 /**
  * Render a button.

packages/client/ui-primitives/src/Menu.module.css

@@ -3,21 +3,32 @@
   display: inline-flex;
 }
 
-/* Dropdown card (figma MenuDropdown 122:10096): white card, r12, no border,
- * layered drop shadows via the shadow token, 4px inset padding. */
+/* Dropdown card (figma MenuDropdown 122:9481 / 419:16920): menu surface,
+ * r12, inverted hairline border, shadow-lv3, 4px inset padding. */
+.list,
+.submenu {
+  padding: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--dsw-alias-border-inverted);
+  border-radius: 12px;
+  background: var(--dsw-specific-menu);
+  box-shadow: var(--dsw-shadow-lv3);
+}
+
 .list {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
   z-index: 100;
   min-width: 130px;
-  padding: 4px;
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  border-radius: 12px;
-  background: var(--dsw-alias-bg-layer-1);
-  box-shadow: var(--dsw-shadow-lv2);
+}
+
+/* Open above the anchor (empty-state workspace chip: figma 122:9481). */
+.sideTop {
+  top: auto;
+  bottom: calc(100% + 4px);
 }
 
 .alignEnd {
@@ -25,12 +36,18 @@
   right: 0;
 }
 
-/* Menu cell (figma .Menu_cell 27:5169): r10, pad 10/8, 14/22 primary text,
+.itemWrap {
+  position: relative;
+}
+
+/* Menu cell (figma .Menu_cell): min-h 40, r10, pad 10/8, 14/22 primary,
  * gap 8 between leading icon / label / trailing check. */
 .item {
   display: flex;
   align-items: center;
   gap: 8px;
+  width: 100%;
+  min-height: 40px;
   padding: 8px 10px;
   border: none;
   border-radius: 10px;
@@ -51,9 +68,22 @@
   cursor: not-allowed;
 }
 
+.itemIcon {
+  display: inline-flex;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  align-items: center;
+  justify-content: center;
+  color: var(--dsw-alias-label-tertiary);
+}
+
 .itemLabel {
   flex: 1;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .check {
@@ -66,3 +96,34 @@
 .selected {
   background: transparent;
 }
+
+/* Separator cell (figma 122:9481): py 4 / px 2 around the hairline. */
+.separator {
+  height: 1px;
+  margin: 4px 2px;
+  background: var(--dsw-alias-border-l1);
+}
+
+/* Nested card to the right of the parent row (figma 419:16920).
+ * Bottom-aligned with the parent menu card (grows upward): itemWrap sits in
+ * .list's 4px pad, so bottom: -4px matches the list's outer bottom edge.
+ * Horizontal: list pad (4px) + 6px card gap = 10px past itemWrap — plain
+ * `100% + 6px` collapses to ~2px between outer card edges.
+ * ::before bridges the full gap so the pointer can cross without mouseLeave. */
+.submenu {
+  position: absolute;
+  top: auto;
+  bottom: -4px;
+  left: calc(100% + 10px);
+  z-index: 101;
+  min-width: 160px;
+}
+
+.submenu::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -10px;
+  width: 10px;
+}

packages/client/ui-primitives/src/Menu.tsx

@@ -1,46 +1,69 @@
 // Menu: minimal controlled dropdown (group-by pickers, project selectors).
 // Pure CSS positioning relative to the anchor wrapper — no portal, no popper.
 // The owner controls `open`; outside-click closing uses one document listener
-// active only while open.
+// active only while open. Submenus open on hover/focus inside the same root.
 
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import clsx from 'clsx'
 import { IconCheckOutline16 } from './icons/index.tsx'
 import css from './Menu.module.css'
 
-/** One selectable menu row. */
+/** Selectable row (optionally with a nested submenu). */
 export interface MenuItem {
   id: string
   label: ReactNode
   disabled?: boolean
+  /** Leading icon (figma .Menu_cell gap 8). */
+  icon?: ReactNode
+  /** Nested card opened to the right on hover/focus. */
+  submenu?: readonly MenuItem[]
+}
+
+/** Hairline between item groups (not selectable). */
+export interface MenuSeparator {
+  type: 'separator'
+  id: string
+}
+
+/** One primary-menu entry: a row or a separator. */
+export type MenuEntry = MenuItem | MenuSeparator
+
+function isSeparator(entry: MenuEntry): entry is MenuSeparator {
+  return 'type' in entry && entry.type === 'separator'
 }
 
 /**
  * Render an anchored dropdown menu.
  * @param props.open - whether the list is showing (owner-controlled).
  * @param props.anchor - the trigger element (rendered in place).
- * @param props.items - selectable rows.
+ * @param props.items - selectable rows and optional separators.
  * @param props.selectedId - row shown as selected.
- * @param props.onSelect - row click callback (not called for disabled rows).
+ * @param props.onSelect - row click callback (not called for disabled rows or submenu parents that only open children).
  * @param props.onClose - invoked on outside click or Escape.
  * @param props.align - list alignment against the anchor (default 'start').
+ * @param props.side - open below (`bottom`, default) or above (`top`) the anchor.
  * @returns anchor wrapper with the conditional list.
  */
-export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', className }: {
+export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align = 'start', side = 'bottom', className }: {
   open: boolean
   anchor: ReactNode
-  items: readonly MenuItem[]
+  items: readonly MenuEntry[]
   selectedId?: string
   onSelect: (id: string) => void
   onClose: () => void
   align?: 'start' | 'end'
+  side?: 'bottom' | 'top'
   className?: string
 }) {
   const rootRef = useRef<HTMLSpanElement>(null)
+  const [openSubmenuId, setOpenSubmenuId] = useState<string | null>(null)
 
   useEffect(() => {
-    if (!open) return
+    if (!open) {
+      setOpenSubmenuId(null)
+      return
+    }
     const onPointerDown = (e: PointerEvent) => {
       if (rootRef.current && e.target instanceof Node && !rootRef.current.contains(e.target)) onClose()
     }
@@ -59,21 +82,61 @@ export function Menu({ open, anchor, items, selectedId, onSelect, onClose, align
     <span ref={rootRef} className={clsx(css.root, className)}>
       {anchor}
       {open && (
-        <div className={clsx(css.list, align === 'end' && css.alignEnd)} role="menu">
-          {items.map(item => (
-            <button
-              key={item.id}
-              type="button"
-              role="menuitem"
-              className={clsx(css.item, item.id === selectedId && css.selected)}
-              disabled={item.disabled}
-              onClick={() => onSelect(item.id)}
-            >
-              <span className={css.itemLabel}>{item.label}</span>
-              {/* Selection marker is a trailing check (figma .Menu_cell), not a fill. */}
-              {item.id === selectedId && <IconCheckOutline16 className={css.check} />}
-            </button>
-          ))}
+        <div className={clsx(css.list, side === 'top' && css.sideTop, align === 'end' && css.alignEnd)} role="menu">
+          {items.map(entry => {
+            if (isSeparator(entry)) {
+              return <div key={entry.id} className={css.separator} role="separator" />
+            }
+            const hasSub = entry.submenu !== undefined && entry.submenu.length > 0
+            const subOpen = hasSub && openSubmenuId === entry.id
+            return (
+              <div
+                key={entry.id}
+                className={css.itemWrap}
+                onMouseEnter={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
+                onMouseLeave={() => { setOpenSubmenuId(null) }}
+              >
+                <button
+                  type="button"
+                  role="menuitem"
+                  className={clsx(css.item, entry.id === selectedId && css.selected)}
+                  disabled={entry.disabled}
+                  aria-haspopup={hasSub ? 'menu' : undefined}
+                  aria-expanded={hasSub ? subOpen : undefined}
+                  onFocus={() => { setOpenSubmenuId(hasSub ? entry.id : null) }}
+                  onClick={() => {
+                    if (hasSub) {
+                      setOpenSubmenuId(entry.id)
+                      return
+                    }
+                    onSelect(entry.id)
+                  }}
+                >
+                  {entry.icon !== undefined && <span className={css.itemIcon}>{entry.icon}</span>}
+                  <span className={css.itemLabel}>{entry.label}</span>
+                  {/* Selection marker is a trailing check (figma .Menu_cell), not a fill. */}
+                  {entry.id === selectedId && <IconCheckOutline16 className={css.check} />}
+                </button>
+                {subOpen && entry.submenu !== undefined && (
+                  <div className={css.submenu} role="menu">
+                    {entry.submenu.map(sub => (
+                      <button
+                        key={sub.id}
+                        type="button"
+                        role="menuitem"
+                        className={css.item}
+                        disabled={sub.disabled}
+                        onClick={() => { onSelect(sub.id) }}
+                      >
+                        {sub.icon !== undefined && <span className={css.itemIcon}>{sub.icon}</span>}
+                        <span className={css.itemLabel}>{sub.label}</span>
+                      </button>
+                    ))}
+                  </div>
+                )}
+              </div>
+            )
+          })}
         </div>
       )}
     </span>

packages/client/ui-primitives/src/Modal.module.css

@@ -0,0 +1,79 @@
+/* Full-viewport layer (figma Mask + Dialog 451:18655): mask + centered card. */
+.root {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+/* User/spec mask: rgba(0,0,0,0.24) + blur(2px) via --dsw-alias-bg-mask-1 /
+   --dsw-mask-blur (light); dark theme raises mask opacity. */
+.mask {
+  position: absolute;
+  inset: 0;
+  background: var(--dsw-alias-bg-mask-1);
+  backdrop-filter: var(--dsw-mask-blur);
+}
+
+/* Dialog card: r24, shadow-lv3, layer-2 fill, inverted border, pb 24. */
+.dialog {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: min(380px, 100%);
+  padding: 0 0 24px;
+  overflow: hidden;
+  border: 1px solid var(--dsw-alias-border-inverted);
+  border-radius: 24px;
+  background: var(--dsw-alias-bg-layer-2);
+  box-shadow: var(--dsw-shadow-lv3);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Header pad (figma Title row): pt 22 / pl 24 / pr 14 / pb 12. */
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 22px 14px 12px 24px;
+}
+
+.title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
+}
+
+.description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 0 24px;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 0 24px;
+}

packages/client/ui-primitives/src/Modal.tsx

@@ -0,0 +1,62 @@
+// Modal: controlled full-viewport dialog (create-workspace and similar).
+// Fixed overlay in the React tree (no react-dom portal) so ui-primitives
+// stays free of a react-dom dependency; mask tokens match figma 451:18655.
+
+import { useEffect } from 'react'
+import type { ReactNode } from 'react'
+import clsx from 'clsx'
+import css from './Modal.module.css'
+
+/**
+ * Render a centered modal over a blurred page mask.
+ * @param props.open - whether the dialog is showing.
+ * @param props.onClose - Escape or mask click.
+ * @param props.title - dialog heading.
+ * @param props.description - optional supporting sentence under the title.
+ * @param props.children - body (inputs, etc.).
+ * @param props.footer - action row (Cancel / Create).
+ * @returns null when closed; otherwise the overlay tree.
+ */
+export function Modal({ open, onClose, title, description, children, footer, className }: {
+  open: boolean
+  onClose: () => void
+  title: string
+  description?: string
+  children?: ReactNode
+  footer?: ReactNode
+  className?: string
+}) {
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => { document.removeEventListener('keydown', onKeyDown) }
+  }, [open, onClose])
+
+  if (!open) return null
+
+  return (
+    <div className={css.root} role="presentation">
+      <div className={css.mask} aria-hidden="true" onClick={onClose} />
+      <div
+        className={clsx(css.dialog, className)}
+        role="dialog"
+        aria-modal="true"
+        aria-label={title}
+      >
+        <div className={css.content}>
+          <div className={css.header}>
+            <h2 className={css.title}>{title}</h2>
+            {description !== undefined && description !== '' && (
+              <p className={css.description}>{description}</p>
+            )}
+          </div>
+          {children !== undefined && <div className={css.body}>{children}</div>}
+        </div>
+        {footer !== undefined && <div className={css.footer}>{footer}</div>}
+      </div>
+    </div>
+  )
+}

packages/client/ui-primitives/src/index.ts

@@ -1,5 +1,5 @@
 /**
- * Pure React atoms (zero cordis): StateDot, icons, Button/Pill/Menu/Input,
+ * Pure React atoms (zero cordis): StateDot, icons, Button/Pill/Menu/Modal/Input,
  * markdown family, ConnectionBanner. Everything consumes props plus --dsw-*
  * token vars only. Contract: api-contracts v3 section 8.
  */
@@ -11,7 +11,8 @@ export type { ButtonVariant } from './Button.tsx'
 export { Pill } from './Pill.tsx'
 export { Input } from './Input.tsx'
 export { Menu } from './Menu.tsx'
-export type { MenuItem } from './Menu.tsx'
+export type { MenuEntry, MenuItem, MenuSeparator } from './Menu.tsx'
+export { Modal } from './Modal.tsx'
 export { ConnectionBanner } from './ConnectionBanner.tsx'
 export { FishLogo } from './FishLogo.tsx'
 export { BrandWordmark } from './BrandWordmark.tsx'

packages/client/ui-primitives/tests/atoms.spec.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { Button, ConnectionBanner, Input, Menu, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Button, ConnectionBanner, Input, Menu, Modal, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
 
 afterEach(cleanup)
 
@@ -21,6 +21,11 @@ describe('Button', () => {
     fireEvent.click(screen.getByRole('button'))
     expect(onClick).not.toHaveBeenCalled()
   })
+
+  it('outline variant renders a bordered cancel-style button', () => {
+    render(<Button variant="outline">Cancel</Button>)
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeDefined()
+  })
 })
 
 describe('Pill', () => {
@@ -91,11 +96,12 @@ describe('Menu', () => {
     expect(onClose).not.toHaveBeenCalled()
   })
 
-  it('selected item shows the trailing check; align=end and className apply', () => {
+  it('selected item shows the trailing check; align=end, side=top, and className apply', () => {
     const { container } = render(
       <Menu
         open
         align="end"
+        side="top"
         className="x"
         anchor={<span>trigger</span>}
         items={items}
@@ -104,12 +110,89 @@ describe('Menu', () => {
         onClose={() => {}}
       />)
     expect((container.firstElementChild as HTMLElement).classList.contains('x')).toBe(true)
+    const menu = screen.getByRole('menu')
+    expect(menu.className).toMatch(/sideTop|alignEnd/)
     const selected = screen.getByRole('menuitem', { name: 'Alpha' })
     expect(selected.querySelector('svg')).not.toBeNull()
     const other = screen.getByRole('menuitem', { name: 'Beta' })
     expect(other.querySelector('svg')).toBeNull()
     fireEvent.keyDown(document, { key: 'a' })
   })
+
+  it('renders a leading icon and a separator between groups', () => {
+    render(
+      <Menu
+        open
+        anchor={<span>trigger</span>}
+        items={[
+          { id: 'a', label: 'Alpha', icon: <svg data-testid="ic" /> },
+          { type: 'separator', id: 's1' },
+          { id: 'c', label: 'Create' },
+        ]}
+        onSelect={() => {}}
+        onClose={() => {}}
+      />)
+    expect(screen.getByTestId('ic')).toBeDefined()
+    expect(screen.getByRole('separator')).toBeDefined()
+  })
+
+  it('opens a submenu on hover and selects a nested item', () => {
+    const onSelect = vi.fn()
+    render(
+      <Menu
+        open
+        anchor={<span>trigger</span>}
+        items={[
+          { id: 'plain', label: 'Plain' },
+          {
+            id: 'new',
+            label: 'New Workspace',
+            submenu: [
+              { id: 'ok', label: 'Create ok', icon: <svg data-testid="sub-ic" /> },
+            ],
+          },
+        ]}
+        onSelect={onSelect}
+        onClose={() => {}}
+      />)
+    const plain = screen.getByRole('menuitem', { name: 'Plain' })
+    fireEvent.mouseEnter(plain.parentElement as HTMLElement)
+    fireEvent.focus(plain)
+    const parent = screen.getByRole('menuitem', { name: 'New Workspace' })
+    const wrap = parent.parentElement as HTMLElement
+    fireEvent.click(parent)
+    expect(onSelect).not.toHaveBeenCalled()
+    fireEvent.focus(parent)
+    fireEvent.mouseEnter(wrap)
+    expect(screen.getByTestId('sub-ic')).toBeDefined()
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Create ok' }))
+    expect(onSelect).toHaveBeenCalledWith('ok')
+    fireEvent.mouseLeave(wrap)
+    expect(screen.queryByRole('menuitem', { name: 'Create ok' })).toBeNull()
+  })
+})
+
+describe('Modal', () => {
+  it('is absent while closed; Escape and mask click call onClose', () => {
+    const onClose = vi.fn()
+    const { rerender } = render(
+      <Modal open={false} onClose={onClose} title="Create new workspace">body</Modal>)
+    expect(screen.queryByRole('dialog')).toBeNull()
+    rerender(
+      <Modal open onClose={onClose} title="Create new workspace" description="Name it." footer={<button type="button">Create</button>}>
+        <input aria-label="name" />
+      </Modal>)
+    expect(screen.getByRole('dialog', { name: 'Create new workspace' })).toBeDefined()
+    expect(screen.getByText('Name it.')).toBeDefined()
+    fireEvent.keyDown(document, { key: 'a' })
+    expect(onClose).not.toHaveBeenCalled()
+    fireEvent.keyDown(document, { key: 'Escape' })
+    expect(onClose).toHaveBeenCalledTimes(1)
+    // Mask is the presentation sibling behind the dialog.
+    const mask = document.querySelector('[aria-hidden="true"]') as HTMLElement
+    fireEvent.click(mask)
+    expect(onClose).toHaveBeenCalledTimes(2)
+  })
 })
 
 describe('ConnectionBanner', () => {

packages/client/ui-sidebar/README.md

@@ -1,6 +1,6 @@
 # @deepseek-ai/dsh-client-ui-sidebar
 
-Sidebar plugin: session multi-level tree (cwd grouping + parentId nesting), search, by-workspace grouping, state dots, three creation entries. Collapse is a slide + crossfade into the layout-owned 56px rail (open / new session / new workspace / search — search expands and focuses the search box — plus the settings foot): the expanded content freezes at its width and fades in place while the column slides over it, then the rail — whale mark resting, panel icon on hover, tooltips on every control — crossfades in at settle as the wide content unmounts. Contract: the [slot system standard](../../../.agents/notes/implemented/architecture/2026-07-22-slot-type-chain-implementation.md).
+Sidebar plugin: session multi-level tree (cwd grouping + parentId nesting), search, by-workspace grouping, state dots, three creation entries. Top-level New Session / New Workspace clear the selection onto `conversation.empty`; per-project "+" still create-then-opens. Collapse is a slide + crossfade into the layout-owned 56px rail (open / new session / new workspace / search — search expands and focuses the search box — plus the settings foot): the expanded content freezes at its width and fades in place while the column slides over it, then the rail — whale mark resting, panel icon on hover, tooltips on every control — crossfades in at settle as the wide content unmounts. Contract: the [slot system standard](../../../.agents/notes/implemented/architecture/2026-07-22-slot-type-chain-implementation.md).
 
 `src/client/contract/slots.ts` is the single-domain contract file: `SidebarRootInjected` (the registrant's own injected share — plain service callbacks: onOpen/onCreate/onToggleSidebar) and `SidebarRootComponentProps = PropsRuntime<'sidebar'> & SidebarRootInjected` (owner `{collapsed,width}` plus the standard `useSessions` hook, resolved off ui-layout's SlotMap declaration, never re-stated). `apply` registers SidebarRoot cast-free against that composition; the inject factory closes over the plugin's own ctx.
 

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

@@ -25,8 +25,8 @@ export type SidebarRootInjected = {
   /** Open (switch to) a session. */
   onOpen: (id: SessionId) => void
   /**
-   * Create a session and open it; cwd targets a project group (the
-   * sidebar's three creation entries all land in the new session).
+   * New-session affordance: no cwd clears selection onto the empty-state
+   * launch; a cwd create-then-opens a session in that project group.
    */
   onCreate: (cwd?: string) => void
   /** Collapse the sidebar column (layout service action; owner share stays {collapsed,width}). */

packages/client/ui-sidebar/src/client/index.ts

@@ -27,9 +27,15 @@ export function apply(ctx: ClientContext): void {
     // list snapshot); layout keeps only panel geometry.
     onOpen: (id) => { ctx.sessions.open(id) },
     onCreate: (cwd) => {
-      // Create-then-open: the sidebar's three creation entries all land
-      // in the new session (empty-state first-send stays with ui-conversation).
-      void ctx.sessions.create(cwd === undefined ? {} : { cwd })
+      // Top-level New Session / New Workspace: clear selection so AppFrame
+      // shows conversation.empty (EmptyState + shared InputBar). Per-project
+      // "+" still create-then-opens into that cwd until workspace seeding
+      // reaches the empty-state picker.
+      if (cwd === undefined) {
+        ctx.sessions.clear()
+        return
+      }
+      void ctx.sessions.create({ cwd })
         .then((id: SessionId) => { ctx.sessions.open(id) })
     },
     onToggleSidebar: () => { ctx.layout.toggleSidebar() },

packages/client/ui-sidebar/tests/apply.spec.tsx

@@ -26,7 +26,12 @@ async function bench() {
     byId: { [sid('a')]: { id: sid('a'), title: 'alpha', displayTitle: 'alpha', cwd: '/proj', running: false, updatedAt: 1 } },
     current: undefined,
   })
-  const sessions = { list, create: vi.fn(async () => sid('minted')), open: vi.fn() }
+  const sessions = {
+    list,
+    create: vi.fn(async () => sid('minted')),
+    open: vi.fn(),
+    clear: vi.fn(),
+  }
   const layout = { toggleSidebar: vi.fn() }
   ctx.provide('sessions', sessions)
   ctx.provide('layout', layout)
@@ -91,14 +96,15 @@ describe('apply', () => {
     expect(sessions.open).toHaveBeenCalledWith('a')
 
     injected.onCreate()
-    expect(sessions.create).toHaveBeenCalledWith({})
+    expect(sessions.clear).toHaveBeenCalledOnce()
+    expect(sessions.create).not.toHaveBeenCalled()
+
+    injected.onCreate('/proj')
+    expect(sessions.create).toHaveBeenCalledWith({ cwd: '/proj' })
     // create-then-open lands after the create promise resolves.
     await Promise.resolve()
     await Promise.resolve()
     expect(sessions.open).toHaveBeenCalledWith('minted')
-
-    injected.onCreate('/proj')
-    expect(sessions.create).toHaveBeenCalledWith({ cwd: '/proj' })
   })
 
   it('teardown unregisters the slot entry', async () => {

packages/client/ui-theme/src/styles/design-platform.css

@@ -169,6 +169,7 @@ body {
   --dsw-alias-border-l3: rgba(0, 0, 0, 0.12);
   --dsw-alias-border-l4: rgba(0, 0, 0, 0.16);
   --dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-1000);
+  --dsw-alias-brand-primary-new-colorprimary-new-color: rgb(65, 118, 230);
   --dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-1000);
   --dsw-alias-brand-text: var(--dsw-static-neutral-bluish-1000);
   --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-700);
@@ -217,6 +218,7 @@ body {
   --dsw-alias-state-error-secondary: var(--dsw-static-red-400);
   --dsw-alias-state-success-primary: var(--dsw-static-green-500);
   --dsw-alias-state-success-secondary: var(--dsw-static-green-400);
+  --dsw-alias-state-success-tertiary: var(--dsw-static-green-100);
   --dsw-alias-state-warn-label: var(--dsw-static-amber-600);
   --dsw-alias-state-warn-primary: var(--dsw-static-amber-500);
   --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400);
@@ -257,11 +259,12 @@ body[data-ds-dark-theme] {
   --dsw-alias-border-l3: rgba(255, 255, 255, 0.16);
   --dsw-alias-border-l4: rgba(255, 255, 255, 0.2);
   --dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-50);
+  --dsw-alias-brand-primary-new-colorprimary-new-color: var(--dsw-static-deepseek-450);
   --dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-50);
   --dsw-alias-brand-text: var(--dsw-static-neutral-bluish-50);
   --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-50);
   --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-750);
-  --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-950);
+  --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-850);
   --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-800);
   --dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-600);
   --dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-750);

packages/client/ui-trajectory/README.md

@@ -1,6 +1,6 @@
 # @deepseek-ai/dsh-client-ui-trajectory
 
-Trajectory/Waterfall placeholder views; the pure-consumer minimal plugin exemplar (registers two view tabs into the conversation's `'conversation.view'` slot ring, provides no service, declares no Context merge). Contract: api-contracts v3 §8.
+Trajectory turn-list chrome (sticky Turn / Message·Step groups / step cells) plus Waterfall placeholder; the pure-consumer minimal plugin exemplar (registers two view tabs into the conversation's `'conversation.view'` slot ring, provides no service, declares no Context merge). Contract: api-contracts v3 §8.
 
 ## Model Experience
 
@@ -12,4 +12,4 @@ None; this package neither assembles nor sends a provider request.
 
 ## Known Limitations and Deferred Work
 
-- **Both views are placeholders by charter** — coarse span derivation with no visual acceptance bar; the real implementations, anchor deep-linking, and span-click selection handoff are the P-III project.
+- **In-flight Time stays blank** — `partial` / `runningCalls` rows render with `—` until a live clock policy lands; selected styling is local-only (not wired to chat details); anchor deep-linking remains deferred.

packages/client/ui-trajectory/src/client/TrajectoryCell.module.css

@@ -0,0 +1,93 @@
+/* Trajectory step cell — 38px row: index · kind tag · text · optional message
+ * metrics · elapsed time. */
+
+.root {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 38px;
+  padding: 0 8px 0 20px;
+  gap: 24px;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-layer-3);
+  min-width: 0;
+}
+
+.selected {
+  border-color: transparent;
+  box-shadow: inset 0 0 0 2px var(--dsw-alias-brand-primary-new-colorprimary-new-color);
+}
+
+.index {
+  flex: none;
+  width: 24px;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tagSlot {
+  flex: none;
+  width: 80px;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 22px;
+  max-width: 100%;
+  padding: 0 4px;
+  border-radius: 6px;
+  font: var(--dsw-font-xs-strong-13);
+  white-space: nowrap;
+}
+
+.tagUser {
+  color: var(--dsw-alias-state-success-primary);
+  background: var(--dsw-alias-state-success-tertiary);
+}
+
+.tagMessage {
+  color: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
+  background: var(--dsw-specific-bubble);
+}
+
+.tagTool {
+  color: var(--dsw-alias-state-warn-label);
+  background: var(--dsw-alias-state-warn-tertiary);
+}
+
+.text {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* Same column geometry as TrajectoryTurnHeader: 4×71 + 3×12 = 320. */
+.trailing {
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 320px;
+  gap: 12px;
+  min-width: 0;
+}
+
+.metric,
+.time {
+  flex: none;
+  width: 71px;
+  text-align: left;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-tertiary);
+  white-space: nowrap;
+}

packages/client/ui-trajectory/src/client/TrajectoryCell.tsx

@@ -0,0 +1,99 @@
+// TrajectoryCell: one step row in the trajectory list — index, kind tag,
+// ellipsis text, optional Message token metrics, and own-duration time.
+
+import type { HTMLAttributes } from 'react'
+import css from './TrajectoryCell.module.css'
+
+/** Closed set of trajectory step kinds (call+result fold into Tool; no Think). */
+export type TrajectoryCellKind = 'user' | 'message' | 'tool'
+
+/** Display label per kind (matches the design tags). */
+const KIND_LABEL: Record<TrajectoryCellKind, string> = {
+  user: 'User',
+  message: 'Message',
+  tool: 'Tool',
+}
+
+const TAG_CLASS: Record<TrajectoryCellKind, string> = {
+  user: css.tagUser!,
+  message: css.tagMessage!,
+  tool: css.tagTool!,
+}
+
+export interface TrajectoryCellProps extends HTMLAttributes<HTMLDivElement> {
+  /** 1-based step index shown as `#N`. */
+  index: number
+  kind: TrajectoryCellKind
+  /** Single-line summary; CSS ellipsis when it overflows. */
+  text: string
+  /**
+   * Own duration in seconds. `null` means no duration to show (em dash) —
+   * used for in-flight tools and tools missing callTime.
+   */
+  timeSeconds: number | null
+  /** Message-only: prompt token count. */
+  input?: number
+  /** Message-only: completion token count. */
+  output?: number
+  /** Message-only: reasoning token count (usage column, not a Think cell). */
+  think?: number
+  /** Selected: 2px inset brand-primary-new-color ring (not wired to chat selection yet). */
+  selected?: boolean
+}
+
+/**
+ * Format own-duration for the trailing time column: `—` when unknown, `+Ns`
+ * or `+N.1s` otherwise.
+ * @param seconds - duration seconds, or null when absent.
+ * @returns display string.
+ */
+export function formatElapsedSeconds(seconds: number | null): string {
+  if (seconds === null || !Number.isFinite(seconds)) return '—'
+  const rounded = Math.round(seconds * 10) / 10
+  if (Number.isInteger(rounded)) return `+${rounded}s`
+  return `+${rounded.toFixed(1)}s`
+}
+
+/**
+ * Render one trajectory step cell.
+ * @param props - index, kind, text, time, and optional Message metrics.
+ * @returns the cell element.
+ */
+export function TrajectoryCell({
+  index,
+  kind,
+  text,
+  timeSeconds,
+  input,
+  output,
+  think,
+  selected = false,
+  className,
+  ...rest
+}: TrajectoryCellProps) {
+  const rootClass = [
+    css.root,
+    selected ? css.selected : undefined,
+    className,
+  ].filter((c): c is string => c !== undefined).join(' ')
+  const showMetrics = kind === 'message'
+  return (
+    <div className={rootClass} data-kind={kind} data-selected={selected || undefined} {...rest}>
+      <span className={css.index}>#{index}</span>
+      <span className={css.tagSlot}>
+        <span className={`${css.tag} ${TAG_CLASS[kind]}`}>{KIND_LABEL[kind]}</span>
+      </span>
+      <span className={css.text}>{text}</span>
+      <span className={css.trailing}>
+        {showMetrics ? (
+          <>
+            <span className={css.metric}>{input ?? ''}</span>
+            <span className={css.metric}>{output ?? ''}</span>
+            <span className={css.metric}>{think ?? ''}</span>
+          </>
+        ) : null}
+        <span className={css.time}>{formatElapsedSeconds(timeSeconds)}</span>
+      </span>
+    </div>
+  )
+}

packages/client/ui-trajectory/src/client/TrajectoryGroupHeader.module.css

@@ -0,0 +1,27 @@
+/* Message / Step group title row inside a turn body. */
+
+.root {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  height: 36px;
+  padding: 0 20px;
+  gap: 24px;
+  min-width: 0;
+}
+
+.title {
+  flex: none;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-primary);
+}
+
+.description {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-tertiary);
+}

packages/client/ui-trajectory/src/client/TrajectoryGroupHeader.tsx

@@ -0,0 +1,26 @@
+// TrajectoryGroupHeader: "Message" or "Step N" row with optional description.
+
+import css from './TrajectoryGroupHeader.module.css'
+
+export interface TrajectoryGroupHeaderProps {
+  /** Group title (`Message`, `Step 1`, …). */
+  title: string
+  /** Secondary summary (`49s`, `2.2s skill`, …). */
+  description?: string
+}
+
+/**
+ * Render a Message/Step group header inside a turn body.
+ * @param props - title and optional description.
+ * @returns the group header element.
+ */
+export function TrajectoryGroupHeader({ title, description }: TrajectoryGroupHeaderProps) {
+  return (
+    <div className={css.root}>
+      <span className={css.title}>{title}</span>
+      {description !== undefined && description !== ''
+        ? <span className={css.description}>{description}</span>
+        : null}
+    </div>
+  )
+}

packages/client/ui-trajectory/src/client/TrajectoryTurn.module.css

@@ -0,0 +1,16 @@
+/* One turn block: sticky header + padded body with 10px item gap. */
+
+.root {
+  width: 100%;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 880px;
+  margin: 0 auto;
+  padding: 8px 16px 22px;
+}

packages/client/ui-trajectory/src/client/TrajectoryTurn.tsx

@@ -0,0 +1,26 @@
+// TrajectoryTurn: sticky Turn header plus the padded Message/Step body.
+
+import type { ReactNode } from 'react'
+import { TrajectoryTurnHeader } from './TrajectoryTurnHeader.tsx'
+import css from './TrajectoryTurn.module.css'
+
+export interface TrajectoryTurnProps {
+  /** 1-based turn index for the sticky header. */
+  turn: number
+  /** Message / Step headers and TrajectoryCell rows. */
+  children?: ReactNode
+}
+
+/**
+ * Render one turn section (sticky header + body).
+ * @param props - turn index and body children.
+ * @returns the turn section element.
+ */
+export function TrajectoryTurn({ turn, children }: TrajectoryTurnProps) {
+  return (
+    <section className={css.root} data-turn={turn}>
+      <TrajectoryTurnHeader turn={turn} />
+      <div className={css.body}>{children}</div>
+    </section>
+  )
+}

packages/client/ui-trajectory/src/client/TrajectoryTurnHeader.module.css

@@ -0,0 +1,48 @@
+/* Sticky turn bar: full-bleed ghost-active fill across the panel; title +
+ * metric labels sit in a centered 880 content lane (4×71 + 3×12 = 320). */
+
+.root {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  background: var(--dsw-alias-button-ghost-active-fill);
+}
+
+.inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 880px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.title {
+  flex: none;
+  font: var(--dsw-font-xs-strong-13);
+  color: var(--dsw-alias-label-primary);
+}
+
+.columns {
+  flex: none;
+  display: flex;
+  align-items: center;
+  width: 320px;
+  gap: 12px;
+  /* Match cell padding-right: 8 so Time lines up with the trailing lane. */
+  margin-right: 8px;
+}
+
+.column {
+  flex: none;
+  width: 71px;
+  text-align: left;
+  font: var(--dsw-font-xs-13);
+  color: var(--dsw-alias-label-secondary);
+}

packages/client/ui-trajectory/src/client/TrajectoryTurnHeader.tsx

@@ -0,0 +1,30 @@
+// TrajectoryTurnHeader: sticky per-turn bar with Input/Output/Think/Time labels.
+
+import css from './TrajectoryTurnHeader.module.css'
+
+const COLUMN_LABELS = ['Input', 'Output', 'Think', 'Time'] as const
+
+export interface TrajectoryTurnHeaderProps {
+  /** 1-based turn index shown as `Turn N`. */
+  turn: number
+}
+
+/**
+ * Render the sticky turn header row.
+ * @param props.turn - turn index.
+ * @returns the sticky header element.
+ */
+export function TrajectoryTurnHeader({ turn }: TrajectoryTurnHeaderProps) {
+  return (
+    <div className={css.root}>
+      <div className={css.inner}>
+        <span className={css.title}>Turn {turn}</span>
+        <div className={css.columns} aria-hidden="true">
+          {COLUMN_LABELS.map((label) => (
+            <span key={label} className={css.column}>{label}</span>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/client/ui-trajectory/src/client/TrajectoryView.tsx

@@ -1,30 +1,40 @@
-// TrajectoryView: P-I placeholder body for the trajectory tab — span stats
-// header over a per-turn span list with node-count weights (no timing data
-// exists yet; deviation ledger #3 defers real rendering to P-III).
+// TrajectoryView: sticky Turn sections with Message/Step groups and step cells.
 
 import { useMemo } from 'react'
 import type { ConvViewProps } from '@deepseek-ai/dsh-client-ui-conversation/client'
-import { deriveSpans } from './spans.ts'
-import { TrajectoryStatsHeader } from './TrajectoryStatsHeader.tsx'
+import { TrajectoryCell } from './TrajectoryCell.tsx'
+import { TrajectoryGroupHeader } from './TrajectoryGroupHeader.tsx'
+import { TrajectoryTurn } from './TrajectoryTurn.tsx'
+import { deriveTrajectoryLayout } from './layout.ts'
 import css from './views.module.css'
 
 export function TrajectoryView({ useSession }: ConvViewProps) {
   const nodes = useSession((s) => s.nodes)
-  const spans = useMemo(() => deriveSpans(nodes), [nodes])
-  if (spans.length === 0) return <div className={css.root}><p className={css.empty}>暂无轨迹数据</p></div>
+  const partial = useSession((s) => s.partial)
+  const runningCalls = useSession((s) => s.runningCalls)
+  const turns = useMemo(
+    () => deriveTrajectoryLayout({ nodes, partial, runningCalls }),
+    [nodes, partial, runningCalls],
+  )
+  if (turns.length === 0) {
+    return <div className={css.root}><p className={css.empty}>暂无轨迹数据</p></div>
+  }
   return (
-    <>
-      <TrajectoryStatsHeader useSession={useSession} />
-      <div className={css.root}>
-        {spans.map((span) => (
-          <div key={span.turn} className={css.row}>
-            <span className={css.turnTag}>turn {span.turn}</span>
-            <span className={css.meta}>
-              {span.steps} steps · {span.calls} calls · {span.nodes} nodes
-            </span>
-          </div>
-        ))}
-      </div>
-    </>
+    <div className={css.root}>
+      {turns.map((turn) => (
+        <TrajectoryTurn key={turn.turn} turn={turn.turn}>
+          {turn.groups.flatMap((group) => [
+            <TrajectoryGroupHeader
+              key={`${group.title}-h`}
+              title={group.title}
+              {...(group.description !== undefined ? { description: group.description } : {})}
+            />,
+            ...group.cells.map((cell) => (
+              <TrajectoryCell key={cell.index} {...cell} />
+            )),
+          ])}
+        </TrajectoryTurn>
+      ))}
+    </div>
   )
 }

packages/client/ui-trajectory/src/client/index.ts

@@ -24,8 +24,8 @@ export const inject = ['slots', 'conversation']
 /**
  * Client plugin body: register the trajectory and waterfall view tabs. The
  * registrations ride the slot service's effect wrapper (plugin unload
- * removes both tabs); the span stats header renders inside each view body
- * (the chrome attachment mechanism retired with the view ring).
+ * removes both tabs). Trajectory owns its turn list in-body; Waterfall keeps
+ * the span stats header inside its body (chrome attachment retired).
  * @param ctx - client root context.
  */
 export function apply(ctx: Context): void {

packages/client/ui-trajectory/src/client/layout.ts

@@ -0,0 +1,418 @@
+/**
+ * Trajectory list fold: expand assistant blocks, attach usage to Message,
+ * own-duration times, in-flight partial/runningCalls, and group descriptions.
+ */
+import type {
+  AssistantMessageNode,
+  ConversationSnapshot,
+  ToolResultNode,
+} from '@deepseek-ai/dsh-client-runtime/client'
+import type { TrajectoryCellProps } from './TrajectoryCell.tsx'
+
+/** One Message or Step group inside a turn. */
+export interface TrajectoryGroupModel {
+  title: string
+  description?: string
+  cells: readonly TrajectoryCellProps[]
+}
+
+/** One sticky-turn section. */
+export interface TrajectoryTurnModel {
+  turn: number
+  groups: readonly TrajectoryGroupModel[]
+}
+
+/** Snapshot slice the trajectory view folds. */
+export interface TrajectoryLayoutInput {
+  nodes: ConversationSnapshot['nodes']
+  partial: ConversationSnapshot['partial']
+  runningCalls: ConversationSnapshot['runningCalls']
+}
+
+interface UsageLike {
+  inputTokens?: number
+  outputTokens?: number
+  reasoningTokens?: number
+}
+
+/** Cell plus absolute ms for group wall-span descriptions. */
+interface LaidCell {
+  cell: TrajectoryCellProps
+  absTime: number | null
+  toolName?: string
+  callId?: string
+}
+
+/**
+ * Fold a snapshot into turn → Message/Step groups with expanded cells.
+ * @param input - nodes plus in-flight partial/runningCalls.
+ * @returns turns ordered by first appearance.
+ */
+export function deriveTrajectoryLayout(input: TrajectoryLayoutInput): readonly TrajectoryTurnModel[] {
+  const { nodes, partial, runningCalls } = input
+  const resultByCall = indexResults(nodes)
+  const turns = new Map<number, { message: LaidCell[]; steps: Map<number, LaidCell[]> }>()
+  let index = 0
+  let prevAbsTime: number | null = null
+  let lastAssistantTurn: number | null = null
+
+  const bucket = (turn: number) => {
+    let entry = turns.get(turn)
+    if (entry === undefined) {
+      entry = { message: [], steps: new Map() }
+      turns.set(turn, entry)
+    }
+    return entry
+  }
+
+  const pushMessage = (turn: number, laid: LaidCell) => {
+    bucket(turn).message.push(laid)
+  }
+  const pushStep = (turn: number, step: number, laid: LaidCell) => {
+    const steps = bucket(turn).steps
+    const list = steps.get(step) ?? []
+    list.push(laid)
+    steps.set(step, list)
+  }
+
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    /* v8 ignore next -- dense-array guard: i stays within nodes.length, so the undefined arm needs a sparse array no caller builds. */
+    if (node === undefined) continue
+    if (node.kind === 'user' || node.kind === 'steering') {
+      // user/message has no turn on the wire; enclose it in the next assistant
+      // (or partial) turn, else open the turn after the last assistant.
+      const turn = node.kind === 'steering'
+        ? node.turn
+        : enclosingUserTurn(nodes, i, partial, lastAssistantTurn)
+      pushMessage(turn, {
+        absTime: finiteTime(node.time),
+        cell: {
+          index: ++index, kind: 'user', text: summarizeContent(node.content),
+          timeSeconds: 0,
+        },
+      })
+      prevAbsTime = finiteTime(node.time) ?? prevAbsTime
+      continue
+    }
+    if (node.kind === 'assistant') {
+      const laidList = expandAssistant(node, index + 1, prevAbsTime, resultByCall)
+      for (const laid of laidList) {
+        if (node.step > 0) pushStep(node.turn, node.step, laid)
+        else pushMessage(node.turn, laid)
+      }
+      const last = laidList[laidList.length - 1]
+      if (last !== undefined) index = last.cell.index
+      prevAbsTime = finiteTime(node.time) ?? prevAbsTime
+      lastAssistantTurn = node.turn
+      continue
+    }
+    if (node.kind === 'context') {
+      // No trajectory cell, but the surface still advances the duration cursor.
+      prevAbsTime = finiteTime(node.time) ?? prevAbsTime
+      continue
+    }
+    if (node.kind === 'tool-result') {
+      if (!callEmittedInAssistant(nodes, node.callId)) {
+        const toolName = node.call?.name
+        pushStep(0, 1, {
+          absTime: finiteTime(node.callTime ?? node.time),
+          ...(toolName !== undefined ? { toolName } : {}),
+          callId: node.callId,
+          cell: {
+            index: ++index,
+            kind: 'tool',
+            text: node.call !== null
+              ? summarizeCall(node.call.name, node.call.argsRaw)
+              : summarizeResult(node),
+            timeSeconds: durationSeconds(node.time, node.callTime),
+          },
+        })
+      }
+      prevAbsTime = finiteTime(node.time) ?? prevAbsTime
+    }
+  }
+
+  if (partial !== null) {
+    const fake: AssistantMessageNode = {
+      kind: 'assistant', seq: Number.MAX_SAFE_INTEGER, time: 0,
+      turn: partial.turn, step: partial.step, blocks: partial.blocks,
+    }
+    const laidList = expandAssistant(fake, index + 1, prevAbsTime, resultByCall, { streaming: true })
+    for (const laid of laidList) {
+      if (partial.step > 0) pushStep(partial.turn, partial.step, laid)
+      else pushMessage(partial.turn, laid)
+    }
+    const last = laidList[laidList.length - 1]
+    if (last !== undefined) index = last.cell.index
+  }
+
+  const seenCalls = collectCallIds(turns)
+  for (const call of runningCalls) {
+    if (seenCalls.has(call.callId)) continue
+    pushStep(call.turn, call.step > 0 ? call.step : 1, {
+      absTime: null,
+      toolName: call.name,
+      callId: call.callId,
+      cell: {
+        index: ++index,
+        kind: 'tool',
+        text: summarizeCall(call.name, call.argsRaw),
+        timeSeconds: null,
+      },
+    })
+  }
+
+  // Orphan turn-0 cells (orphaned tools / steering turn 0) fold into Turn 1.
+  const prologue = turns.get(0)
+  if (prologue !== undefined) {
+    turns.delete(0)
+    const emptyTurn = (): { message: LaidCell[]; steps: Map<number, LaidCell[]> } => ({
+      message: [],
+      steps: new Map(),
+    })
+    const first = turns.get(1) ?? emptyTurn()
+    first.message = [...prologue.message, ...first.message]
+    for (const [step, cells] of prologue.steps) {
+      const existing = first.steps.get(step) ?? []
+      first.steps.set(step, [...cells, ...existing])
+    }
+    turns.set(1, first)
+  }
+
+  return [...turns.entries()]
+    .sort(([a], [b]) => a - b)
+    .map(([turn, entry]) => toTurnModel(turn, entry))
+}
+
+function toTurnModel(
+  turn: number,
+  entry: { message: LaidCell[]; steps: Map<number, LaidCell[]> },
+): TrajectoryTurnModel {
+  const groups: TrajectoryGroupModel[] = []
+  if (entry.message.length > 0) {
+    const description = groupDescription(entry.message)
+    groups.push({
+      title: 'Message',
+      ...(description !== undefined ? { description } : {}),
+      cells: entry.message.map(l => l.cell),
+    })
+  }
+  for (const step of [...entry.steps.keys()].sort((a, b) => a - b)) {
+    const laid = entry.steps.get(step) ?? []
+    const description = groupDescription(laid)
+    groups.push({
+      title: `Step ${step}`,
+      ...(description !== undefined ? { description } : {}),
+      cells: laid.map(l => l.cell),
+    })
+  }
+  return { turn, groups }
+}
+
+/** Wall-span duration + tool histogram, e.g. `1.5s bash×6`. */
+function groupDescription(laid: readonly LaidCell[]): string | undefined {
+  const parts: string[] = []
+  // Tool rows contribute start (absTime) and end (start + own duration) so a
+  // single Tool cell still spans call→result for the group wall clock.
+  const times: number[] = []
+  for (const l of laid) {
+    if (l.absTime === null || !Number.isFinite(l.absTime)) continue
+    times.push(l.absTime)
+    if (l.cell.kind === 'tool' && l.cell.timeSeconds !== null && Number.isFinite(l.cell.timeSeconds)) {
+      times.push(l.absTime + l.cell.timeSeconds * 1000)
+    }
+  }
+  if (times.length >= 2) {
+    const span = formatGroupDuration((Math.max(...times) - Math.min(...times)) / 1000)
+    if (span !== undefined) parts.push(span)
+  } else if (times.length === 1) {
+    const own = laid.find(l => l.absTime === times[0])?.cell.timeSeconds
+    const span = own !== null && own !== undefined ? formatGroupDuration(own) : undefined
+    if (span !== undefined) parts.push(span)
+  }
+  const tools = new Map<string, number>()
+  for (const l of laid) {
+    if (l.toolName === undefined || l.cell.kind !== 'tool') continue
+    tools.set(l.toolName, (tools.get(l.toolName) ?? 0) + 1)
+  }
+  for (const [name, count] of tools) {
+    parts.push(count > 1 ? `${name}×${count}` : name)
+  }
+  return parts.length === 0 ? undefined : parts.join(' ')
+}
+
+function formatGroupDuration(seconds: number): string | undefined {
+  if (!Number.isFinite(seconds)) return undefined
+  const rounded = Math.round(seconds * 10) / 10
+  if (Number.isInteger(rounded)) return `${rounded}s`
+  return `${rounded.toFixed(1)}s`
+}
+
+/** Own-duration seconds from two epoch-ms stamps; null when either is unusable. */
+function durationSeconds(later: number, earlier: number | null): number | null {
+  if (earlier === null || !Number.isFinite(later) || !Number.isFinite(earlier)) return null
+  return Math.max(0, (later - earlier) / 1000)
+}
+
+/** Epoch-ms usable as an absolute time, else null. */
+function finiteTime(time: number): number | null {
+  return Number.isFinite(time) ? time : null
+}
+
+function expandAssistant(
+  node: AssistantMessageNode,
+  startIndex: number,
+  prevAbsTime: number | null,
+  results: Map<string, ToolResultNode>,
+  opts?: { streaming?: boolean },
+): LaidCell[] {
+  const out: LaidCell[] = []
+  let index = startIndex - 1
+  const usage = node.usage as UsageLike | undefined
+  const streaming = opts?.streaming === true
+  const messageDuration = streaming ? null : durationSeconds(node.time, prevAbsTime)
+  const nodeAbs = streaming ? null : finiteTime(node.time)
+  let usageAttached = false
+
+  for (const block of node.blocks) {
+    // Reasoning blocks are skipped: no block-level clock, so no Think cell.
+    if (block.kind === 'reasoning') continue
+    if (block.kind === 'text') {
+      if (block.text === '' && streaming) continue
+      const cell: TrajectoryCellProps = {
+        index: ++index, kind: 'message', text: summarizeText(block.text),
+        timeSeconds: messageDuration,
+      }
+      if (!usageAttached) {
+        attachUsage(cell, usage)
+        usageAttached = usage !== undefined
+      }
+      out.push({ absTime: nodeAbs, cell })
+      continue
+    }
+    if (block.kind === 'tool-call') {
+      const result = results.get(block.callId)
+      const toolDuration = streaming || result === undefined
+        ? null
+        : durationSeconds(result.time, result.callTime)
+      const callAbs = streaming
+        ? null
+        : (result?.callTime !== null && result?.callTime !== undefined && Number.isFinite(result.callTime)
+          ? result.callTime
+          : nodeAbs)
+      out.push({
+        absTime: callAbs,
+        toolName: block.name,
+        callId: block.callId,
+        cell: {
+          index: ++index, kind: 'tool',
+          text: summarizeCall(block.name, block.argsRaw),
+          timeSeconds: toolDuration,
+        },
+      })
+    }
+  }
+
+  if (out.length === 0 && !streaming) {
+    // Reasoning-only / empty success still owns provider usage on the Message row.
+    const cell: TrajectoryCellProps = {
+      index: ++index, kind: 'message', text: '', timeSeconds: messageDuration,
+    }
+    attachUsage(cell, usage)
+    out.push({ absTime: nodeAbs, cell })
+  }
+  return out
+}
+
+/**
+ * Turn that encloses a user/message: next assistant/steering turn, else the
+ * in-flight partial, else the turn after the last finalized assistant (or 1).
+ */
+function enclosingUserTurn(
+  nodes: ConversationSnapshot['nodes'],
+  userIndex: number,
+  partial: ConversationSnapshot['partial'],
+  lastAssistantTurn: number | null,
+): number {
+  for (let i = userIndex + 1; i < nodes.length; i++) {
+    const n = nodes[i]
+    /* v8 ignore next -- dense-array guard: i stays within nodes.length, so the undefined arm needs a sparse array no caller builds. */
+    if (n === undefined) continue
+    if (n.kind === 'assistant' || n.kind === 'steering') return n.turn
+  }
+  if (partial !== null) return partial.turn
+  if (lastAssistantTurn !== null) return lastAssistantTurn + 1
+  return 1
+}
+
+/** Copy provider usage onto a Message cell when present. */
+function attachUsage(cell: TrajectoryCellProps, usage: UsageLike | undefined): void {
+  if (usage === undefined) return
+  if (usage.inputTokens !== undefined) cell.input = usage.inputTokens
+  if (usage.outputTokens !== undefined) cell.output = usage.outputTokens
+  if (usage.reasoningTokens !== undefined) cell.think = usage.reasoningTokens
+}
+
+function indexResults(nodes: ConversationSnapshot['nodes']): Map<string, ToolResultNode> {
+  const map = new Map<string, ToolResultNode>()
+  for (const node of nodes) {
+    if (node.kind === 'tool-result') map.set(node.callId, node)
+  }
+  return map
+}
+
+function callEmittedInAssistant(nodes: ConversationSnapshot['nodes'], callId: string): boolean {
+  for (const node of nodes) {
+    if (node.kind !== 'assistant') continue
+    if (node.blocks.some(b => b.kind === 'tool-call' && b.callId === callId)) return true
+  }
+  return false
+}
+
+function collectCallIds(
+  turns: Map<number, { message: LaidCell[]; steps: Map<number, LaidCell[]> }>,
+): Set<string> {
+  const ids = new Set<string>()
+  for (const entry of turns.values()) {
+    for (const laid of entry.message) {
+      if (laid.callId !== undefined) ids.add(laid.callId)
+    }
+    for (const list of entry.steps.values()) {
+      for (const laid of list) {
+        if (laid.callId !== undefined) ids.add(laid.callId)
+      }
+    }
+  }
+  return ids
+}
+
+function summarizeCall(name: string, argsRaw: string): string {
+  const args = argsRaw.replace(/\s+/g, ' ').trim()
+  if (args === '') return name
+  const clipped = args.length > 72 ? `${args.slice(0, 71)}…` : args
+  return `${name} · ${clipped}`
+}
+
+function summarizeResult(node: ToolResultNode): string {
+  if (node.isError) {
+    return node.error?.code ?? 'error'
+  }
+  for (const block of node.content) {
+    if (block.type === 'text' && typeof block.text === 'string' && block.text !== '') {
+      return summarizeText(block.text)
+    }
+  }
+  return node.call?.name ?? node.callId
+}
+
+function summarizeContent(content: readonly { type: string; text?: string }[]): string {
+  for (const block of content) {
+    if (block.type === 'text' && typeof block.text === 'string') return summarizeText(block.text)
+  }
+  return ''
+}
+
+function summarizeText(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}

packages/client/ui-trajectory/src/client/views.module.css

@@ -1,25 +1,34 @@
+/* Full-bleed scroll host so Turn sticky bars can paint edge-to-edge;
+ * cell content width is capped on the turn body (max 880). */
 .root {
-  padding: 16px;
   overflow-y: auto;
+  height: 100%;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
   color: var(--dsw-alias-label-primary);
-  font-size: 13px;
+  background: var(--dsw-specific-sidebar-fill);
 }
 
 .empty {
+  padding: 16px;
   color: var(--dsw-alias-label-tertiary);
+  font: var(--dsw-font-xs-13);
 }
 
+/* Waterfall placeholder rows (shared module). */
 .row {
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 4px 0;
+  padding: 4px 16px;
 }
 
 .turnTag {
   flex: none;
   width: 64px;
   color: var(--dsw-alias-label-secondary);
+  font: var(--dsw-font-xs-13);
 }
 
 .bar {
@@ -29,9 +38,10 @@
 }
 
 .barCalls {
-  background: var(--dsw-alias-brand-primary);
+  background: var(--dsw-alias-brand-primary-new-colorprimary-new-color);
 }
 
 .meta {
   color: var(--dsw-alias-label-caption);
+  font: var(--dsw-font-xs-13);
 }

packages/client/ui-trajectory/tests/cell.spec.tsx

@@ -0,0 +1,87 @@
+// @vitest-environment jsdom
+/**
+ * TrajectoryCell presentation: kind tags, ellipsis-hosting text, Message
+ * metric columns, own-duration formatting, and selected ring.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import {
+  formatElapsedSeconds,
+  TrajectoryCell,
+  type TrajectoryCellKind,
+} from '../src/client/TrajectoryCell.tsx'
+
+afterEach(cleanup)
+
+describe('formatElapsedSeconds', () => {
+  it('formats known durations and uses an em dash when absent', () => {
+    expect(formatElapsedSeconds(null)).toBe('—')
+    expect(formatElapsedSeconds(235)).toBe('+235s')
+    expect(formatElapsedSeconds(235.0)).toBe('+235s')
+    expect(formatElapsedSeconds(235.2)).toBe('+235.2s')
+    expect(formatElapsedSeconds(235.25)).toBe('+235.3s')
+    expect(formatElapsedSeconds(0)).toBe('+0s')
+    expect(formatElapsedSeconds(Number.NaN)).toBe('—')
+  })
+})
+
+describe('TrajectoryCell', () => {
+  it('renders index, kind tag, text, and time for a Tool row', () => {
+    render(
+      <TrajectoryCell
+        index={6}
+        kind="tool"
+        text="bash · Read src/index.ts"
+        timeSeconds={5}
+      />,
+    )
+    expect(screen.getByText('#6')).toBeTruthy()
+    expect(screen.getByText('Tool')).toBeTruthy()
+    expect(screen.getByText('bash · Read src/index.ts')).toBeTruthy()
+    expect(screen.getByText('+5s')).toBeTruthy()
+  })
+
+  it('Message rows expose Input / Output / Think metric columns before time', () => {
+    const { container } = render(
+      <TrajectoryCell
+        index={3}
+        kind="message"
+        text="Let me now read the actual source files to understa..."
+        timeSeconds={235.2}
+        input={136}
+        output={381}
+        think={155}
+      />,
+    )
+    expect(screen.getByText('Message')).toBeTruthy()
+    expect(screen.getByText('136')).toBeTruthy()
+    expect(screen.getByText('381')).toBeTruthy()
+    expect(screen.getByText('155')).toBeTruthy()
+    expect(screen.getByText('+235.2s')).toBeTruthy()
+    const texts = [...container.querySelectorAll('span')].map((el) => el.textContent)
+    expect(texts.indexOf('136')).toBeLessThan(texts.indexOf('381'))
+    expect(texts.indexOf('381')).toBeLessThan(texts.indexOf('155'))
+    expect(texts.indexOf('155')).toBeLessThan(texts.indexOf('+235.2s'))
+  })
+
+  it('selected marks the row for the brand-primary inset ring', () => {
+    const { container } = render(
+      <TrajectoryCell index={15} kind="message" text="pictur..." timeSeconds={123.6} selected />,
+    )
+    expect(container.firstElementChild?.getAttribute('data-selected')).toBe('true')
+  })
+
+  it.each([
+    ['user', 'User'],
+    ['tool', 'Tool'],
+  ] as const)('kind %s shows the %s tag and no metric columns', (kind: TrajectoryCellKind, label: string) => {
+    const { container } = render(
+      <TrajectoryCell index={1} kind={kind} text="summary" timeSeconds={kind === 'user' ? 0 : null} input={1} output={2} think={3} />,
+    )
+    expect(screen.getByText(label)).toBeTruthy()
+    expect(container.querySelector('[data-kind]')?.getAttribute('data-kind')).toBe(kind)
+    expect(screen.queryByText('1')).toBeNull()
+    expect(screen.queryByText('2')).toBeNull()
+    expect(screen.queryByText('3')).toBeNull()
+  })
+})

packages/client/ui-trajectory/tests/layout.spec.tsx

@@ -0,0 +1,206 @@
+// @vitest-environment jsdom
+/**
+ * Trajectory turn chrome and layout fold: expand blocks, usage on Message,
+ * tool own-duration, group wall-span descriptions, in-flight rows.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import type { ConversationSnapshot } from '@deepseek-ai/dsh-client-runtime/client'
+import { TrajectoryGroupHeader } from '../src/client/TrajectoryGroupHeader.tsx'
+import { TrajectoryTurn } from '../src/client/TrajectoryTurn.tsx'
+import { TrajectoryTurnHeader } from '../src/client/TrajectoryTurnHeader.tsx'
+import { deriveTrajectoryLayout } from '../src/client/layout.ts'
+
+afterEach(cleanup)
+
+describe('TrajectoryTurnHeader', () => {
+  it('renders Turn N and the four metric column labels', () => {
+    render(<TrajectoryTurnHeader turn={1} />)
+    expect(screen.getByText('Turn 1')).toBeTruthy()
+    expect(screen.getByText('Input')).toBeTruthy()
+    expect(screen.getByText('Output')).toBeTruthy()
+    expect(screen.getByText('Think')).toBeTruthy()
+    expect(screen.getByText('Time')).toBeTruthy()
+  })
+})
+
+describe('TrajectoryGroupHeader', () => {
+  it('renders title and optional description', () => {
+    render(<TrajectoryGroupHeader title="Step 1" description="2.2s skill" />)
+    expect(screen.getByText('Step 1')).toBeTruthy()
+    expect(screen.getByText('2.2s skill')).toBeTruthy()
+  })
+
+  it('omits the description node when absent', () => {
+    const { container } = render(<TrajectoryGroupHeader title="Message" />)
+    expect(screen.getByText('Message')).toBeTruthy()
+    expect(container.querySelectorAll('span')).toHaveLength(1)
+  })
+})
+
+describe('TrajectoryTurn', () => {
+  it('wraps a sticky header and body children', () => {
+    render(
+      <TrajectoryTurn turn={3}>
+        <TrajectoryGroupHeader title="Message" description="49s" />
+      </TrajectoryTurn>,
+    )
+    expect(screen.getByText('Turn 3')).toBeTruthy()
+    expect(screen.getByText('Message')).toBeTruthy()
+    expect(screen.getByText('49s')).toBeTruthy()
+  })
+})
+
+describe('deriveTrajectoryLayout', () => {
+  it('expands assistant blocks, hangs usage on Message, and folds call+result into Tool', () => {
+    const nodes = [
+      { kind: 'user', seq: 1, time: 1_000, content: [{ type: 'text', text: 'hello' }], source: null },
+      {
+        kind: 'assistant', seq: 2, time: 6_000, turn: 1, step: 1,
+        blocks: [
+          { kind: 'reasoning', text: 'thinking…' },
+          { kind: 'text', text: 'I will run bash' },
+          { kind: 'tool-call', callId: 'c1', name: 'bash', argsRaw: '{"command":"ls"}' },
+        ],
+        usage: { inputTokens: 10, outputTokens: 20, reasoningTokens: 5 },
+      },
+      {
+        kind: 'tool-result', seq: 3, time: 7_500, callId: 'c1',
+        call: { name: 'bash', argsRaw: '{"command":"ls"}' }, callTime: 6_200,
+        content: [{ type: 'text', text: 'a.txt' }], isError: false, callView: null, resultView: null,
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    expect(turns).toHaveLength(1)
+    expect(turns[0]?.turn).toBe(1)
+    const kinds = turns[0]?.groups.flatMap((g) => g.cells.map((c) => c.kind))
+    expect(kinds).toEqual(['user', 'message', 'tool'])
+    const message = turns[0]?.groups.flatMap((g) => g.cells).find((c) => c.kind === 'message')
+    expect(message).toMatchObject({
+      input: 10, output: 20, think: 5, timeSeconds: 5,
+    })
+    const tool = turns[0]?.groups.flatMap((g) => g.cells).find((c) => c.kind === 'tool')
+    expect(tool?.text).toBe('bash · {"command":"ls"}')
+    expect(tool?.timeSeconds).toBe(1.3)
+  })
+
+  it('adds runningCalls not already present and leaves their time blank', () => {
+    const turns = deriveTrajectoryLayout({
+      nodes: [] as unknown as ConversationSnapshot['nodes'],
+      partial: null,
+      runningCalls: [{
+        callId: 'r1', name: 'bash', argsRaw: '{"command":"pwd"}',
+        turn: 1, step: 2, time: 9_000, callView: null,
+      }],
+    })
+    expect(turns[0]?.groups.map((g) => g.title)).toEqual(['Step 2'])
+    expect(turns[0]?.groups[0]?.cells[0]).toMatchObject({
+      kind: 'tool', text: 'bash · {"command":"pwd"}', timeSeconds: null,
+    })
+  })
+
+  it('omits duration when node times are missing instead of rendering NaN', () => {
+    const nodes = [
+      { kind: 'user', seq: 1, content: [{ type: 'text', text: 'hi' }], source: null },
+      {
+        kind: 'assistant', seq: 2, turn: 1, step: 1,
+        blocks: [
+          { kind: 'reasoning', text: '…' },
+          { kind: 'text', text: 'ok' },
+        ],
+        usage: { inputTokens: 1, outputTokens: 2, reasoningTokens: 3 },
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    const cells = turns[0]?.groups.flatMap((g) => g.cells) ?? []
+    expect(cells.find((c) => c.kind === 'message')?.timeSeconds).toBeNull()
+    expect(turns[0]?.groups.find((g) => g.title === 'Step 1')?.description).toBeUndefined()
+  })
+
+  it('builds a wall-span step description with a tool histogram', () => {
+    const nodes = [
+      {
+        kind: 'assistant', seq: 1, time: 1_000, turn: 1, step: 1,
+        blocks: [
+          { kind: 'tool-call', callId: 'a', name: 'bash', argsRaw: '{}' },
+          { kind: 'tool-call', callId: 'b', name: 'bash', argsRaw: '{}' },
+        ],
+      },
+      {
+        kind: 'tool-result', seq: 2, time: 2_500, callId: 'a',
+        call: { name: 'bash', argsRaw: '{}' }, callTime: 1_100,
+        content: [], isError: false, callView: null, resultView: null,
+      },
+      {
+        kind: 'tool-result', seq: 3, time: 4_000, callId: 'b',
+        call: { name: 'bash', argsRaw: '{}' }, callTime: 2_600,
+        content: [], isError: false, callView: null, resultView: null,
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    expect(turns[0]?.groups[0]?.description).toBe('2.9s bash×2')
+  })
+
+  it('assigns each user message to its enclosing turn instead of pooling into Turn 1', () => {
+    const nodes = [
+      { kind: 'user', seq: 1, time: 1_000, content: [{ type: 'text', text: 'first' }], source: null },
+      {
+        kind: 'assistant', seq: 2, time: 2_000, turn: 1, step: 0,
+        blocks: [{ kind: 'text', text: 'ok1' }],
+      },
+      { kind: 'user', seq: 3, time: 3_000, content: [{ type: 'text', text: 'second' }], source: null },
+      {
+        kind: 'assistant', seq: 4, time: 4_000, turn: 2, step: 0,
+        blocks: [{ kind: 'text', text: 'ok2' }],
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    expect(turns.map((t) => t.turn)).toEqual([1, 2])
+    expect(turns[0]?.groups.flatMap((g) => g.cells.map((c) => c.text))).toEqual(['first', 'ok1'])
+    expect(turns[1]?.groups.flatMap((g) => g.cells.map((c) => c.text))).toEqual(['second', 'ok2'])
+  })
+
+  it('keeps usage on the fallback Message row when assistant has no text block', () => {
+    const nodes = [
+      {
+        kind: 'assistant', seq: 1, time: 5_000, turn: 1, step: 0,
+        blocks: [{ kind: 'reasoning', text: '…' }],
+        usage: { inputTokens: 11, outputTokens: 22, reasoningTokens: 3 },
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    const message = turns[0]?.groups.flatMap((g) => g.cells).find((c) => c.kind === 'message')
+    expect(message).toMatchObject({
+      text: '', input: 11, output: 22, think: 3,
+    })
+  })
+
+  it('advances the duration cursor over context nodes', () => {
+    const nodes = [
+      { kind: 'user', seq: 1, time: 1_000, content: [{ type: 'text', text: 'hi' }], source: null },
+      {
+        kind: 'assistant', seq: 2, time: 2_000, turn: 1, step: 1,
+        blocks: [{ kind: 'tool-call', callId: 'c1', name: 'bash', argsRaw: '{}' }],
+      },
+      {
+        kind: 'tool-result', seq: 3, time: 3_000, callId: 'c1',
+        call: { name: 'bash', argsRaw: '{}' }, callTime: 2_100,
+        content: [], isError: false, callView: null, resultView: null,
+      },
+      {
+        kind: 'context', seq: 4, time: 9_000,
+        content: [{ type: 'text', text: 'extra' }], source: null,
+      },
+      {
+        kind: 'assistant', seq: 5, time: 10_000, turn: 1, step: 0,
+        blocks: [{ kind: 'text', text: 'done' }],
+      },
+    ] as unknown as ConversationSnapshot['nodes']
+    const turns = deriveTrajectoryLayout({ nodes, partial: null, runningCalls: [] })
+    const message = turns[0]?.groups
+      .flatMap((g) => g.cells)
+      .find((c) => c.kind === 'message' && c.text === 'done')
+    // From context at 9s, not from the earlier user/tool surfaces.
+    expect(message?.timeSeconds).toBe(1)
+  })
+})

packages/client/ui-trajectory/tests/views.spec.tsx

@@ -3,9 +3,9 @@
  * View registration acceptance on the real framework stack: the plugin fiber
  * registers trajectory/waterfall into a real SlotsService view ring, tabs
  * switch inside ConversationRoot (renderSlot share driven by the same tab
- * projection apply uses) without collapsing chat, the span stats header
- * renders inside both view bodies, and fiber disposal removes both tabs.
- * Span derivation edge cases ride along.
+ * projection apply uses) without collapsing chat, trajectory renders the
+ * turn-list chrome (no span stats bar), waterfall keeps in-body stats, and
+ * fiber disposal removes both tabs. Span derivation edge cases ride along.
  */
 import { Context } from 'cordis'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
@@ -36,19 +36,26 @@ afterEach(cleanup)
 // The chat store persists under its declared key; clear so one case's active
 // view cannot rehydrate into the next.
 beforeEach(() => {
-  localStorage.clear()
+  // Node 22+ exposes an experimental localStorage global that is undefined
+  // without --localstorage-file; only clear when a real Storage is present.
+  if (typeof localStorage !== 'undefined') localStorage.clear()
 })
 
 /** Node fixture: user prologue, two turns, one tool result inside turn 1. */
 const NODES = [
-  { kind: 'user', seq: 1, content: [], source: null },
-  { kind: 'assistant', seq: 2, turn: 1, step: 1, blocks: [] },
-  { kind: 'tool-result', seq: 3, callId: 'c1', call: null, content: [], isError: false, callView: null, resultView: null },
-  { kind: 'assistant', seq: 4, turn: 2, step: 1, blocks: [] },
+  { kind: 'user', seq: 1, time: 1_000, content: [], source: null },
+  { kind: 'assistant', seq: 2, time: 2_000, turn: 1, step: 1, blocks: [] },
+  {
+    kind: 'tool-result', seq: 3, time: 3_000, callId: 'c1', call: null, callTime: null,
+    content: [], isError: false, callView: null, resultView: null,
+  },
+  { kind: 'assistant', seq: 4, time: 4_000, turn: 2, step: 1, blocks: [] },
 ] as unknown as ConversationSnapshot['nodes']
 
 function fakeSession(nodes: ConversationSnapshot['nodes']) {
-  const store = createSnapshotStore<{ nodes: ConversationSnapshot['nodes'] }>({ nodes })
+  const store = createSnapshotStore({
+    nodes, partial: null, runningCalls: [] as ConversationSnapshot['runningCalls'],
+  })
   return { store, useSession: bindSnapshotSelector(store) as unknown as UseSession<ConversationSnapshot> }
 }
 
@@ -99,8 +106,9 @@ function tabsOf(slots: SlotsService): ViewTab[] {
 
 /** Mount ConversationRoot over the ring ledger with an outlet-faithful renderSlot. */
 function mount(slots: SlotsService, nodes: ConversationSnapshot['nodes'] = NODES) {
-  const sessionSnapshot = createSnapshotStore<{ running: boolean; removed: boolean; promptError: null; nodes: ConversationSnapshot['nodes'] }>({
+  const sessionSnapshot = createSnapshotStore({
     running: false, removed: false, promptError: null, nodes,
+    partial: null, runningCalls: [] as ConversationSnapshot['runningCalls'],
   })
   const useSession = bindSnapshotSelector(sessionSnapshot) as unknown as UseSession<ConversationSnapshot>
   const chat = createChatStore().create()
@@ -162,17 +170,20 @@ describe('plugin registration', () => {
 })
 
 describe('tab switching in ConversationRoot', () => {
-  it('renders all three tabs, defaults to chat, and switches to trajectory with its header stats', async () => {
+  it('renders all three tabs, defaults to chat, and switches to trajectory without stats chrome', async () => {
     const b = await bench()
     mount(b.slots)
     expect(screen.getByTestId('chat-body')).toBeTruthy()
     expect(screen.getAllByRole('tab').map((t) => t.textContent)).toEqual(['Chat', 'Trajectory', 'Waterfall'])
 
     fireEvent.click(screen.getByRole('tab', { name: 'Trajectory' }))
-    // In-body header stats over NODES: turns 0/1/2, 2 assistant steps, 1 tool call.
-    expect(screen.getByText('3 turns · 2 steps · 1 tool calls')).toBeTruthy()
-    expect(screen.getByText('turn 0')).toBeTruthy()
-    expect(screen.getByText('1 steps · 1 calls · 2 nodes')).toBeTruthy()
+    // Trajectory no longer mounts the span stats bar; the turn-list chrome owns the body.
+    expect(screen.queryByText(/turns ·/)).toBeNull()
+    expect(screen.getByText('Turn 1')).toBeTruthy()
+    expect(screen.getByText('Turn 2')).toBeTruthy()
+    expect(screen.getAllByText('Message').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Step 1').length).toBeGreaterThan(0)
+    expect(screen.getAllByText('Input').length).toBeGreaterThan(0)
     expect(screen.queryByTestId('chat-body')).toBeNull()
   })
 

packages/cordis/tool-cordis/src/api-catalog.ts

@@ -512,6 +512,10 @@ export const SERVICE_API: readonly ServiceApiEntry[] = [
         signature: 'listSessions(): Promise<SessionRecord[]>',
         jsDoc: '/**\n * List the complete logical corpus using live-preferred records.\n * @returns deterministic newest-first cloned session records.\n */',
       },
+      {
+        signature: 'async readSession(sessionId: SessionId): Promise<SessionLogSnapshot>',
+        jsDoc: '/**\n * Read and replay-validate one complete logical session log without making it live.\n * @param sessionId - live or persisted session id to read.\n * @returns cloned header and complete raw event log from one observation.\n * @throws when persistence, header compatibility, or replay validation fails.\n */',
+      },
       {
         signature: 'async filterSessions(filters: readonly SessionResultFilter[]): Promise<SessionRecord[]>',
         jsDoc: '/**\n * Filter the complete logical corpus with provider-independent predicates.\n * @param filters - ANDed session metadata and availability clauses.\n * @returns matching cloned records in deterministic newest-first order.\n */',
@@ -1851,6 +1855,10 @@ export const TYPE_API: readonly TypeApiEntry[] = [
     name: 'SessionLocation',
     declaration: 'export interface SessionLocation {\n    readonly kind: string;\n    readonly path: string;\n}',
   },
+  {
+    name: 'SessionLogSnapshot',
+    declaration: 'export interface SessionLogSnapshot {\n    session: SessionHeader;\n    events: SessionEvent[];\n}',
+  },
   {
     name: 'SessionPersistenceRevision',
     declaration: 'export type SessionPersistenceRevision = Branded<\'SessionPersistenceRevision\'>;',

packages/examples/tui-demo/README.md

@@ -41,10 +41,11 @@ Swappable LLM, bash, filesystem, and other capability providers remain in the le
 | `persistenceCompression` | `'zstd'` | JSONL artifact encoding (`'zstd'` or raw `'none'`) |
 | `sessionReferences` | service defaults | Cross-session candidate and snapshot limits routed to `dsh-session-reference` |
 | `welcome` | `ready.` | TUI subtitle |
+| `resumeCommand` | — | Exit and no-host fallback command template; the selector itself uses session query and host handoff |
 | `ui` | owner defaults | TUI presentation settings such as reasoning, color, and card height |
 | `resumeSessionId` | — | Exact persisted session to resume |
 
-Fresh runs mint a `main-session-<uuid>` session id and pass it to both the TUI and configured agent. Resumed runs bind both components to `resumeSessionId`. The TUI mounts before the spine so it can render a matching config-start failure instead of leaving a blank terminal.
+Fresh runs mint a `main-session-<uuid>` session id and pass it to both the TUI and configured agent. Resumed runs bind both components to `resumeSessionId`. The TUI mounts before the spine so it can render a matching config-start failure instead of leaving a blank terminal. The app composes persistence and session query for `/resume`; an embedding host may additionally provide `tuiResumeHost` for in-place process handoff.
 
 ## The bin
 

packages/host/runtime/src/api-proxy.ts

@@ -4,7 +4,7 @@
  */
 
 import { randomUUID } from 'node:crypto'
-import { stat } from 'node:fs/promises'
+import { mkdir, stat } from 'node:fs/promises'
 import type { Context } from 'cordis'
 import type { Agent, AgentStatus } from '@deepseek-ai/dsh-agent'
 import { AttachmentError } from '@deepseek-ai/dsh-attachment-local'
@@ -474,8 +474,18 @@ export function createApiProxy(ctx: Context, defaults: ApiProxyDefaults): ApiPro
         const sessionId = `session-${randomUUID()}` as SessionId
         // A session's cwd is its project path. When the creator does not choose
         // one, the default project is the host-level default (the host process
-        // working directory unless boot overrides it).
+        // working directory unless boot overrides it). Ensure the directory
+        // exists so Create-workspace and typed paths land on a real folder.
         const cwd = request.payload.cwd ?? defaults.cwd
+        try {
+          await mkdir(cwd, { recursive: true })
+        } catch (error: unknown) {
+          return err(request, {
+            code: 'internal',
+            message: `failed to ensure project directory "${cwd}": ${String(error)}`,
+            details: {},
+          })
+        }
         const handle = await ctx.agents.create({ sessionId, agentOptions, meta: { cwd } })
         return ok(request, { sessionId: handle.agent.id })
       },

packages/host/runtime/tests/host-runtime.spec.ts

@@ -286,6 +286,29 @@ describe('sessions.create / list', () => {
     expect(first?.running).toBe(false)
     expect(first?.parentSessionId).toBeUndefined()
   })
+
+  it('ensures a missing project directory before minting the session', async () => {
+    const { api } = await boot()
+    const root = mkdtempSync(join(tmpdir(), 'dsh-host-create-cwd-'))
+    const cwd = join(root, 'nested', 'workspace')
+    expect(existsSync(cwd)).toBe(false)
+    const { sessionId } = expectOk(await api.sessions.create(request({ cwd })))
+    expect(existsSync(cwd)).toBe(true)
+    const { items } = expectOk(await api.sessions.list(request({})))
+    expect(items.find(item => item.sessionId === sessionId)?.cwd).toBe(cwd)
+  })
+
+  it('fails loud when the project directory cannot be created', async () => {
+    const { api } = await boot()
+    const root = mkdtempSync(join(tmpdir(), 'dsh-host-create-cwd-fail-'))
+    const blocker = join(root, 'file-not-dir')
+    writeFileSync(blocker, 'x')
+    const response = await api.sessions.create(request({ cwd: join(blocker, 'child') }))
+    expect(response.result.ok).toBe(false)
+    if (response.result.ok) throw new Error('expected mkdir failure')
+    expect(response.result.error.code).toBe('internal')
+    expect(response.result.error.message).toMatch(/failed to ensure project directory/)
+  })
 })
 
 describe('sessions.prompt / cancel', () => {

packages/session-query/session-query/README.md

@@ -5,6 +5,7 @@
 ## Reads
 
 - `listSessions()` reads current persistence metadata, merges live records with live precedence, and returns cloned records in deterministic newest-first order.
+- `readSession(sessionId)` returns one complete detached raw log after the same core replay validation used by resume; it never enters the session into the live store.
 - `filterSessions(filters)` applies provider-independent session metadata and availability predicates to that same cloned logical corpus.
 - `filterEvents(sessionId, filters)` extracts first-party semantic documents and applies provider-independent metadata and literal-text predicates in ascending seq order.
 - `readTitle(sessionId)` loads one live-preferred or persisted log and folds its latest `session/title` event into a `SessionTitleSnapshot`; it returns `undefined` when the known session has no title.

packages/session-query/session-query/src/index.ts

@@ -5,7 +5,7 @@
  */
 
 import { Context, Service } from 'cordis'
-import type { SessionId } from '@deepseek-ai/dsh-session'
+import { Session, type SessionId } from '@deepseek-ai/dsh-session'
 import { foldSessionTitle } from '@deepseek-ai/dsh-session-title'
 import type { SessionTitleSnapshot } from '@deepseek-ai/dsh-session-title'
 import type {
@@ -19,6 +19,7 @@ import type {
   SessionEventTraceRequest,
   SessionEventWindow,
   SessionLineageTrace,
+  SessionLogSnapshot,
   SessionRecord,
   SessionResultFilter,
   SessionSearchExecContext,
@@ -118,6 +119,21 @@ export abstract class SessionQueryService extends Service {
     return this._corpus.listSessions()
   }
 
+  /**
+   * Read and replay-validate one complete logical session log without making it live.
+   * @param sessionId - live or persisted session id to read.
+   * @returns cloned header and complete raw event log from one observation.
+   * @throws when persistence, header compatibility, or replay validation fails.
+   */
+  async readSession(sessionId: SessionId): Promise<SessionLogSnapshot> {
+    const loaded = await this._corpus.load(sessionId)
+    new Session(sessionId, loaded.events, loaded.header)
+    return {
+      session: structuredClone(loaded.header),
+      events: loaded.events.map(event => structuredClone(event)),
+    }
+  }
+
   /**
    * Filter the complete logical corpus with provider-independent predicates.
    * @param filters - ANDed session metadata and availability clauses.

packages/session-query/session-query/src/types.ts

@@ -39,6 +39,14 @@ export interface SessionSurfaceSnapshot {
   events: SurfaceEvent[]
 }
 
+/** One validated detached observation of a logical session's complete raw log. */
+export interface SessionLogSnapshot {
+  /** Cloned session header selected from the same observation as `events`. */
+  session: SessionHeader
+  /** Cloned contiguous raw events after persistence repair and replay validation. */
+  events: SessionEvent[]
+}
+
 /** Lightweight metadata for one event within a logical session. */
 export interface SessionEventRecord {
   /** Session that owns the event. */

packages/session-query/session-query/tests/session-query.spec.ts

@@ -105,6 +105,25 @@ function rejectUnknown<T>(reason: unknown): Promise<T> {
 }
 
 describe('session-query exact reads', () => {
+  it('returns a detached replay-valid full log and rejects a corrupt persisted seed', async () => {
+    const valid = header('valid-log', 2)
+    const corrupt = header('corrupt-log', 1)
+    const validEvents = eventLog('valid')
+    const corruptEvents = [{ ...eventLog('bad')[0]!, seq: 1 }]
+    TestPersistence.reset([
+      { meta: valid, events: validEvents },
+      { meta: corrupt, events: corruptEvents },
+    ])
+    const ctx = await liveContext()
+    await ctx.plugin(TestPersistence)
+
+    const snapshot = await ctx.sessionQuery.readSession(valid.id)
+    expect(snapshot).toEqual({ session: valid, events: validEvents })
+    Object.assign(snapshot.events[0]!, { time: 999 })
+    expect(TestPersistence.entries.get(valid.id)?.events[0]?.time).toBe(10)
+    await expect(ctx.sessionQuery.readSession(corrupt.id)).rejects.toThrow('seed event at index 0 has seq 1')
+  })
+
   it('prefers a live owner that attaches while its persisted prefix is inspected', async () => {
     const shared = header('attach-during-inspect', 2)
     TestPersistence.reset([{ meta: shared, events: eventLog('persisted') }])

packages/ui/app-boot/README.md

@@ -6,11 +6,12 @@ Shared boot glue for the app bins ([`dsh-tui-demo`](../../examples/tui-demo/READ
 |---|---|
 | `resolveConfigPath(path, snapshotMode, cwd?)` | Absolute config path; `snapshotMode === 'replay'` swaps a `cordis.yml`/`.yaml` basename for its sibling `cordis.snapshot.yml` |
 | `parseResumeArg(argv)` | Split the `--resume <id>` / `--resume=<id>` flag out of the arguments, returning `{ resumeSessionId, rest }`; a valueless, empty, or repeated flag throws so a mistyped resume fails loud instead of silently starting fresh |
+| `replaceResumeArg(argv, sessionId)` | Remove an existing resume flag and append one canonical `--resume <sessionId>` pair while preserving positional arguments |
 | `loadEnv(binName, dir?, warn?)` | Load the gitignored `.env` (Node `process.loadEnvFile`); absent file is fine, an unloadable one warns a single labelled line (default: stderr) |
 | `installFailLoud(binName, proc?)` | Turn a post-`boot()` unhandled Loader rejection into one labelled stderr line + `exit(1)`; returns the uninstaller (for tests) |
 | `assertEntriesLoaded(ctx, binName)` | Throw when a settled tree holds an enabled entry with no fiber (a plugin module that failed to import) |
 | `loadPersonalPatches(binName, dir?)` | Parse the optional `config.yaml` in the Harness home (default [`resolveDshHome()`](../../util/paths/README.md): `$DSH_HOME`, else `~/.dsh`) — a top-level YAML array of include `PatchOptions` (id-targeted config overrides, `insert` lists, `!!js` allowed); absent file → `undefined`, an unreadable/unparsable/non-array file throws |
-| `boot(binName, absoluteConfigPath, patches?)` | Mount the Loader, mount the statically imported include plugin as the `cordis:include` builtin (so the config may live outside `node_modules` reach), include the config by absolute `file://` URL with the optional overlay patches, await the whole tree, assert entries loaded, return the root context |
+| `boot(binName, absoluteConfigPath, patches?, prepare?)` | Create the root context, run optional host preparation before plugins mount, then mount the Loader/include tree, await it, assert entries loaded, and return the root context |
 | `addHarnessSourceSection(ctx, sourceRoot)` | Add a global `harness:source` prompt section (ordered just after the harness identity, before the persona) telling the agent the on-disk path to its own source checkout; a no-op returning `undefined` when the booted tree has no `systemPrompt` service. The section is registered against that service's fiber, so a dev HMR reload of the system prompt drops it until the next boot |
 | `HARNESS_SOURCE_SECTION` | The `'harness:source'` section name `addHarnessSourceSection` registers under |
 

packages/ui/app-boot/src/index.ts

@@ -80,6 +80,18 @@ export function parseResumeArg(
   return { resumeSessionId, rest }
 }
 
+/**
+ * Replace any existing resume flag with one canonical trailing `--resume <id>` pair.
+ * @param argv - current arguments after command dispatch.
+ * @param sessionId - selected session id.
+ * @returns flag-normalized arguments for a process replacement.
+ */
+export function replaceResumeArg(argv: readonly string[], sessionId: string): string[] {
+  if (sessionId.length === 0) throw new Error(`${RESUME_FLAG} requires a non-empty session id`)
+  const { rest } = parseResumeArg(argv)
+  return [...rest, RESUME_FLAG, sessionId]
+}
+
 /**
  * Load the optional gitignored `.env` from `dir`. Missing files fall back to the
  * ambient environment; other read failures are reported through `warn`.
@@ -216,12 +228,17 @@ export function assertEntriesLoaded(ctx: Context, binName: string): void {
  * (see {@link resolveConfigPath}).
  * @param patches - optional overlay patches applied over the included tree
  * (see {@link loadPersonalPatches}); an empty list mounts none.
+ * @param prepare - optional host setup run against the root context before any Loader entry mounts.
  * @returns the root context once every entry has started.
  */
 export async function boot(
-  binName: string, absoluteConfigPath: string, patches?: PatchOptions[],
+  binName: string,
+  absoluteConfigPath: string,
+  patches?: PatchOptions[],
+  prepare?: (ctx: Context) => Promise<void> | void,
 ): Promise<Context> {
   const ctx = new Context()
+  await prepare?.(ctx)
   ctx.baseUrl = pathToFileURL(dirname(absoluteConfigPath)).href + '/'
   await ctx.plugin(Loader)
   ctx.loader.builtins.include = Include

packages/ui/app-boot/tests/app-boot.spec.ts

@@ -6,7 +6,7 @@ import { Context } from 'cordis'
 import SystemPrompt, { renderPrompt } from '@deepseek-ai/dsh-system-prompt'
 import {
   addHarnessSourceSection, assertEntriesLoaded, boot, HARNESS_SOURCE_SECTION,
-  installFailLoud, loadEnv, parseResumeArg, resolveConfigPath, type FailLoudProcess,
+  installFailLoud, loadEnv, parseResumeArg, replaceResumeArg, resolveConfigPath, type FailLoudProcess,
 } from '../src/index.ts'
 
 const NAME = 'dsh-test-bin'
@@ -55,6 +55,15 @@ describe('parseResumeArg', () => {
   })
 })
 
+describe('replaceResumeArg', () => {
+  it('keeps positional arguments and replaces either existing flag form', () => {
+    expect(replaceResumeArg(['app.yml'], 'next')).toEqual(['app.yml', '--resume', 'next'])
+    expect(replaceResumeArg(['--resume', 'old', 'app.yml'], 'next')).toEqual(['app.yml', '--resume', 'next'])
+    expect(replaceResumeArg(['app.yml', '--resume=old'], 'next')).toEqual(['app.yml', '--resume', 'next'])
+    expect(() => replaceResumeArg([], '')).toThrow('non-empty session id')
+  })
+})
+
 describe('loadEnv', () => {
   it('loads variables from .env in the given dir', () => {
     const dir = tmp()
@@ -196,6 +205,19 @@ describe('boot', () => {
     }
   })
 
+  it('runs host preparation before the Loader tree mounts', async () => {
+    const dir = tmp()
+    writeFileSync(join(dir, 'noop.mjs'), 'export const name = "noop"\nexport function apply() {}\n')
+    writeFileSync(join(dir, 'cordis.yml'), '- id: noop\n  name: ./noop.mjs\n')
+    const prepared: Context[] = []
+    const ctx = await boot(NAME, join(dir, 'cordis.yml'), undefined, (hostCtx) => { prepared.push(hostCtx) })
+    try {
+      expect(prepared).toEqual([ctx])
+    } finally {
+      await ctx.fiber.dispose()
+    }
+  })
+
   it('rejects (never exits 0 half-empty) when a config names a plugin that cannot be imported', async () => {
     const dir = tmp()
     writeFileSync(join(dir, 'cordis.yml'), '- id: ghost\n  name: ./missing.mjs\n')

packages/ui/tui/README.md

@@ -30,7 +30,9 @@ The footer sums the session's reported usage as `↑<uncached input> ↓<output>
 
 `/status` adds a point-in-time diagnostics card to the transcript and remains available while the agent runs. It reports the session id, title, working directory, selected provider/model, reasoning-block visibility, agent state, event/turn/step/tool-call counts, exact input/output/cache token buckets, KV-cache hit rate, token-meter context use and capacity, creation time, and latest event time. Missing titles, models, cache input, or context capacity are labeled instead of inferred. The card is terminal-only and does not duplicate the compact footer.
 
-When `resumeCommand` is set and a `sessionPersistence` backend is mounted, exiting prints the resume command for the current session (once it has been persisted, so an abandoned session yields no hint), and `/resume` lists this workspace's persisted sessions newest-first, each with its resume command and a marker on the current one. `{session}` in the template expands to the session id; the TUI only prints commands to copy and never resumes in place.
+`/resume` opens a full-viewport keyboard selector over the current workspace instead of a centered dialog. Its focused search field starts immediately after the search glyph and emits pi-tui's cursor marker, so terminal IME composition remains anchored inside the field. Candidates are sorted by last logged activity and searchable by log-backed title or session id; each row reports current/live/persisted state, last turn outcome, recent provider/model, and durable goal phase when present. Up/Down and Page Up/Page Down navigate, Enter resumes, Escape clears a non-empty search before a second Escape cancels, and Ctrl+C cancels directly. The current session, a session already live in this runtime, an unreadable log, a mismatched cwd, or a session whose logged provider has no current adapter remains visible but disabled. Selection repeats those checks and requires the current agent to be idle before flushing the current session. The TUI then stops the terminal UI and calls the optional host-owned `TuiRuntime.handoffResume`; where `process.execve` is available, the shipped `dsh` host disposes the app and replaces its process. Resume restores the same `SessionId`, transcript, title, todos, and durable goal; goal activation remains disarmed and the TUI asks for human confirmation or `/goal resume`.
+
+`resumeCommand` remains the deployment-owned fallback: exiting prints it only after the current session is durable, and a host without in-place handoff shows the selected session's command. `{session}` expands to the session id. TUI code never executes the template or arbitrary shell text.
 
 ## Config
 
@@ -42,6 +44,7 @@ When `resumeCommand` is set and a `sessionPersistence` backend is mounted, exiti
 | `maxToolOutputLines` | `6` | Output lines retained across a collapsed tool card's head/tail preview |
 | `maxQuestionOptions` | `8` | Visible options in a question panel |
 | `maxModelOptions` | `8` | Visible models in the model selector |
+| `maxResumeOptions` | `8` | Visible sessions in the resume selector |
 | `questionDialogWidth` | `200` | Question-panel width in columns, clamped to the terminal |
 | `questionDialogMaxHeight` | `20` | Question-panel maximum rows |
 | `modelDialogWidth` | `72` | Model-selector width in columns |
@@ -52,7 +55,7 @@ When `resumeCommand` is set and a `sessionPersistence` backend is mounted, exiti
 | `showHardwareCursor` | `false` | Show the hardware cursor at pi-tui's IME marker |
 | `color` | `true` | Apply the built-in ANSI palette (see [Color](#color)) |
 | `title` | `DeepSeek Harness` | Product suffix for the terminal window title. |
-| `resumeCommand` | — | Shell command template for the exit hint and `/resume`, with `{session}` expanded to the session id; unset disables both. Needs a `sessionPersistence` backend |
+| `resumeCommand` | — | Shell command template for the exit hint and hosts without in-place handoff, with `{session}` expanded to the session id |
 
 ```yaml
 - id: terminal
@@ -151,6 +154,7 @@ Append-only; newly visible content follows the reusable request prefix and does
 
 ## Known Limitations and Deferred Work
 
+- **Resume has no cross-process session lock** — the selector rejects sessions known to be live in its own runtime, but another process can resume the same persisted id before or during handoff. Deployments that can run concurrent hosts must coordinate ownership outside the TUI.
 - **One configured session owns the transcript and editor** — questions from other agents can still use the shared overlay provider, but session rendering and prompt input remain bound to `sessionId`.
 - **Images use explicit text markers** — the terminal cannot render inline raster images, so user, assistant, tool-result, and streaming image blocks render as `[image attachment <id>]` instead of disappearing.
 - **Non-TTY operation is intentionally unsupported** — app bundles that need automation must compose a one-shot or server front door (`dsh-cli-demo`, `dsh-acp`) rather than expecting an internal fallback.

packages/ui/tui/package.json

@@ -33,9 +33,11 @@
     "@deepseek-ai/dsh-invariants": "^0.0.1",
     "@deepseek-ai/dsh-llm": "^0.0.1",
     "@deepseek-ai/dsh-llm-retry": "^0.0.1",
+    "@deepseek-ai/dsh-goal": "^0.0.1",
     "@deepseek-ai/dsh-session": "^0.0.1",
     "@deepseek-ai/dsh-session-reference": "^0.0.1",
     "@deepseek-ai/dsh-session-persistence": "^0.0.1",
+    "@deepseek-ai/dsh-session-query": "^0.0.1",
     "@deepseek-ai/dsh-session-title": "^0.0.1",
     "@deepseek-ai/dsh-skill": "^0.0.1",
     "@deepseek-ai/dsh-system-prompt": "^0.0.1",
@@ -48,6 +50,9 @@
     "@deepseek-ai/dsh-session-persistence": {
       "optional": true
     },
+    "@deepseek-ai/dsh-session-query": {
+      "optional": true
+    },
     "@deepseek-ai/dsh-skill": {
       "optional": true
     }
@@ -60,6 +65,7 @@
     "@cordisjs/plugin-loader": "workspace:^",
     "@deepseek-ai/dsh-agent": "workspace:^",
     "@deepseek-ai/dsh-agent-loop": "workspace:^",
+    "@deepseek-ai/dsh-goal": "workspace:^",
     "@deepseek-ai/dsh-commands": "workspace:^",
     "@deepseek-ai/dsh-invariants": "workspace:^",
     "@deepseek-ai/dsh-llm": "workspace:^",

packages/ui/tui/src/index.ts

@@ -66,13 +66,18 @@ import {
   type SessionHeader,
   type TodoItem,
 } from '@deepseek-ai/dsh-session'
+import { foldGoal, type GoalPhase } from '@deepseek-ai/dsh-goal'
 import {
   formatSessionReferenceMention,
   parseSessionReferenceText,
   type SessionReferenceService,
 } from '@deepseek-ai/dsh-session-reference'
 import { foldSessionTitle } from '@deepseek-ai/dsh-session-title'
-// Side-effect type import: declaration-merges the optional `sessionPersistence`
+import type {
+  SessionLogSnapshot,
+  SessionRecord,
+} from '@deepseek-ai/dsh-session-query'
+// Type import also declaration-merges the optional `sessionPersistence`
 // service onto `Context` so `ctx.get('sessionPersistence')` is typed.
 import type {} from '@deepseek-ai/dsh-session-persistence'
 import type { SkillDefinition, SkillResourceBase, SkillService } from '@deepseek-ai/dsh-skill'
@@ -120,9 +125,22 @@ declare module 'cordis' {
   interface Context {
     /** Terminal-only interaction service, available only while a TUI is mounted. */
     tui: TuiExtensionService
+    /** Optional process host that can replace this TUI with a resumed session. */
+    tuiResumeHost: TuiResumeHost
   }
 }
 
+/** Process-lifecycle owner used by the shipped CLI for an atomic resume handoff. */
+export interface TuiResumeHost {
+  /**
+   * Dispose the current app and replace it with a runtime for `sessionId`.
+   * Success does not return. A host may reject before it commits teardown;
+   * after commit it owns fatal reporting and process exit.
+   * @param sessionId - validated persisted session selected by the user.
+   */
+  handoff(sessionId: SessionId): Promise<never>
+}
+
 /**
  * Optional terminal-local interaction service provided by one mounted TUI.
  *
@@ -162,7 +180,7 @@ export {
 } from './file-autocomplete.ts'
 
 export const name = 'ui-tui'
-export const inject = ['agents', 'commands', 'userInteraction', 'tools', 'llm', 'systemPrompt', 'tokenMeter']
+export const inject = ['agents', 'sessions', 'commands', 'userInteraction', 'tools', 'llm', 'systemPrompt', 'tokenMeter']
 
 /** Model guidance for path-only file references selected through the TUI. */
 export const FILE_REFERENCE_PROMPT = 'Paths prefixed with @ are files explicitly referenced by the user. Use the read tool when their contents are needed; do not claim to have inspected a file before reading it.'
@@ -177,6 +195,8 @@ export interface TuiConfig {
   maxQuestionOptions?: number
   /** Maximum models visible at once in the model selector. */
   maxModelOptions?: number
+  /** Maximum sessions visible at once in the resume selector. */
+  maxResumeOptions?: number
   /** User-question panel width in terminal columns, clamped to the terminal. */
   questionDialogWidth?: number
   /** User-question panel maximum height in terminal rows. */
@@ -210,6 +230,7 @@ const showReasoningSchema = z.boolean().default(true)
 const maxToolOutputLinesSchema = z.number().step(1).min(1).default(6)
 const maxQuestionOptionsSchema = z.number().step(1).min(1).default(8)
 const maxModelOptionsSchema = z.number().step(1).min(1).default(8)
+const maxResumeOptionsSchema = z.number().step(1).min(1).default(8)
 const questionDialogWidthSchema = z.number().step(1).min(20).default(200)
 const questionDialogMaxHeightSchema = z.number().step(1).min(6).default(20)
 const modelDialogWidthSchema = z.number().step(1).min(20).default(72)
@@ -228,6 +249,7 @@ const tuiConfigSchemaFields = {
   maxToolOutputLines: maxToolOutputLinesSchema,
   maxQuestionOptions: maxQuestionOptionsSchema,
   maxModelOptions: maxModelOptionsSchema,
+  maxResumeOptions: maxResumeOptionsSchema,
   questionDialogWidth: questionDialogWidthSchema,
   questionDialogMaxHeight: questionDialogMaxHeightSchema,
   modelDialogWidth: modelDialogWidthSchema,
@@ -251,11 +273,10 @@ export interface Config extends TuiConfig {
   /** Exact shared agent/session identity driven by this terminal. Defaults to `main`. */
   sessionId?: string
   /**
-   * Shell command template shown for resuming this session: printed on exit and
-   * listed by `/resume`, with every `{session}` occurrence replaced by the live
-   * session id. Absent disables both surfaces. Deployments set it only when a
-   * persistence backend makes the session resumable (e.g.
-   * `RESUME_SESSION_ID={session} dsh`).
+   * Shell command fallback printed on exit or after selecting a session when
+   * the host cannot hand off in place. Every `{session}` becomes the selected
+   * id; the TUI never executes this text. Absent disables only the fallback,
+   * not the interactive selector.
    */
   resumeCommand?: string
 }
@@ -268,6 +289,7 @@ export const Config: z<Config> = z.object({
   maxToolOutputLines: tuiConfigSchemaFields.maxToolOutputLines,
   maxQuestionOptions: tuiConfigSchemaFields.maxQuestionOptions,
   maxModelOptions: tuiConfigSchemaFields.maxModelOptions,
+  maxResumeOptions: tuiConfigSchemaFields.maxResumeOptions,
   questionDialogWidth: tuiConfigSchemaFields.questionDialogWidth,
   questionDialogMaxHeight: tuiConfigSchemaFields.questionDialogMaxHeight,
   modelDialogWidth: tuiConfigSchemaFields.modelDialogWidth,
@@ -287,6 +309,7 @@ export interface ResolvedTuiConfig {
   maxToolOutputLines: number
   maxQuestionOptions: number
   maxModelOptions: number
+  maxResumeOptions: number
   questionDialogWidth: number
   questionDialogMaxHeight: number
   modelDialogWidth: number
@@ -314,6 +337,8 @@ export interface TuiRuntime {
   formatCwd?: (cwd: string | undefined) => string
   /** Monotonic-enough wall clock for elapsed status rendering. Defaults to `Date.now`. */
   now?(): number
+  /** Host-owned process handoff; absent leaves `resumeCommand` as the fallback. */
+  handoffResume?: TuiResumeHost['handoff']
 }
 
 /**
@@ -328,6 +353,7 @@ export function resolveTuiConfig(config: TuiConfig | undefined): ResolvedTuiConf
     maxToolOutputLines: config?.maxToolOutputLines ?? 6,
     maxQuestionOptions: config?.maxQuestionOptions ?? 8,
     maxModelOptions: config?.maxModelOptions ?? 8,
+    maxResumeOptions: config?.maxResumeOptions ?? 8,
     questionDialogWidth: config?.questionDialogWidth ?? 200,
     questionDialogMaxHeight: config?.questionDialogMaxHeight ?? 20,
     modelDialogWidth: config?.modelDialogWidth ?? 72,
@@ -367,6 +393,11 @@ function ansi(open: string, close: string, enabled: boolean): (text: string) =>
 }
 
 const TERMINAL_CONTROL_PATTERN = /[\u0000-\u0009\u000b-\u001f\u007f-\u009f]/gu
+const TERMINAL_OSC_PATTERN = /(?:\u001B\]|\u009D)(?:(?!\u0007|\u001B\\)[\s\S])*(?:\u0007|\u001B\\|$)/gu
+const TERMINAL_CSI_PATTERN = /(?:\u001B\[|\u009B)[0-?]*[ -/]*[@-~]/gu
+const TERMINAL_ESCAPE_PATTERN = /\u001B[@-_]/gu
+const BRACKETED_PASTE_START = '\u001B[200~'
+const BRACKETED_PASTE_END = '\u001B[201~'
 
 /**
  * Escape external C0/C1 controls before pi-tui adds application-owned ANSI.
@@ -382,6 +413,15 @@ function displayInlineText(text: string): string {
   return displayText(text).replaceAll('\n', '\\x0a')
 }
 
+/** Remove terminal controls from clipboard text before an editable field stores it. */
+function sanitizePastedText(text: string): string {
+  return text
+    .replace(TERMINAL_OSC_PATTERN, '')
+    .replace(TERMINAL_CSI_PATTERN, '')
+    .replace(TERMINAL_ESCAPE_PATTERN, '')
+    .replace(TERMINAL_CONTROL_PATTERN, '')
+}
+
 /**
  * Theme-agnostic palette built from the standard 16-color ANSI set plus SGR
  * attributes, which every terminal remaps to its active color scheme. Body
@@ -1250,6 +1290,248 @@ class ModelDialog implements Component {
   }
 }
 
+interface ResumeRoute {
+  provider: string
+  model: string
+}
+
+interface ResumeCandidate {
+  record: SessionRecord
+  title: string
+  lastActivityAt: number
+  lastTurn: string
+  route?: ResumeRoute
+  goalPhase?: GoalPhase
+  disabledReason?: string
+}
+
+function resumeTurnLabel(snapshot: SessionLogSnapshot): string {
+  const event = snapshot.events.findLast(item => item.type === 'turn/end')
+  if (event === undefined) return 'no completed turn'
+  const reason = event.data.reason
+  switch (reason.kind) {
+    case 'completed': return `turn ${event.data.turn}: completed`
+    case 'aborted': return `turn ${event.data.turn}: cancelled`
+    case 'error': return `turn ${event.data.turn}: error`
+    case 'disposed': return `turn ${event.data.turn}: disposed`
+    case 'max-tokens': return `turn ${event.data.turn}: max tokens`
+    case 'rejected': return `turn ${event.data.turn}: rejected`
+    case 'interrupted': return `turn ${event.data.turn}: interrupted`
+    default: return `turn ${event.data.turn}: unknown result`
+  }
+}
+
+function resumeRoute(snapshot: SessionLogSnapshot): ResumeRoute | undefined {
+  const header = snapshot.events.findLast(item => item.type === 'request/header')
+  if (header?.type === 'request/header') {
+    return { provider: header.data.header.config.provider, model: header.data.header.config.model }
+  }
+  const assistant = snapshot.events.findLast(item => item.type === 'assistant/message')
+  return assistant?.type === 'assistant/message'
+    ? { provider: assistant.data.provenance.provider, model: assistant.data.provenance.model }
+    : undefined
+}
+
+function summarizeResumeCandidate(
+  record: SessionRecord,
+  snapshot: SessionLogSnapshot,
+  currentId: SessionId,
+  cwd: string | undefined,
+  availableProviders: ReadonlySet<string>,
+): ResumeCandidate {
+  const title = foldSessionTitle(snapshot.events)?.title ?? 'Untitled session'
+  const route = resumeRoute(snapshot)
+  const foldedGoal = foldGoal(snapshot.events).goal
+  let disabledReason: string | undefined
+  if (record.header.id === currentId) disabledReason = 'current session'
+  else if (record.live) disabledReason = 'session is already live in this runtime'
+  else if (record.header.cwd !== cwd) disabledReason = 'different workspace'
+  else if (route !== undefined && !availableProviders.has(route.provider)) {
+    disabledReason = `session is complete, but route is currently unavailable (${route.provider}/${route.model})`
+  }
+  return {
+    record,
+    title,
+    lastActivityAt: snapshot.events.at(-1)?.time ?? snapshot.session.createdAt,
+    lastTurn: resumeTurnLabel(snapshot),
+    ...route === undefined ? {} : { route },
+    ...foldedGoal === undefined ? {} : { goalPhase: foldedGoal.phase },
+    ...disabledReason === undefined ? {} : { disabledReason },
+  }
+}
+
+/** Full-viewport keyboard selector over detached, preflighted resume summaries. */
+class ResumePicker implements Component, Focusable {
+  private readonly search = new Input()
+  private pasteBuffer: string | undefined
+  private selectedIndex = 0
+  private error = ''
+  focused = false
+
+  constructor(
+    private readonly candidates: readonly ResumeCandidate[],
+    private readonly maxVisible: number,
+    private readonly workspaceLabel: string,
+    private readonly viewportRows: () => number,
+    private readonly palette: Palette,
+    private readonly done: (candidate: ResumeCandidate) => void,
+    private readonly cancel: () => void,
+  ) {}
+
+  invalidate(): void {
+    this.search.invalidate()
+  }
+
+  private filtered(): ResumeCandidate[] {
+    const query = this.search.getValue().trim().toLocaleLowerCase()
+    if (query === '') return [...this.candidates]
+    return this.candidates.filter(candidate => candidate.title.toLocaleLowerCase().includes(query)
+      || candidate.record.header.id.toLocaleLowerCase().includes(query))
+  }
+
+  private visibleCandidateCount(): number {
+    const candidateBudget = Math.max(1, Math.floor((Math.max(1, this.viewportRows()) - 13) / 4))
+    return Math.min(this.maxVisible, candidateBudget)
+  }
+
+  private handleBracketedPaste(data: string): boolean {
+    const start = data.indexOf(BRACKETED_PASTE_START)
+    if (this.pasteBuffer === undefined && start < 0) return false
+    if (this.pasteBuffer === undefined) {
+      const prefix = data.slice(0, start)
+      if (prefix !== '') this.handleInput(prefix)
+      this.pasteBuffer = data.slice(start + BRACKETED_PASTE_START.length)
+    } else {
+      this.pasteBuffer += data
+    }
+    const end = this.pasteBuffer.indexOf(BRACKETED_PASTE_END)
+    if (end < 0) return true
+    const pasted = sanitizePastedText(this.pasteBuffer.slice(0, end))
+    const remaining = this.pasteBuffer.slice(end + BRACKETED_PASTE_END.length)
+    this.pasteBuffer = undefined
+    const previous = this.search.getValue()
+    this.search.handleInput(`${BRACKETED_PASTE_START}${pasted}${BRACKETED_PASTE_END}`)
+    if (this.search.getValue() !== previous) {
+      this.selectedIndex = 0
+      this.error = ''
+    }
+    if (remaining !== '') this.handleInput(remaining)
+    this.invalidate()
+    return true
+  }
+
+  handleInput(data: string): void {
+    if (this.handleBracketedPaste(data)) return
+    const filtered = this.filtered()
+    if (matchesKey(data, Key.ctrl('c'))) {
+      this.cancel()
+      return
+    }
+    if (matchesKey(data, Key.escape)) {
+      if (this.search.getValue() === '') this.cancel()
+      else {
+        this.search.setValue('')
+        this.selectedIndex = 0
+        this.error = ''
+      }
+    } else if (matchesKey(data, Key.up)) {
+      this.selectedIndex = filtered.length === 0
+        ? 0
+        : (this.selectedIndex + filtered.length - 1) % filtered.length
+    } else if (matchesKey(data, Key.down)) {
+      this.selectedIndex = filtered.length === 0 ? 0 : (this.selectedIndex + 1) % filtered.length
+    } else if (matchesKey(data, Key.pageUp)) {
+      this.selectedIndex = Math.max(0, this.selectedIndex - this.visibleCandidateCount())
+    } else if (matchesKey(data, Key.pageDown)) {
+      this.selectedIndex = Math.min(
+        Math.max(0, filtered.length - 1),
+        this.selectedIndex + this.visibleCandidateCount(),
+      )
+    } else if (matchesKey(data, Key.enter)) {
+      const selected = filtered[this.selectedIndex]
+      if (selected === undefined) this.error = 'No session matches this search.'
+      else if (selected.disabledReason !== undefined) this.error = selected.disabledReason
+      else this.done(selected)
+    } else {
+      const previous = this.search.getValue()
+      this.search.focused = this.focused
+      this.search.handleInput(data)
+      if (this.search.getValue() !== previous) {
+        this.selectedIndex = 0
+        this.error = ''
+      }
+    }
+    this.invalidate()
+  }
+
+  render(width: number): string[] {
+    this.search.focused = this.focused
+    const height = Math.max(1, this.viewportRows())
+    const horizontalPadding = width >= 12 ? 2 : 0
+    const contentWidth = Math.max(1, width - horizontalPadding * 2)
+    const indent = ' '.repeat(horizontalPadding)
+    const filtered = this.filtered()
+    if (this.selectedIndex >= filtered.length) this.selectedIndex = Math.max(0, filtered.length - 1)
+    const selected = filtered[this.selectedIndex]
+    const position = selected === undefined ? 0 : this.selectedIndex + 1
+    const lines: string[] = [
+      '',
+      `${indent}${this.palette.bold(this.palette.accent(`Resume session (${position} of ${filtered.length})`))}`,
+      '',
+    ]
+
+    const searchInnerWidth = Math.max(1, contentWidth - 4)
+    lines.push(`${indent}${this.palette.dim(`╭${'─'.repeat(Math.max(0, contentWidth - 2))}╮`)}`)
+    const searchContent = this.search.render(searchInnerWidth).join('').replace(/^> /u, '⌕ ')
+    const clippedSearch = truncateToWidth(searchContent, searchInnerWidth, '')
+    lines.push(
+      `${indent}${this.palette.dim('│')} ${clippedSearch}${' '.repeat(Math.max(0, searchInnerWidth - visibleWidth(clippedSearch)))} ${this.palette.dim('│')}`,
+      `${indent}${this.palette.dim(`╰${'─'.repeat(Math.max(0, contentWidth - 2))}╯`)}`,
+      '',
+      `${indent}${this.palette.muted(displayText(this.workspaceLabel))}`,
+      '',
+    )
+
+    const visibleCount = this.visibleCandidateCount()
+    const start = Math.max(0, Math.min(
+      this.selectedIndex - Math.floor(visibleCount / 2),
+      filtered.length - visibleCount,
+    ))
+    const end = Math.min(filtered.length, start + visibleCount)
+    const push = (line: string): void => {
+      lines.push(`${indent}${truncateToWidth(line, contentWidth, '…')}`)
+    }
+    for (let index = start; index < end; index += 1) {
+      const candidate = filtered[index] as ResumeCandidate
+      const active = index === this.selectedIndex
+      const status = [
+        candidate.disabledReason === 'current session' ? 'current' : undefined,
+        candidate.record.live ? 'live' : undefined,
+        candidate.record.persisted ? 'persisted' : undefined,
+      ].filter((value): value is string => value !== undefined).join(' · ')
+      const lead = `${active ? '❯' : ' '} ${displayText(candidate.title)}`
+      push(active ? this.palette.bold(this.palette.accent(lead)) : lead)
+      const route = candidate.route === undefined ? 'route unavailable' : `${candidate.route.provider}/${candidate.route.model}`
+      const goal = candidate.goalPhase === undefined ? '' : ` · goal ${candidate.goalPhase}`
+      push(this.palette.muted(`  ${new Date(candidate.lastActivityAt).toISOString()} · ${candidate.lastTurn} · ${route}${goal}`))
+      push(this.palette.dim(`  ${status} · ${displayText(candidate.record.header.id)}`))
+      if (candidate.disabledReason !== undefined) {
+        push(this.palette.warning(`  unavailable: ${displayText(candidate.disabledReason)}`))
+      }
+    }
+    if (filtered.length === 0) push(this.palette.warning('No matching sessions.'))
+    if (this.error !== '') {
+      lines.push('')
+      push(this.palette.error(displayText(this.error)))
+    }
+
+    const footer = `${indent}${this.palette.dim('Type to search  •  ↑/↓ navigate  •  Enter resume  •  Esc clear/cancel')}`
+    while (lines.length < height - 2) lines.push('')
+    lines.push(footer, '')
+    return lines.slice(0, height)
+  }
+}
+
 class QuestionDialog implements Component, Focusable {
   private selectedIndex = 0
   private selected = new Set<number>()
@@ -1599,6 +1881,7 @@ export function createTuiChat(
   const agent = ctx.agents.get(sessionId)
   if (agent === undefined) throw new Error(`ui-tui: session "${sessionId}" is not running`)
   const persistence = ctx.get('sessionPersistence')
+  const sessionQuery = ctx.get('sessionQuery')
   const resolved = resolveTuiConfig(config)
   const palette = createPalette(resolved.color)
   const mdTheme = markdownTheme(palette)
@@ -1645,6 +1928,9 @@ export function createTuiChat(
   const referenceControllers = new Set<AbortController>()
   let activeQuestion: PendingQuestion | undefined
   let modelOverlay: TuiOverlaySession | undefined
+  let resumeOverlay: TuiOverlaySession | undefined
+  let resumeInFlight = false
+  let resumeScan = 0
   let tuiServiceFiber: Fiber | undefined
   const target: AgentLlmTargetRef = { current: initialTarget(agent), assembled: undefined }
   let contextWindow: number | undefined
@@ -1654,6 +1940,8 @@ export function createTuiChat(
   > | undefined
   let modelCommands = Promise.resolve()
   const now = (): number => runtime.now?.() ?? Date.now()
+  const agentStatus = (): AgentStatus => agent.status
+  const isDisposed = (): boolean => disposed
 
   // A configured subtitle renders as a banner line; when absent, the banner has
   // no subtitle. The banner itself sweeps in on start (see startBannerReveal).
@@ -2218,7 +2506,6 @@ export function createTuiChat(
     }
     return all
       .filter(header => header.cwd === agent.session.header.cwd)
-      .sort((a, b) => b.createdAt - a.createdAt)
   }
 
   /**
@@ -2611,37 +2898,156 @@ export function createTuiChat(
     })
   }
 
-  /**
-   * List this workspace's resumable sessions, newest first, each with its
-   * resume command and a marker on the current one. Warns when resume is not
-   * configured or no persistence backend is mounted; notes when nothing is
-   * persisted yet. The listing is asynchronous (a persistence scan), so the
-   * transcript updates once it resolves.
-   */
-  const showResume = (): void => {
-    const template = config.resumeCommand
-    if (template === undefined) {
-      appendNotice('Resume is not configured for this app.', 'warning')
-      return
+  /** Build one display candidate without letting a corrupt neighbor abort the selector. */
+  const readResumeCandidate = async (
+    record: SessionRecord,
+    providers: ReadonlySet<string>,
+  ): Promise<ResumeCandidate> => {
+    try {
+      let snapshot: SessionLogSnapshot
+      const live = ctx.sessions.get(record.header.id)
+      if (live !== undefined) {
+        snapshot = {
+          session: structuredClone(live.header),
+          events: live.events.map(event => structuredClone(event)),
+        }
+      } else {
+        /* v8 ignore next -- caller checks the optional service before mapping records */
+        if (sessionQuery === undefined) throw new Error('session query is unavailable')
+        snapshot = await sessionQuery.readSession(record.header.id)
+      }
+      return summarizeResumeCandidate(
+        record,
+        snapshot,
+        agent.session.id,
+        agent.session.header.cwd,
+        providers,
+      )
+    } catch (error: unknown) {
+      return {
+        record,
+        title: 'Unreadable session',
+        lastActivityAt: record.header.createdAt,
+        lastTurn: 'log unavailable',
+        disabledReason: `session cannot be loaded: ${errorChain(error)}`,
+      }
     }
-    if (persistence === undefined) {
-      appendNotice('Resume is not available: no persistence backend is mounted.', 'warning')
-      return
-    }
-    void listWorkspaceSessions().then((sessions) => {
-      if (sessions.length === 0) {
-        appendNotice('No resumable sessions found for this workspace yet.', 'info')
+  }
+
+  /** Re-read every mutable precondition immediately before terminal handoff. */
+  const preflightResume = async (sessionId: SessionId): Promise<ResumeCandidate> => {
+    /* v8 ignore next -- only showResume can call this closure, after proving the optional service exists */
+    if (sessionQuery === undefined) throw new Error('Resume is unavailable: session query is not mounted.')
+    const initialStatus = agentStatus()
+    if (initialStatus !== 'idle') throw new Error(`Resume requires an idle agent (status: ${initialStatus}).`)
+    const record = (await sessionQuery.listSessions()).find(candidate => candidate.header.id === sessionId)
+    if (record === undefined) throw new Error(`Session "${sessionId}" is no longer available.`)
+    const candidate = await readResumeCandidate(
+      record,
+      new Set(ctx.llm.listProviders().map(provider => provider.id)),
+    )
+    if (candidate.disabledReason !== undefined) throw new Error(candidate.disabledReason)
+    const finalStatus = agentStatus()
+    if (finalStatus !== 'idle') throw new Error(`Resume requires an idle agent (status: ${finalStatus}).`)
+    return candidate
+  }
+
+  const handoffResume = async (candidate: ResumeCandidate, overlay: TuiOverlaySession): Promise<void> => {
+    if (resumeInFlight) return
+    resumeInFlight = true
+    let terminalReleased = false
+    try {
+      const checked = await preflightResume(candidate.record.header.id)
+      const hostHandoff = runtime.handoffResume
+      if (hostHandoff === undefined) {
+        const template = config.resumeCommand
+        const fallback = template?.replaceAll('{session}', checked.record.header.id)
+        await overlay.close()
+        resumeOverlay = undefined
+        appendNotice(fallback === undefined
+          ? 'Session is resumable, but this host cannot hand it off in place.'
+          : `This host cannot hand off in place. Exit and run: ${fallback}`, 'warning')
         return
       }
-      chat.addChild(new Spacer(1))
-      chat.addChild(new Text(palette.bold(palette.accent('Resumable sessions')), 1, 0))
-      const lines = sessions.map((header) => {
-        const when = new Date(header.createdAt).toISOString().slice(0, 16).replace('T', ' ')
-        const marker = header.id === agent.session.id ? palette.success(' (current)') : ''
-        return `${palette.muted(when)}${marker}\n  ${displayText(template.replaceAll('{session}', header.id))}`
+      /* v8 ignore next -- shutdown during preflight invalidates an awaited service read or reaches this guard */
+      if (disposed) return
+      await ctx.sessions.flush(agent.session)
+      // Disposal can run while the flush promise is pending; TypeScript does not model that reentry.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (disposed) return
+      if (agent.status !== 'idle') throw new Error(`Resume requires an idle agent (status: ${agent.status}).`)
+      await overlay.close()
+      resumeOverlay = undefined
+      await runtime.terminal.drainInput(100, 20)
+      // Disposal can run while terminal draining is pending; TypeScript does not model that reentry.
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      if (disposed) return
+      ui.stop()
+      terminalReleased = true
+      await hostHandoff(checked.record.header.id)
+      throw new Error('resume host returned without replacing the process')
+    } catch (error: unknown) {
+      if (!disposed) {
+        if (terminalReleased) {
+          ui.start()
+          ui.setFocus(editor)
+          appendNotice(`Resume handoff failed: ${errorChain(error)}`, 'error')
+        } else {
+          await overlay.close()
+          resumeOverlay = undefined
+          appendNotice(`Resume failed: ${errorChain(error)}`, 'error')
+        }
+      }
+    } finally {
+      resumeInFlight = false
+    }
+  }
+
+  /** Open the current-workspace searchable session selector. */
+  const showResume = (): void => {
+    if (agent.status !== 'idle') {
+      appendNotice('Resume requires the current turn to finish or be cancelled first.', 'warning')
+      return
+    }
+    if (sessionQuery === undefined) {
+      appendNotice('Resume is not available: session query is not mounted.', 'warning')
+      return
+    }
+    const scan = ++resumeScan
+    void resumeOverlay?.close()
+    void sessionQuery.listSessions().then(async (records) => {
+      if (isDisposed() || scan !== resumeScan) return
+      const workspace = records.filter(record => record.header.cwd === agent.session.header.cwd)
+      const providers = new Set(ctx.llm.listProviders().map(provider => provider.id))
+      const candidates = await Promise.all(workspace.map(record => readResumeCandidate(record, providers)))
+      candidates.sort((a, b) => b.lastActivityAt - a.lastActivityAt
+        || a.record.header.id.localeCompare(b.record.header.id))
+      if (isDisposed() || scan !== resumeScan) return
+      const session = overlayManager.open({
+        create: host => new ResumePicker(
+          candidates,
+          resolved.maxResumeOptions,
+          runtime.formatCwd?.(agent.session.header.cwd) ?? formatCwd(agent.session.header.cwd),
+          () => host.viewport.rows,
+          palette,
+          (candidate) => { void handoffResume(candidate, session) },
+          () => { void session.close() },
+        ),
+        options: {
+          width: '100%',
+          maxHeight: '100%',
+          anchor: 'top-left',
+          margin: 0,
+        },
+      })
+      resumeOverlay = session
+      void session.closed.then(() => {
+        /* v8 ignore next -- overlay FIFO closes this session before a replacement can become the tracked resume overlay */
+        if (resumeOverlay === session) resumeOverlay = undefined
       })
-      chat.addChild(new Text(lines.join('\n'), 1, 0))
       requestRender()
+    }, (error: unknown) => {
+      if (!disposed && scan === resumeScan) appendNotice(`Resume session scan failed: ${errorChain(error)}`, 'error')
     })
   }
 
@@ -2842,6 +3248,14 @@ export function createTuiChat(
   }
 
   rebuildTranscript(true)
+  const restoredGoal = foldGoal(agent.session.events).goal
+  if (restoredGoal !== undefined && restoredGoal.phase !== 'complete') {
+    appendNotice(
+      `Goal restored (${restoredGoal.phase}) with automatic continuation disarmed. `
+      + 'Human confirmation is required; send “继续” or run /goal resume.',
+      'warning',
+    )
+  }
   setStatus(agent.status)
   try {
     ui.start()
@@ -2929,9 +3343,11 @@ export function apply(ctx: Context, config: Config): void {
   // Truecolor is a terminal capability, so detect it here at the process
   // boundary from COLORTERM; an explicit `truecolor` config value still wins.
   const truecolor = config.truecolor ?? ['truecolor', '24bit'].includes(process.env.COLORTERM ?? '')
+  const resumeHost = ctx.get('tuiResumeHost')
   mountTui(ctx, Object.assign({}, config, { truecolor }), {
     terminal: new ProcessTerminal(),
     exit: code => process.exit(code),
+    ...resumeHost === undefined ? {} : { handoffResume: sessionId => resumeHost.handoff(sessionId) },
   })
 }
 /* v8 ignore stop */

packages/ui/tui/tests/harness.ts

@@ -14,6 +14,7 @@ import SystemPrompt from '@deepseek-ai/dsh-system-prompt'
 import type { ToolDefinition } from '@deepseek-ai/dsh-tools'
 import UserInteractionService from '@deepseek-ai/dsh-user-interaction'
 import { createTuiChat, type Config, type TuiRuntime } from '../src/index.ts'
+import { TestSessionQueryService } from './session-query.ts'
 
 interface FakeAgent extends Agent {
   status: AgentStatus
@@ -48,7 +49,13 @@ export interface TuiHarnessOptions {
     resolveModelContext?: (provider: string, model: string) => Promise<LlmModelContext | undefined>
   }
   /** Provide a fake `sessionPersistence` service so resume surfaces can list sessions. */
-  sessionPersistence?: { list(): Promise<SessionHeader[]> }
+  sessionPersistence?: {
+    list(): Promise<SessionHeader[]>
+    load?(id: ReturnType<typeof SessionId>): Promise<{ meta: SessionHeader; events: Session['events'] }>
+  }
+  handoffResume?: TuiRuntime['handoffResume']
+  /** Set false to exercise the optional session-query degradation path. */
+  mountSessionQuery?: boolean
 }
 
 export interface TuiHarness<TerminalType extends Terminal, Exit extends (code: number) => void> {
@@ -118,7 +125,22 @@ export async function createTuiTestHarness<TerminalType extends Terminal, Exit e
   }
   if (ctx.get('systemPrompt') === undefined) await ctx.plugin(SystemPrompt)
   if (options.sessionPersistence !== undefined) {
-    ctx.provide('sessionPersistence', options.sessionPersistence as never)
+    const persistence = options.sessionPersistence
+    ctx.provide('sessionPersistence', {
+      ...persistence,
+      locate: () => undefined,
+      create: () => Promise.resolve(),
+      append: () => Promise.resolve(),
+      load: persistence.load === undefined
+        ? (id: ReturnType<typeof SessionId>) => Promise.reject(new Error(`session "${id}" not found`))
+        : (id: ReturnType<typeof SessionId>) => persistence.load!(id),
+      inspect: persistence.load === undefined
+        ? (id: ReturnType<typeof SessionId>) => Promise.reject(new Error(`session "${id}" not found`))
+        : (id: ReturnType<typeof SessionId>) => persistence.load!(id),
+    } as never)
+  }
+  if (options.mountSessionQuery !== false && ctx.get('sessionQuery') === undefined) {
+    await ctx.plugin(TestSessionQueryService)
   }
   const sessionId = SessionId('main-session')
   const session = ctx.sessions.create(
@@ -178,6 +200,7 @@ export async function createTuiTestHarness<TerminalType extends Terminal, Exit e
     // test pins the clock only by passing `now` explicitly.
     ...(options.now === undefined ? {} : { now: options.now }),
     ...(options.formatCwd === undefined ? {} : { formatCwd: options.formatCwd }),
+    ...(options.handoffResume === undefined ? {} : { handoffResume: options.handoffResume }),
   })
   return { ctx, session, agent, terminal, exit, controller }
 }

packages/ui/tui/tests/plugin-shape.spec.ts

@@ -14,6 +14,7 @@ describe('dsh-tui plugin export shape', () => {
     expect(unwrapped.name).toBe('ui-tui')
     expect(unwrapped.inject).toEqual([
       'agents',
+      'sessions',
       'commands',
       'userInteraction',
       'tools',

packages/ui/tui/tests/snapshots/resume-sessions.expected.txt

@@ -1,32 +1,51 @@
 terminal 92x32 buffer=normal length=32 base=0 viewport=0
 lifecycle started=1 stopped=0 progress=inactive
 title "DSH snapshot"
-cursor hidden column=1 viewportRow=10 bufferRow=10
+cursor hidden column=6 viewportRow=4 bufferRow=4
 buffer
-0| " DEEPSEEK HARNESS"
-  style 1-8 fg=bright-blue bold
-  style 10-16 bold
-1| " Snapshot agent ready."
-  style 1-21 fg=bright-black
-2| " deepseek-v4-flash  •  main-session"
-  style 1-34 dim
-3| <blank>
-4| " Resumable sessions                                                                         "
-  style 1-18 fg=bright-blue bold
-5| " 2024-01-02 03:04 (current)                                                                 "
-  style 1-16 fg=bright-black
-  style 17-26 fg=green
-6| "   RESUME_SESSION_ID=main-session dsh                                                       "
-7| " 2024-01-01 00:00                                                                           "
-  style 1-16 fg=bright-black
-8| "   RESUME_SESSION_ID=earlier-session dsh                                                    "
-9| "────────────────────────────────────────────────────────────────────────────────────────────"
-  style 0-91 dim
-10| "                                                                                            "
-  style 1-1 inverse
-11| "────────────────────────────────────────────────────────────────────────────────────────────"
-  style 0-91 dim
-12| "deepseek-v4-flash  /workspace/project  ↑0 ↓0                     0% context  tools:collapsed"
-  style 0-43 dim
-  style 65-91 dim
-13-31| <blank>
+0| "                                                                                            "
+1| "  Resume session (1 of 2)                                                                   "
+  style 2-24 fg=bright-blue bold
+2| "                                                                                            "
+3| "  ╭──────────────────────────────────────────────────────────────────────────────────────╮  "
+  style 2-89 dim
+4| "  │ ⌕                                                                                    │  "
+  style 2-2 dim
+  style 6-6 inverse
+  style 89-89 dim
+5| "  ╰──────────────────────────────────────────────────────────────────────────────────────╯  "
+  style 2-89 dim
+6| "                                                                                            "
+7| "  /workspace/project                                                                        "
+  style 2-19 fg=bright-black
+8| "                                                                                            "
+9| "  ❯ Untitled session                                                                        "
+  style 2-19 fg=bright-blue bold
+10| "    2026-07-23T08:00:00.000Z · no completed turn · route unavailable                        "
+  style 2-67 fg=bright-black
+11| "    current · live · main-session                                                           "
+  style 2-32 dim
+12| "    unavailable: current session                                                            "
+  style 2-31 fg=yellow
+13| "    Resume selector design                                                                  "
+14| "    2024-01-01T00:00:08.000Z · turn 1: completed · deepseek/deepseek-v4-pro                 "
+  style 2-74 fg=bright-black
+15| "    persisted · earlier-session                                                             "
+  style 2-30 dim
+16| "                                                                                            "
+17| "                                                                                            "
+18| "                                                                                            "
+19| "                                                                                            "
+20| "                                                                                            "
+21| "                                                                                            "
+22| "                                                                                            "
+23| "                                                                                            "
+24| "                                                                                            "
+25| "                                                                                            "
+26| "                                                                                            "
+27| "                                                                                            "
+28| "                                                                                            "
+29| "                                                                                            "
+30| "  Type to search  •  ↑/↓ navigate  •  Enter resume  •  Esc clear/cancel                     "
+  style 2-70 dim
+31| "                                                                                            "

packages/ui/tui/tests/tui.snapshot.ts

@@ -646,13 +646,27 @@ describe('TUI terminal-state snapshots', () => {
     await disposeSnapshot(harness)
   })
 
-  it('lists this workspace\'s resumable sessions with their commands', async () => {
+  it('opens the searchable resume selector with log-backed session summaries', async () => {
+    const dateNow = vi.spyOn(Date, 'now').mockReturnValue(Date.parse('2026-07-23T08:00:00.000Z'))
+    const earlier = { version: 0, id: SessionId('earlier-session'), createdAt: Date.parse('2024-01-01T00:00:00Z'), cwd: '/workspace/project' }
     const harness = await setupSnapshot({
       config: { resumeCommand: 'RESUME_SESSION_ID={session} dsh' },
-      sessionPersistence: { list: async () => [
-        { version: 0, id: SessionId('main-session'), createdAt: Date.parse('2024-01-02T03:04:00Z'), cwd: '/workspace/project' },
-        { version: 0, id: SessionId('earlier-session'), createdAt: Date.parse('2024-01-01T00:00:00Z'), cwd: '/workspace/project' },
-      ] },
+      sessionPersistence: {
+        list: async () => [earlier],
+        load: async () => ({
+          meta: earlier,
+          events: [
+            { type: 'turn/start', seq: 0, time: Date.parse('2024-01-01T00:00:01Z'), data: { turn: 1, trigger: { kind: 'message', source: { kind: 'user' } } } },
+            { type: 'user/message', seq: 1, time: Date.parse('2024-01-01T00:00:02Z'), data: { content: [{ type: 'text', text: 'restore the selector' }], source: { kind: 'user' } }, surfaceOp: 'append' },
+            { type: 'step/start', seq: 2, time: Date.parse('2024-01-01T00:00:03Z'), data: { turn: 1, step: 1 } },
+            { type: 'request/header', seq: 3, time: Date.parse('2024-01-01T00:00:04Z'), data: { header: { config: { provider: 'deepseek', model: 'deepseek-v4-pro' } }, reason: 'initial' } },
+            { type: 'assistant/message', seq: 4, time: Date.parse('2024-01-01T00:00:05Z'), data: { turn: 1, step: 1, content: [{ type: 'text', text: 'ready' }], provenance: { provider: 'deepseek', model: 'deepseek-v4-pro' } }, surfaceOp: 'append' },
+            { type: 'step/end', seq: 5, time: Date.parse('2024-01-01T00:00:06Z'), data: { turn: 1, step: 1 } },
+            { type: 'turn/end', seq: 6, time: Date.parse('2024-01-01T00:00:07Z'), data: { turn: 1, reason: { kind: 'completed' } } },
+            { type: 'session/title', seq: 7, time: Date.parse('2024-01-01T00:00:08Z'), data: { title: 'Resume selector design', messageSeqs: [1], source: { kind: 'fallback' } } },
+          ],
+        }),
+      },
     }, { columns: 92, rows: 32 })
     harness.terminal.send('/resume')
     harness.terminal.send('\r')
@@ -662,6 +676,7 @@ describe('TUI terminal-state snapshots', () => {
     await harness.terminal.flush()
     await checkpoint('resume-sessions', harness.terminal, { includeScrollback: true })
     await disposeSnapshot(harness)
+    dateNow.mockRestore()
   })
 
   it('pins the detailed session diagnostics card', async () => {

packages/ui/tui/tests/tui.spec.ts

@@ -6,8 +6,10 @@ import { Context } from 'cordis'
 import { CombinedAutocompleteProvider, type Terminal } from '@earendil-works/pi-tui'
 import AgentRegistry, { agentEvents, assembleContextFor, type Agent } from '@deepseek-ai/dsh-agent'
 import { type LlmCallConfig } from '@deepseek-ai/dsh-llm'
+import { GOAL_CHANGE_VERSION, GoalId, renderGoalChange, type GoalSnapshotChangeMeta } from '@deepseek-ai/dsh-goal'
 import CommandService, { type CommandInvocation } from '@deepseek-ai/dsh-commands'
-import SessionStore, { SessionId, type JsonValue, type SessionHeader } from '@deepseek-ai/dsh-session'
+import SessionStore, { SessionId, type JsonValue, type SessionEvent, type SessionHeader, type TurnEndReason } from '@deepseek-ai/dsh-session'
+import type { SessionRecord } from '@deepseek-ai/dsh-session-query'
 import SkillService, { type SkillDefinition, type SkillSummary } from '@deepseek-ai/dsh-skill'
 import type {} from '@deepseek-ai/dsh-session-title'
 import type { ToolDefinition } from '@deepseek-ai/dsh-tools'
@@ -152,6 +154,7 @@ describe('TUI config', () => {
       maxToolOutputLines: 6,
       maxQuestionOptions: 8,
       maxModelOptions: 8,
+      maxResumeOptions: 8,
       questionDialogWidth: 200,
       questionDialogMaxHeight: 20,
       modelDialogWidth: 72,
@@ -169,6 +172,7 @@ describe('TUI config', () => {
       maxToolOutputLines: 2,
       maxQuestionOptions: 3,
       maxModelOptions: 4,
+      maxResumeOptions: 5,
       questionDialogWidth: 60,
       questionDialogMaxHeight: 14,
       modelDialogWidth: 64,
@@ -185,6 +189,7 @@ describe('TUI config', () => {
       maxToolOutputLines: 2,
       maxQuestionOptions: 3,
       maxModelOptions: 4,
+      maxResumeOptions: 5,
       questionDialogWidth: 60,
       questionDialogMaxHeight: 14,
       modelDialogWidth: 64,
@@ -204,6 +209,21 @@ describe('resume command and /resume', () => {
   const RESUME = 'RESUME_SESSION_ID={session} dsh'
   const header = (id: string, createdAt: number, cwd: string): SessionHeader =>
     ({ version: 0, id: SessionId(id), createdAt, cwd })
+  const resumeEvents = (
+    title: string,
+    provider = 'deepseek',
+    time = 100,
+    reason: TurnEndReason = { kind: 'completed' },
+  ): SessionEvent[] => [
+    { type: 'turn/start', seq: 0, time, data: { turn: 1, trigger: { kind: 'message', source: { kind: 'user' } } } },
+    { type: 'user/message', seq: 1, time: time + 1, data: { content: [{ type: 'text', text: 'resume me' }], source: { kind: 'user' } }, surfaceOp: 'append' },
+    { type: 'step/start', seq: 2, time: time + 2, data: { turn: 1, step: 1 } },
+    { type: 'request/header', seq: 3, time: time + 3, data: { header: { config: { provider, model: 'model-1' } }, reason: 'initial' } },
+    { type: 'assistant/message', seq: 4, time: time + 4, data: { turn: 1, step: 1, content: [{ type: 'text', text: 'done' }], provenance: { provider, model: 'model-1' } }, surfaceOp: 'append' },
+    { type: 'step/end', seq: 5, time: time + 5, data: { turn: 1, step: 1 } },
+    { type: 'turn/end', seq: 6, time: time + 6, data: { turn: 1, reason } },
+    { type: 'session/title', seq: 7, time: time + 7, data: { title, messageSeqs: [1], source: { kind: 'fallback' } } },
+  ]
 
   it('prints the resume command on exit once the session is persisted', async () => {
     const result = await setup({
@@ -243,73 +263,832 @@ describe('resume command and /resume', () => {
     await dispose(result)
   })
 
-  it('lists this workspace\'s sessions newest-first and marks the current one', async () => {
+  it('opens a newest-active-first searchable selector and Esc clears before cancelling', async () => {
+    const older = header('older-session', 500, '/workspace')
+    const newer = header('newer-session', 2000, '/workspace')
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
     const result = await setup({
       cwd: '/workspace',
       config: { resumeCommand: RESUME },
+      handoffResume: handoff,
       sessionPersistence: {
-        list: async () => [
-          header('main-session', 1000, '/workspace'),
-          header('older-session', 500, '/workspace'),
-          header('newer-session', 2000, '/workspace'),
-          header('foreign-session', 3000, '/elsewhere'),
-        ],
+        list: async () => [older, newer, header('foreign-session', 3000, '/elsewhere')],
+        load: async id => id === newer.id
+          ? { meta: newer, events: resumeEvents('Newer product work', 'deepseek', 300) }
+          : { meta: older, events: resumeEvents('Older investigation', 'deepseek', 100) },
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    const output = result.terminal.output
+    expect(output).toContain('Resume session')
+    expect(output).toContain('Newer product work')
+    expect(output).toContain('Older investigation')
+    expect(output).toContain('current · live')
+    expect(output.indexOf('Newer product work')).toBeLessThan(output.indexOf('Older investigation'))
+    expect(output).not.toContain('foreign-session')
+    result.terminal.send('Older')
+    await tick()
+    expect(result.terminal.output).toContain('⌕ Older')
+    result.terminal.send('\x1b')
+    await tick()
+    expect(result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session')))
+      .not.toContain('⌕ Older')
+    result.terminal.send('\x1b')
+    await tick()
+    expect(handoff).not.toHaveBeenCalled()
+    await dispose(result)
+  })
+
+  it('handles selector navigation, empty matches, and backspace search edits', async () => {
+    const target = header('keyboard-target', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Keyboard target') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('\x1b[B')
+    result.terminal.send('\x1b[A')
+    result.terminal.send('\t')
+    result.terminal.send('zz')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('No session matches this search')
+    result.terminal.send('\x7f')
+    result.terminal.send('\x7f')
+    await tick()
+    const cleared = result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session'))
+    expect(cleared).toContain('⌕ ')
+    expect(cleared).not.toContain('zz')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('current session')
+    result.terminal.send('\x1b')
+    await dispose(result)
+  })
+
+  it('sanitizes bracketed-paste terminal controls before storing the search query', async () => {
+    const target = header('safe-target', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Safe target') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('\x1b[200~Safe\x1b]0;own')
+    result.terminal.send('ed\x07 target\x1b[31m\x1b[201~')
+    await tick()
+    const rendered = result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session'))
+    expect(rendered).toContain('⌕ Safe target')
+    expect(rendered).not.toContain('owned')
+    expect(rendered).not.toContain('[31m')
+    result.terminal.send('\x1b')
+    result.terminal.send('Safe\x1b[200~\x1b[201~ target')
+    await tick()
+    expect(result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session')))
+      .toContain('⌕ Safe target')
+    await dispose(result)
+  })
+
+  it('pages by the number of candidates that fit the current viewport', async () => {
+    const targets = Array.from({ length: 8 }, (_, index) =>
+      header(`paged-${index}`, 1000 - index, '/workspace'))
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => targets,
+        load: async id => ({
+          meta: targets.find(target => target.id === id)!,
+          events: resumeEvents(`Paged ${id.slice('paged-'.length)}`, 'deepseek', 1000 - Number(id.slice('paged-'.length)) * 10),
+        }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('\x1b[6~')
+    await tick()
+    const rendered = result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session'))
+    expect(rendered).toContain('❯ Paged 3')
+    result.terminal.send('\x1b[5~')
+    await tick()
+    expect(result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session')))
+      .toContain('❯ Untitled session')
+    result.terminal.resize(10)
+    await tick()
+    expect(result.terminal.output.slice(result.terminal.output.lastIndexOf('Resume session')))
+      .toContain('⌕')
+    result.terminal.send('\x03')
+    await dispose(result)
+  })
+
+  it('clips candidate count through the configured visible-session limit', async () => {
+    const targets = [header('limited-a', 10, '/workspace'), header('limited-b', 20, '/workspace')]
+    const result = await setup({
+      cwd: '/workspace',
+      config: { maxResumeOptions: 1 },
+      sessionPersistence: {
+        list: async () => targets,
+        load: async id => ({
+          meta: targets.find(target => target.id === id)!,
+          events: resumeEvents(`Limited ${id}`),
+        }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('(1 of 3)')
+    await dispose(result)
+  })
+
+  it.each([
+    [{ kind: 'aborted' }, 'cancelled'],
+    [{ kind: 'error', step: 1, message: 'failed' }, 'error'],
+    [{ kind: 'disposed' }, 'disposed'],
+    [{ kind: 'max-tokens' }, 'max tokens'],
+    [{ kind: 'rejected', reason: 'policy' }, 'rejected'],
+    [{ kind: 'interrupted' }, 'interrupted'],
+    [{ kind: 'future-result' } as unknown as TurnEndReason, 'unknown result'],
+  ] as const)('renders the last turn result %s', async (reason, label) => {
+    const target = header(`turn-${label}`, 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents(`Turn ${label}`, 'deepseek', 100, reason) }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain(`turn 1: ${label}`)
+    await dispose(result)
+  })
+
+  it('refuses while running instead of cancelling or switching', async () => {
+    const result = await setup({ cwd: '/workspace', status: 'running' })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('finish or be cancelled first')
+    expect(result.agent.cancelled).toEqual([])
+    await dispose(result)
+  })
+
+  it('warns when the optional session-query service is absent', async () => {
+    const result = await setup({ cwd: '/workspace', mountSessionQuery: false })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('session query is not mounted')
+    await dispose(result)
+  })
+
+  it('keeps persisted query records readable without a persistence service', async () => {
+    const target = header('query-only-persisted', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', {
+          listSessions: () => Promise.resolve([{
+            header: target,
+            live: false,
+            persisted: true,
+          }]),
+          readSession: () => Promise.resolve({
+            session: target,
+            events: resumeEvents('Query-only persisted session'),
+          }),
+        } as never)
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('Query-only persisted session')
+    expect(result.terminal.output).toContain('persisted')
+    expect(result.terminal.output).not.toContain('session cannot be loaded')
+    await dispose(result)
+  })
+
+  it('contains a session-query scan failure in the current TUI', async () => {
+    const result = await setup({
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', {
+          listSessions: () => Promise.reject(new Error('index unavailable')),
+        } as never)
       },
     })
     result.terminal.send('/resume')
     result.terminal.send('\r')
     await tick()
-    const output = result.terminal.output
-    expect(output).toContain('Resumable sessions')
-    expect(output).toContain('RESUME_SESSION_ID=main-session dsh')
-    expect(output).toContain('(current)')
-    expect(output).toContain('RESUME_SESSION_ID=newer-session dsh')
-    expect(output).not.toContain('foreign-session')
-    // Newest-first: the newer session's command precedes the current session's.
-    // Match the full resume command, not the bare id: the banner detail line
-    // echoes the current session id (`main-session`) above the listing.
-    expect(output.indexOf('RESUME_SESSION_ID=newer-session')).toBeLessThan(
-      output.indexOf('RESUME_SESSION_ID=main-session'),
-    )
-    expect(output.indexOf('RESUME_SESSION_ID=main-session')).toBeLessThan(
-      output.indexOf('RESUME_SESSION_ID=older-session'),
-    )
+    expect(result.terminal.output).toContain('Resume session scan failed: index unavailable')
+    expect(result.terminal.stopped).toBe(0)
     await dispose(result)
   })
 
-  it('warns from /resume when resume is not configured', async () => {
-    const result = await setup({ cwd: '/workspace' })
-    result.terminal.send('/resume')
-    result.terminal.send('\r')
-    await tick()
-    expect(result.terminal.output).toContain('Resume is not configured')
-    await dispose(result)
-  })
-
-  it('warns from /resume when no persistence backend is mounted', async () => {
-    const result = await setup({ cwd: '/workspace', config: { resumeCommand: RESUME } })
-    result.terminal.send('/resume')
-    result.terminal.send('\r')
-    await tick()
-    expect(result.terminal.output).toContain('no persistence backend is mounted')
-    await dispose(result)
-  })
-
-  it('notes from /resume when no workspace sessions are persisted yet', async () => {
+  it('supersedes a slower prior selector scan', async () => {
+    const first = Promise.withResolvers<SessionRecord[]>()
+    let calls = 0
     const result = await setup({
-      cwd: '/workspace',
-      config: { resumeCommand: RESUME },
-      sessionPersistence: { list: async () => [header('foreign-session', 10, '/elsewhere')] },
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', {
+          listSessions: () => ++calls === 1 ? first.promise : Promise.resolve([]),
+        } as never)
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick()
+    first.reject(new Error('superseded scan failed'))
+    await tick()
+    expect(calls).toBe(2)
+    expect(result.terminal.output).toContain('No matching sessions')
+    expect(result.terminal.output).not.toContain('superseded scan failed')
+    result.terminal.send('\x1b[A')
+    result.terminal.send('\x1b[B')
+    await dispose(result)
+  })
+
+  it('drops a selector scan that resolves after TUI disposal', async () => {
+    const listing = Promise.withResolvers<SessionRecord[]>()
+    const result = await setup({
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', { listSessions: () => listing.promise } as never)
+      },
     })
     result.terminal.send('/resume')
     result.terminal.send('\r')
     await tick()
-    expect(result.terminal.output).toContain('No resumable sessions found')
+    await dispose(result)
+    listing.resolve([])
+    await tick()
+    expect(result.terminal.stopped).toBeGreaterThan(0)
+  })
+
+  it('drops loaded selector summaries when the TUI disposed during log reads', async () => {
+    const target = header('dispose-during-load', 10, '/workspace')
+    const loading = Promise.withResolvers<{ meta: SessionHeader; events: SessionEvent[] }>()
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: () => loading.promise,
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick()
+    await dispose(result)
+    loading.resolve({ meta: target, events: resumeEvents('Disposed load') })
+    await tick()
+    expect(result.terminal.stopped).toBeGreaterThan(0)
+  })
+
+  it('preflights route availability and corrupt sessions without losing the current TUI', async () => {
+    const missing = header('missing-route', 10, '/workspace')
+    const corrupt = header('corrupt', 30, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      config: { resumeCommand: RESUME },
+      sessionPersistence: {
+        list: async () => [missing, corrupt],
+        load: async (id) => {
+          if (id === corrupt.id) throw new Error('checksum mismatch')
+          return {
+            meta: missing,
+            events: resumeEvents('Missing adapter', 'absent-provider'),
+          }
+        },
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('Missing adapter')
+    expect(result.terminal.output).toContain('absent-provider/model-1')
+    expect(result.terminal.output).toContain('Unreadable session')
+    result.terminal.send('Missing adapter')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('route is currently unavailable')
+    expect(result.terminal.stopped).toBe(0)
+    await dispose(result)
+  })
+
+  it('keeps a session already live in this runtime visible but disabled', async () => {
+    const target = header('live-target', 10, '/workspace')
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', {
+          listSessions: () => Promise.resolve([{
+            header: target,
+            live: true,
+            persisted: true,
+          }]),
+          readSession: () => Promise.resolve({
+            session: target,
+            events: resumeEvents('Live target'),
+          }),
+        } as never)
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Live target')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('session is already live in this runtime')
+    expect(handoff).not.toHaveBeenCalled()
+    await dispose(result)
+  })
+
+  it('falls back to assistant provenance and header creation time for sparse logs', async () => {
+    const assistantOnly = header('assistant-route', 20, '/workspace')
+    const empty = header('empty-log', 10, '/workspace')
+    const events = resumeEvents('Assistant route', 'deepseek')
+      .filter(event => event.type !== 'request/header')
+      .map((event, seq) => ({ ...event, seq })) as SessionEvent[]
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [assistantOnly, empty],
+        load: async id => id === assistantOnly.id
+          ? { meta: assistantOnly, events }
+          : { meta: empty, events: [] },
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('deepseek/model-1')
+    expect(result.terminal.output).toContain(new Date(empty.createdAt).toISOString())
+    await dispose(result)
+  })
+
+  it('flushes, releases the terminal, and invokes one host handoff for the same SessionId', async () => {
+    const target = header('target-session', 10, '/workspace')
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>(() => Promise.reject(new Error('test host retained process')))
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Target session') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Target session')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(handoff).toHaveBeenCalledTimes(1)
+    expect(handoff).toHaveBeenCalledWith(target.id)
+    expect(result.terminal.stopped).toBeGreaterThan(0)
+    expect(result.terminal.output).toContain('Resume handoff failed: test host retained process')
+    await dispose(result)
+  })
+
+  it('restores the UI when a host returns instead of replacing the process', async () => {
+    const target = header('returning-host', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: async () => undefined as never,
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Returning host') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Returning host')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('resume host returned without replacing the process')
+    await dispose(result)
+  })
+
+  it('keeps the current TUI when the selected log fails its second preflight load', async () => {
+    const target = header('racing-corruption', 10, '/workspace')
+    let loads = 0
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: vi.fn(),
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => {
+          if (++loads > 1) throw new Error('log changed during selection')
+          return { meta: target, events: resumeEvents('Racing corruption') }
+        },
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Racing corruption')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('Resume failed: session cannot be loaded: failed to inspect session')
+    expect(result.terminal.output).toContain('log changed during selection')
+    expect(result.terminal.stopped).toBe(0)
+    await dispose(result)
+  })
+
+  it('does not flush or hand off when disposal begins during selected-session preflight', async () => {
+    const target = header('dispose-during-preflight', 10, '/workspace')
+    const secondListing = Promise.withResolvers<SessionRecord[]>()
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
+    const flush = vi.fn()
+    let listings = 0
+    const record: SessionRecord = { header: target, live: false, persisted: true }
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.on('session/flush', flush)
+        ctx.provide('sessionQuery', {
+          listSessions: () => ++listings === 1 ? Promise.resolve([record]) : secondListing.promise,
+          readSession: () => Promise.resolve({
+            session: target,
+            events: resumeEvents('Dispose during preflight'),
+          }),
+        } as never)
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick()
+    result.terminal.send('Dispose during preflight')
+    result.terminal.send('\r')
+    await vi.waitFor(() => { expect(listings).toBe(2) })
+    await dispose(result)
+    secondListing.resolve([record])
+    await tick()
+    expect(flush).not.toHaveBeenCalled()
+    expect(handoff).not.toHaveBeenCalled()
+  })
+
+  it('hands off a validated session exposed by a query backend without a persistence service', async () => {
+    const target = header('query-without-persistence', 10, '/workspace')
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>(
+      () => Promise.reject(new Error('test host retained process')),
+    )
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.provide('sessionQuery', {
+          listSessions: () => Promise.resolve([{
+            header: target,
+            live: false,
+            persisted: true,
+          }]),
+          readSession: () => Promise.resolve({
+            session: target,
+            events: resumeEvents('Query without persistence'),
+          }),
+        } as never)
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Query without persistence')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(handoff).toHaveBeenCalledWith(target.id)
+    expect(result.terminal.output).toContain('Resume handoff failed: test host retained process')
+    await dispose(result)
+  })
+
+  it('does not hand off after disposal begins during the current-session flush', async () => {
+    const target = header('dispose-during-flush', 10, '/workspace')
+    const flushing = Promise.withResolvers<undefined>()
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.on('session/flush', () => flushing.promise)
+      },
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Dispose during flush') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Dispose during flush')
+    result.terminal.send('\r')
+    await tick()
+    const disposing = dispose(result)
+    await tick()
+    flushing.resolve(undefined)
+    await disposing
+    expect(handoff).not.toHaveBeenCalled()
+  })
+
+  it('does not hand off after disposal begins while terminal input drains', async () => {
+    const target = header('dispose-during-drain', 10, '/workspace')
+    const draining = Promise.withResolvers<undefined>()
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Dispose during drain') }),
+      },
+    })
+    result.terminal.drainInput.mockImplementationOnce(() => draining.promise)
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Dispose during drain')
+    result.terminal.send('\r')
+    await vi.waitFor(() => { expect(result.terminal.drainInput).toHaveBeenCalled() })
+    await dispose(result)
+    draining.resolve(undefined)
+    await tick()
+    expect(handoff).not.toHaveBeenCalled()
+  })
+
+  it('does not restart the terminal when a pending host rejects during disposal', async () => {
+    const target = header('host-rejects-during-disposal', 10, '/workspace')
+    const host = Promise.withResolvers<never>()
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>(() => host.promise)
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Host disposal') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Host disposal')
+    result.terminal.send('\r')
+    await vi.waitFor(() => { expect(handoff).toHaveBeenCalled() })
+    const startsBeforeDispose = result.terminal.started
+    await dispose(result)
+    host.reject(new Error('host rejected after disposal'))
+    await tick()
+    expect(result.terminal.started).toBe(startsBeforeDispose)
+    expect(result.terminal.output).not.toContain('host rejected after disposal')
+  })
+
+  it('rejects a candidate whose cwd changes between listing and preflight', async () => {
+    const target = header('moving-workspace', 10, '/workspace')
+    let listings = 0
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: vi.fn(),
+      sessionPersistence: {
+        list: async () => [++listings <= 2 ? target : header('moving-workspace', 10, '/elsewhere')],
+        load: async () => ({
+          meta: listings <= 2 ? target : header('moving-workspace', 10, '/elsewhere'),
+          events: resumeEvents('Moving workspace'),
+        }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Moving workspace')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('different workspace')
+    await dispose(result)
+  })
+
+  it('admits only one handoff while the selected preflight is pending', async () => {
+    const target = header('single-handoff', 10, '/workspace')
+    const preflight = Promise.withResolvers<{ meta: SessionHeader; events: SessionEvent[] }>()
+    let loads = 0
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: () => ++loads === 1
+          ? Promise.resolve({ meta: target, events: resumeEvents('Single handoff') })
+          : preflight.promise,
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Single handoff')
+    result.terminal.send('\r')
+    result.terminal.send('\r')
+    await tick()
+    preflight.resolve({ meta: target, events: resumeEvents('Single handoff') })
+    await tick(); await tick()
+    expect(loads).toBe(2)
+    await dispose(result)
+  })
+
+  it('rechecks running state and candidate existence before loading the selected log', async () => {
+    const target = header('preflight-races', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: vi.fn(),
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Preflight races') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.agent.status = 'running'
+    result.terminal.send('Preflight races')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('Resume requires an idle agent (status: running)')
+    result.agent.status = 'idle'
+    await dispose(result)
+
+    let disappearingLists = 0
+    const disappearing = await setup({
+      cwd: '/workspace',
+      handoffResume: vi.fn(),
+      sessionPersistence: {
+        list: async () => ++disappearingLists <= 2 ? [target] : [],
+        load: async () => ({ meta: target, events: resumeEvents('Disappearing target') }),
+      },
+    })
+    disappearing.terminal.send('/resume')
+    disappearing.terminal.send('\r')
+    await tick(); await tick()
+    disappearing.terminal.send('Disappearing target')
+    disappearing.terminal.send('\r')
+    await tick()
+    expect(disappearing.terminal.output).toContain('is no longer available')
+    await dispose(disappearing)
+  })
+
+  it('rechecks idleness after the selected log finishes loading', async () => {
+    const target = header('load-turns-running', 10, '/workspace')
+    let loads = 0
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: vi.fn(),
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => {
+          loads += 1
+          if (loads === 2) result.agent.status = 'running'
+          return { meta: target, events: resumeEvents('Load turns running') }
+        },
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Load turns running')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('Resume requires an idle agent (status: running)')
+    result.agent.status = 'idle'
+    await dispose(result)
+  })
+
+  it('keeps resumeCommand as a displayed fallback when the host cannot hand off', async () => {
+    const target = header('fallback-session', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      config: { resumeCommand: RESUME },
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Fallback target') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Fallback target')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('This host cannot hand off in place. Exit and run:')
+    expect(result.terminal.output).toContain('RESUME_SESSION_ID=fallback-session')
+    expect(result.terminal.stopped).toBe(0)
+    await dispose(result)
+  })
+
+  it('keeps the selector independent from an absent command fallback', async () => {
+    const target = header('no-fallback-session', 10, '/workspace')
+    const result = await setup({
+      cwd: '/workspace',
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('No fallback target') }),
+      },
+    })
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('No fallback target')
+    result.terminal.send('\r')
+    await tick()
+    expect(result.terminal.output).toContain('Session is resumable, but this host cannot hand it off in place')
+    await dispose(result)
+  })
+
+  it('rechecks idleness after the current-session flush', async () => {
+    const target = header('post-flush-running', 10, '/workspace')
+    const control: { setRunning?: () => void } = {}
+    const handoff = vi.fn<NonNullable<TuiRuntime['handoffResume']>>()
+    const result = await setup({
+      cwd: '/workspace',
+      handoffResume: handoff,
+      async configureContext(ctx) {
+        ctx.provide('tools', { get: () => undefined } as never)
+        ctx.on('session/flush', () => { control.setRunning?.() })
+      },
+      sessionPersistence: {
+        list: async () => [target],
+        load: async () => ({ meta: target, events: resumeEvents('Post-flush running') }),
+      },
+    })
+    control.setRunning = () => { result.agent.status = 'running' }
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    result.terminal.send('Post-flush running')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('Resume requires an idle agent (status: running)')
+    expect(handoff).not.toHaveBeenCalled()
+    result.agent.status = 'idle'
     await dispose(result)
   })
 })
 
 describe('pi-tui chat lifecycle and transcript', () => {
+  it('restores durable goal phase without implying automatic continuation', async () => {
+    const change: GoalSnapshotChangeMeta = {
+      kind: 'goal/change',
+      version: GOAL_CHANGE_VERSION,
+      operation: 'create',
+      goal: {
+        id: GoalId('restored-goal'),
+        revision: 1,
+        objective: 'Resume only with human confirmation',
+        phase: 'active',
+        maxGoalRounds: 4,
+      },
+      roundsStarted: 0,
+      createdAt: 10,
+      updatedAt: 10,
+    }
+    const result = await setup({
+      beforeMount(session) {
+        session.append('context/message', {
+          content: renderGoalChange(change),
+          source: { kind: 'goal', goalId: change.goal.id, revision: change.goal.revision, round: 0 },
+          meta: change as unknown as JsonValue,
+        }, { surfaceOp: 'append' })
+      },
+    })
+    expect(result.terminal.output).toContain('Goal restored (active) with automatic continuation disarmed')
+    expect(result.terminal.output).toContain('/goal resume')
+    result.terminal.send('/resume')
+    result.terminal.send('\r')
+    await tick(); await tick()
+    expect(result.terminal.output).toContain('goal active')
+    await dispose(result)
+  })
+
   it('uses the latest log-backed title for the header subtitle and terminal window', async () => {
     const result = await setup({
       // A fixed short cwd keeps the footer's token counters inside the 88-column
@@ -1575,22 +2354,27 @@ describe('pi-tui chat lifecycle and transcript', () => {
     expect(result.terminal.output).toContain('advertised by multiple providers')
     expect(result.terminal.output).toContain('already alpha/a1')
 
+    const firstSelectorOutput = result.terminal.output.length
     result.terminal.send('/model')
     result.terminal.send('\r')
     result.terminal.send('/model')
     result.terminal.send('\r')
-    await tick()
-    expect(result.terminal.output).toContain('Select model')
+    await vi.waitFor(() => {
+      expect(result.terminal.output.slice(firstSelectorOutput)).toContain('Select model')
+    })
     result.terminal.send('\x1b')
     await tick()
 
     result.agent.status = 'running'
+    const runningSelectorOutput = result.terminal.output.length
     result.terminal.send('/model')
     result.terminal.send('\r')
-    await tick()
-    expect(result.terminal.output).toContain('Select model')
-    expect(result.terminal.output).toContain('alpha/a1')
-    expect(result.terminal.output).toContain('Alpha One — Fast — current')
+    await vi.waitFor(() => {
+      const output = result.terminal.output.slice(runningSelectorOutput)
+      expect(output).toContain('Select model')
+      expect(output).toContain('alpha/a1')
+      expect(output).toContain('Alpha One — Fast — current')
+    })
     result.terminal.send('\x1b[B')
     result.terminal.send('\x1b[B')
     result.terminal.send('\r')
@@ -1602,9 +2386,12 @@ describe('pi-tui chat lifecycle and transcript', () => {
     await tick()
     expect(result.terminal.output).not.toContain('50% context  tools:collapsed')
 
+    const cancelledSelectorOutput = result.terminal.output.length
     result.terminal.send('/model')
     result.terminal.send('\r')
-    await tick()
+    await vi.waitFor(() => {
+      expect(result.terminal.output.slice(cancelledSelectorOutput)).toContain('Select model')
+    })
     result.terminal.send('\x1b')
     await tick()
     expect(result.agent.cancelled).not.toContain('cancelled from terminal')

packages/ui/tui/tsconfig.json

@@ -20,6 +20,9 @@
     {
       "path": "../../core/agent-loop"
     },
+    {
+      "path": "../../goal/goal"
+    },
     {
       "path": "../../core/session"
     },
@@ -29,6 +32,9 @@
     {
       "path": "../../session-persistence/session-persistence"
     },
+    {
+      "path": "../../session-query/session-query"
+    },
     {
       "path": "../../session-title/session-title"
     },