sparkecoder 0.1.69 → 0.1.70

package/dist/skills/default/qa.md

@@ -195,111 +195,381 @@ Also take a screenshot any time you find an issue -- visual evidence makes the r
 
 ## QA Report Template
 
-After testing, produce the report in this format. Replace `<download_url>` placeholders with the actual URLs returned by `upload_file`. Write the final report to `qa-report-<date>.md`.
-
-```markdown
-# QA Report
-
-**URL:** <tested url>
-**Date:** <date>
-**Tester:** SparkECoder Agent
-**Environment:** Chromium (headless) / <OS>
-
----
-
-## Summary
-
-| Category            | Status | Issues |
-|---------------------|--------|--------|
-| Page Load           | ✅ / ⚠️ / ❌ | <count> |
-| Navigation & Links  | ✅ / ⚠️ / ❌ | <count> |
-| Forms & Inputs      | ✅ / ⚠️ / ❌ | <count> |
-| Visual & UI         | ✅ / ⚠️ / ❌ | <count> |
-| Responsive Design   | ✅ / ⚠️ / ❌ | <count> |
-| Accessibility       | ✅ / ⚠️ / ❌ | <count> |
-| Error Handling      | ✅ / ⚠️ / ❌ | <count> |
-
-**Overall:** ✅ Pass / ⚠️ Pass with warnings / ❌ Fail
-
----
-
-## Detailed Findings
-
-### Page Load & Performance
-- **Status:** ✅ / ⚠️ / ❌
-- **Load time:** <fast / moderate / slow>
-- **Console errors:** <none / list>
-- **Missing assets:** <none / list>
-- **Baseline:** ![Homepage](<download_url for qa-home.png>)
-
-### Navigation & Links
-- **Status:** ✅ / ⚠️ / ❌
-- **Links tested:** <count>
-- **Broken links:** <none / list with URLs>
-
-### Forms & Inputs
-- **Status:** ✅ / ⚠️ / ❌
-- **Forms tested:** <count>
-- **Validation issues:** <none / list>
-- **Submission issues:** <none / list>
-
-### Visual & UI
-- **Status:** ✅ / ⚠️ / ❌
-- **Issues:**
-  - <description of any visual issues found>
-  - ![Issue screenshot](<download_url>)
-
-### Responsive Design
-- **Status:** ✅ / ⚠️ / ❌
-- **Viewports tested:**
-
-| Viewport | Size | Screenshot | Issues |
-|----------|------|------------|--------|
-| Mobile   | 375 x 812  | ![Mobile](<download_url for qa-mobile.png>)   | <none / description> |
-| Tablet   | 768 x 1024 | ![Tablet](<download_url for qa-tablet.png>)   | <none / description> |
-| Desktop  | 1440 x 900 | ![Desktop](<download_url for qa-desktop.png>) | <none / description> |
-
-### Accessibility
-- **Status:** ✅ / ⚠️ / ❌
-- **Images missing alt text:** <count>
-- **Buttons missing ARIA labels:** <count>
-- **Other issues:** <list>
-
-### Error Handling
-- **Status:** ✅ / ⚠️ / ❌
-- **404 page:** <present and styled / missing / broken>
-- **Screenshot:** ![404 page](<download_url for qa-404.png>)
-- **Other error handling:** <notes>
-
----
-
-## Issues List
-
-| # | Severity | Category | Description | Evidence |
-|---|----------|----------|-------------|----------|
-| 1 | 🔴 High / 🟡 Medium / 🟢 Low | <category> | <description> | ![Issue](<download_url>) |
-
----
-
-## All Screenshots
-
-| Name | Description | Link |
-|------|-------------|------|
-| qa-home.png | Homepage baseline | [View](<download_url>) |
-| qa-mobile.png | Mobile viewport (375px) | [View](<download_url>) |
-| qa-tablet.png | Tablet viewport (768px) | [View](<download_url>) |
-| qa-desktop.png | Desktop viewport (1440px) | [View](<download_url>) |
-| qa-404.png | 404 error page | [View](<download_url>) |
-| <additional screenshots for specific issues> |||
-
----
+After testing, produce the report as a **single-page HTML file**. Replace every `<!-- PLACEHOLDER -->` with real data. Write the file to `qa-report-<date>.html`, then upload it with `upload_file` so the user gets a clickable link to view in a browser.
+
+The HTML file is fully self-contained -- all styles are inlined so it looks great with no external dependencies.
+
+### Style Guide for the Report
+
+- **Overall verdict** uses a large colored banner: green (#16a34a) = Pass, amber (#d97706) = Warnings, red (#dc2626) = Fail
+- **Category cards** show status with a colored dot and issue count
+- **Severity badges** are pill-shaped: High = red, Medium = amber, Low = green
+- **Screenshots** are thumbnail cards that open full-size in a lightbox overlay when clicked
+- **Navigation** is a sticky top bar so readers can jump between sections
+- The page uses the system font stack for fast rendering and a clean, native feel
+- Keep generous whitespace -- `max-width: 960px` centered content
+- Tables use alternating row shading for readability
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>QA Report — <!-- URL --></title>
+<style>
+  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+  html{scroll-behavior:smooth}
+  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1e293b;background:#f8fafc;line-height:1.6;-webkit-font-smoothing:antialiased}
+
+  /* NAV */
+  .topnav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid #e2e8f0;padding:0 1.5rem;display:flex;align-items:center;gap:1rem;overflow-x:auto;white-space:nowrap;height:48px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
+  .topnav a{font-size:.8rem;font-weight:500;color:#64748b;text-decoration:none;padding:.25rem .5rem;border-radius:6px;transition:background .15s,color .15s}
+  .topnav a:hover{background:#f1f5f9;color:#0f172a}
+
+  /* HERO */
+  .hero{text-align:center;padding:3rem 1.5rem 2rem}
+  .hero h1{font-size:1.75rem;font-weight:700;margin-bottom:.25rem}
+  .hero .meta{font-size:.85rem;color:#64748b;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem}
+  .hero .meta span{display:inline-flex;align-items:center;gap:.25rem}
+
+  /* VERDICT BANNER */
+  .verdict{margin:0 auto 2rem;max-width:960px;padding:1.25rem 1.5rem;border-radius:12px;text-align:center;font-weight:600;font-size:1.1rem;color:#fff}
+  .verdict.pass{background:#16a34a}
+  .verdict.warn{background:#d97706}
+  .verdict.fail{background:#dc2626}
+
+  /* CONTAINER */
+  .container{max-width:960px;margin:0 auto;padding:0 1.5rem 3rem}
+
+  /* SUMMARY GRID */
+  .summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem;margin-bottom:2.5rem}
+  .summary-card{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;transition:box-shadow .15s}
+  .summary-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
+  .dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
+  .dot.pass{background:#16a34a}.dot.warn{background:#d97706}.dot.fail{background:#dc2626}
+  .summary-card .label{font-size:.85rem;font-weight:500;flex:1}
+  .summary-card .count{font-size:.8rem;color:#94a3b8;font-weight:500}
+
+  /* SECTIONS */
+  section{margin-bottom:2rem}
+  section h2{font-size:1.2rem;font-weight:700;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:2px solid #e2e8f0}
+  .detail-block{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:1.25rem 1.5rem;margin-bottom:1rem}
+  .detail-block h3{font-size:1rem;font-weight:600;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem}
+  .detail-block dl{display:grid;grid-template-columns:160px 1fr;gap:.35rem .75rem}
+  .detail-block dt{font-size:.825rem;color:#64748b;font-weight:500}
+  .detail-block dd{font-size:.875rem}
+  .detail-block ul{padding-left:1.25rem;font-size:.875rem}
+  .detail-block ul li{margin-bottom:.25rem}
+
+  /* BADGES */
+  .badge{display:inline-block;padding:.15rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
+  .badge.high{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
+  .badge.medium{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
+  .badge.low{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
+  .badge.status-pass{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0}
+  .badge.status-warn{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
+  .badge.status-fail{background:#fef2f2;color:#dc2626;border:1px solid #fecaca}
+
+  /* TABLES */
+  table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:.5rem}
+  th{text-align:left;font-weight:600;padding:.6rem .75rem;background:#f8fafc;border-bottom:2px solid #e2e8f0;color:#475569;font-size:.8rem;text-transform:uppercase;letter-spacing:.04em}
+  td{padding:.6rem .75rem;border-bottom:1px solid #f1f5f9}
+  tr:nth-child(even) td{background:#fafbfc}
+
+  /* SCREENSHOT GALLERY */
+  .gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin-top:.75rem}
+  .gallery-item{cursor:pointer;border:1px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;transition:box-shadow .15s,transform .15s}
+  .gallery-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);transform:translateY(-2px)}
+  .gallery-item img{width:100%;height:160px;object-fit:cover;display:block}
+  .gallery-item .caption{padding:.6rem .75rem;font-size:.8rem;font-weight:500;color:#334155}
+
+  /* LIGHTBOX */
+  .lightbox{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.8);align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
+  .lightbox.active{display:flex}
+  .lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.3)}
+
+  /* RECOMMENDATIONS */
+  .rec-list{counter-reset:rec;list-style:none;padding:0}
+  .rec-list li{counter-increment:rec;padding:.75rem 1rem .75rem 3rem;position:relative;background:#fff;border:1px solid #e2e8f0;border-radius:8px;margin-bottom:.5rem;font-size:.875rem}
+  .rec-list li::before{content:counter(rec);position:absolute;left:1rem;top:.75rem;width:1.5rem;height:1.5rem;background:#3b82f6;color:#fff;border-radius:50%;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
+
+  /* FOOTER */
+  footer{text-align:center;padding:2rem 1rem;font-size:.75rem;color:#94a3b8;border-top:1px solid #e2e8f0;margin-top:2rem}
+</style>
+</head>
+<body>
+
+<!-- NAVIGATION -->
+<nav class="topnav">
+  <a href="#summary">Summary</a>
+  <a href="#page-load">Page Load</a>
+  <a href="#navigation">Navigation</a>
+  <a href="#forms">Forms</a>
+  <a href="#visual">Visual &amp; UI</a>
+  <a href="#responsive">Responsive</a>
+  <a href="#accessibility">Accessibility</a>
+  <a href="#errors">Error Handling</a>
+  <a href="#issues">Issues</a>
+  <a href="#screenshots">Screenshots</a>
+  <a href="#recommendations">Recommendations</a>
+</nav>
+
+<!-- HERO -->
+<header class="hero">
+  <h1>QA Report</h1>
+  <div class="meta">
+    <span>🔗 <!-- URL tested --></span>
+    <span>📅 <!-- date --></span>
+    <span>🤖 SparkECoder Agent</span>
+    <span>🌐 Chromium (headless)</span>
+  </div>
+</header>
+
+<!-- OVERALL VERDICT: use class "pass", "warn", or "fail" -->
+<div class="verdict pass">
+  <!-- e.g. ✅ PASS — 0 critical issues found -->
+</div>
+
+<!-- ====== SUMMARY ====== -->
+<div class="container">
+<section id="summary">
+  <h2>Summary</h2>
+  <div class="summary-grid">
+    <!-- Repeat one card per category. Use dot class: pass / warn / fail -->
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Page Load</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Navigation</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Forms &amp; Inputs</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Visual &amp; UI</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Responsive</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Accessibility</span>
+      <span class="count">0 issues</span>
+    </div>
+    <div class="summary-card">
+      <span class="dot pass"></span>
+      <span class="label">Error Handling</span>
+      <span class="count">0 issues</span>
+    </div>
+  </div>
+</section>
+
+<!-- ====== DETAILED FINDINGS ====== -->
+
+<!-- PAGE LOAD -->
+<section id="page-load">
+  <h2>Page Load &amp; Performance</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Page Load</h3>
+    <dl>
+      <dt>Load Time</dt>      <dd><!-- fast / moderate / slow --></dd>
+      <dt>Console Errors</dt> <dd><!-- none / list --></dd>
+      <dt>Missing Assets</dt> <dd><!-- none / list --></dd>
+    </dl>
+    <!-- Baseline screenshot (optional) -->
+  </div>
+</section>
+
+<!-- NAVIGATION -->
+<section id="navigation">
+  <h2>Navigation &amp; Links</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Navigation</h3>
+    <dl>
+      <dt>Links Tested</dt>  <dd><!-- count --></dd>
+      <dt>Broken Links</dt>  <dd><!-- none / list --></dd>
+    </dl>
+  </div>
+</section>
+
+<!-- FORMS -->
+<section id="forms">
+  <h2>Forms &amp; Inputs</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Forms</h3>
+    <dl>
+      <dt>Forms Tested</dt>       <dd><!-- count --></dd>
+      <dt>Validation Issues</dt>  <dd><!-- none / list --></dd>
+      <dt>Submission Issues</dt>  <dd><!-- none / list --></dd>
+    </dl>
+  </div>
+</section>
+
+<!-- VISUAL & UI -->
+<section id="visual">
+  <h2>Visual &amp; UI</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Visual</h3>
+    <ul>
+      <!-- <li>Description of issue + link to screenshot</li> -->
+      <li>No visual issues found.</li>
+    </ul>
+  </div>
+</section>
+
+<!-- RESPONSIVE -->
+<section id="responsive">
+  <h2>Responsive Design</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Responsive</h3>
+    <table>
+      <thead><tr><th>Viewport</th><th>Size</th><th>Screenshot</th><th>Issues</th></tr></thead>
+      <tbody>
+        <tr>
+          <td>Mobile</td><td>375 × 812</td>
+          <td><a href="<!-- download_url -->" target="_blank">View</a></td>
+          <td><!-- none / description --></td>
+        </tr>
+        <tr>
+          <td>Tablet</td><td>768 × 1024</td>
+          <td><a href="<!-- download_url -->" target="_blank">View</a></td>
+          <td><!-- none / description --></td>
+        </tr>
+        <tr>
+          <td>Desktop</td><td>1440 × 900</td>
+          <td><a href="<!-- download_url -->" target="_blank">View</a></td>
+          <td><!-- none / description --></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</section>
+
+<!-- ACCESSIBILITY -->
+<section id="accessibility">
+  <h2>Accessibility</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Accessibility</h3>
+    <dl>
+      <dt>Images Missing Alt</dt>       <dd><!-- count --></dd>
+      <dt>Buttons Missing ARIA</dt>     <dd><!-- count --></dd>
+      <dt>Other Issues</dt>             <dd><!-- list --></dd>
+    </dl>
+  </div>
+</section>
+
+<!-- ERROR HANDLING -->
+<section id="errors">
+  <h2>Error Handling</h2>
+  <div class="detail-block">
+    <h3><span class="badge status-pass">Pass</span> Error Handling</h3>
+    <dl>
+      <dt>404 Page</dt>        <dd><!-- present and styled / missing / broken --></dd>
+      <dt>Other Errors</dt>    <dd><!-- notes --></dd>
+    </dl>
+  </div>
+</section>
+
+<!-- ====== ISSUES TABLE ====== -->
+<section id="issues">
+  <h2>Issues</h2>
+  <table>
+    <thead><tr><th>#</th><th>Severity</th><th>Category</th><th>Description</th><th>Evidence</th></tr></thead>
+    <tbody>
+      <!-- Repeat rows. Use badge classes: high / medium / low -->
+      <tr>
+        <td>1</td>
+        <td><span class="badge high">High</span></td>
+        <td><!-- category --></td>
+        <td><!-- description --></td>
+        <td><a href="<!-- download_url -->" target="_blank">Screenshot</a></td>
+      </tr>
+      <!-- If no issues, show a single row: -->
+      <!--
+      <tr><td colspan="5" style="text-align:center;color:#64748b;padding:1.5rem">No issues found 🎉</td></tr>
+      -->
+    </tbody>
+  </table>
+</section>
+
+<!-- ====== SCREENSHOT GALLERY ====== -->
+<section id="screenshots">
+  <h2>Screenshots</h2>
+  <div class="gallery">
+    <!-- Repeat one gallery-item per screenshot. onclick opens lightbox. -->
+    <div class="gallery-item" onclick="openLightbox('<!-- download_url -->')">
+      <img src="<!-- download_url -->" alt="Homepage baseline" loading="lazy">
+      <div class="caption">qa-home.png — Homepage baseline</div>
+    </div>
+    <div class="gallery-item" onclick="openLightbox('<!-- download_url -->')">
+      <img src="<!-- download_url -->" alt="Mobile viewport" loading="lazy">
+      <div class="caption">qa-mobile.png — Mobile (375px)</div>
+    </div>
+    <div class="gallery-item" onclick="openLightbox('<!-- download_url -->')">
+      <img src="<!-- download_url -->" alt="Tablet viewport" loading="lazy">
+      <div class="caption">qa-tablet.png — Tablet (768px)</div>
+    </div>
+    <div class="gallery-item" onclick="openLightbox('<!-- download_url -->')">
+      <img src="<!-- download_url -->" alt="Desktop viewport" loading="lazy">
+      <div class="caption">qa-desktop.png — Desktop (1440px)</div>
+    </div>
+    <div class="gallery-item" onclick="openLightbox('<!-- download_url -->')">
+      <img src="<!-- download_url -->" alt="404 page" loading="lazy">
+      <div class="caption">qa-404.png — Error page</div>
+    </div>
+    <!-- Add more gallery items for issue screenshots -->
+  </div>
+</section>
+
+<!-- ====== RECOMMENDATIONS ====== -->
+<section id="recommendations">
+  <h2>Recommendations</h2>
+  <ol class="rec-list">
+    <li><!-- Highest priority fix --></li>
+    <li><!-- Next priority --></li>
+    <!-- Add more as needed -->
+  </ol>
+</section>
+
+</div><!-- /container -->
+
+<!-- LIGHTBOX OVERLAY -->
+<div class="lightbox" id="lightbox" onclick="closeLightbox()">
+  <img id="lightbox-img" src="" alt="Full-size screenshot">
+</div>
+
+<footer>Generated by SparkECoder Agent · <!-- date --></footer>
+
+<script>
+function openLightbox(src){var lb=document.getElementById('lightbox');document.getElementById('lightbox-img').src=src;lb.classList.add('active');}
+function closeLightbox(){document.getElementById('lightbox').classList.remove('active');}
+document.addEventListener('keydown',function(e){if(e.key==='Escape')closeLightbox();});
+</script>
+</body>
+</html>
+```
 
-## Recommendations
+### How to Fill the Template
 
-1. <Highest priority fix>
-2. <Next priority>
-3. ...
-```
+1. Replace every `<!-- PLACEHOLDER -->` comment with real values from your testing
+2. For each category's status badge, use the correct class: `status-pass`, `status-warn`, or `status-fail`
+3. For each summary card dot, use the correct class: `pass`, `warn`, or `fail`
+4. For the verdict banner, set the class to `pass`, `warn`, or `fail` and write a one-liner summary
+5. In the Issues table, use severity badge classes: `high`, `medium`, or `low`
+6. In the Screenshot gallery, set the `src`, `alt`, and `onclick` URL to each screenshot's `download_url`
+7. Add or remove gallery items and issue rows to match what you actually found
+8. If a section is not applicable (e.g. no forms on the page), you may remove that section entirely or note "N/A"
 
 ---
 
@@ -312,6 +582,6 @@ After testing, produce the report in this format. Replace `<download_url>` place
 5. **Be specific** -- "Submit button overlaps footer at 375px" is better than "layout issue on mobile"
 6. **Use descriptive screenshot names** -- `qa-issue-nav-overlap.png` not `screenshot3.png`
 7. **Close the browser when done** -- always run `agent-browser close` at the end
-8. **Save the report** -- write the final report to `qa-report-<date>.md`
-9. **Upload the report too** -- after writing the report file, `upload_file` it so the user gets a shareable link
-8. **Upload the report** using the upload file tool and return that url to the user
+8. **Save the report as HTML** -- write the final report to `qa-report-<date>.html` (not markdown)
+9. **Upload the report** -- after writing the HTML file, `upload_file` it so the user gets a clickable link that opens as a styled webpage
+10. **Return the URL** -- give the user the uploaded report URL so they can share it

package/dist/tools/index.d.ts

@@ -1,7 +1,7 @@
 import * as ai from 'ai';
 import { ToolSet } from 'ai';
-import { B as BashToolProgress, W as WriteFileProgress, S as SearchToolProgress } from '../search-BRnGaIl-.js';
-export { b as BashToolOptions, d as SearchToolOptions, e as WriteFileToolOptions, c as createBashTool, f as createSearchTool, a as createWriteFileTool } from '../search-BRnGaIl-.js';
+import { B as BashToolProgress, W as WriteFileProgress, S as SearchToolProgress } from '../search-CCffrVJE.js';
+export { b as BashToolOptions, d as SearchToolOptions, e as WriteFileToolOptions, c as createBashTool, f as createSearchTool, a as createWriteFileTool } from '../search-CCffrVJE.js';
 
 interface TaskCompletionSignal {
     status: 'completed' | 'failed';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkecoder",
-  "version": "0.1.69",
+  "version": "0.1.70",
   "description": "A powerful coding agent CLI with HTTP API for development environments",
   "type": "module",
   "main": "./dist/index.js",