feat(web): add workspace-aware session flow

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

@@ -0,0 +1,46 @@
+/* Modal form styles mirror the empty state's path/create modals (same figma
+ * dialog family: field h44, r22, hairline border, pad 14/7) so the two
+ * entries stay visually identical. */
+.modalInput {
+  box-sizing: border-box;
+  width: 100%;
+  height: 44px;
+  padding: 7px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 22px;
+  outline: none;
+  background: transparent;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.modalInput::placeholder {
+  color: var(--dsw-alias-label-caption);
+}
+
+.modalInput:disabled {
+  color: var(--dsw-alias-label-dimmed);
+}
+
+.modalAction {
+  min-width: 72px;
+}
+
+.modalError,
+.modalStatus,
+.menuStatus {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.modalError {
+  color: var(--dsw-alias-state-error-primary);
+}
+
+.modalStatus,
+.menuStatus {
+  color: var(--dsw-alias-label-secondary);
+}

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

@@ -0,0 +1,196 @@
+/** Shared Workspace picker for the sidebar and New Session hero. */
+import { useCallback, useState } from 'react'
+import {
+  Button, IconFolderClose16, IconPlusOutline16, Menu, Modal, type MenuEntry,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { WorkspacePickerProps } from './contract/slots.ts'
+import css from './WorkspacePicker.module.css'
+
+const CREATE_WORKSPACE = '::create-workspace'
+const USE_EXISTING = '::use-existing'
+const CREATE_NEW = '::create-new'
+
+type ModalKind = 'path' | 'create' | null
+
+export function WorkspacePicker({
+  open,
+  anchorRef,
+  useWorkspaces,
+  onPick,
+  onClose,
+  createWorkspace,
+}: WorkspacePickerProps) {
+  const workspaceSnapshot = useWorkspaces(state => state)
+  const workspaces = workspaceSnapshot.items
+  const getAnchorRect = useCallback(
+    () => anchorRef?.current?.getBoundingClientRect() ?? null,
+    [anchorRef],
+  )
+  const [modalKind, setModalKind] = useState<ModalKind>(null)
+  const [pathDraft, setPathDraft] = useState('')
+  const [workspaceName, setWorkspaceName] = useState('')
+  const [creating, setCreating] = useState(false)
+  const [modalError, setModalError] = useState<string | null>(null)
+  const normalizedWorkspaceName = workspaceName.trim()
+  const duplicateWorkspaceName = normalizedWorkspaceName !== ''
+    && workspaces.some(workspace => workspace.title === normalizedWorkspaceName)
+
+  const items: MenuEntry[] = [
+    ...workspaces.map(workspace => ({
+      id: workspace.workspaceId as string,
+      label: workspace.title,
+      icon: <IconFolderClose16 size={16} />,
+    })),
+    ...(workspaces.length > 0 ? [{ type: 'separator' as const, id: 'sep-create' }] : []),
+    {
+      id: CREATE_WORKSPACE,
+      label: 'Create workspace',
+      icon: <IconPlusOutline16 size={16} />,
+      submenu: [
+        { id: USE_EXISTING, label: 'Use an existing folder' },
+        { id: CREATE_NEW, label: 'Create a new workspace' },
+      ],
+    },
+  ]
+
+  const closeModal = (): void => {
+    if (creating) return
+    setModalKind(null)
+    setModalError(null)
+  }
+
+  const handleSelect = (id: string): void => {
+    if (id === USE_EXISTING) {
+      onClose()
+      setPathDraft('')
+      setModalError(null)
+      setModalKind('path')
+      return
+    }
+    if (id === CREATE_NEW) {
+      onClose()
+      setWorkspaceName('workspace')
+      setModalError(null)
+      setModalKind('create')
+      return
+    }
+    onPick(id as WorkspaceId)
+  }
+
+  const create = (input: { name: string } | { path: string }): void => {
+    if (creating) return
+    setCreating(true)
+    setModalError(null)
+    void createWorkspace(input).then((workspace) => {
+      setCreating(false)
+      setModalKind(null)
+      onPick(workspace.workspaceId)
+    }).catch((reason: unknown) => {
+      const message = reason instanceof Error ? reason.message : String(reason)
+      setModalError(`Workspace creation failed: ${message}`)
+      setCreating(false)
+    })
+  }
+
+  const confirmPath = (): void => {
+    const path = pathDraft.trim()
+    if (path !== '') create({ path })
+  }
+
+  const confirmCreate = (): void => {
+    if (normalizedWorkspaceName !== '' && !duplicateWorkspaceName) {
+      create({ name: normalizedWorkspaceName })
+    }
+  }
+
+  return (
+    <>
+      <Menu
+        open={open}
+        anchor={null}
+        items={items}
+        onSelect={handleSelect}
+        onClose={onClose}
+        portal
+        getAnchorRect={getAnchorRect}
+      />
+      {open && workspaceSnapshot.phase === 'pending' && <div className={css.menuStatus} role="status">Loading workspaces…</div>}
+      <Modal
+        open={modalKind === 'path'}
+        onClose={closeModal}
+        title="Use an existing folder"
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} disabled={creating} onClick={closeModal}>Cancel</Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={creating || pathDraft.trim() === ''}
+              onClick={confirmPath}
+            >
+              Use folder
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={pathDraft}
+          aria-label="Existing folder path"
+          autoFocus
+          disabled={creating}
+          placeholder="/path/to/project"
+          onChange={(event) => { setPathDraft(event.target.value) }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              confirmPath()
+            }
+          }}
+        />
+        {creating && <div className={css.modalStatus} role="status">Creating workspace…</div>}
+        {modalError !== null && <div className={css.modalError} role="alert">{modalError}</div>}
+      </Modal>
+      <Modal
+        open={modalKind === 'create'}
+        onClose={closeModal}
+        title="Create a new workspace"
+        description="The name is used for both the workspace and its new folder."
+        footer={(
+          <>
+            <Button variant="outline" className={css.modalAction!} disabled={creating} onClick={closeModal}>Cancel</Button>
+            <Button
+              variant="primary"
+              className={css.modalAction!}
+              disabled={creating || normalizedWorkspaceName === '' || duplicateWorkspaceName}
+              onClick={confirmCreate}
+            >
+              Create workspace
+            </Button>
+          </>
+        )}
+      >
+        <input
+          className={css.modalInput}
+          value={workspaceName}
+          aria-label="New workspace name"
+          autoFocus
+          disabled={creating}
+          onChange={(event) => { setWorkspaceName(event.target.value); setModalError(null) }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault()
+              confirmCreate()
+            }
+          }}
+        />
+        {creating && <div className={css.modalStatus} role="status">Creating workspace…</div>}
+        {duplicateWorkspaceName && (
+          <div className={css.modalError} role="alert">A workspace named “{normalizedWorkspaceName}” already exists.</div>
+        )}
+        {modalError !== null && <div className={css.modalError} role="alert">{modalError}</div>}
+      </Modal>
+    </>
+  )
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Shared Workspace picker contract for the sidebar and page-local Session Intent hero
+ * slots. Each runtime share provides its owner's popover controls plus the
+ * global useWorkspaces hook; this package adds the injected Host Workspace
+ * creation callback.
+ */
+import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+// Type-only: pull both owner SlotMap merges into programs that resolve the
+// picker runtime union below.
+import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { WorkspaceView } from '@deepseek-ai/dsh-client-runtime/client'
+
+/**
+ * Registrant-private injected share. Pick semantics remain in each owner's
+ * onPick callback; this callback creates only the real Host Workspace. A type
+ * alias supplies the implicit index signature required by the registry.
+ */
+export type WorkspacePickerInjected = {
+  /** Explicitly create or adopt a real Workspace before targeting a Session. */
+  createWorkspace(input: { name: string } | { path: string }): Promise<WorkspaceView>
+}
+
+/**
+ * Full picker props: either owner's runtime share, including useWorkspaces,
+ * plus this package's injected creation callback.
+ */
+export type WorkspacePickerProps =
+  (PropsRuntime<'sidebar.workspace'> | PropsRuntime<'conversation.empty.workspace'>)
+  & WorkspacePickerInjected

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

@@ -0,0 +1,54 @@
+/**
+ * Shared Workspace picker plugin, browser half. WorkspacePicker registers in
+ * the sidebar and page-local Session Intent hero slots, reads real Host Workspaces
+ * through the global useWorkspaces hook, and delegates selection semantics to
+ * each owner. Its injected share creates a Workspace without creating a
+ * Session. Export discipline: packages/client/AGENTS.md.
+ */
+import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { WorkspacePickerInjected } from './contract/slots.ts'
+import { WorkspacePicker } from './WorkspacePicker.tsx'
+
+export type { WorkspacePickerInjected, WorkspacePickerProps } from './contract/slots.ts'
+
+/**
+ * Required services (cordis fiber inject). The target slot is declared by
+ * the ui-sidebar apply, whose activation order relative to this one is NOT
+ * constrained: dshClient.inject edges are informational (loading/prefetch
+ * metadata, never apply sequencing) and the sidebar provides no waitable
+ * service. apply therefore registers via declaration-aware deferral instead
+ * of assuming order.
+ */
+export const inject = ['slots', 'workspaces']
+
+/**
+ * Register WorkspacePicker in both owner slots once their declarations are on
+ * the ledger. The inject factory returns a plain Workspace creation callback;
+ * data reads use the framework's global useWorkspaces hook.
+ * @param ctx - client root context.
+ */
+export function apply(ctx: ClientContext): void {
+  const injected = (): WorkspacePickerInjected => ({
+    createWorkspace: input => ctx.workspaces.create(input),
+  })
+  // Declaration-aware registration: the sidebar's declaring apply may
+  // activate after this one (entry activation order is unconstrained), and a
+  // register into an undeclared slot throws. Register once the declaration
+  // is on the ledger; the subscription also re-registers after an HMR
+  // collapse re-declares the slot (the cascade disposed our entry with it).
+  ctx.effect(() => {
+    const slotNames = ['sidebar.workspace', 'conversation.empty.workspace'] as const
+    const disposers = new Map<(typeof slotNames)[number], () => void>()
+    const tryRegister = (name: (typeof slotNames)[number]): void => {
+      if (ctx.slots.spec(name) === undefined) return
+      if (ctx.slots.entries(name).some(e => e.component === WorkspacePicker)) return
+      disposers.set(name, ctx.slots.register({ name, inject: injected }, WorkspacePicker))
+    }
+    const unsubscribers = slotNames.map(name => ctx.slots.subscribe(name, () => { tryRegister(name) }))
+    for (const name of slotNames) tryRegister(name)
+    return () => {
+      for (const unsubscribe of unsubscribers) unsubscribe()
+      for (const dispose of disposers.values()) dispose()
+    }
+  }, 'ui-workspace: picker registrations')
+}

packages/client/ui-workspace/src/css-modules.d.ts

@@ -0,0 +1,6 @@
+declare module '*.module.css' {
+  const classes: Record<string, string>
+  export default classes
+}
+
+declare module '*.css'

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

@@ -0,0 +1,9 @@
+/**
+ * Workspace picker plugin, node half. Pure UI plugin: the empty apply exists
+ * so the plugin appears in the host cordis.yml / Loader (load and lifecycle
+ * follow the host; the browser half ships via exports["./client"], discovered
+ * through the package.json dshClient declaration).
+ */
+
+/** Host plugin body — no host-side behavior for the workspace picker plugin. */
+export function apply(): void {}

packages/client/ui-workspace/src/invariant.ts

@@ -0,0 +1,32 @@
+/**
+ * Package-owned invariant companion for `@deepseek-ai/dsh-client-ui-workspace`.
+ * @module @deepseek-ai/dsh-client-ui-workspace/invariant
+ */
+
+/* jscpd:ignore-start */
+import type { Context } from 'cordis'
+import type { InvariantInstaller } from '@deepseek-ai/dsh-invariants'
+
+const PACKAGE_NAME = '@deepseek-ai/dsh-client-ui-workspace'
+
+/** Cordis companion plugin name. */
+export const name = 'client-ui-workspace-invariant'
+/** Service required before the companion can reserve package ownership. */
+export const inject = ['invariants']
+
+/**
+ * No runtime invariant: a pure-consumer plugin registering one presentational
+ * component into two host-declared slots — its inject face is two stateless
+ * RPC wrappers plus a create-and-open call; it emits no cordis events and
+ * owns no cross-plugin mutable state.
+ */
+const install: InvariantInstaller = () => {}
+
+/**
+ * Register this package's invariant companion.
+ * @param ctx - Cordis context carrying the invariant service.
+ * @returns the installed registration's disposer after setup succeeds.
+ */
+export const apply = (ctx: Context): Promise<() => void> =>
+  Promise.resolve(ctx.invariants.register(PACKAGE_NAME, install))
+/* jscpd:ignore-end */