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.
This commit is contained in:
imccyu
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* ui-plan browser half on a real SlotsService: the plugin occupies the
|
||||
* conversation-declared `conversation.input.plan` single seat; the injected
|
||||
* face maps mode selections onto /plan command lines and folds admission
|
||||
* conversation-declared `conversation.input.plan` single seat with the plan
|
||||
* status chip; the injected face executes /plan off and folds admission
|
||||
* outcomes into null (admitted) or a user-visible failure line; teardown
|
||||
* empties the seat (HMR safety).
|
||||
*/
|
||||
@@ -9,8 +9,8 @@ import { Context } from 'cordis'
|
||||
import { describe, expect, it, vi } from 'vitest'
|
||||
import { SlotsService } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import type { SessionId } from '@deepseek-ai/dsh-client-runtime/client'
|
||||
import { PlanModeControl } from '../src/client/PlanModeControl.tsx'
|
||||
import type { PlanModeControlInjected } from '../src/client/index.ts'
|
||||
import { PlanChip } from '../src/client/PlanModeControl.tsx'
|
||||
import type { PlanChipInjected } from '../src/client/index.ts'
|
||||
import { apply, inject } from '../src/client/index.ts'
|
||||
import { apply as nodeApply } from '../src/index.ts'
|
||||
|
||||
@@ -49,30 +49,28 @@ describe('ui-plan browser apply', () => {
|
||||
.rejects.toThrow(/slot "conversation.input.plan" is not declared/)
|
||||
})
|
||||
|
||||
it('registers the control, maps selections to /plan lines, and unregisters on teardown', async () => {
|
||||
it('registers the chip, executes /plan off, and unregisters on teardown', async () => {
|
||||
const b = await bench()
|
||||
const fiber = b.ctx.plugin({ inject: [...inject], apply })
|
||||
await fiber.await()
|
||||
const entry = b.slots.entries('conversation.input.plan')[0]!
|
||||
expect(entry.component).toBe(PlanModeControl)
|
||||
const injected = (entry.inject as unknown as (id: SessionId) => PlanModeControlInjected)(SID)
|
||||
expect(entry.component).toBe(PlanChip)
|
||||
const injected = (entry.inject as unknown as (id: SessionId) => PlanChipInjected)(SID)
|
||||
|
||||
await expect(injected.setPlanMode(true)).resolves.toBeNull()
|
||||
expect(b.execute).toHaveBeenLastCalledWith({ sessionId: SID, line: '/plan' })
|
||||
await expect(injected.setPlanMode(false)).resolves.toBeNull()
|
||||
await expect(injected.exitPlanMode()).resolves.toBeNull()
|
||||
expect(b.execute).toHaveBeenLastCalledWith({ sessionId: SID, line: '/plan off' })
|
||||
|
||||
// Business failure folds to the composer-visible line.
|
||||
b.execute.mockResolvedValueOnce({
|
||||
result: { ok: false as const, error: { code: 'session-not-found', message: 'gone', details: {} } },
|
||||
} as never)
|
||||
await expect(injected.setPlanMode(true)).resolves.toBe('gone（session-not-found）')
|
||||
await expect(injected.exitPlanMode()).resolves.toBe('gone（session-not-found）')
|
||||
|
||||
// Unmatched admission (plan-mode not composed host-side) is also a failure line.
|
||||
b.execute.mockResolvedValueOnce({
|
||||
result: { ok: true as const, value: { matched: false as const } },
|
||||
} as never)
|
||||
await expect(injected.setPlanMode(true)).resolves.toBe('未知命令：/plan')
|
||||
await expect(injected.exitPlanMode()).resolves.toBe('未知命令：/plan off')
|
||||
|
||||
await fiber.dispose()
|
||||
expect(b.slots.entries('conversation.input.plan')).toHaveLength(0)
|
||||
|
||||
@@ -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()
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user