From 0228d4728082bc8b1d1dd6bf0d729d87fe1c63a1 Mon Sep 17 00:00:00 2001
From: serenakeyitan <94026305+serenakeyitan@users.noreply.github.com>
Date: Tue, 7 Jul 2026 19:53:28 -0700
Subject: [PATCH] report HTML: add "Fix all now" button that jumps to the CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mirror of the website change in the S3-hosted report template. A primary
accent-green "Fix all now" button next to "Share this roast"; clicking it
scrolls to the end-of-report CTA ("Go back to your conversation…") and
pulses it — in-page anchor, no link.

- report-template.html: new button + FIXALL_LABEL token, id="rc-cta" on the
  CTA, rc-share-primary + rc-cta-pulse CSS, scroll handler in the script.
- render-report.mjs: fills FIXALL_LABEL (一次全修 / Fix all now).

render-report.test.mjs: 17/17 pass. Rendered fixture verified in a real
browser — button green in the share row, click lands the CTA in view.

Refs #31.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../production-scan/report-template.html      |  33 +++++++++++++++++-
 .../production-scan/scripts/render-report.mjs | Bin 24903 -> 24960 bytes
 2 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/.claude/skills/production-scan/report-template.html b/.claude/skills/production-scan/report-template.html
index c8fb94b..77a1cb8 100644
--- a/.claude/skills/production-scan/report-template.html
+++ b/.claude/skills/production-scan/report-template.html
@@ -206,6 +206,17 @@
       border-radius: 999px; padding: 9px 18px; transition: background .15s, border-color .15s; }
     .rc-share:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.28); }
     .rc-share svg { opacity: .85; }
+    /* "Fix all now" — the primary action, accent-filled. */
+    .rc-share-primary { color: #04120a; background: var(--color-accent, #80EE64); border-color: transparent; }
+    .rc-share-primary:hover { background: var(--color-accent, #80EE64); filter: brightness(1.08); border-color: transparent; }
+    .rc-share-primary svg { opacity: 1; }
+    /* Pulse the CTA when "Fix all now" scrolls the reader to it. */
+    @keyframes rc-cta-pulse {
+      0%   { border-color: var(--color-accent, #80EE64); box-shadow: 0 0 0 0 rgba(128,238,100,0.45); }
+      70%  { border-color: var(--color-accent, #80EE64); box-shadow: 0 0 0 10px rgba(128,238,100,0); }
+      100% { box-shadow: 0 0 0 0 rgba(128,238,100,0); }
+    }
+    .rc-cta-pulse { animation: rc-cta-pulse 1.3s ease-out 1; }
 
     @media (max-width: 560px) {
       .rc-breakdown { grid-template-columns: 1fr; }
@@ -237,6 +248,10 @@
         <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></svg>
         <span class="rc-share-label">{{SHARE_LABEL}}</span>
       </button>
+      <button class="rc-share rc-share-primary" type="button" data-fixall aria-label="{{FIXALL_LABEL}}">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg>
+        <span>{{FIXALL_LABEL}}</span>
+      </button>
     </div>
 
     <!-- Narrow-screen reaction fallback -->
@@ -262,7 +277,7 @@
     {{MUSTFIX_BLOCK}}
 
     <!-- ═══ CTA — no link (this page is reached FROM the conversation that produced it) ═══ -->
-    <div class="rc-cta">
+    <div class="rc-cta" id="rc-cta">
       <span class="rc-cta-text">👉 {{CTA_TEXT}}</span>
     </div>
 
@@ -358,6 +373,22 @@
       } catch (_) { /* user dismissed the share sheet — ignore */ }
     });
   });
+
+  // Fix all now: scroll to the CTA at the end and briefly pulse it, so the
+  // reader lands on the "go back to your conversation" instruction. In-page
+  // anchor jump — no navigation, no external link. The page sets
+  // scroll-behavior:smooth in CSS, so this glides; reduced-motion jumps instant.
+  document.querySelectorAll('[data-fixall]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const cta = document.getElementById('rc-cta');
+      if (!cta) return;
+      const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      cta.scrollIntoView({ behavior: reduce ? 'instant' : 'smooth', block: 'center' });
+      cta.classList.remove('rc-cta-pulse');
+      void cta.offsetWidth;
+      cta.classList.add('rc-cta-pulse');
+    });
+  });
 </script>
 </body>
 </html>
diff --git a/.claude/skills/production-scan/scripts/render-report.mjs b/.claude/skills/production-scan/scripts/render-report.mjs
index cfb42f6836ed54b17869c8ac43de797d4d55edeb..8a558ae3788cb4dc0b9bcb3a35568087fa055cff 100644
GIT binary patch
delta 67
zcmV-J0KEUl!U2H80kFAOG$0^GNmxNlOkYevLPbnEAZc@2NFYBTC*-(*=B%ORg{b7e
Zt|uTmASXs?cpzbHY#?rLceAutlL>ko8pr?u

delta 14
WcmZoT%y|3|<A$B#n?Hs3aRLB0H3uR9