fix(agents): prevent model selection failures in WebKit

- Preserve focus during picker clicks to prevent premature dropdown dismissal
- Add model picker regression tests for Chromium and WebKit

src/pages/AgentsPage.tsx

@@ -599,6 +599,12 @@ function AgentModelPicker({
 
   return (
     <div className={`agent-model-picker ${open ? 'open' : ''}`} ref={rootRef}
+      onMouseDown={(event) => {
+        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);
       }}>

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; });

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 = '<input placeholder="Generic input"><textarea placeholder="Generic textarea"></textarea><input class="compact-text-input" placeholder="Compact input"><div class="simple-mode-field"><input class="text-input" placeholder="Simple mode input"></div>';
+        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; });

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<string, string> = {
+  '--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<string, string> {
+  const values: Record<string, string> = {};
+  stylesheet.walkRules((rule) => {
+    if (rule.selector !== selector) return;
+    rule.walkDecls((declaration) => { values[declaration.prop] = declaration.value; });
+  });
+  return values;
+}
+
+function resolve(value: string, tokens: Record<string, string>, seen = new Set<string>()): 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');
+});