Embed issue screenshots in bug report

Author: BAKUGOS1

.codex/skills/website-qa-agent/SKILL.md

@@ -34,14 +34,15 @@ npm run agent:codex -- --task-file <task-file> --headed
   `Result: 1/5 lead conditions saved.`
   `Passed: 1. Tag/source/owner - saved and searchable.`
   `Failed: 1. Minimal contact fields - not searchable after Save. 2. Full address - not searchable after Save.`
-- Use this table shape for user-facing reports: `Module`, `Issue`, `Description`, `Priority`, `Status`.
+- Use this table shape for user-facing reports: `Module`, `Issue`, `Description`, `Priority`, `Status`, `Screenshot`.
 - Generate Excel only by default. Generate Markdown/JSON only when explicitly requested for debugging or automation.
 - Do not generate CSV.
 - Excel first sheet must be `Bug Report` with only user-facing bug rows.
 - Excel second sheet should be `Summary`; technical evidence sheets can follow after that.
 - Excel reports should be readable without manual fixing: set practical column widths, wrap text, use dynamic row heights, freeze/filter headers, and color header/priority/status cells.
 - Aggregate repeated duplicate bugs into one clear row. Do not repeat the same bug 10 times unless each row is materially different.
 - Excel reports must embed screenshots/images in the workbook when screenshots exist.
+- The first `Bug Report` sheet must include a `Screenshot` column. If an issue has screenshot evidence, place the image directly inside that row's screenshot cell, not only in a separate screenshots sheet.
 - Do not push reports, screenshots, logs, traces, or `.env` files to GitHub.
 - Use browser state indexes when selector guessing is uncertain.
 - Keep Codex/no-API and Groq/API modes working.

AGENTS.md

@@ -60,9 +60,9 @@ Professional QA runs must explore conditions, not stop at the first blocked path
 
 ## Report Style
 
-User-facing issue table: `Module`, `Issue`, `Description`, `Priority`, `Status`.
+User-facing issue table: `Module`, `Issue`, `Description`, `Priority`, `Status`, `Screenshot`.
 
-Excel is the default user-facing artifact. The first sheet must be `Bug Report` with the clean issue table only. The second sheet should be `Summary`. Technical evidence sheets can follow after that. Screenshots are embedded in the workbook when available. Excel must be readable without manual resizing: practical widths, wrapped text, dynamic row heights, frozen/filterable headers, and colored header/priority/status cells.
+Excel is the default user-facing artifact. The first sheet must be `Bug Report` with the clean issue table only. The second sheet should be `Summary`. Technical evidence sheets can follow after that. Screenshots are embedded in the workbook when available. The first `Bug Report` sheet must include a `Screenshot` column and embed each issue screenshot directly in that row's screenshot cell when evidence exists. Excel must be readable without manual resizing: practical widths, wrapped text, dynamic row heights, frozen/filterable headers, and colored header/priority/status cells.
 
 Repeated duplicate bugs should be aggregated into one clear row. Keep raw evidence in the technical sheets instead of making the user-facing bug table noisy.
 

agent/src/api-agent/groq-tool-loop.ts

@@ -47,7 +47,8 @@ export async function runGroqToolLoop(task: QaTask, headed: boolean, maxSteps: n
         "Inspect icon-only controls by SVG/title/aria/parent button metadata; delete may be an unlabeled trash icon in a detail drawer bottom action area.",
         "Ask before confirming a destructive alternative such as Archive when Delete is unavailable unless explicitly allowed.",
         "User-facing reports are Excel-only by default unless the task explicitly asks for Markdown or JSON.",
-        "The first Excel sheet must be a clean bug report with Module, Issue, Description, Priority, Status.",
+        "The first Excel sheet must be a clean bug report with Module, Issue, Description, Priority, Status, Screenshot.",
+        "If an issue has screenshot evidence, embed the image directly in that issue row's Screenshot cell on the Bug Report sheet.",
         "Excel reports must be readable without manual resizing: wrapped text, useful widths/heights, frozen headers, and colored headers/priority/status cells.",
         "Do not generate CSV reports.",
         "Do not push reports, screenshots, logs, or local artifacts to GitHub.",

agent/src/reports/excel.ts

@@ -63,26 +63,39 @@ function issueMatrixRows(context: RunContext): Row[] {
     Issue: conciseText(issue.title),
     Description: clearText(issue.description),
     Priority: issue.severity,
-    Status: context.finalStatus === "Fail" ? "Blocked" : "Open"
+    Status: context.finalStatus === "Fail" ? "Blocked" : "Open",
+    Screenshot: issue.screenshot ? "embedded" : ""
   }));
   if (!rows.length && context.coverage && context.finalStatus !== "Pass") {
     return [{
       Module: "Coverage",
       Issue: "Coverage incomplete",
       Description: clearText(`${context.coverage.notes.join(" ")} Not tested: ${context.coverage.notTested}. Needs verification: ${context.coverage.needsVerification}. Blocked: ${context.coverage.blocked}.`),
       Priority: context.coverage.blocked ? "High" : "Medium",
-      Status: context.coverage.blocked ? "Blocked" : "Needs Verification"
+      Status: context.coverage.blocked ? "Blocked" : "Needs Verification",
+      Screenshot: ""
     }];
   }
   return rows.length ? rows : [{
     Module: "Lead Module",
     Issue: "No issue found",
     Description: "No bugs were detected during this run.",
     Priority: "Low",
-    Status: "Pass"
+    Status: "Pass",
+    Screenshot: ""
   }];
 }
 
+function issueMatrixImages(context: RunContext): SheetImage[] {
+  return userFacingIssues(context)
+    .map((issue, index) => issue.screenshot ? {
+      path: issue.screenshot,
+      rowIndex: index + 1,
+      columnIndex: 5
+    } : undefined)
+    .filter((image): image is SheetImage => Boolean(image));
+}
+
 function summaryRows(context: RunContext): Row[] {
   const issues = userFacingIssues(context);
   const byPriority = ["Critical", "High", "Medium", "Low"].map((priority) => ({
@@ -213,7 +226,7 @@ function browserStateRows(context: RunContext): Row[] {
 
 export function writeExcelReport(context: RunContext, filePath: string): void {
   const sheets: Sheet[] = [
-    { name: "Bug Report", rows: issueMatrixRows(context) },
+    { name: "Bug Report", rows: issueMatrixRows(context), images: issueMatrixImages(context) },
     { name: "Summary", rows: summaryRows(context) },
     {
       name: "Run Details",
@@ -385,10 +398,11 @@ ${drawing}
 }
 
 function columnWidths(headers: string[], rows: Row[], hasDrawing: boolean): string {
+  const isScreenshotGallery = hasDrawing && headers.includes("path") && headers.includes("image");
   const widths = headers.map((header, index) => {
-    if (hasDrawing && index === 0) return 10;
-    if (hasDrawing && index === 1) return 70;
-    if (hasDrawing && index === 2) return 36;
+    if (isScreenshotGallery && index === 0) return 10;
+    if (isScreenshotGallery && index === 1) return 70;
+    if (isScreenshotGallery && index === 2) return 36;
     const preferred = preferredColumnWidth(header);
     if (preferred) return preferred;
     const longest = Math.max(header.length, ...rows.map((row) => String(row[header] ?? "").split("\n").reduce((max, line) => Math.max(max, line.length), 0)));

agent/tests/smoke.ts

@@ -68,19 +68,22 @@ async function main(): Promise<void> {
       title: "Some lead conditions do not persist",
       severity: "High",
       area: "Lead Module",
-      description: "Result: 1/5 lead conditions saved.\nPassed:\n1. Tag/source/owner - saved and searchable.\nFailed:\n1. Minimal contact fields - not searchable after Save."
+      description: "Result: 1/5 lead conditions saved.\nPassed:\n1. Tag/source/owner - saved and searchable.\nFailed:\n1. Minimal contact fields - not searchable after Save.",
+      screenshot: result.context.screenshots[0]
     }],
     uxIssues: [],
     missingValidations: [],
     consoleErrors: [],
     networkErrors: [],
-    screenshots: [],
+    screenshots: [result.context.screenshots[0]],
     loginResult: "Not required",
     finalStatus: "Partial Pass"
   };
   writeExcelReport(multilineContext, multilineExcelPath);
   const multilineExcelBytes = fs.readFileSync(multilineExcelPath, "utf8");
   assert.ok(multilineExcelBytes.includes("Result: 1/5 lead conditions saved.\nPassed:"), "multiline descriptions must keep line breaks");
+  assert.ok(multilineExcelBytes.includes("Screenshot"), "bug report screenshot column missing");
+  assert.ok(multilineExcelBytes.includes("xl/worksheets/_rels/sheet1.xml.rels"), "bug report sheet image relationship missing");
 
   const excelOnlyTask: QaTask = {
     ...task,

plugins/qa-agent/skills/qa-agent/SKILL.md

@@ -39,14 +39,15 @@ npm run agent:codex -- --task-file <task-file> --headed
   `Result: 1/5 lead conditions saved.`
   `Passed: 1. Tag/source/owner - saved and searchable.`
   `Failed: 1. Minimal contact fields - not searchable after Save. 2. Full address - not searchable after Save.`
-- Use this table shape for user-facing reports: `Module`, `Issue`, `Description`, `Priority`, `Status`.
+- Use this table shape for user-facing reports: `Module`, `Issue`, `Description`, `Priority`, `Status`, `Screenshot`.
 - Generate Excel only by default. Generate Markdown/JSON only when explicitly requested for debugging or automation.
 - Do not generate CSV.
 - Excel first sheet must be `Bug Report` with only user-facing bug rows.
 - Excel second sheet should be `Summary`; technical evidence and coverage sheets can follow after that.
 - Excel reports should be readable without manual fixing: practical column widths, wrapped text, dynamic row heights, frozen/filter headers, and colored header/priority/status cells.
 - Aggregate repeated duplicate bugs into one clear row. Do not repeat the same bug many times unless each row is materially different.
 - Excel reports must embed screenshots/images in the workbook when screenshots exist.
+- The first `Bug Report` sheet must include a `Screenshot` column. If an issue has screenshot evidence, place the image directly inside that row's screenshot cell, not only in a separate screenshots sheet.
 - Reports must include coverage truth: modules/scopes tested, actions attempted, evidence, status, blockers, and confidence.
 - Do not push reports, screenshots, logs, traces, browser state, or `.env` files to GitHub.