feat(reports): screenshots, original requests and recordings beside the outcomes (Refs #6)

.github/workflows/ci.yml

@@ -25,6 +25,12 @@ jobs:
       - name: Verify the HyperIDE product report against its evidence record
         run: python3 scripts/ci/check-product-report.py
 
+      - name: Make sure ffprobe is available to decode the recordings
+        run: command -v ffprobe || (sudo apt-get update && sudo apt-get install -y --no-install-recommends ffmpeg)
+
+      - name: Verify screenshots, original requests and recordings
+        run: python3 scripts/ci/check-media-report.py
+
       - name: Install dependencies
         run: npm ci
 
@@ -39,3 +45,6 @@ jobs:
 
       - name: Check October reports render without JavaScript and on phones
         run: npm run ci:render-october
+
+      - name: Check screenshots, original requests and recordings render and play
+        run: npm run ci:render-media

package.json

@@ -6,7 +6,8 @@
   "type": "module",
   "scripts": {
     "ci:validate-reports": "node scripts/ci/validate-reports.mjs",
-    "ci:render-october": "node scripts/ci/check-october-render.mjs"
+    "ci:render-october": "node scripts/ci/check-october-render.mjs",
+    "ci:render-media": "node scripts/ci/check-media-render.mjs"
   },
   "devDependencies": {
     "playwright": "^1.61.0"

reports/2026-10-own-results-evidence.json

@@ -2899,7 +2899,7 @@
       "before": "Quoted attribute text shown before the label",
       "after": "Only the intended label",
       "pr": 810,
-      "source": "Screenshots below",
+      "source": "Screenshots in the live examples result",
       "repo": "hyperide/hyper-saas"
     },
     {

reports/shared/media-proof-20261106.css

@@ -0,0 +1,301 @@
+/* Annotated screenshots, original requests and recordings. Loaded after product-report-20261106.css. The two October stylesheets stay byte-identical. */
+.shot-group,
+.clip-group {
+  margin: 16px 0;
+  padding: 14px 16px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.shot-group > h4,
+.clip-group > h4 {
+  margin: 0 0 6px;
+  font-size: 1rem;
+  color: var(--text);
+}
+.shot-group .shot-status {
+  margin: 0 0 10px;
+  font-size: 0.85rem;
+  color: var(--text-dim);
+}
+.shot-group .shot-badge {
+  display: inline-block;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  font-size: 0.75rem;
+  padding: 4px 8px;
+  margin: 0 6px 0 0;
+}
+.shot-grid {
+  display: grid;
+  gap: 14px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
+}
+.shot-grid-single,
+.shot-grid-sequence {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+}
+.shot-single .shot-grid-single {
+  grid-template-columns: repeat(auto-fit, minmax(280px, 520px));
+}
+.layout-seq-dialog .shot-grid-sequence {
+  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
+  grid-template-rows: auto 1fr;
+}
+.layout-seq-dialog .shot-grid-sequence > .shot:first-child {
+  grid-row: span 2;
+}
+.shot {
+  margin: 0;
+  min-width: 0;
+}
+.shot-link {
+  display: block;
+  line-height: 0;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: #000;
+  cursor: zoom-in;
+}
+.shot-link:focus-visible {
+  outline: 3px solid var(--accent1);
+  outline-offset: 2px;
+}
+.shot img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+.shot figcaption {
+  margin-top: 8px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--text-dim);
+  overflow-wrap: anywhere;
+}
+.chip {
+  display: inline-block;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 1.5;
+  padding: 0 8px;
+  margin-right: 4px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  color: var(--text);
+  white-space: nowrap;
+}
+.chip-before {
+  color: var(--red);
+  border-color: rgba(248, 81, 73, 0.6);
+}
+.chip-after {
+  color: var(--green);
+  border-color: rgba(63, 185, 80, 0.6);
+}
+.chip-step {
+  color: var(--accent1);
+  border-color: rgba(88, 166, 255, 0.6);
+}
+.chip-interim {
+  color: var(--yellow);
+  border-color: rgba(210, 153, 34, 0.6);
+}
+.chip-context {
+  color: var(--text-dim);
+}
+.chip-clip {
+  color: var(--accent2);
+  border-color: rgba(188, 140, 255, 0.6);
+  white-space: normal;
+}
+.original-link {
+  display: inline-block;
+  white-space: nowrap;
+}
+ol.marks {
+  list-style: none;
+  margin: 8px 0 0;
+  padding: 0;
+  counter-reset: mark;
+}
+ol.marks li {
+  counter-increment: mark;
+  position: relative;
+  margin: 4px 0;
+  padding-left: 28px;
+  color: var(--text);
+}
+ol.marks li::before {
+  content: counter(mark);
+  position: absolute;
+  left: 0;
+  top: 1px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ffd400;
+  border: 2px solid #000;
+  color: #000;
+  font-size: 0.72rem;
+  font-weight: 700;
+  line-height: 16px;
+  text-align: center;
+}
+.more-shots {
+  margin-top: 14px;
+}
+.more-shots > summary {
+  cursor: pointer;
+  color: var(--text);
+  font-weight: 600;
+  margin-bottom: 10px;
+}
+.shot-source {
+  margin: 12px 0 0;
+  font-size: 0.82rem;
+  color: var(--text-dim);
+  line-height: 1.5;
+}
+.owner-requests {
+  margin: 14px 0;
+}
+.owner-request {
+  margin: 10px 0;
+  padding: 12px 16px;
+  background: rgba(88, 166, 255, 0.05);
+  border: 1px solid rgba(88, 166, 255, 0.18);
+  border-left: 4px solid var(--accent1);
+  border-radius: 8px;
+}
+.owner-request > h4,
+.owner-request > h5 {
+  margin: 0 0 8px;
+  font-size: 0.82rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+.request-cols {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px 18px;
+}
+.request-col {
+  min-width: 0;
+}
+.request-label {
+  margin: 0 0 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--accent1);
+}
+.owner-request blockquote {
+  margin: 0;
+  padding-left: 12px;
+  border-left: 3px solid rgba(88, 166, 255, 0.5);
+  color: var(--text);
+  font-size: 0.98rem;
+  line-height: 1.55;
+  overflow-wrap: anywhere;
+}
+.owner-request .request-source,
+.owner-request .request-link,
+.owner-request .request-note {
+  margin: 8px 0 0;
+  max-width: none;
+  font-size: 0.82rem;
+  line-height: 1.5;
+  color: var(--text-dim);
+  overflow-wrap: anywhere;
+}
+.owner-request .request-source strong,
+.owner-request .request-link strong {
+  color: var(--text);
+}
+.owner-request code {
+  font-size: 0.78rem;
+  word-break: break-all;
+}
+.clip {
+  margin: 14px 0;
+}
+.clip-narrow {
+  max-width: 640px;
+}
+.clip video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  max-height: 80vh;
+  background: #000;
+  border-radius: 8px;
+}
+.clip figcaption {
+  margin-top: 8px;
+  font-size: 0.85rem;
+  line-height: 1.5;
+  color: var(--text-dim);
+  overflow-wrap: anywhere;
+}
+.clip-pair {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+  gap: 14px;
+  align-items: start;
+}
+.clip-meta {
+  margin: 8px 0 0;
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 4px 12px;
+}
+.clip-meta dt {
+  color: var(--text);
+  font-weight: 600;
+}
+.clip-meta dd {
+  margin: 0;
+}
+.clip-meta code {
+  font-size: 0.75rem;
+  word-break: break-all;
+}
+.visual-table td:first-child {
+  min-width: 12em;
+}
+@media (max-width: 650px) {
+  .shot-group,
+  .clip-group {
+    padding: 12px 10px;
+  }
+  .shot-grid,
+  .shot-grid-single,
+  .shot-grid-sequence,
+  .layout-seq-dialog .shot-grid-sequence,
+  .shot-single .shot-grid-single,
+  .request-cols,
+  .clip-pair {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .layout-seq-dialog .shot-grid-sequence > .shot:first-child {
+    grid-row: auto;
+  }
+  .layout-seq-dialog .shot-grid-sequence > .shot:first-child .shot-link {
+    max-width: 320px;
+  }
+  .owner-request {
+    padding: 10px 12px;
+  }
+  .clip-meta {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .clip-meta dt {
+    margin-top: 6px;
+  }
+}