Hide interactive controls in screenshots

src/capture.ts

@@ -22,6 +22,28 @@ interface ExtractedConversation {
 
 const chatGptIconUrl = "https://chatgpt.com/cdn/assets/favicon-l4nq08hd.svg";
 
+const screenshotOnlyCss = `
+button,
+input,
+select,
+textarea,
+summary,
+.icon-button,
+[contenteditable="true"],
+[role="button"],
+[role="checkbox"],
+[role="combobox"],
+[role="listbox"],
+[role="menu"],
+[role="menuitem"],
+[role="radio"],
+[role="slider"],
+[role="spinbutton"],
+[role="switch"],
+[role="tab"] {
+  display: none !important;
+}`;
+
 function publicErrorFor(error: unknown): string {
   const message = error instanceof Error ? error.message : String(error);
   if (/captcha|verify|robot/i.test(message)) {
@@ -659,6 +681,7 @@ async function generateScreenshotVariant(slug: string, variant: ScreenshotVarian
     });
     const fileUrl = `file://${artifactIndexPath(slug)}?theme=${variant.theme}`;
     await page.goto(fileUrl, { waitUntil: "load", timeout: 60_000 });
+    await page.addStyleTag({ content: screenshotOnlyCss });
     const height = await page.evaluate(() => Math.ceil(document.documentElement.scrollHeight));
     if (height > config.maxScreenshotHeight) {
       throw new Error(`Screenshot height ${height}px exceeds limit ${config.maxScreenshotHeight}px.`);