Merge remote-tracking branch 'origin/master' into feat/scrollbar-tokens

packages/client/ui-workspace/src/client/WorkspaceBrowser.module.css

@@ -129,6 +129,7 @@
    reads the shell's class names): the two icon controls stack as 36x36
    circles matching the shell's rail rhythm. */
 .rail .sectionHeader {
+  gap: 0;
   padding-left: 0;
   margin-bottom: 12px;
 }

packages/client/ui-workspace/src/client/WorkspaceBrowser.tsx

@@ -265,6 +265,7 @@ export function WorkspaceBrowser({
   // states; the menu anchors on this button).
   const [wsPickerOpen, setWsPickerOpen] = useState(false)
   const wsPlusRef = useRef<HTMLButtonElement>(null)
+  const composingRef = useRef(false)
 
   // Rail search = expand + land in the search box: the flag arms before the
   // expand request; once the shell flips wide the input mounts and takes focus.
@@ -358,7 +359,6 @@ export function WorkspaceBrowser({
             className={css.iconButton}
             aria-label="Create workspace"
             onClick={() => {
-              if (!wide) expandSidebar()
               setWsPickerOpen(v => !v)
             }}
           >
@@ -372,6 +372,8 @@ export function WorkspaceBrowser({
           useWorkspaces={useWorkspaces}
           createWorkspace={createWorkspace}
           pickDirectory={pickDirectory}
+          createOnly
+          side="right"
           onPick={(workspaceId) => {
             setWsPickerOpen(false)
             startSession(workspaceId)
@@ -459,9 +461,12 @@ export function WorkspaceBrowser({
           aria-label="Workspace name"
           autoFocus
           disabled={renaming}
+          onFocus={(e) => { e.target.select() }}
           onChange={(e) => { setRenameDraft(e.target.value); setRenameError(null) }}
+          onCompositionStart={() => { composingRef.current = true }}
+          onCompositionEnd={() => { composingRef.current = false }}
           onKeyDown={(e) => {
-            if (e.key === 'Enter') {
+            if (e.key === 'Enter' && !composingRef.current) {
               e.preventDefault()
               confirmRename()
             }

packages/client/ui-workspace/src/client/WorkspacePicker.tsx

@@ -5,7 +5,7 @@
  * slot registration.
  */
 import type { RefObject } from 'react'
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import {
   Button, IconFolderClose16, IconPlusOutline16, Menu, Modal, type MenuEntry,
 } from '@deepseek-ai/dsh-client-ui-primitives'
@@ -37,6 +37,12 @@ export interface WorkspaceCreateFlowProps {
   onPick: (workspaceId: WorkspaceId) => void
   /** Close the popover (outside click / Escape / post-pick). */
   onClose: () => void
+  /** Only show create actions (open folder / create new), hide existing workspaces. */
+  createOnly?: boolean
+  /** Menu opening direction relative to the anchor. */
+  side?: 'bottom' | 'top' | 'right'
+  /** Currently active workspace (trailing check in the picker list). */
+  selectedId?: WorkspaceId | undefined
 }
 
 /**
@@ -52,6 +58,9 @@ export function WorkspaceCreateFlow({
   pickDirectory,
   onPick,
   onClose,
+  createOnly = false,
+  side = 'bottom',
+  selectedId,
 }: WorkspaceCreateFlowProps) {
   const workspaceSnapshot = useWorkspaces(state => state)
   const workspaces = workspaceSnapshot.items
@@ -65,21 +74,26 @@ export function WorkspaceCreateFlow({
   const [modalError, setModalError] = useState<string | null>(null)
   const [pickingFolder, setPickingFolder] = useState(false)
   const [folderConflict, setFolderConflict] = useState(false)
+  const composingRef = useRef(false)
   const normalizedWorkspaceName = workspaceName.trim()
   const duplicateWorkspaceName = !creating && normalizedWorkspaceName !== ''
     && workspaces.some(workspace => workspace.title === normalizedWorkspaceName)
 
-  const items: MenuEntry[] = [
-    ...workspaces.map(workspace => ({
+  const createEntries: MenuEntry[] = [
+    { id: OPEN_LOCAL_FOLDER, label: 'Open local folder…', icon: <IconFolderClose16 size={16} />, disabled: pickingFolder },
+    { id: CREATE_NEW, label: 'Create a new workspace', icon: <IconPlusOutline16 size={16} />, disabled: pickingFolder },
+  ]
+  // With workspaces listed, the create actions pin below the scroll region
+  // (divider + always visible); otherwise they ARE the menu.
+  const pinCreate = !createOnly && workspaces.length > 0
+  const items: MenuEntry[] = pinCreate
+    ? workspaces.map(workspace => ({
       id: workspace.workspaceId,
       label: workspace.title,
       icon: <IconFolderClose16 size={16} />,
       disabled: pickingFolder,
-    })),
-    ...(workspaces.length > 0 ? [{ type: 'separator' as const, id: 'sep-create' }] : []),
-    { id: OPEN_LOCAL_FOLDER, label: 'Open local folder…', icon: <IconFolderClose16 size={16} />, disabled: pickingFolder },
-    { id: CREATE_NEW, label: 'Create a new workspace', icon: <IconPlusOutline16 size={16} />, disabled: pickingFolder },
-  ]
+    }))
+    : createEntries
 
   const closeModal = (): void => {
     if (creating) return
@@ -114,7 +128,7 @@ export function WorkspaceCreateFlow({
     }
     if (id === CREATE_NEW) {
       onClose()
-      setWorkspaceName('workspace')
+      setWorkspaceName('')
       setModalError(null)
       setModalKind('create')
       return
@@ -149,8 +163,11 @@ export function WorkspaceCreateFlow({
         open={open}
         anchor={null}
         items={items}
+        {...pinCreate ? { footer: createEntries } : {}}
+        selectedId={selectedId}
         onSelect={handleSelect}
         onClose={onClose}
+        side={side}
         portal
         getAnchorRect={getAnchorRect}
       />
@@ -194,12 +211,15 @@ export function WorkspaceCreateFlow({
         <input
           className={css.modalInput}
           value={workspaceName}
+          placeholder="Workspace name"
           aria-label="New workspace name"
           autoFocus
           disabled={creating}
           onChange={(event) => { setWorkspaceName(event.target.value); setModalError(null) }}
+          onCompositionStart={() => { composingRef.current = true }}
+          onCompositionEnd={() => { composingRef.current = false }}
           onKeyDown={(event) => {
-            if (event.key === 'Enter') {
+            if (event.key === 'Enter' && !composingRef.current) {
               event.preventDefault()
               confirmCreate()
             }
@@ -225,6 +245,7 @@ export function WorkspacePicker({
   open,
   anchorRef,
   useWorkspaces,
+  selectedId,
   onPick,
   onClose,
   createWorkspace,
@@ -237,6 +258,7 @@ export function WorkspacePicker({
       useWorkspaces={useWorkspaces}
       createWorkspace={createWorkspace}
       pickDirectory={pickDirectory}
+      selectedId={selectedId}
       onPick={onPick}
       onClose={onClose}
     />

packages/client/ui-workspace/tests/workspace-browser.spec.tsx

@@ -263,25 +263,21 @@ describe('WorkspaceBrowser', () => {
     }
   })
 
-  it('rail create-workspace expands the shell and opens the picker; wide toggles in place', () => {
+  it('rail create-workspace toggles the create-only picker in place, without expanding', () => {
     const expandSidebar = vi.fn()
-    const b = mount({ wide: false, expandSidebar, useWorkspaces: hook(workspaceState([workspace('alpha', [])])) })
+    mount({ wide: false, expandSidebar, useWorkspaces: hook(workspaceState([workspace('alpha', [])])) })
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
-    expect(expandSidebar).toHaveBeenCalledTimes(1)
-    rerender(b, { wide: true })
-    // The picker menu is open (anchored on the ＋); picking starts a session.
-    fireEvent.click(screen.getByRole('menuitem', { name: 'alpha' }))
-    expect(b.props.startSession).toHaveBeenCalledWith(wid('alpha'))
-    expect(screen.queryByRole('menu')).toBeNull()
-    // Wide toggle: open and close without expand requests.
-    fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
-    expect(screen.getByRole('menu')).toBeTruthy()
+    expect(expandSidebar).not.toHaveBeenCalled()
+    // createOnly: existing workspaces are not listed, only the create actions.
+    expect(screen.queryByRole('menuitem', { name: 'alpha' })).toBeNull()
+    expect(screen.getByRole('menuitem', { name: 'Open local folder…' })).toBeTruthy()
+    // Toggle: open and close in place.
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
     expect(screen.queryByRole('menu')).toBeNull()
-    expect(expandSidebar).toHaveBeenCalledTimes(1)
 
     // Escape closes the picker through its own onClose.
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
+    expect(screen.getByRole('menu')).toBeTruthy()
     fireEvent.keyDown(document, { key: 'Escape' })
     expect(screen.queryByRole('menu')).toBeNull()
   })

packages/client/ui-workspace/tests/workspace-picker.spec.tsx

@@ -205,6 +205,8 @@ describe('WorkspacePicker', () => {
   it('reports non-Error creation failures', async () => {
     const b = mount([], vi.fn(async () => { throw 'permission denied' }))
     chooseItem('Create a new workspace')
+    // The name field starts empty (no prefill); a name is required to submit.
+    fireEvent.change(screen.getByLabelText('New workspace name'), { target: { value: 'broken' } })
     fireEvent.click(screen.getByRole('button', { name: 'Create workspace' }))
     await waitFor(() => {
       expect(screen.getByRole('alert').textContent).toBe('Workspace creation failed: permission denied')