use text button

packages/html-reporter/src/icons.tsx

@@ -97,9 +97,3 @@ export const copy = () => {
     <path d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'></path>
   </svg>;
 };
-
-export const copilot = () => {
-  return <svg className='octicon' viewBox='0 0 48 48' version='1.1' width='20' height='20' aria-hidden='true'>
-    <path d='M47.801 34.003c-1.72 2.988-11.706 10.037-23.82 10.037S1.881 36.991.161 34.003a1.309 1.309 0 0 1-.161-.57v-5.615c.012-.17.047-.338.11-.498.744-1.867 2.692-4.58 5.206-5.308.333-.855.826-2.106 1.287-3.029a20.112 20.112 0 0 1-.104-2.171c0-2.659.563-4.992 2.262-6.729.793-.811 1.777-1.433 2.945-1.901C14.502 5.911 18.483 4 23.938 4c5.455 0 9.523 1.911 12.319 4.182 1.167.468 2.151 1.09 2.944 1.901 1.699 1.737 2.263 4.07 2.263 6.729 0 .736-.027 1.465-.105 2.171.461.923.954 2.174 1.288 3.029 2.513.728 4.461 3.441 5.205 5.308.081.205.115.424.115.645v5.318c0 .252-.04.502-.166.72ZM24.325 22.031h-.688a8.52 8.52 0 0 1-.709 1.016c-1.537 1.892-3.833 2.98-7.008 2.98-3.447 0-5.972-.717-7.557-2.514a4.408 4.408 0 0 1-.171-.21l-.195.21v13.155c2.867 1.558 9.02 4.353 15.984 4.353s13.117-2.795 15.984-4.353V23.513l-.195-.21s-.066.091-.171.21c-1.584 1.797-4.11 2.514-7.557 2.514-3.175 0-5.47-1.088-7.008-2.98a8.637 8.637 0 0 1-.709-1.016h-.033.033Zm-1.969-5.864a14.31 14.31 0 0 0 .127-1.785v-.042c-.003-1.537-.339-2.538-.876-3.152-.681-.78-2.09-1.378-5.06-1.057-3.008.326-4.69 1.073-5.643 2.048-.923.944-1.408 2.356-1.408 4.633 0 2.42.348 3.849 1.115 4.719.729.827 2.165 1.499 5.309 1.499 2.417 0 3.799-.786 4.683-1.873.948-1.168 1.482-2.878 1.753-4.99Zm3.25 0c.271 2.112.805 3.822 1.754 4.99.883 1.087 2.265 1.873 4.682 1.873 3.145 0 4.58-.672 5.309-1.499.767-.87 1.116-2.299 1.116-4.719 0-2.277-.485-3.689-1.408-4.633-.954-.975-2.635-1.722-5.644-2.048-2.969-.321-4.378.277-5.06 1.057-.537.614-.873 1.615-.876 3.152v.042c.002.53.042 1.123.127 1.785Z'/><path d='M28.998 28.516c1.104 0 1.999.895 1.999 1.999v3.998a2 2 0 1 1-3.998 0v-3.998c0-1.104.895-1.999 1.999-1.999Zm-9.996 0c1.104 0 1.999.895 1.999 1.999v3.998a2 2 0 1 1-3.998 0v-3.998c0-1.104.895-1.999 1.999-1.999Z'/>
-  </svg>;
-};

packages/html-reporter/src/testErrorView.css

@@ -34,3 +34,29 @@
 .test-error-text {
   font-family: monospace;
 }
+
+.prompt-button {
+  flex: none;
+  height: 24px;
+  width: 80px;
+  border: 1px solid var(--color-btn-border);
+  outline: none;
+  color: var(--color-btn-text);
+  background: var(--color-btn-bg);
+  padding: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+
+.prompt-button svg {
+  color: var(--color-fg-subtle);
+}
+
+.prompt-button:not(:disabled):hover {
+  border-color: var(--color-btn-hover-border);
+  background-color: var(--color-btn-hover-bg);
+}
+

packages/html-reporter/src/testErrorView.tsx

@@ -21,7 +21,6 @@ import * as icons from './icons';
 import type { ImageDiff } from '@web/shared/imageDiffView';
 import { ImageDiffView } from '@web/shared/imageDiffView';
 import type { TestResult } from './types';
-import { CopyToClipboard } from './copyToClipboard';
 import { fixTestPrompt } from '@web/components/prompts';
 import { useGitCommitInfo } from './metadataView';
 
@@ -56,7 +55,19 @@ const PromptButton: React.FC<{
       result?.attachments.find(a => a.name === 'pageSnapshot')?.body
   ), [gitCommitInfo, result, error]);
 
-  return <CopyToClipboard value={prompt} icon={<icons.copilot />} title='Copy prompt to clipboard' />;
+  const [copied, setCopied] = React.useState(false);  
+
+  return <button
+    className='prompt-button'
+    onClick={async () => {
+      await navigator.clipboard.writeText(prompt)
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 3000);
+    }}>
+      {copied ? <span className='prompt-button-copied'>Copied <icons.copy/></span> : 'Fix with AI'}
+  </button>;
 };
 
 export const TestScreenshotErrorView: React.FC<{

tests/playwright-test/reporter-html.spec.ts

@@ -2742,7 +2742,7 @@ for (const useIntermediateMergeReport of [true, false] as const) {
       await page.context().grantPermissions(['clipboard-read', 'clipboard-write']);
 
       await page.getByRole('link', { name: 'sample' }).click();
-      await page.getByRole('button', { name: 'Copy prompt to clipboard' }).click();
+      await page.getByRole('button', { name: 'Fix with AI' }).click();
       const prompt = await page.evaluate(() => navigator.clipboard.readText());
       expect(prompt, 'contains error').toContain('expect(received).toBe(expected)');
       expect(prompt, 'contains diff').toContain(`+          test('sample', async ({}) => { expect(2).toBe(3); });`);