// @vitest-environment jsdom // The diff render intent on the web side: the pure diffCardModel derivation // over callView/resultView, and both conversation render sites that consume it // — the chat tool row's expanded body (GenericToolCard / FileMutationRow) and // the details panel's Output section. import { afterEach, describe, expect, it, vi } from 'vitest' import { cleanup, fireEvent, render } from '@testing-library/react' import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react' import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client' import type { ConversationSnapshot, RunningToolCall, SessionId, SessionListState, ToolResultNode, WorkspaceListState, } from '@deepseek-ai/dsh-client-runtime/client' import type { ToolCallView, ToolResultView } from '@deepseek-ai/dsh-client-connection/client' import type { SelectionTarget } from '@deepseek-ai/dsh-client-ui-conversation/client' import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime' import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts' import { CHAT_DIFF_MAX_LINES, diffCardModel } from '../src/client/contract/diff-card-model.ts' import { createChatStore } from '../src/client/stores.ts' import { GenericToolCard, type GenericToolCardProps } from '../src/client/chat/GenericToolCard.tsx' import { DetailsPanel } from '../src/client/skeleton/DetailsPanel.tsx' import { FileMutationRow, fileMutationToolview } from '../src/client/toolviews/file-mutation-row.tsx' import { zh } from '../src/client/locales.ts' afterEach(cleanup) /** FileMutationRow's full prop shape (ToolRow runtime share + conversation locale seat). */ type FileMutationRowProps = Parameters[0] const SID = 's1' as SessionId const t = makeTranslate(zh, commonZh) const ARGS = '{"file_path":"notes/demo.txt","old_string":"hello","new_string":"hello fixture"}' /** The edit tool's own call view (a call-time diff derived from the arguments). */ const callDiff = (over?: Partial>): ToolCallView => ({ card: 'diff', title: 'Edit notes/demo.txt', diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }], ...over, }) /** The edit tool's own result view (the applied hunk diff). */ const resultDiff = (over?: Partial>): ToolResultView => ({ card: 'diff', title: 'Edit notes/demo.txt', diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }], ...over, }) const running = (over?: Partial): RunningToolCall => ({ callId: 'c1', name: 'edit', argsRaw: ARGS, turn: 1, step: 1, time: 1_000, callView: callDiff(), ...over, }) const settled = (over?: Partial): ToolResultNode => ({ kind: 'tool-result', seq: 10, time: 2_000, callId: 'c1', call: { name: 'edit', argsRaw: ARGS }, callTime: 1_000, content: [{ type: 'text', text: 'The file notes/demo.txt has been updated successfully.' }], isError: false, callView: callDiff(), resultView: resultDiff(), ...over, }) describe('diffCardModel', () => { it('derives a running card from the call view alone', () => { expect(diffCardModel(running())).toEqual({ card: { diffs: [{ path: 'notes/demo.txt', oldText: 'hello', newText: 'hello fixture' }] }, }) }) it('derives a settled card from the result view, which replaces the call-time diff', () => { // The applied hunks (result) win over the args-derived call diff. expect(diffCardModel(settled({ resultView: resultDiff({ diffs: [{ path: 'notes/demo.txt', oldText: 'a', newText: 'b' }] }), }))).toEqual({ card: { diffs: [{ path: 'notes/demo.txt', oldText: 'a', newText: 'b' }] }, }) }) it('renders a settled diff even when the window dropped the call head', () => { // A truncated call carries only the result view, which holds the whole change. expect(diffCardModel(settled({ call: null, callView: null }))?.card.diffs).toHaveLength(1) }) it('returns null for every non-diff call: no views, generic views, unknown cards', () => { expect(diffCardModel(running({ callView: null }))).toBeNull() expect(diffCardModel(settled({ callView: null, resultView: null }))).toBeNull() expect(diffCardModel(running({ callView: { card: 'generic', title: 'read x' } }))).toBeNull() // A generic result settles a diff call on the generic path (write/edit's // own execution-error arm). expect(diffCardModel(settled({ resultView: { card: 'generic' } }))).toBeNull() // A card tag this UI version does not know arrives over the wire; the // documented generic-card default takes it, not a crash. const future = { card: 'chart', title: 'plot' } as unknown as ToolCallView expect(diffCardModel(running({ callView: future }))).toBeNull() expect(diffCardModel(settled({ callView: future, resultView: { card: 'chart' } as unknown as ToolResultView, }))).toBeNull() }) it('falls back to null for a malformed diff payload off the wire', () => { // toolEventViewSchema validates only the `card` string, so a version // mismatch can deliver a diff card with an unusable diffs field. Each shape // routes to the generic path instead of throwing inside DiffBlock. const bad = (diffs: unknown): ToolResultView => ({ card: 'diff', diffs } as unknown as ToolResultView) expect(diffCardModel(settled({ resultView: bad(undefined) }))).toBeNull() expect(diffCardModel(settled({ resultView: bad([]) }))).toBeNull() expect(diffCardModel(settled({ resultView: bad('nope') }))).toBeNull() expect(diffCardModel(settled({ resultView: bad([null]) }))).toBeNull() expect(diffCardModel(settled({ resultView: bad([{ path: 1, oldText: null, newText: 'x' }]) }))).toBeNull() expect(diffCardModel(settled({ resultView: bad([{ path: 'a', oldText: 5, newText: 'x' }]) }))).toBeNull() expect(diffCardModel(settled({ resultView: bad([{ path: 'a', oldText: null, newText: 9 }]) }))).toBeNull() // The running side narrows identically. expect(diffCardModel(running({ callView: { card: 'diff', diffs: 'nope' } as unknown as ToolCallView }))).toBeNull() }) }) describe('chat row diff body', () => { const ownerProps = (block: RunningToolCall | ToolResultNode): GenericToolCardProps => ({ callId: 'c1', toolName: 'edit', block, openFile: vi.fn(), t, }) it('the expanded body is the applied diff, capped tighter than the panel', () => { expect(CHAT_DIFF_MAX_LINES).toBeLessThan(16) const view = render() // Collapsed: the summary row (path) only, no diff body. expect(view.queryByText('hello fixture')).toBeNull() // The path link is not the expand control; the leading toggle is. fireEvent.click(view.container.querySelector('[data-expandable]')!) expect(view.container.querySelector('[data-diff]')).not.toBeNull() expect(view.getByText('hello fixture')).toBeTruthy() }) it('a running diff call expands to its intended change', () => { const view = render() fireEvent.click(view.container.querySelector('[data-expandable]')!) expect(view.container.querySelector('[data-diff]')).not.toBeNull() }) it('a non-diff call keeps the args-JSON text body', () => { // A non-file tool name so the row is not single-file (no path link), and its // args body is the fallback the diff card must not have replaced. const view = render() fireEvent.click(view.container.querySelector('[data-expandable]')!) expect(view.container.querySelector('[data-diff]')).toBeNull() expect(view.getByText(/"foo"/)).toBeTruthy() }) }) describe('FileMutationRow diff card', () => { const list = () => createSnapshotStore({ ids: [SID], byId: { [SID]: { id: SID, displayTitle: 'r', running: false, blank: false, updatedAt: 0, cwd: '/w/app' } }, current: SID, phase: 'ready', subagentsByParent: {}, currentAddress: undefined, }) const rowProps = (block: RunningToolCall | ToolResultNode, toolName = 'edit'): FileMutationRowProps => ({ callId: 'c1', toolName, block, openFile: vi.fn(), cwd: '/w/app', sessionId: SID, useSessions: bindSnapshotSelector(list()), t, } as unknown as FileMutationRowProps) /** The whole summary row is the expand toggle (ToolRow's unified interaction). */ const toggleRow = (view: { container: HTMLElement }) => { fireEvent.click(view.container.querySelector('[data-expandable]')!) } it('collapses to the summary row; expanding reveals the applied diff card', () => { const view = render() // The diff card is collapsed by default — not in the DOM until expanded. expect(view.container.querySelector('[data-diff]')).toBeNull() expect(view.queryByText('hello fixture')).toBeNull() toggleRow(view) expect(view.container.querySelector('[data-diff]')).not.toBeNull() expect(view.getByText('hello fixture')).toBeTruthy() expect(view.getByText('复制')).toBeTruthy() }) it('the summary is a path link that opens the tool path through the host', () => { const openFile = vi.fn() const view = render() // The path link rides the collapsed summary, so it opens without expanding. fireEvent.click(view.getByRole('button', { name: 'notes/demo.txt' })) // The row passes the tool's own path; the injected openFile resolves it // against the session cwd (apply.ts), so the row must not resolve twice. expect(openFile).toHaveBeenCalledWith('notes/demo.txt') }) it('registers under write too, rendering a create as an added-only diff', () => { const writeArgs = '{"file_path":"notes/new.txt","content":"hello fixture\\n"}' const view = render() // The footer counts live inside the collapsed diff card. toggleRow(view) expect(view.getByText('└ +1 -0 · 1 file')).toBeTruthy() }) it('reflects the run state on its leading slot', () => { const runningView = render() expect(runningView.container.querySelector('[data-state="running"]')).not.toBeNull() cleanup() const errorView = render() expect(errorView.container.querySelector('[data-state="error"]')).not.toBeNull() }) it('a mutation call with no diff view renders the summary row alone', () => { const view = render() // No diff material: expanding shows the args-JSON body, never a diff card. expect(view.container.querySelector('[data-diff]')).toBeNull() toggleRow(view) expect(view.container.querySelector('[data-diff]')).toBeNull() }) it('surfaces the result text when an errored mutation has no diff card', () => { // write/edit return undefined from presentResult on isError, so the failure // has no diff — ToolRow shows the model-facing error text as the collapsed // summary's first line (errorSummary) instead of a bare red dot. const view = render() expect(view.container.querySelector('[data-diff]')).toBeNull() expect(view.getByText('old_string not found in notes/demo.txt')).toBeTruthy() }) it('falls back to the error name/code when an errored result has no text block', () => { const view = render() expect(view.getByText('ToolError: sandbox_denied')).toBeTruthy() }) it('shows no error summary for a successful diff or a running call', () => { // ToolRow's error-color summary line is set only on the error state. const ok = render() expect(ok.container.querySelector('[class*="_errorSummary_"]')).toBeNull() cleanup() const run = render() expect(run.container.querySelector('[class*="_errorSummary_"]')).toBeNull() }) it('shows the stopped state when the call was interrupted', () => { const view = render() expect(view.container.querySelector('[data-state="stopped"]')).not.toBeNull() // The amber StateDot is aria-hidden, so ToolRow carries the state to AT as // visually-hidden text; without it a stopped row is a colour-only signal. expect(view.getByText('已停止')).toBeTruthy() }) it('renders a plain summary span when the call carries no file path', () => { // Empty args leave deriveFilePath undefined, so the summary is not a link. const view = render() expect(view.container.querySelector('[class*="_fileLink_"]')).toBeNull() expect(view.container.querySelector('[class*="_summary_"]')).not.toBeNull() }) }) describe('fileMutationToolview registration', () => { it('registers one component under both edit and write, and each disposes', () => { const registered: { key: string; locale: unknown; disposed: boolean }[] = [] const disposers: (() => void)[] = [] let disposeInjection = (): void => {} const ctx = { slots: { inject: (_name: string, callback: () => Iterable<() => void>) => { const active = [...callback()] disposeInjection = () => { for (const dispose of active.reverse()) dispose() } return disposeInjection }, register: ({ key, locale }: { name: string; key: string; locale?: string }) => { const entry = { key, locale, disposed: false } registered.push(entry) const dispose = () => { entry.disposed = true } disposers.push(dispose) return dispose }, }, } fileMutationToolview.apply(ctx as never) expect(registered.map(r => r.key).sort()).toEqual(['edit', 'write']) // Both keys claim the conversation locale seat ToolRow's body copy needs. expect(registered.map(r => r.locale)).toEqual(['conversation', 'conversation']) expect(fileMutationToolview.inject).toEqual(['slots']) // Disposal removes each contribution (packages/AGENTS.md registry contract). disposeInjection() expect(registered.every(r => r.disposed)).toBe(true) }) }) describe('DetailsPanel diff Output section', () => { function mount(snapshot: ConversationSnapshot, selection: SelectionTarget | null, cwd?: string) { localStorage.clear() const chat = createChatStore().create() if (selection !== null) chat.actions.select(selection) const sessions = createSnapshotStore(cwd === undefined ? { ids: [], byId: {}, current: undefined, phase: 'ready', subagentsByParent: {}, currentAddress: undefined } : { ids: [SID], byId: { [SID]: { id: SID, displayTitle: 'r', running: false, blank: false, updatedAt: 0, cwd } }, current: SID, phase: 'ready', subagentsByParent: {}, currentAddress: undefined, }) const workspaces = createSnapshotStore({ items: [], archivedSessionIds: [], state: 'idle', phase: 'ready', error: null, baselinesReady: true, recentWorkspaceId: undefined, }) return render( snapshot, subscribe: () => () => {} })} useSessions={bindSnapshotSelector(sessions)} useWorkspaces={bindSnapshotSelector(workspaces)} useInput={(() => { throw new Error('unused') })} inputActions={{ setDraft: () => {}, submit: () => {} }} useProjection={(() => undefined)} useStore={bindSnapshotSelector(chat)} actions={chat.actions} closeDetails={vi.fn()} t={t} />, ) } function snapshot(over: Partial = {}): ConversationSnapshot { return { sessionId: SID, nodes: [], turnTimings: new Map(), turnEnds: new Map(), partial: null, runningCalls: [], codeDispatches: new Map(), pending: [], queue: [], running: false, composerPhase: 'active', removed: false, openState: 'open', openError: null, hasMore: false, loadingOlder: false, promptError: null, blank: false, subagent: null, lastAgentError: null, ...over, } } const target: SelectionTarget = { turnSeq: 10, callId: 'c1', toolName: 'edit' } it('renders the applied diff at full height, keeping the JSON Input section', () => { const view = mount(snapshot({ nodes: [settled()] }), target) expect(view.getByText(/"file_path"/)).toBeTruthy() expect(view.container.querySelector('[data-diff]')).not.toBeNull() expect(view.getByText('hello fixture')).toBeTruthy() }) it('a running diff call renders its intended change, not the 运行中… placeholder', () => { const view = mount(snapshot({ runningCalls: [running()] }), target) expect(view.container.querySelector('[data-diff]')).not.toBeNull() expect(view.queryByText('运行中…')).toBeNull() }) it('a non-diff result keeps the flattened pre', () => { const view = mount(snapshot({ nodes: [settled({ callView: null, resultView: null, content: [{ type: 'text', text: 'permission denied' }], })], }), target) expect(view.container.querySelector('[data-diff]')).toBeNull() expect(view.getByText('输出').closest('section')?.querySelector('pre')?.textContent).toBe('permission denied') }) })