diff --git a/src/pages/AgentsPage.tsx b/src/pages/AgentsPage.tsx index ed6de2c..f4dd0eb 100644 --- a/src/pages/AgentsPage.tsx +++ b/src/pages/AgentsPage.tsx @@ -599,6 +599,12 @@ function AgentModelPicker({ return (
{ + if (event.button === 0 && event.currentTarget.contains(document.activeElement) + && event.target instanceof Element && event.target.closest('button')) { + event.preventDefault(); + } + }} onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setOpen(false); }}> diff --git a/tests/agent-model-picker-ui.cjs b/tests/agent-model-picker-ui.cjs new file mode 100644 index 0000000..e426956 --- /dev/null +++ b/tests/agent-model-picker-ui.cjs @@ -0,0 +1,114 @@ +const { chromium, webkit } = require(process.env.PLAYWRIGHT_MODULE || 'playwright'); +const assert = require('node:assert/strict'); +const base = process.env.AGENT_UI_BASE_URL || 'http://127.0.0.1:1421'; + +(async () => { + const engines = process.env.PLAYWRIGHT_ENGINES?.split(',') || ['chromium', 'webkit']; + for (const name of engines) { + const engine = { chromium, webkit }[name]; + assert.ok(engine, `Unsupported browser: ${name}`); + const browser = await engine.launch({ + headless: true, + ...(name === 'chromium' ? { channel: 'msedge', args: ['--no-proxy-server'] } : {}), + }); + try { + const page = await browser.newPage({ viewport: { width: 1280, height: 1000 } }); + page.setDefaultTimeout(10000); + const errors = []; + page.on('pageerror', error => errors.push(String(error))); + const open = async query => { + await page.goto(`${base}/tests/fixtures/agent-backups.html?reset-selections&${query}`); + await page.waitForFunction(() => window.fixtureCalls.some(call => call.cmd === 'get_agent_models') + && document.querySelector('button.agent-model-trigger:not(:disabled)')); + }; + const picker = () => page.locator('.agent-model-picker').first(); + const trigger = () => picker().locator('button.agent-model-trigger'); + const search = () => picker().locator('.agent-model-search input'); + const option = model => page.getByRole('option').filter({ has: page.getByText(model, { exact: true }) }); + const expectSelected = async model => { + assert.equal(await trigger().locator('strong').innerText(), model, `${name}: model selection must receive the click`); + assert.equal(await page.getByRole('listbox').count(), 0); + }; + const expand = async () => { + await trigger().click(); + await page.waitForFunction(() => document.activeElement?.matches('.agent-model-search input')); + }; + + for (const embedded of [false, true]) { + await open(`client=codex${embedded ? '&embedded' : ''}`); + await expand(); + await option('gpt-two').click(); + await expectSelected('gpt-two'); + + await expand(); + await search().fill('gpt-one'); + await option('gpt-one').click(); + await expectSelected('gpt-one'); + + await expand(); + await search().fill('gpt-two'); + await picker().getByRole('button', { name: '清空搜索', exact: true }).click(); + assert.equal(await search().inputValue(), ''); + assert.equal(await page.getByRole('option').count(), 2); + assert.ok(await search().evaluate(input => input === document.activeElement)); + const refreshes = await page.evaluate(() => window.fixtureCalls.filter(call => call.cmd === 'get_agent_models').length); + await picker().getByRole('button', { name: '刷新模型', exact: true }).click(); + await page.waitForFunction(previous => window.fixtureCalls.filter(call => call.cmd === 'get_agent_models').length > previous, refreshes); + assert.equal(await page.getByRole('listbox').count(), 1, 'Refresh keeps the picker open'); + + await search().press('ArrowDown'); + await search().press('Enter'); + await expectSelected('gpt-two'); + await expand(); + await search().fill('gpt-one'); + await search().press('Enter'); + await expectSelected('gpt-one'); + await expand(); + await search().press('Escape'); + assert.equal(await page.getByRole('listbox').count(), 0); + + await expand(); + await page.evaluate(() => { + const outside = document.createElement('button'); + outside.id = 'fixture-after-picker'; + outside.textContent = 'After picker'; + outside.style.cssText = 'position:fixed;top:4px;left:4px;z-index:100'; + document.querySelector('.agent-model-picker').after(outside); + }); + for (let index = 0; index < 8 && await page.getByRole('listbox').count(); index++) { + await page.keyboard.press('Tab'); + } + assert.equal(await page.getByRole('listbox').count(), 0, 'Tab outside closes the picker'); + await expand(); + await page.locator('#fixture-after-picker').click(); + assert.equal(await page.getByRole('listbox').count(), 0, 'Click outside closes the picker'); + } + + for (const embedded of [false, true]) { + await open(`client=claude-desktop${embedded ? '&embedded' : ''}`); + await expand(); + await option('gpt-two').click(); + await expectSelected('gpt-two'); + const editable = page.locator('.agent-model-picker').filter({ has: page.locator('.agent-model-editable-trigger') }).first(); + const alias = editable.getByRole('combobox'); + const toggle = editable.getByRole('button', { name: '别名（Claude系列模型可留空）', exact: true }); + await alias.click(); + await option('claude-sonnet-4-6').click(); + assert.equal(await alias.inputValue(), 'claude-sonnet-4-6', 'Editable suggestions must receive the click'); + assert.equal(await page.getByRole('listbox').count(), 0); + assert.ok(await alias.evaluate(input => input === document.activeElement)); + await alias.click(); + await toggle.click(); + assert.equal(await page.getByRole('listbox').count(), 0, 'Clicking the editable arrow closes an open picker'); + await toggle.click(); + assert.equal(await page.getByRole('listbox').count(), 1); + await alias.fill('claude-custom-test'); + await alias.press('Escape'); + assert.equal(await alias.inputValue(), 'claude-custom-test'); + assert.equal(await page.getByRole('listbox').count(), 0); + } + assert.deepEqual(errors, []); + console.log(`PASS (${name}): direct/filtered clicks, keyboard selection, clear/refresh, Tab/Escape/outside dismissal, editable aliases and toggles in full and embedded views.`); + } finally { await browser.close(); } + } +})().catch(error => { console.error(error); process.exitCode = 1; }); diff --git a/tests/text-contrast-ui.cjs b/tests/text-contrast-ui.cjs new file mode 100644 index 0000000..beb7136 --- /dev/null +++ b/tests/text-contrast-ui.cjs @@ -0,0 +1,151 @@ +const { chromium } = require(process.env.PLAYWRIGHT_MODULE || 'playwright'); +const assert = require('node:assert/strict'); +const fs = require('node:fs'); +const path = require('node:path'); +const os = require('node:os'); + +async function audit(page, scope, label) { + const result = await page.evaluate(scope => { + const canvas = document.createElement('canvas'); + canvas.width = canvas.height = 1; + const context = canvas.getContext('2d', { willReadFrequently: true }); + const rgba = value => { + context.clearRect(0, 0, 1, 1); + context.fillStyle = value; + context.fillRect(0, 0, 1, 1); + return Array.from(context.getImageData(0, 0, 1, 1).data); + }; + const flatten = (foreground, background, opacity = 1) => { + const alpha = foreground[3] / 255 * opacity; + return foreground.slice(0, 3).map((channel, index) => channel * alpha + background[index] * (1 - alpha)); + }; + const luminance = rgb => { + const linear = rgb.map(channel => { + const value = channel / 255; + return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4; + }); + return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722; + }; + const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + 0.05) / (Math.min(luminance(a), luminance(b)) + 0.05); + const root = getComputedStyle(document.documentElement); + const grayColors = new Set(['primary', 'secondary', 'tertiary', 'quaternary', 'muted', 'placeholder'] + .map(role => rgba(root.getPropertyValue(`--text-${role}`)).join(','))); + const failures = []; + let samples = 0; + const check = (element, pseudo) => { + if (element.closest(':disabled, [aria-disabled="true"], .locked, .disabled, .is-disabled')) return; + const rect = element.getBoundingClientRect(); + const style = getComputedStyle(element, pseudo); + if (!rect.width || !rect.height || style.visibility !== 'visible' || style.display === 'none') return; + if (!pseudo && !Array.from(element.childNodes).some(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim())) return; + const foreground = rgba(style.color); + if (!grayColors.has(foreground.join(','))) return; + const ancestors = []; + for (let ancestor = element; ancestor; ancestor = ancestor.parentElement) ancestors.unshift(ancestor); + let background = [255, 255, 255]; + let opacity = pseudo ? Number(style.opacity) : 1; + for (const ancestor of ancestors) { + const computed = getComputedStyle(ancestor); + background = flatten(rgba(computed.backgroundColor), background); + opacity *= Number(computed.opacity); + } + if (!opacity) return; + const ratio = contrast(flatten(foreground, background, opacity), background); + samples += 1; + if (ratio < 4.5) failures.push({ + element: `${element.tagName}.${element.className}${pseudo || ''}`, + text: (pseudo ? element.getAttribute('placeholder') : element.textContent).trim().slice(0, 80), + ratio: Number(ratio.toFixed(3)), color: style.color, background, + }); + }; + for (const element of document.querySelectorAll(`${scope}, ${scope} *`)) { + check(element); + if (element.matches('input[placeholder], textarea[placeholder]')) check(element, '::placeholder'); + } + return { samples, failures }; + }, scope); + assert.ok(result.samples > 0, `${label}: no text checked`); + assert.deepEqual(result.failures, [], `${label}: low-contrast text`); + console.log(`${label}: ${result.samples} text samples passed`); +} + +(async () => { + const { build, preview } = await import('vite'); + const root = path.resolve(__dirname, '..'); + const outDir = fs.mkdtempSync(path.join(os.tmpdir(), 'cpa-contrast-fixtures-')); + let browser; + let server; + try { + await build({ + root, logLevel: 'error', + build: { + outDir, emptyOutDir: true, + rollupOptions: { input: ['theme', 'auth-file-requests', 'usage-layout'].map(name => path.join(__dirname, 'fixtures', `${name}.html`)) }, + }, + }); + server = await preview({ root, build: { outDir }, preview: { host: '127.0.0.1', port: 0, strictPort: false }, logLevel: 'error' }); + const base = `http://127.0.0.1:${server.httpServer.address().port}`; + browser = await chromium.launch({ channel: 'msedge', headless: true }); + const page = await browser.newPage({ viewport: { width: 1280, height: 1000 } }); + page.setDefaultTimeout(15000); + page.setDefaultNavigationTimeout(30000); + const errors = []; + page.on('pageerror', error => errors.push(String(error))); + await page.route('**/*', route => route.request().url().startsWith(base + '/') ? route.continue() : route.abort()); + const open = fixture => page.goto(`${base}/tests/fixtures/${fixture}`, { waitUntil: 'domcontentloaded' }); + const screenshot = async name => { + if (!process.env.CONTRAST_SCREENSHOT_DIR) return; + fs.mkdirSync(process.env.CONTRAST_SCREENSHOT_DIR, { recursive: true }); + await page.screenshot({ path: path.join(process.env.CONTRAST_SCREENSHOT_DIR, `${name}.png`), animations: 'disabled' }); + }; + + for (const theme of ['light', 'dark']) { + await open(`theme.html?reset&platform=browser&saved=${theme}`); + await page.waitForFunction(theme => document.documentElement.dataset.theme === theme, theme); + await page.locator('.sidebar').waitFor(); + await audit(page, '.app-shell', `${theme} home and sidebar`); + + await page.evaluate(() => { + const section = document.createElement('section'); + section.id = 'placeholder-probes'; + section.style.cssText = 'padding:16px;background:var(--bg-card)'; + section.innerHTML = '
'; + document.body.append(section); + }); + await audit(page, '#placeholder-probes', `${theme} shared placeholders`); + for (const input of await page.locator('#placeholder-probes input, #placeholder-probes textarea').all()) { + assert.equal(await input.evaluate(element => getComputedStyle(element, '::placeholder').opacity), '1'); + } + + await open(`auth-file-requests.html?cards&theme=${theme}&locale=zh-CN`); + await page.locator('.auth-file-card').first().waitFor(); + await audit(page, '.auth-files-page', `${theme} credential cards`); + await screenshot(`credential-cards-${theme}`); + await page.locator('.auth-file-card').first().getByRole('button', { name: '设置', exact: true }).click(); + await page.locator('.credential-settings-body[aria-busy="false"]').waitFor(); + await audit(page, '.credential-settings-dialog', `${theme} credential settings`); + await screenshot(`credential-settings-${theme}`); + + await open(`usage-layout.html?theme=${theme}&locale=zh-CN`); + const legend = page.locator('.usage-trend-legend-item').first(); + await legend.waitFor(); + await audit(page, '.usage-records-page', `${theme} usage overview`); + await legend.click(); + await page.locator('.usage-trend-legend-item.is-hidden').waitFor(); + assert.equal(await legend.evaluate(element => getComputedStyle(element).opacity), '1'); + assert.ok((await legend.evaluate(element => getComputedStyle(element).textDecorationLine)).includes('line-through')); + await audit(page, '.usage-trend-legend', `${theme} interactive hidden-series label`); + await screenshot(`usage-overview-${theme}`); + + await open(`usage-layout.html?tab=events&theme=${theme}&locale=zh-CN`); + await page.locator('.usage-events-table tbody tr').first().waitFor(); + await audit(page, '.usage-records-page', `${theme} usage records`); + } + assert.deepEqual(errors, []); + console.log('PASS: light/dark contrast, shared placeholders, credential cards/settings, usage tables and interactive legend labels.'); + } finally { + if (browser) await browser.close(); + if (server) await new Promise((resolve, reject) => server.httpServer.close(error => error ? reject(error) : resolve())); + fs.rmSync(outDir, { recursive: true, force: true }); + } +})().catch(error => { console.error(error); process.exitCode = 1; }); diff --git a/tests/textContrast.test.ts b/tests/textContrast.test.ts new file mode 100644 index 0000000..5da7cc7 --- /dev/null +++ b/tests/textContrast.test.ts @@ -0,0 +1,141 @@ +import { describe, expect, it } from 'bun:test'; +import { readFileSync } from 'node:fs'; +import postcss from 'postcss'; + +const stylesheet = postcss.parse(readFileSync(new URL('../src/styles.css', import.meta.url), 'utf8')); +const aliases: Record = { + '--theme-4b4742': '--text-secondary', + '--theme-59544d': '--text-secondary', + '--theme-5f5a53': '--text-secondary', + '--theme-655f57': '--text-secondary', + '--theme-6b655d': '--text-secondary', + '--theme-6d6760': '--text-secondary', + '--theme-6f6961': '--text-tertiary', + '--theme-716b61': '--text-tertiary', + '--theme-777067': '--text-tertiary', + '--theme-7a746c': '--text-tertiary', + '--theme-817b72': '--text-tertiary', + '--theme-817b73': '--text-tertiary', + '--theme-8a847c': '--text-quaternary', + '--theme-918a81': '--text-quaternary', + '--theme-9a938a': '--text-quaternary', + '--theme-9a958d': '--text-quaternary', + '--theme-9b958c': '--text-quaternary', +}; +const surfaces = [ + '--bg-primary', '--bg-secondary', '--bg-tertiary', '--bg-hover', '--bg-quinary', '--bg-card', + '--theme-faf9f5', '--theme-fffdf8', '--theme-f4f1ea', '--theme-f0eee8', + '--theme-eeece6', '--theme-ece8df', '--theme-e8e4dc', '--theme-dfdcd4', + '--theme-eef7f0', '--theme-fff1ee', '--theme-fff7e9', '--ui-accent-soft', +]; +const textTokens = [ + '--text-primary', '--text-secondary', '--text-tertiary', '--text-quaternary', + '--text-muted', '--text-placeholder', ...Object.keys(aliases), +]; +type RGB = [number, number, number]; + +function declarations(selector: string): Record { + const values: Record = {}; + stylesheet.walkRules((rule) => { + if (rule.selector !== selector) return; + rule.walkDecls((declaration) => { values[declaration.prop] = declaration.value; }); + }); + return values; +} + +function resolve(value: string, tokens: Record, seen = new Set()): string { + const match = /^var\((--[\w-]+)\)$/.exec(value); + if (!match) return value; + const name = match[1]; + if (!tokens[name] || seen.has(name)) throw new Error(`Invalid color token: ${name}`); + return resolve(tokens[name], tokens, new Set([...seen, name])); +} + +function color(value: string, backdrop: RGB = [255, 255, 255]): RGB { + if (/^#[\da-f]{3}$/i.test(value)) value = `#${[...value.slice(1)].map((digit) => digit.repeat(2)).join('')}`; + if (/^#[\da-f]{6}$/i.test(value)) { + return [1, 3, 5].map((offset) => Number.parseInt(value.slice(offset, offset + 2), 16)) as RGB; + } + const match = /^rgba\(\s*(\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\s*\)$/.exec(value); + if (!match) throw new Error(`Unsupported color: ${value}`); + const alpha = Number(match[4]); + return backdrop.map((channel, index) => Number(match[index + 1]) * alpha + channel * (1 - alpha)) as RGB; +} + +function luminance(rgb: RGB): number { + const linear = rgb.map((channel) => { + const value = channel / 255; + return value <= 0.04045 ? value / 12.92 : ((value + 0.055) / 1.055) ** 2.4; + }); + return linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722; +} + +function contrast(foreground: RGB, background: RGB): number { + const values = [luminance(foreground), luminance(background)]; + return (Math.max(...values) + 0.05) / (Math.min(...values) + 0.05); +} + +for (const theme of ['light', 'dark'] as const) { + describe(`${theme} text contrast`, () => { + const tokens = { + ...declarations(':root'), + ...(theme === 'dark' ? declarations(":root[data-theme='dark']") : {}), + }; + const value = (token: string) => resolve(tokens[token], tokens); + + it('uses semantic colors for legacy gray text instead of separate low-contrast values', () => { + for (const [alias, semantic] of Object.entries(aliases)) { + expect(tokens[alias]).toBe(`var(${semantic})`); + expect(value(alias)).toBe(value(semantic)); + } + }); + + it('keeps normal text and placeholders at 4.5:1 across application surfaces', () => { + const failures: string[] = []; + for (const base of ['--bg-card', '--bg-secondary']) { + const backdrop = color(value(base)); + for (const surface of surfaces) { + const background = color(value(surface), backdrop); + for (const token of textTokens) { + const ratio = contrast(color(value(token)), background); + if (ratio < 4.5) failures.push(`${token} on ${surface} over ${base}: ${ratio.toFixed(3)}`); + } + } + } + expect(failures).toEqual([]); + }); + + it('preserves background layers and reserves lower contrast for disabled text', () => { + expect(value('--bg-primary')).toBe(theme === 'light' ? '#ffffff' : '#141720'); + expect(value('--bg-card')).toBe(theme === 'light' ? '#ffffff' : '#141720'); + expect(value('--bg-secondary')).toBe(theme === 'light' ? '#f6f7f5' : '#0b0d11'); + expect(value('--bg-tertiary')).toBe(theme === 'light' ? '#eff3f0' : '#1c212c'); + expect(value('--bg-hover')).toBe(theme === 'light' ? '#f6f8f6' : '#252b38'); + expect(value('--theme-faf9f5')).toBe(theme === 'light' ? '#f6f7f5' : '#0b0d11'); + const background = color(value('--bg-card')); + const hierarchy = ['primary', 'secondary', 'tertiary', 'quaternary', 'disabled'] + .map((role) => contrast(color(value(`--text-${role}`)), background)); + for (let index = 1; index < hierarchy.length; index += 1) { + expect(hierarchy[index - 1]).toBeGreaterThan(hierarchy[index]); + } + }); + }); +} + +it('renders placeholders at full opacity using the shared readable color', () => { + expect(declarations('input::placeholder,\ntextarea::placeholder')).toMatchObject({ + color: 'var(--text-placeholder)', opacity: '1', + }); + for (const selector of ['.compact-text-input::placeholder', '.simple-mode-field .text-input::placeholder']) { + expect(declarations(selector).color).toBe('var(--text-placeholder)'); + } +}); + +it('does not fade interactive hidden-series labels or ordinary table hints', () => { + for (const selector of ['.usage-trend-legend-item.is-hidden', '.usage-col-hint']) { + expect(declarations(selector).color).toBe('var(--text-quaternary)'); + expect(declarations(selector).opacity).toBeUndefined(); + } + expect(declarations('.usage-trend-legend-item.is-hidden')['text-decoration']).toBe('line-through'); + expect(declarations('.usage-trend-legend-item.is-hidden .usage-trend-swatch').opacity).toBe('0.38'); +});