feat: implement new session behavior to clear selection and show empty state

- Added bilingual notes for the new session feature, detailing the transition to an empty state upon session creation.
- Updated `SessionsService` to include a `clear()` method that resets the current selection and persists the empty state.
- Enhanced the `EmptyState` component to reflect the new design, including workspace selection and input handling.
- Modified CSS styles for improved layout and visual consistency in the empty state.
- Updated tests to cover the new session clearing functionality and its effects on the UI.

.agents/notes/implemented/feature/2026-07-24-new-session-clears-to-empty-state.i18n.yaml

@@ -0,0 +1,6 @@
+# Bilingual-pair consistency record (docs/i18n/README.md): the git blob hash of each
+# side as of the last confirmed-consistent state. Both languages carry equal authority;
+# after editing either side, bring the other along and re-record with:
+#   pnpm run verify-translation-pairing --write
+2026-07-24-new-session-clears-to-empty-state.md: d730f3e0b658ea66b6026593f37a97893e32a4db
+2026-07-24-new-session-clears-to-empty-state.zh.md: 602a2b774b569cfef0adcc253fe751f86b14f895

.agents/notes/implemented/feature/2026-07-24-new-session-clears-to-empty-state.md

@@ -0,0 +1,23 @@
+# Agent Note: New Session clears onto the empty-state launch
+
+Status: implemented
+
+English | [中文](2026-07-24-new-session-clears-to-empty-state.zh.md)
+
+## Problem
+
+Sidebar "New Session" created and opened a blank session immediately, so the center column showed `ConversationRoot` with an empty transcript and the resident composer. The Figma NEW SESSION screen (`EmptyState` + shared `InputBar` hero) only rendered when `sessions.current` was already undefined, so the launch page was unreachable from the primary creation control.
+
+## Decision
+
+`SessionsService.clear()` wipes the persisted selection and `list.current`. Top-level sidebar creation entries (`onCreate()` with no cwd — New Session and New Workspace) call `clear()` so `AppFrame` renders `conversation.empty`. The empty state's first send still runs `conversation.startSession` (create → open → send) and reuses the same `InputBar` component as the resident composer (`variant="hero"`). Per-project "+" (`onCreate(cwd)`) keeps create-then-open until the empty-state picker can accept a seeded cwd.
+
+## Alternatives considered
+
+**Keep create-then-open for New Session and add a second empty chrome inside ConversationRoot when the transcript is empty.** Rejected: that duplicates the launch InputBar and breaks the empty→content ruling that one InputBar moves position rather than swapping components.
+
+**Route New Session through a dedicated route or slot outside selection.** Rejected for this pass: `conversation.empty` already owns the launch UI; clearing `current` is the existing empty branch.
+
+## Consequences
+
+New Session no longer mints a host session until the first send. Reloading after clear stays on the empty state. Project-scoped "+" still creates immediately. `EmptyState` stacks the Figma hero as fish + title, a Menu-backed workspace chip ("New Workspace" / basename / free-form path) above the card, then shared `InputBar` (`variant="hero"`), with a soft ellipse glow (figma 313:14109) centered behind the picker + card and width-locked to the card (`1051/776`) so it scales with it. `InputBar` paints the bottom chrome (attach / Plan / Read-only / model) with local native `<select>` state only — host plan, access, and model seams remain unwired.

.agents/notes/implemented/feature/2026-07-24-new-session-clears-to-empty-state.zh.md

@@ -0,0 +1,23 @@
+# Agent Note: New Session clears onto the empty-state launch
+
+Status: implemented
+
+[English](2026-07-24-new-session-clears-to-empty-state.md) | 中文
+
+## Problem
+
+侧栏「New Session」会立即创建并打开空白会话，因此中间栏显示带空 transcript（文本记录）与常驻 composer 的 `ConversationRoot`。Figma 的 NEW SESSION 屏（`EmptyState` + 共用的 `InputBar` hero）仅在 `sessions.current` 已为 undefined 时渲染，因而主创建控件无法到达启动页。
+
+## Decision
+
+`SessionsService.clear()` 清除持久化选中项与 `list.current`。顶层侧栏创建入口（无 cwd 的 `onCreate()`——New Session 与 New Workspace）调用 `clear()`，使 `AppFrame` 渲染 `conversation.empty`。空态的首次发送仍走 `conversation.startSession`（create → open → send），并复用与常驻 composer 相同的 `InputBar` 组件（`variant="hero"`）。按项目的「+」（`onCreate(cwd)`）继续 create-then-open，直到空态选择器能接受预填的 cwd。
+
+## Alternatives considered
+
+**为 New Session 保留 create-then-open，并在 transcript 为空时于 ConversationRoot 内再加一套空态 chrome。** 否决：这会重复启动页的 InputBar，并破坏 empty→content 的约定——同一 InputBar 应移动位置，而非互换组件。
+
+**将 New Session 路由到选中状态之外的专用 route 或 slot。** 本轮否决：`conversation.empty` 已拥有启动 UI；清除 `current` 即是既有的空态分支。
+
+## Consequences
+
+New Session 在首次发送前不再创建 host 会话。clear 后重新加载仍停留在空态。项目范围的「+」仍立即创建。`EmptyState` 按 Figma 堆叠英雄区：鱼标 + 标题、卡片上方的 Menu 工作区 chip（「New Workspace」/ 路径 basename / 自由输入路径），再接共用的 `InputBar`（`variant="hero"`）；选择器与卡片背后居中铺一层柔光椭圆（figma 313:14109），宽度按卡片锁定为 `1051/776`，随卡片缩放。`InputBar` 绘制底栏 chrome（添加 / Plan / Read-only / 模型），仅用本地原生 `<select>` 状态——host 侧的 plan、access、model 接缝仍未接线。

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 }>
 
@@ -137,7 +138,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 {
@@ -148,6 +149,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).

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' }])

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 313:14149): fish + title, workspace chip above the
+   shared InputBar card. The input itself is InputBar — only stack geometry
+   lives here. */
 
 .root {
   display: flex;
@@ -11,16 +11,18 @@
   padding: 24px;
 }
 
-/* figma hero group 34:10409: headline block sits 36px above the input card. */
-.card {
+/* Cap matches InputBar card width (776). Glow may paint past the sides. */
+.stack {
   display: flex;
   flex-direction: column;
-  gap: 36px;
+  align-items: stretch;
+  gap: 40px;
   width: 100%;
   max-width: 776px;
+  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. */
 .headline {
   display: flex;
   align-items: center;
@@ -32,37 +34,98 @@
   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;
+}
+
+.workspaceRow {
   display: flex;
   align-items: center;
   min-width: 0;
+  /* Align with InputBar's left chrome (card pad 10 + attach). */
+  padding-left: 10px;
 }
 
-.select,
-.customInput {
-  max-width: 320px;
-  padding: 4px 10px;
-  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
-  border-radius: 12px;
-  background: var(--dsw-alias-bg-base);
-  font-size: 13px;
+/* Folder + "New Workspace" + chevron (figma workspace trigger). */
+.workspace {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 100%;
+  height: 28px;
+  padding: 0 4px 0 0;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 14px;
   line-height: 20px;
-  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.workspace:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.folder {
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.workspaceLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chevron {
+  flex: none;
+  color: var(--dsw-alias-label-caption);
 }
 
 .customInput {
-  width: 320px;
+  width: min(320px, 100%);
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid var(--dsw-alias-border-l2-darkmode-thin);
+  border-radius: 8px;
   outline: none;
+  background: var(--dsw-alias-bg-base);
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--dsw-alias-label-primary);
 }
 
 .customInput:focus {
-  /* Business blue, not brand-primary: that token resolves to ink in this sheet. */
   border-color: var(--dsw-alias-state-business-primary);
-  color: var(--dsw-alias-label-primary);
 }

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

@@ -1,21 +1,27 @@
-// 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, then the SAME InputBar the resident composer uses
+// (empty→content is a position move, never a swap). Project picker: cwd set
+// derived in-component from useSessions plus a free-form new-directory path;
+// submit runs startSession (create → open → send).
 
-import { useMemo, useState } from 'react'
-import { FishLogo } from '@deepseek-ai/dsh-client-ui-primitives'
+import { useId, useMemo, useState } from 'react'
+import {
+  FishLogo,
+  IconChevronDownOutline14,
+  IconFolderOpen16,
+  Menu,
+  type MenuItem,
+} from '@deepseek-ai/dsh-client-ui-primitives'
 import type { SessionListState } from '@deepseek-ai/dsh-client-runtime/client'
 import type { 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). */
+/** Menu id for the free-form directory entry (not a filesystem path). */
 const NEW_DIR = '::new-directory'
+/** Menu id for the host default project directory (empty cwd on create). */
+const DEFAULT_DIR = '::default'
 
 /** Full props composed by reference from the contract (runtime share & injected share; no store). */
 export type EmptyStateProps = EmptyStateSlotProps
@@ -30,16 +36,26 @@ function deriveCwds(state: SessionListState): readonly string[] {
   return [...seen]
 }
 
+/** Basename for the workspace chip; 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, startSession }: EmptyStateProps) {
   const list = useSessions(s => s)
   const cwds = useMemo(() => deriveCwds(list), [list])
   // Local viewing state: the empty state owns no session, so its draft is
   // ephemeral by design (drafts are keyed by session id; there is none yet).
   const [draft, setDraft] = useState('')
-  const [cwd, setCwd] = useState<string>('')
+  const [cwd, setCwd] = useState('')
   const [custom, setCustom] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
   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()
@@ -58,61 +74,105 @@ export function EmptyState({ useSessions, startSession }: EmptyStateProps) {
     // Success needs no cleanup: the session selection swaps this slot out for the session body.
   }
 
-  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}
+  const items: MenuItem[] = [
+    { id: DEFAULT_DIR, label: 'Default directory' },
+    ...cwds.map(c => ({ id: c, label: c })),
+    { id: NEW_DIR, label: 'New directory…' },
+  ]
+  const selectedId = custom ? NEW_DIR : cwd === '' ? DEFAULT_DIR : cwd
+
+  const workspace = custom
+    ? (
+        <input
+          className={css.customInput}
+          value={cwd}
+          autoFocus
+          aria-label="项目目录"
+          placeholder="Directory path, e.g. /home/me/proj"
+          onChange={(e) => { setCwd(e.target.value) }}
+        />
+      )
+    : (
+        <Menu
+          open={menuOpen}
+          onClose={() => { setMenuOpen(false) }}
+          selectedId={selectedId}
+          items={items}
+          onSelect={(id) => {
+            if (id === NEW_DIR) {
+              setCustom(true)
+              setCwd('')
+            } else if (id === DEFAULT_DIR) {
+              setCustom(false)
+              setCwd('')
+            } else {
+              setCustom(false)
+              setCwd(id)
+            }
+            setMenuOpen(false)
+          }}
+          anchor={(
+            <button
+              type="button"
+              className={css.workspace}
               aria-label="项目目录"
-              onChange={(e) => {
-                if (e.target.value === NEW_DIR) {
-                  setCustom(true)
-                  setCwd('')
-                } else {
-                  setCwd(e.target.value)
-                }
-              }}
+              aria-haspopup="menu"
+              aria-expanded={menuOpen}
+              onClick={() => { setMenuOpen(!menuOpen) }}
             >
-              <option value="">默认目录</option>
-              {cwds.map(c => <option key={c} value={c}>{c}</option>)}
-              <option value={NEW_DIR}>新目录…</option>
-            </select>
+              <IconFolderOpen16 className={css.folder} size={16} />
+              <span className={css.workspaceLabel}>{workspaceLabel(cwd)}</span>
+              <IconChevronDownOutline14 className={css.chevron} size={14} />
+            </button>
           )}
-    </div>
-  )
+        />
+      )
 
   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}
-          running={false}
-          disabled={sending}
-          error={error}
-          variant="hero"
-          placeholder="Message to run task, plan and build"
-          accessory={picker}
-          onDraftChange={setDraft}
-          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 (1051/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}>{workspace}</div>
+          <InputBar
+            draft={draft}
+            running={false}
+            disabled={sending}
+            error={error}
+            variant="hero"
+            placeholder="Message to run task, plan and build, enter for / commands"
+            onDraftChange={setDraft}
+            onSend={submit}
+            /* v8 ignore next -- structural noop: hero never passes running=true, so stop is unreachable. */
+            onStop={() => {}}
+          />
+        </div>
       </div>
     </div>
   )

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

@@ -119,12 +119,81 @@
   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,
+.trailing {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.trailing {
+  flex: none;
+  gap: 8px;
+}
+
+/* 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. */
+.select {
+  max-width: 220px;
+  height: 28px;
+  padding: 0 22px 0 6px;
+  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='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' 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: 14px 14px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 14px;
+  line-height: 20px;
+  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 /
@@ -133,6 +202,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 { useEffect, useRef } from 'react'
-import type { KeyboardEvent, MouseEvent, ReactNode } from 'react'
+import { useEffect, useRef, useState } from 'react'
+import type { ChangeEvent, KeyboardEvent, MouseEvent, ReactNode } from 'react'
 import clsx from 'clsx'
+import { IconPlusOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
 import css from './InputBar.module.css'
 
 /** Prompt failure surface (mirrors the session snapshot's promptError shape). */
@@ -24,13 +28,33 @@ 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
   onSend: (mode: 'queue' | 'steer') => void
   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, running, disabled, error, variant, placeholder, accessory, onDraftChange, onSend, onStop,
 }: InputBarProps) {
@@ -48,6 +72,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
@@ -88,6 +117,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 && (
@@ -116,25 +164,42 @@ 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>
+            {renderSelect('Plan mode', planId, PLAN_OPTIONS, setPlanId)}
+            {renderSelect('Access mode', readonlyId, READONLY_OPTIONS, setReadonlyId)}
+          </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="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>
         </div>
       </div>
     </div>

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)
   })
 
@@ -129,3 +132,38 @@ describe('error strip and variants', () => {
     expect(view.container.querySelector('[class*="hero"]')).not.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

@@ -261,7 +261,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, swaps to free-form, submits the typed path', async () => {
     const startSession = vi.fn(() => Promise.resolve())
     const view = render(
       <EmptyState
@@ -272,12 +272,13 @@ describe('EmptyState branches', () => {
         startSession={startSession}
       />,
     )
-    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' } })
+    fireEvent.click(view.getByRole('button', { name: '项目目录' }))
+    expect([...view.getByRole('menu').querySelectorAll('[role="menuitem"]')].map(el => el.textContent))
+      .toEqual(['Default directory', '/proj', 'New directory…'])
+    fireEvent.click(view.getByRole('menuitem', { name: '/proj' }))
+    expect(view.getByRole('button', { name: '项目目录' }).textContent).toContain('proj')
+    fireEvent.click(view.getByRole('button', { name: '项目目录' }))
+    fireEvent.click(view.getByRole('menuitem', { name: 'New directory…' }))
     const custom = view.container.querySelector('input')!
     fireEvent.change(custom, { target: { value: '/typed/dir' } })
     const textarea = view.container.querySelector('textarea')!

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

@@ -28,7 +28,8 @@ 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. */
@@ -95,11 +96,13 @@ describe('EmptyState', () => {
     const startSession = vi.fn(() => new Promise<void>((_res, rej) => { reject = rej }))
     render(<EmptyState useSessions={useSessions} startSession={startSession} />)
 
-    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(['Default directory', '/w/app', '/w/lib', 'New directory…'])
+    fireEvent.click(screen.getByRole('menuitem', { name: '/w/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' })
@@ -110,11 +113,12 @@ describe('EmptyState', () => {
     expect((box as HTMLTextAreaElement).value).toBe('造一个轮子')
   })
 
-  it('new-directory option swaps the select for a free-form input', () => {
+  it('new-directory option swaps the chip for a free-form input', () => {
     const { useSessions } = fakeSessions([])
     render(<EmptyState useSessions={useSessions} startSession={() => Promise.resolve()} />)
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: '::new-directory' } })
-    const custom = screen.getByPlaceholderText(/目录路径/)
+    fireEvent.click(screen.getByRole('button', { name: '项目目录' }))
+    fireEvent.click(screen.getByRole('menuitem', { name: 'New directory…' }))
+    const custom = screen.getByPlaceholderText(/Directory path/)
     fireEvent.change(custom, { target: { value: '/tmp/fresh' } })
     expect((custom as HTMLInputElement).value).toBe('/tmp/fresh')
   })

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 () => {