feat(web): replace the plan select with a status chip and placeholder swap

Plan mode is entered through /plan only — the select control is retired. The conversation.input.plan seat (now right of the access-mode control) renders a read-only Plan chip while the projection's effective target is plan mode; its hover x executes /plan off, and the chip follows the folded target (appears on /plan immediately, disappears on /plan off) with frames correcting either way. While plan mode is targeted the composer textarea's placeholder switches to the plan-task wording — InputBar reads the same projection through the standard-kit useProjection (the TodoDock posture: a type-only key merge, no domain service edge), and owner placeholders still win.
2026-07-28 23:39:50 +08:00
parent d804c9c94d
commit a39bd9035e
19 changed files with 207 additions and 218 deletions
@@ -1,119 +1,110 @@
 // @vitest-environment jsdom
 /**
- * PlanModeControl over the `plan` projection: an absent key (capability
- * absence) hides the control; {active, pending} renders committed and
- * pending-target labels; selection maps from the effective target and
- * surfaces failures without mutating the host-confirmed state.
+ * PlanChip over the `plan` projection: nothing renders while the capability
+ * is absent or the effective target is the default mode; the chip renders
+ * while the target is plan mode (pending follows the target — /plan shows it
+ * immediately, /plan off hides it immediately); the chip button executes
+ * /plan off and surfaces failures without hiding until the projection says so.
 */
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
 import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react'
 import type { PlanProjection } from '@deepseek-ai/dsh-plan-mode/client'
-import { PlanModeControl, type PlanModeControlProps } from '../src/client/PlanModeControl.tsx'
+import { PlanChip, type PlanChipProps } from '../src/client/PlanModeControl.tsx'

 afterEach(cleanup)

 function setup(
  plan: PlanProjection | undefined,
-  setPlanMode = vi.fn(() => Promise.resolve<string | null>(null)),
+  exitPlanMode = vi.fn(() => Promise.resolve<string | null>(null)),
  locked = false,
 ) {
  const store = createSnapshotStore<{ value: PlanProjection | undefined }>({ value: plan })
  const useProjection = (_key: string, selector?: (v: unknown) => unknown) =>
    bindSnapshotSelector(store)(s => (selector ?? (v => v))(s.value))
-  const props = { useProjection, locked, setPlanMode } as unknown as PlanModeControlProps
-  const view = render(<PlanModeControl {...props} />)
-  return { store, setPlanMode, view }
+  const props = { useProjection, locked, exitPlanMode } as unknown as PlanChipProps
+  const view = render(<PlanChip {...props} />)
+  return { store, exitPlanMode, view }
 }

-describe('PlanModeControl', () => {
-  it('hides an absent capability and renders committed modes', () => {
+const chip = () => screen.getByRole('button', { name: 'Plan mode on, press to turn off' })
+
+describe('PlanChip', () => {
+  it('renders nothing for absent capability or the default mode', () => {
    const absent = setup(undefined)
    expect(absent.view.container.innerHTML).toBe('')
    cleanup()
-    setup({ active: false, pending: false })
-    expect(screen.getByTitle('当前为默认模式')).toBeTruthy()
-    const select = screen.getByRole<HTMLSelectElement>('combobox', { name: '协作模式' })
-    expect(select.value).toBe('default')
-    expect(document.getElementById(select.getAttribute('aria-describedby') ?? '')?.textContent)
-      .toBe('当前为默认模式')
-  })
-
-  it('renders the pending target as the opposite of the committed state', () => {
-    setup({ active: false, pending: true })
-    expect(screen.getByText('计划 · 待生效')).toBeTruthy()
-    const planSelect = screen.getByRole('combobox')
-    expect(document.getElementById(planSelect.getAttribute('aria-describedby') ?? '')?.textContent)
-      .toBe('当前为默认模式；计划模式将在下一次模型请求时生效')
+    const inactive = setup({ active: false, pending: false })
+    expect(inactive.view.container.innerHTML).toBe('')
    cleanup()
-    setup({ active: true, pending: true })
-    expect(screen.getByText('默认 · 待生效')).toBeTruthy()
-    const defaultSelect = screen.getByRole<HTMLSelectElement>('combobox')
-    expect(defaultSelect.value).toBe('default')
-    expect(document.getElementById(defaultSelect.getAttribute('aria-describedby') ?? '')?.textContent)
-      .toBe('当前为计划模式；默认模式将在下一次模型请求时生效')
+    // Active with a pending exit: the target is default — chip already gone.
+    const leaving = setup({ active: true, pending: true })
+    expect(leaving.view.container.innerHTML).toBe('')
  })

-  it('switches from the effective target, disables during its own call, and follows the pushed projection', async () => {
-    let resolve!: (value: string | null) => void
-    const setPlanMode = vi.fn(() => new Promise<string | null>((done) => { resolve = done }))
-    const { store } = setup({ active: false, pending: false }, setPlanMode)
-    const select = screen.getByRole<HTMLSelectElement>('combobox', { name: '协作模式' })
-    expect(select.disabled).toBe(false)
-    fireEvent.change(select, { target: { value: 'plan' } })
-    expect(setPlanMode).toHaveBeenCalledWith(true)
-    expect(select.disabled).toBe(true)
+  it('renders while the effective target is plan mode, including the pending entry window', () => {
+    setup({ active: true, pending: false })
+    expect(chip()).toBeTruthy()
+    cleanup()
+    // /plan just ran (command/run folded, plan/mode not yet): target is plan.
+    setup({ active: false, pending: true })
+    expect(chip()).toBeTruthy()
+  })

-    // The projection frame lands (command/run folded host-side).
-    store.set({ value: { active: false, pending: true } })
+  it('the chip executes /plan off once and follows the projection down', async () => {
+    let resolve!: (value: string | null) => void
+    const exitPlanMode = vi.fn(() => new Promise<string | null>((done) => { resolve = done }))
+    const { store } = setup({ active: true, pending: false }, exitPlanMode)
+    fireEvent.click(chip())
+    expect(exitPlanMode).toHaveBeenCalledTimes(1)
+    // Busy while its own call is in flight.
+    fireEvent.click(chip())
+    expect(exitPlanMode).toHaveBeenCalledTimes(1)
    resolve(null)
+    // The off command's run record folds: target flips, the chip unmounts.
+    store.set({ value: { active: true, pending: true } })
    await waitFor(() => {
-      expect(screen.getByRole<HTMLSelectElement>('combobox').disabled).toBe(false)
+      expect(screen.queryByRole('button', { name: 'Plan mode on, press to turn off' })).toBeNull()
    })
-    expect(screen.getByText('计划 · 待生效')).toBeTruthy()
-    // Re-selecting the effective target is a no-op.
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
-    expect(setPlanMode).toHaveBeenCalledTimes(1)
  })

  it('disables under the locked owner prop', () => {
-    setup({ active: false, pending: false }, vi.fn(), true)
-    expect(screen.getByRole<HTMLSelectElement>('combobox').disabled).toBe(true)
+    setup({ active: true, pending: false }, vi.fn(), true)
+    expect((chip() as HTMLButtonElement).disabled).toBe(true)
  })

-  it('surfaces admission and transport failures without changing the confirmed mode', async () => {
-    const setPlanMode = vi.fn()
+  it('surfaces admission and transport failures while staying visible', async () => {
+    const exitPlanMode = vi.fn()
      .mockResolvedValueOnce('host said no')
      .mockRejectedValueOnce(new Error('network down'))
      .mockRejectedValueOnce('socket closed')
-    setup({ active: false, pending: false }, setPlanMode)
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
-    expect((await screen.findByText('模式切换失败')).getAttribute('title')).toBe('host said no')
-    expect(screen.getByTitle('当前为默认模式')).toBeTruthy()
+    setup({ active: true, pending: false }, exitPlanMode)
+    fireEvent.click(chip())
+    expect((await screen.findByText('退出 plan mode 失败')).getAttribute('title')).toBe('host said no')
+    expect(chip()).toBeTruthy()

-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
+    fireEvent.click(chip())
    expect(await screen.findByTitle('network down')).toBeTruthy()
-    expect(screen.getByRole<HTMLSelectElement>('combobox').disabled).toBe(false)

-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
+    fireEvent.click(chip())
    expect(await screen.findByTitle('socket closed')).toBeTruthy()
  })

  it('ignores in-flight fulfillment and rejection after unmount', () => {
    let resolve!: (value: string | null) => void
    const successful = setup(
-      { active: false, pending: false },
+      { active: true, pending: false },
      vi.fn(() => new Promise<string | null>((done) => { resolve = done })),
    )
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
+    fireEvent.click(chip())
    successful.view.unmount()
    expect(() => { resolve(null) }).not.toThrow()

    let reject!: (reason: unknown) => void
-    const setPlanMode = vi.fn(() => new Promise<string | null>((_done, fail) => { reject = fail }))
-    const { view } = setup({ active: false, pending: false }, setPlanMode)
-    fireEvent.change(screen.getByRole('combobox'), { target: { value: 'plan' } })
+    const exitPlanMode = vi.fn(() => new Promise<string | null>((_done, fail) => { reject = fail }))
+    const { view } = setup({ active: true, pending: false }, exitPlanMode)
+    fireEvent.click(chip())
    view.unmount()
    expect(() => { reject(new Error('late')) }).not.toThrow()
  })