Merge pull request #7 from AlexPaiva/feature/verify-try-panel

feat: verifier Try it here control panel

Author: AlexPaiva

src/verify-ui/main.ts

@@ -311,14 +311,26 @@ const APP_HTML = `
         </div>
       </div>
 
-      <div class="vf-actions" style="margin-top:18px">
-        <button type="button" class="vf-btn vf-btn-tamper" id="vf-tamper" data-testid="tamper" title="Add one identifiable request to the OFF evidence, the way the seeded defect would.">Tamper OFF evidence</button>
-        <button type="button" class="vf-btn vf-btn-primary" id="vf-evaluate" data-testid="evaluate" title="Re-run the deterministic evaluator on the evidence shown above.">Evaluate current evidence</button>
-        <button type="button" class="vf-btn" id="vf-check" data-testid="check" title="Re-derive the sealed report from the current evidence and check that it reproduces.">Verify loaded report</button>
-        <button type="button" class="vf-btn" id="vf-seal" data-testid="seal" title="Bind a report to exactly the evidence shown now.">Seal current result</button>
-        <button type="button" class="vf-btn vf-btn-quiet" id="vf-reset" data-testid="reset" title="Restore the original passing OFF and ON evidence.">Reset passing example</button>
-        <button type="button" class="vf-btn vf-btn-quiet" id="vf-dl-json" title="Download the machine-readable report for the current evidence.">Download report.json</button>
-        <button type="button" class="vf-btn vf-btn-quiet" id="vf-dl-md" title="Download the human-readable report for the current evidence.">Download report.md</button>
+      <div class="vf-try" data-testid="try-panel">
+        <span class="vf-try-badge">&#9654; Try it here</span>
+        <p class="vf-try-lede">This is the live control panel, and it opens at <b>PASS</b>. Break the evidence, watch the same deterministic evaluator flip the verdict, then seal or download the proof. Nothing you do here leaves the page.</p>
+        <ol class="vf-try-steps">
+          <li><b>Tamper OFF evidence</b> to inject one identifiable request, the way the seeded bug would.</li>
+          <li>The same evaluator returns <b>BROKEN_PROMISE</b> (<code>PP_IDENTIFIABLE_EVENT_LEAK</code>), and the report you sealed a moment ago goes <b>STALE_OR_MISMATCH</b>.</li>
+          <li><b>Seal current result</b> to bind the honest failure, or <b>Download</b> the JSON and Markdown proof.</li>
+          <li><b>Reset passing example</b> to return to the original PASS.</li>
+        </ol>
+        <p class="vf-try-hint">The buttons below are live. Hover any button for a one-line description of what it does.</p>
+        <div class="vf-actions" style="margin-top:14px">
+          <button type="button" class="vf-btn vf-btn-tamper" id="vf-tamper" data-testid="tamper" title="Add one identifiable request to the OFF evidence, the way the seeded defect would.">Tamper OFF evidence</button>
+          <button type="button" class="vf-btn vf-btn-primary" id="vf-evaluate" data-testid="evaluate" title="Re-run the deterministic evaluator on the evidence shown above.">Evaluate current evidence</button>
+          <button type="button" class="vf-btn" id="vf-check" data-testid="check" title="Re-derive the sealed report from the current evidence and check that it reproduces.">Verify loaded report</button>
+          <button type="button" class="vf-btn" id="vf-seal" data-testid="seal" title="Bind a report to exactly the evidence shown now.">Seal current result</button>
+          <button type="button" class="vf-btn vf-btn-quiet" id="vf-reset" data-testid="reset" title="Restore the original passing OFF and ON evidence.">Reset passing example</button>
+          <span class="vf-actions-div" aria-hidden="true"></span>
+          <button type="button" class="vf-btn vf-btn-quiet" id="vf-dl-json" title="Download the machine-readable report for the current evidence.">Download report.json</button>
+          <button type="button" class="vf-btn vf-btn-quiet" id="vf-dl-md" title="Download the human-readable report for the current evidence.">Download report.md</button>
+        </div>
       </div>
 
       <div class="vf-result" style="margin-top:20px">

src/verify-ui/styles.css

@@ -800,6 +800,81 @@ header {
 .btn-accent { background: #6c5ce7; color: #fff; }
 .btn-accent:hover { background: #5a4bd4; transform: translateY(-1px); }
 .ext::after { content: "\2197"; font-size: 0.9em; opacity: 0.8; }
+
+/* ---- "Try it here" live control panel ---- */
+.vf-try {
+  margin-top: 22px;
+  border: 1px solid rgba(108, 92, 231, 0.38);
+  background: linear-gradient(180deg, rgba(108, 92, 231, 0.12), rgba(108, 92, 231, 0.03));
+  border-radius: 14px;
+  padding: 18px 18px 20px;
+}
+.vf-try-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 700;
+  color: #d4ccff;
+  background: rgba(108, 92, 231, 0.22);
+  border: 1px solid rgba(108, 92, 231, 0.45);
+  padding: 6px 13px;
+  border-radius: 999px;
+}
+.vf-try-lede {
+  margin: 12px 0 0;
+  color: var(--text);
+  font-size: 1rem;
+  line-height: 1.5;
+}
+.vf-try-steps {
+  margin: 15px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: vftry;
+  display: grid;
+  gap: 10px;
+}
+.vf-try-steps li {
+  counter-increment: vftry;
+  position: relative;
+  padding-left: 36px;
+  color: var(--muted);
+  font-size: 0.94rem;
+  line-height: 1.45;
+}
+.vf-try-steps li::before {
+  content: counter(vftry);
+  position: absolute;
+  left: 0;
+  top: -1px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-family: var(--mono);
+  font-size: 0.74rem;
+  font-weight: 700;
+  color: #fff;
+  background: #6c5ce7;
+}
+.vf-try-steps b {
+  color: var(--text);
+}
+.vf-try-hint {
+  margin: 15px 0 0;
+  font-size: 0.82rem;
+  color: var(--muted2);
+}
+.vf-actions-div {
+  flex-basis: 100%;
+  height: 0;
+  margin: 0;
+}
 .vf-runit {
   margin-top: 14px;
   color: var(--muted);