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

2026-07-24 20:01:36 +08:00
parent 3a92e03b26 fe84b446b0
commit d2ad02697e
107 changed files with 4589 additions and 502 deletions
--- a/packages/client/ui-conversation/src/client/apply.ts
+++ b/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)
--- a/packages/client/ui-conversation/src/client/contract/slots.ts
+++ b/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). */
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyState.module.css
+++ b/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);
+}
--- a/packages/client/ui-conversation/src/client/skeleton/EmptyState.tsx
+++ b/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>
  )
 }
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.module.css
+++ b/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;
--- a/packages/client/ui-conversation/src/client/skeleton/InputBar.tsx
+++ b/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} />}
--- a/packages/client/ui-conversation/tests/apply-inject.spec.tsx
+++ b/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 () => {
--- a/packages/client/ui-conversation/tests/chat-stats-bash-sample.spec.tsx
+++ b/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,
  })

--- a/packages/client/ui-conversation/tests/chat-tool-row.spec.tsx
+++ b/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,
 })

--- a/packages/client/ui-conversation/tests/chat-toolview-slot.spec.tsx
+++ b/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,
 })

--- a/packages/client/ui-conversation/tests/chat-view.spec.tsx
+++ b/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). */
--- a/packages/client/ui-conversation/tests/coverage-tails.spec.tsx
+++ b/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.
--- a/packages/client/ui-conversation/tests/input-bar.spec.tsx
+++ b/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)
+  })
+})
--- a/packages/client/ui-conversation/tests/skeleton-branches.spec.tsx
+++ b/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'))
+  })
 })
--- a/packages/client/ui-conversation/tests/skeleton.spec.tsx
+++ b/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()
  })