Skip to content

feat: verifier Try it here control panel #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AlexPaiva merged 1 commit into from
Jul 21, 2026
Merged

feat: verifier Try it here control panel #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 20 additions & 8 deletions src/verify-ui/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
75 changes: 75 additions & 0 deletions src/verify-ui/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Loading