// @vitest-environment jsdom // StatsLine (composer.dock entry): totals derivation + the RFC // hard acceptance — zero renders during streaming. Bash sample row: ToolRow // chrome (Bash · description) without a row click target. import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { act, cleanup, fireEvent, render } from '@testing-library/react' import type { AssistantMessageNode, ConversationSnapshot, SessionId, SessionListState, ToolResultNode, } from '@deepseek-ai/dsh-client-runtime/client' import { createSnapshotStore } from '@deepseek-ai/dsh-client-runtime/client' import { bindSnapshotSelector } from '@deepseek-ai/dsh-client-web-react' import { makeTranslate } from '@deepseek-ai/dsh-client-test-runtime' import { en as commonEn } from '@deepseek-ai/dsh-client-locale/src/locales/en.ts' import { zh as commonZh } from '@deepseek-ai/dsh-client-locale/src/locales/zh.ts' import { StatsLine, contextOccupancy, deriveStats, formatDuration, formatTokens, type StatsLineProps } from '../src/client/chat/StatsLine.tsx' import { BashRow } from '../src/client/toolviews/bash-sample.tsx' import { en, zh } from '../src/client/locales.ts' type BashRowProps = Parameters[0] // Mirrors the real lookup chain (conversation namespace, then common). const t: BashRowProps['t'] = makeTranslate(zh, commonZh) const tEn: StatsLineProps['t'] = makeTranslate(en, commonEn) /** jsdom has no ResizeObserver; StatsLine watches its row for ellipsis truncation through one. */ class ResizeObserverStub { observe(): void {} unobserve(): void {} disconnect(): void {} } beforeEach(() => { vi.stubGlobal('ResizeObserver', ResizeObserverStub) }) afterEach(() => { cleanup() vi.unstubAllGlobals() vi.restoreAllMocks() vi.useRealTimers() }) const SID = 's1' as SessionId const assistant = (seq: number, turn: number, usage?: unknown): AssistantMessageNode => ({ kind: 'assistant', seq, time: seq * 1_000, turn, step: seq, blocks: [{ kind: 'text', text: `t${seq}` }], ...(usage === undefined ? {} : { usage }), }) function snapshotBase(): 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, } } function makeSource(init?: Partial) { let snap: ConversationSnapshot = { ...snapshotBase(), ...init } const subs = new Set<() => void>() return { set: (next: Partial) => { snap = { ...snap, ...next } for (const fn of [...subs]) fn() }, source: { getSnapshot: () => snap, subscribe: (fn: () => void) => { subs.add(fn) return () => subs.delete(fn) }, }, } } describe('deriveStats', () => { it('counts turns and steps and never folds node usage into accounting', () => { const stats = deriveStats([ assistant(1, 1, { inputTokens: 100, outputTokens: 50, cacheReadTokens: 900 }), assistant(2, 1, { inputTokens: 100, outputTokens: 50 }), assistant(3, 2), ]) expect(stats.turns).toBe(2) expect(stats.steps).toBe(3) // Window-scoped by design: the paged window is not an accounting source, so // the fold exposes no billing fields (billing rides the projection); // decodeTokens is a throughput input, not a billed total. expect(Object.keys(stats).sort()).toEqual( ['decodeMs', 'decodeTokens', 'llmMs', 'steps', 'toolMs', 'ttftMs', 'ttftSteps', 'turns'], ) }) it('ignores tool results with no call time', () => { const tool: ToolResultNode = { kind: 'tool-result', seq: 5, time: 5_000, callId: 'c', call: null, callTime: null, content: [], isError: false, callView: null, resultView: null, } const stats = deriveStats([tool, assistant(1, 1)]) expect(stats.steps).toBe(1) expect(stats.toolMs).toBe(0) }) it('sums LLM wall time from assistant timing and tool wall time from call/result pairs', () => { const timed: AssistantMessageNode = { ...assistant(1, 1), timing: { stepStartTime: 1_000, firstTokenTime: 1_200, completedTime: 3_500 }, } const untimed: AssistantMessageNode = { ...assistant(2, 1), timing: { stepStartTime: null, firstTokenTime: null, completedTime: 9_000 }, } const tool: ToolResultNode = { kind: 'tool-result', seq: 5, time: 7_000, callId: 'c', call: null, callTime: 4_000, content: [], isError: false, callView: null, resultView: null, } const stats = deriveStats([timed, untimed, tool]) expect(stats.llmMs).toBe(2_500) expect(stats.toolMs).toBe(3_000) }) it('sums ttft per recorded step and decode throughput inputs per usage-carrying step', () => { const sampled: AssistantMessageNode = { ...assistant(1, 1, { outputTokens: 40 }), timing: { stepStartTime: 1_000, firstTokenTime: 1_800, completedTime: 4_800 }, } const ttftOnly: AssistantMessageNode = { ...assistant(2, 1), timing: { stepStartTime: 5_000, firstTokenTime: 5_400, completedTime: 7_400 }, } const stats = deriveStats([sampled, ttftOnly, assistant(3, 2)]) expect(stats.ttftMs).toBe(1_200) expect(stats.ttftSteps).toBe(2) // The usage-less step contributes no decode share, keeping the ratio honest. expect(stats.decodeMs).toBe(3_000) expect(stats.decodeTokens).toBe(40) }) }) describe('formatters', () => { it('formats token counts compactly', () => { expect(formatTokens(517)).toBe('517') expect(formatTokens(12_240)).toBe('12.2K') expect(formatTokens(517_000)).toBe('517K') expect(formatTokens(1_230_000)).toBe('1.2M') }) it('formats durations under and over a minute', () => { expect(formatDuration(45_230)).toBe('45.2s') expect(formatDuration(162_000)).toBe('2m42s') }) }) describe('StatsLine', () => { const USAGE = { uncachedInputTokens: 10, outputTokens: 5, cacheReadTokens: 90, cacheWriteTokens: 0 } /** Stub the projection seat: a key-addressed table of whole values. */ function projections(values: Record): StatsLineProps['useProjection'] { return (key: string) => values[key] } function props( source: { getSnapshot(): ConversationSnapshot; subscribe(fn: () => void): () => void }, values: Record = { tokenUsage: USAGE }, ): StatsLineProps { return { useSession: bindSnapshotSelector(source), useProjection: projections(values), t: tEn } } it('renders the grouped stats row and hides a brand-new empty session', () => { const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() // No timing on the fixture: the duration group drops out whole. Tokens come // from the projection, so paging the window cannot change them. expect(view.container.textContent).toBe('1 turns · 1 steps| Cache hit 90%| Input 100 tok · Output 5 tok') const empty = makeSource() const emptyView = render() expect(emptyView.container.textContent).toBe('') }) it('reveals the full line in a delayed hover tooltip only while the row is clipped', () => { vi.useFakeTimers() // jsdom lays nothing out; fake a row narrower than its content. vi.spyOn(Element.prototype, 'scrollWidth', 'get').mockReturnValue(800) vi.spyOn(Element.prototype, 'clientWidth', 'get').mockReturnValue(400) const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() fireEvent.mouseEnter(view.container.firstElementChild!) act(() => { vi.advanceTimersByTime(499) }) expect(view.container.querySelector('[role="tooltip"]')).toBeNull() act(() => { vi.advanceTimersByTime(1) }) expect(view.container.querySelector('[role="tooltip"]')?.textContent) .toBe('1 turns · 1 steps | Cache hit 90% | Input 100 tok · Output 5 tok') }) it('suppresses the tooltip while the row fits without truncation', () => { vi.useFakeTimers() const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() fireEvent.mouseEnter(view.container.firstElementChild!) act(() => { vi.advanceTimersByTime(500) }) expect(view.container.querySelector('[role="tooltip"]')).toBeNull() }) it('renders window latency and throughput beside the wall-time group', () => { const timed: AssistantMessageNode = { ...assistant(1, 1, { outputTokens: 60 }), timing: { stepStartTime: 1_000, firstTokenTime: 1_800, completedTime: 4_800 }, } const { source } = makeSource({ nodes: [timed] }) const view = render() expect(view.container.textContent).toContain('LLM 3.8s| TTFT avg 0.8s · 20 tok/s') }) it('takes every stats label from the active locale', () => { const timed: AssistantMessageNode = { ...assistant(1, 1, { outputTokens: 60 }), timing: { stepStartTime: 1_000, firstTokenTime: 1_800, completedTime: 4_800 }, } const { source } = makeSource({ nodes: [timed] }) const view = render() expect(view.container.textContent) .toBe('1 轮 · 1 步| LLM 3.8s| 首 token 平均 0.8s · 20 tok/s| 缓存命中 90%| 输入 100 tok · 输出 5 tok') }) it('renders without ResizeObserver support', () => { vi.unstubAllGlobals() const { source } = makeSource({ nodes: [assistant(1, 1)] }) expect(() => render()).not.toThrow() }) it('keeps durable token groups after the visible step window is empty', () => { const { source } = makeSource() const view = render() // Context occupancy lives on the composer's ContextMeter ring, not here. expect(view.container.textContent) .toBe('Cache hit 90%| Input 100 tok · Output 5 tok') }) it('computes context occupancy only when both a numerator and capacity are known', () => { // The projected figure wins: it is the provider sample carried forward over // the surface's movement, so a compaction shows without waiting a request. expect(contextOccupancy({ pressureTokens: 32_000, projectedTokens: 6_000, contextWindow: 128_000 })) .toEqual({ percent: 5, usedTokens: 6_000, contextWindow: 128_000 }) // A log whose projection predates the field still reads its bare sample. expect(contextOccupancy({ pressureTokens: 32_000, contextWindow: 128_000 })) .toEqual({ percent: 25, usedTokens: 32_000, contextWindow: 128_000 }) // A numerator without capacity has no denominator; capacity without a // provider sample has no numerator yet, rather than a synthetic 0%. expect(contextOccupancy({ pressureTokens: 32_000 })).toBeNull() expect(contextOccupancy({ contextWindow: 128_000 })).toBeNull() expect(contextOccupancy(undefined)).toBeNull() // Capacity and the sample are independent last-wins fields, so a model // switch can pair a smaller new window with the previous route's prompt. expect(contextOccupancy({ pressureTokens: 300_000, contextWindow: 128_000 })?.percent).toBe(100) }) it('drops every token group when no projection is composed', () => { const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() expect(view.container.textContent).toBe('1 turns · 1 steps') }) it('omits cache hit when nothing was billed on the input side', () => { const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() expect(view.container.textContent).toBe('1 turns · 1 steps| Input 0 tok · Output 7 tok') }) it('includes cache writes in billed input and the cache-hit denominator', () => { const { source } = makeSource({ nodes: [assistant(1, 1)] }) const view = render() expect(view.container.textContent) .toBe('1 turns · 1 steps| Cache hit 45%| Input 200 tok · Output 7 tok') }) it('renders ZERO times during streaming chunk frames (RFC hard acceptance)', () => { const { set, source } = makeSource({ nodes: [assistant(1, 1)] }) let renders = 0 function Counting(p: StatsLineProps) { renders += 1 return } render() const before = renders // Chunk frames swap partial only; nodes keeps its reference (object-layer contract). act(() => { set({ partial: { turn: 1, step: 2, blocks: [{ kind: 'text', text: 'a' }] } }) }) act(() => { set({ partial: { turn: 1, step: 2, blocks: [{ kind: 'text', text: 'ab' }] } }) }) act(() => { set({ running: true }) }) expect(renders).toBe(before) }) }) describe('bash sample row', () => { const SID = 'root-1' as SessionId const result = (callId: string): ToolResultNode => ({ kind: 'tool-result', seq: 3, time: 3_000, callId, call: { name: 'bash', argsRaw: '{"command":"make build","description":"Build"}' }, callTime: 2_000, content: [], isError: false, callView: null, resultView: null, }) function listStore() { return createSnapshotStore({ ids: [SID], byId: { [SID]: { id: SID, title: 'r', displayTitle: 'r', running: false, blank: false, updatedAt: 0 }, }, current: undefined, phase: 'ready', subagentsByParent: {}, currentAddress: undefined, }) } const rowProps = (): BashRowProps => ({ callId: 'c1', toolName: 'bash', block: result('c1'), openFile: vi.fn(), sessionId: SID, useSessions: bindSnapshotSelector(listStore()), t, } as unknown as BashRowProps) it('summarizes as Bash · description without a row click target', () => { const view = render() const row = view.container.querySelector('[data-sample="bash"]')! expect(row.textContent).toContain('Bash') expect(row.textContent).toContain('Build') expect(row.getAttribute('data-clickable')).toBeNull() }) })