|
|
@@ -0,0 +1,296 @@
|
|
|
+/** Expanded reasoning keeps Markdown semantics at the secondary typography tier. */
|
|
|
+import { fileURLToPath } from 'node:url'
|
|
|
+import type { Browser, Page } from 'playwright'
|
|
|
+import { chromium } from 'playwright'
|
|
|
+import { afterAll, beforeAll, describe, expect, it, onTestFailed } from 'vitest'
|
|
|
+import { createMessage, createUserMessage } from '@deepseek-ai/dsh-llm'
|
|
|
+import { SESSION_FORMAT_VERSION, Session, SessionId } from '@deepseek-ai/dsh-session'
|
|
|
+import type {} from '@deepseek-ai/dsh-session-title'
|
|
|
+import {
|
|
|
+ assertFixtureInventory,
|
|
|
+ captureStableAria,
|
|
|
+ compareOrRefreshGolden,
|
|
|
+ launchWebScaffold,
|
|
|
+ seedSession,
|
|
|
+ watchConsole,
|
|
|
+ webSnapshotMode,
|
|
|
+ type WebScaffold,
|
|
|
+} from './scaffold.ts'
|
|
|
+import { expandTurnProcesses, newEnglishPage, saveFailureShot } from './support.ts'
|
|
|
+
|
|
|
+const EXPECTED_DIR = fileURLToPath(new URL('./expected/thinking-markdown', import.meta.url))
|
|
|
+const UI_EXPECTED = fileURLToPath(new URL('./expected/thinking-markdown/ui.expected.md', import.meta.url))
|
|
|
+const MODE = webSnapshotMode()
|
|
|
+const SEED_ID = 'thinking-markdown-web-e2e'
|
|
|
+const DONE = 'THINKING_MARKDOWN_DONE'
|
|
|
+const LONG_TOKEN = 'workspace/packages/client/secondary-markdown/'.repeat(12)
|
|
|
+
|
|
|
+/** Closed Session using semantic Markdown and content wider than the message column. */
|
|
|
+function thinkingFixture(): string {
|
|
|
+ const session = Session.create(SessionId('thinking-markdown-source'))
|
|
|
+ session.append('turn/start', { turn: 1 })
|
|
|
+ const user = session.append('user/message', createUserMessage({
|
|
|
+ content: [{ type: 'text', text: 'Show reasoning and a main answer.' }],
|
|
|
+ source: { kind: 'user' },
|
|
|
+ }), { surfaceOp: 'append' })
|
|
|
+ session.append('session/title', {
|
|
|
+ title: 'Thinking Markdown', messageSeqs: [user.seq], source: { kind: 'fallback' },
|
|
|
+ })
|
|
|
+ session.append('step/start', { turn: 1, step: 1 })
|
|
|
+ session.append('assistant/message', {
|
|
|
+ stream: [], turn: 1, step: 1,
|
|
|
+ message: createMessage({
|
|
|
+ role: 'assistant',
|
|
|
+ source: { kind: 'model', provider: 'fixture', model: 'fixture' },
|
|
|
+ content: [{
|
|
|
+ type: 'reasoning',
|
|
|
+ text: [
|
|
|
+ `## Compact reasoning ${'with a deliberately long summary '.repeat(8)}`,
|
|
|
+ '',
|
|
|
+ 'A paragraph with **strong text**, *emphasis*, [reference](https://example.com/), and `inline_code`.',
|
|
|
+ '',
|
|
|
+ ...[1, 2, 3, 4, 5, 6].flatMap(level => [`${'#'.repeat(level)} Level ${String(level)}`, '']),
|
|
|
+ '- Unordered item',
|
|
|
+ '- Second item',
|
|
|
+ '- Inline list formula: $x_j$.',
|
|
|
+ `- Long list atom: $\\underbrace{${'a'.repeat(240)}}_{long}$.`,
|
|
|
+ '',
|
|
|
+ '1. Ordered item',
|
|
|
+ '2. Another item',
|
|
|
+ '',
|
|
|
+ '- Loose first paragraph.',
|
|
|
+ '',
|
|
|
+ ' Loose middle paragraph.',
|
|
|
+ '',
|
|
|
+ ' Loose last paragraph.',
|
|
|
+ '',
|
|
|
+ '> Quoted reasoning.',
|
|
|
+ '',
|
|
|
+ '---',
|
|
|
+ '',
|
|
|
+ '| First | Second | Third | Fourth | Fifth | Sixth |',
|
|
|
+ '| --- | --- | --- | --- | --- | --- |',
|
|
|
+ `| ${Array.from({ length: 6 }, (_, index) => `long_table_cell_${String(index)}_${'x'.repeat(40)}`).join(' | ')} |`,
|
|
|
+ ...Array.from({ length: 20 }, (_, row) => `| ${Array.from({ length: 6 }, (_, column) => `Row ${String(row + 1)} column ${String(column + 1)}`).join(' | ')} |`),
|
|
|
+ '',
|
|
|
+ 'Short subscript: $x_j$.',
|
|
|
+ '',
|
|
|
+ 'Short scripts: $x_i^2$.',
|
|
|
+ '',
|
|
|
+ `Long atom: $\\underbrace{${'a'.repeat(240)}}_{long}$.`,
|
|
|
+ '',
|
|
|
+ `Inline math: $${'a+'.repeat(80)}z$.`,
|
|
|
+ '',
|
|
|
+ '$$',
|
|
|
+ `${'a+'.repeat(80)}\\frac{1}{1+\\frac{1}{x}}`,
|
|
|
+ '$$',
|
|
|
+ '',
|
|
|
+ '```typescript',
|
|
|
+ 'const value = "reasoning code"',
|
|
|
+ '```',
|
|
|
+ '',
|
|
|
+ LONG_TOKEN,
|
|
|
+ ].join('\n'),
|
|
|
+ }, { type: 'text', text: `# Main answer\n\n${DONE}` }],
|
|
|
+ }),
|
|
|
+ }, { surfaceOp: 'append' })
|
|
|
+ session.append('step/end', { turn: 1, step: 1 })
|
|
|
+ session.append('turn/end', { turn: 1, reason: { kind: 'completed' } })
|
|
|
+ return [JSON.stringify({
|
|
|
+ type: 'session', version: SESSION_FORMAT_VERSION, id: '{{sessionId}}',
|
|
|
+ createdAt: 0, cwd: '{{cwd}}', isSeeded: false, delegationDepth: 0,
|
|
|
+ }), ...session.snapshotEvents().map(({ seq, time: _time, ...event }) => JSON.stringify({
|
|
|
+ ...event, seq, time: new Date().setHours(12, 0, 0, 0) + seq * 1_000,
|
|
|
+ })), ''].join('\n')
|
|
|
+}
|
|
|
+
|
|
|
+describe('web e2e: secondary Thinking Markdown', () => {
|
|
|
+ let scaffold: WebScaffold
|
|
|
+ let browser: Browser
|
|
|
+ let page: Page
|
|
|
+ let tripwire: ReturnType<typeof watchConsole>
|
|
|
+
|
|
|
+ beforeAll(async () => {
|
|
|
+ scaffold = await launchWebScaffold({})
|
|
|
+ await seedSession(scaffold, thinkingFixture(), SEED_ID)
|
|
|
+ browser = await chromium.launch({ ignoreDefaultArgs: ['--hide-scrollbars'] })
|
|
|
+ page = await newEnglishPage(browser)
|
|
|
+ tripwire = watchConsole(page)
|
|
|
+ await page.goto(scaffold.authenticatedUrl, { waitUntil: 'load' })
|
|
|
+ await page.waitForSelector('[class*="frame"]', { timeout: 30_000 })
|
|
|
+ await page.locator('[role="treeitem"]').first().click()
|
|
|
+ await page.locator('[role="treeitem"]').nth(1).click()
|
|
|
+ await page.getByText(DONE, { exact: true }).waitFor({ timeout: 15_000 })
|
|
|
+ await page.getByRole('button', { name: 'Collapse sidebar', exact: true }).click()
|
|
|
+ await page.waitForFunction(() => {
|
|
|
+ const frame = document.querySelector('[data-sidebar-collapsed]')
|
|
|
+ return frame !== null && getComputedStyle(frame).gridTemplateColumns.split(' ')[0] === '56px'
|
|
|
+ && frame.getAnimations().every(animation => animation.playState === 'finished' || animation.playState === 'idle')
|
|
|
+ }, undefined, { timeout: 10_000 })
|
|
|
+ await expandTurnProcesses(page)
|
|
|
+ })
|
|
|
+
|
|
|
+ afterAll(async () => {
|
|
|
+ await browser?.close()
|
|
|
+ await scaffold?.close()
|
|
|
+ })
|
|
|
+
|
|
|
+ it.skipIf(MODE === 'record')('renders semantic blocks without promoting headings or overflowing the column', async () => {
|
|
|
+ onTestFailed(() => saveFailureShot(page, 'web-e2e-thinking-markdown'))
|
|
|
+ const thinking = page.locator('[data-variant="think"]')
|
|
|
+ const toggle = thinking.getByRole('button').first()
|
|
|
+ const summary = thinking.locator('[class*="summaryText"]')
|
|
|
+ const summaryStyle = await summary.evaluate((element) => {
|
|
|
+ const style = getComputedStyle(element)
|
|
|
+ return { fontSize: style.fontSize, lineHeight: style.lineHeight, color: style.color }
|
|
|
+ })
|
|
|
+ expect(await summary.evaluate(element => element.getBoundingClientRect().height))
|
|
|
+ .toBeLessThanOrEqual(Number.parseFloat(summaryStyle.lineHeight) + 1)
|
|
|
+ await toggle.click()
|
|
|
+ const markdown = thinking.locator('[data-markdown-variant="compact"]')
|
|
|
+ await markdown.locator('h1').waitFor({ timeout: 10_000 })
|
|
|
+ expect(await markdown.locator('h1,h2,h3,h4,h5,h6').count()).toBe(7)
|
|
|
+ expect(await markdown.locator('ul').count()).toBe(2)
|
|
|
+ expect(await markdown.locator('ol').count()).toBe(1)
|
|
|
+ expect(await markdown.locator('strong').textContent()).toBe('strong text')
|
|
|
+ expect(await markdown.locator('em').textContent()).toBe('emphasis')
|
|
|
+ expect(await markdown.getByRole('link', { name: 'reference' }).getAttribute('href')).toBe('https://example.com/')
|
|
|
+ expect(await markdown.locator('pre code').textContent()).toContain('const value = "reasoning code"')
|
|
|
+ expect(await markdown.locator('hr').count()).toBe(1)
|
|
|
+ expect(await markdown.locator('table').count()).toBe(1)
|
|
|
+ expect(await markdown.locator('.katex').count()).toBe(7)
|
|
|
+ await markdown.locator('pre').scrollIntoViewIfNeeded()
|
|
|
+ await expect.poll(() => markdown.locator('pre.shiki').count(), { timeout: 15_000 }).toBe(1)
|
|
|
+ const snapshot = (await captureStableAria(page, '[data-variant="think"][data-expanded]', scaffold.workspaceCwd))
|
|
|
+ .split(LONG_TOKEN).join('{{longToken}}')
|
|
|
+ await compareOrRefreshGolden(UI_EXPECTED, snapshot, MODE)
|
|
|
+
|
|
|
+ for (const width of [1680, 640]) {
|
|
|
+ await page.setViewportSize({ width, height: 1000 })
|
|
|
+ await page.evaluate(async () => { await document.fonts.ready })
|
|
|
+ const styles = await markdown.evaluate((root, secondary) => {
|
|
|
+ const elements = [...root.querySelectorAll<HTMLElement>('h1,h2,h3,h4,h5,h6,p,li,a,strong,em,pre,pre code,pre span,th,td,.katex')]
|
|
|
+ const scrollers = [...root.querySelectorAll<HTMLElement>('[class*="tableScroll"],.katex-display,p:has(.katex),ul:has(.katex)')]
|
|
|
+ const shortFormulas = [...root.querySelectorAll('p')].filter(element => element.textContent?.startsWith('Short '))
|
|
|
+ // Native KaTeX baselines vary with host fonts; compact adds one pixel for descender ink.
|
|
|
+ const shortMathNaturalHeight = shortFormulas.map((paragraph) => {
|
|
|
+ const native = paragraph.cloneNode(true) as HTMLParagraphElement
|
|
|
+ native.style.font = getComputedStyle(paragraph).font
|
|
|
+ native.style.position = 'absolute'
|
|
|
+ native.style.width = `${String(paragraph.clientWidth)}px`
|
|
|
+ for (const formula of native.querySelectorAll<HTMLElement>('.katex')) formula.style.fontSize = secondary.fontSize
|
|
|
+ document.body.appendChild(native)
|
|
|
+ const height = native.getBoundingClientRect().height
|
|
|
+ native.remove()
|
|
|
+ return paragraph.getBoundingClientRect().height <= height + 1
|
|
|
+ })
|
|
|
+ const longAtom = [...root.querySelectorAll('p')].find(element => element.textContent?.startsWith('Long atom:'))
|
|
|
+ const mathList = root.querySelector('ul:has(.katex)')
|
|
|
+ const mathListItem = mathList?.querySelector('li')
|
|
|
+ const banner = root.querySelector('[data-code-block-banner]')?.parentElement
|
|
|
+ const loose = [...root.querySelectorAll('li p')].find(element => element.textContent === 'Loose middle paragraph.')
|
|
|
+ return {
|
|
|
+ secondarySize: elements.every(element => getComputedStyle(element).fontSize === secondary.fontSize),
|
|
|
+ secondaryLine: elements.filter(element => !element.classList.contains('katex'))
|
|
|
+ .every(element => getComputedStyle(element).lineHeight === secondary.lineHeight),
|
|
|
+ tertiaryColor: elements.every(element => getComputedStyle(element).color === secondary.color),
|
|
|
+ tertiaryMarkers: [...root.querySelectorAll('li')]
|
|
|
+ .every(element => getComputedStyle(element, '::marker').color === secondary.color),
|
|
|
+ contained: root.scrollWidth <= root.clientWidth + 1,
|
|
|
+ bannerStatic: banner !== undefined && banner !== null && getComputedStyle(banner).position === 'static',
|
|
|
+ looseSpacing: loose !== undefined && getComputedStyle(loose).marginTop === '4px' && getComputedStyle(loose).marginBottom === '4px',
|
|
|
+ wideContentBounded: scrollers.length === 7 && scrollers.every(element => element.clientWidth <= root.clientWidth + 1),
|
|
|
+ mathListMarkerSpace: mathList !== null && mathListItem !== null && mathListItem !== undefined
|
|
|
+ && mathListItem.getBoundingClientRect().left - mathList.getBoundingClientRect().left >= Number.parseFloat(secondary.fontSize),
|
|
|
+ shortMathNaturalHeight: shortMathNaturalHeight.length === 2 && shortMathNaturalHeight.every(Boolean),
|
|
|
+ shortMathNoScrollbar: shortFormulas.every(paragraph => [paragraph, ...paragraph.querySelectorAll<HTMLElement>('span')].every((element) => {
|
|
|
+ const style = getComputedStyle(element)
|
|
|
+ const scrollsX = style.overflowX === 'auto' || style.overflowX === 'scroll'
|
|
|
+ const scrollsY = style.overflowY === 'auto' || style.overflowY === 'scroll'
|
|
|
+ return (!scrollsX || element.scrollWidth <= element.clientWidth)
|
|
|
+ && (!scrollsY || element.scrollHeight <= element.clientHeight)
|
|
|
+ })),
|
|
|
+ longAtomScrolls: longAtom !== undefined && longAtom.scrollWidth > longAtom.clientWidth,
|
|
|
+ displayMathScrolls: [...root.querySelectorAll<HTMLElement>('.katex-display')]
|
|
|
+ .every(element => element.scrollWidth > element.clientWidth),
|
|
|
+ }
|
|
|
+ }, summaryStyle)
|
|
|
+ expect(styles, `Thinking typography at ${String(width)}px`).toEqual({
|
|
|
+ secondarySize: true, secondaryLine: true, tertiaryColor: true, tertiaryMarkers: true,
|
|
|
+ contained: true, bannerStatic: true, looseSpacing: true,
|
|
|
+ wideContentBounded: true, displayMathScrolls: true,
|
|
|
+ shortMathNaturalHeight: true, shortMathNoScrollbar: true, longAtomScrolls: true, mathListMarkerSpace: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const answerSize = await page.getByRole('heading', { name: 'Main answer', exact: true })
|
|
|
+ .evaluate(element => Number.parseFloat(getComputedStyle(element).fontSize))
|
|
|
+ expect(answerSize).toBeGreaterThan(Number.parseFloat(summaryStyle.fontSize))
|
|
|
+ await page.setViewportSize({ width: 1680, height: 1000 })
|
|
|
+ await page.locator('[data-conversation-scroll]').evaluate((host) => {
|
|
|
+ const row = host.querySelector('[data-variant="think"] tbody tr:nth-child(12)')
|
|
|
+ if (row === null) throw new Error('tall Thinking table row missing')
|
|
|
+ host.scrollTop += row.getBoundingClientRect().top - host.getBoundingClientRect().top
|
|
|
+ })
|
|
|
+ await expect.poll(() => toggle.evaluate((button) => {
|
|
|
+ const host = button.closest('[data-conversation-scroll]')
|
|
|
+ const table = button.closest('[data-variant="think"]')?.querySelector('table')
|
|
|
+ if (host === null || table === null || table === undefined) throw new Error('Thinking scroll context missing')
|
|
|
+ const buttonRect = button.getBoundingClientRect()
|
|
|
+ const tableRect = table.getBoundingClientRect()
|
|
|
+ const x = buttonRect.left + buttonRect.width / 2
|
|
|
+ const y = buttonRect.top + buttonRect.height / 2
|
|
|
+ return {
|
|
|
+ pinned: Math.abs(buttonRect.top - host.getBoundingClientRect().top) <= 1,
|
|
|
+ tableUnderHeader: tableRect.top < y && tableRect.bottom > y,
|
|
|
+ headerReceivesPointer: button.contains(document.elementFromPoint(x, y)),
|
|
|
+ }
|
|
|
+ }), { timeout: 5_000 }).toEqual({ pinned: true, tableUnderHeader: true, headerReceivesPointer: true })
|
|
|
+ await toggle.click()
|
|
|
+ expect(await thinking.getAttribute('data-expanded')).toBeNull()
|
|
|
+ expect(await summary.evaluate(element => element.getBoundingClientRect().height))
|
|
|
+ .toBeLessThanOrEqual(Number.parseFloat(summaryStyle.lineHeight) + 1)
|
|
|
+ expect(await summary.evaluate(element => getComputedStyle(element).textOverflow)).toBe('ellipsis')
|
|
|
+
|
|
|
+ await page.setViewportSize({ width: 1680, height: 1000 })
|
|
|
+ await page.getByRole('tab', { name: 'Trajectory', exact: true }).click()
|
|
|
+ await page.locator('tr[data-trajectory-row-key]', { hasText: DONE }).click()
|
|
|
+ const details = page.getByRole('tabpanel')
|
|
|
+ const trajectoryToggle = details.getByRole('button', { name: 'Thinking', exact: true })
|
|
|
+ if (await trajectoryToggle.getAttribute('aria-expanded') !== 'true') await trajectoryToggle.click()
|
|
|
+ const trajectoryHeading = details.locator('[data-markdown-variant="compact"] h1')
|
|
|
+ await trajectoryHeading.waitFor({ timeout: 10_000 })
|
|
|
+ expect(await trajectoryHeading.evaluate(element => getComputedStyle(element).fontSize)).toBe(summaryStyle.fontSize)
|
|
|
+ const originalFontSize = await page.evaluate(() => document.body.style.getPropertyValue('--dsh-content-font-size'))
|
|
|
+ try {
|
|
|
+ for (const fontSize of [16, 17]) {
|
|
|
+ await scaffold.ctx.settings.update('ui-theme', { fontSize })
|
|
|
+ await expect.poll(() => page.evaluate(() => document.body.style.getPropertyValue('--dsh-content-font-size')))
|
|
|
+ .toBe(`${String(fontSize)}px`)
|
|
|
+ const typography = await details.evaluate((panel) => {
|
|
|
+ const heading = panel.querySelector('[data-markdown-variant="compact"] h1')
|
|
|
+ const paragraph = panel.querySelector('[data-markdown-variant="compact"] p')
|
|
|
+ const answer = panel.querySelector('[class*="assistantOutput"] p')
|
|
|
+ if (heading === null || paragraph === null || answer === null) throw new Error('Trajectory prose missing')
|
|
|
+ const headingStyle = getComputedStyle(heading)
|
|
|
+ const paragraphStyle = getComputedStyle(paragraph)
|
|
|
+ return {
|
|
|
+ headingSize: headingStyle.fontSize,
|
|
|
+ paragraphSize: paragraphStyle.fontSize,
|
|
|
+ lineHeight: paragraphStyle.lineHeight,
|
|
|
+ noLargerThanAnswer: Number.parseFloat(paragraphStyle.fontSize) <= Number.parseFloat(getComputedStyle(answer).fontSize),
|
|
|
+ }
|
|
|
+ })
|
|
|
+ expect(typography, `Trajectory with ${String(fontSize)}px content setting`).toEqual({
|
|
|
+ headingSize: '13px', paragraphSize: '13px', lineHeight: '20px', noLargerThanAnswer: true,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ await scaffold.ctx.settings.update('ui-theme', { fontSize: Number.parseFloat(originalFontSize) })
|
|
|
+ await expect.poll(() => page.evaluate(() => document.body.style.getPropertyValue('--dsh-content-font-size')))
|
|
|
+ .toBe(originalFontSize)
|
|
|
+ }
|
|
|
+ expect(tripwire.pageErrors).toEqual([])
|
|
|
+ expect(tripwire.warnings).toEqual([])
|
|
|
+ await assertFixtureInventory(EXPECTED_DIR, ['ui.expected.md'])
|
|
|
+ })
|
|
|
+})
|
sjw1231