A deliberately faulty meeting-list sample beside an exact reproduction report

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reproduce the filter mismatch</title><style>
:root{font:16px/1.6 system-ui,sans-serif;color:#24334c;background:#edf0f6}*{box-sizing:border-box}body{margin:0}main{max-width:960px;margin:auto;padding:24px}h1{font-size:2.2rem;line-height:1.15;margin:12px 0}h2{font-size:1.55rem;line-height:1.3}h3{font-size:1.1rem}.notice{background:#fff1d6;border-left:5px solid #b67722;padding:16px}.panel{background:white;border:1px solid #aebbd0;margin:24px 0;padding:22px}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}button,textarea{font:inherit}button{color:#24334c;background:#fff;border:1px solid #5a6f91;border-radius:4px;padding:10px 14px;min-height:46px;cursor:pointer;text-align:left;white-space:normal}button[aria-pressed=true]{background:#243f6b;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b85608;outline-offset:3px}.meeting{padding:14px;border-top:1px solid #d0d8e5;display:flex;gap:16px}.id{font-weight:750;color:#23406c}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:16px}.expected{background:#edf4ef;padding:18px}.visible{background:#f5f0e6;padding:18px}.label{font-weight:700}.steps li{margin-bottom:12px}dt{font-weight:750;margin-top:16px}dd{margin:5px 0 0;overflow-wrap:anywhere}.fields{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-weight:650}textarea{display:block;font:inherit;padding:10px;width:100%;min-height:110px;margin-top:8px;border:1px solid #6f809a;border-radius:3px;color:#24334c;resize:vertical}.confirm{padding:16px;background:#fff1d6}footer{padding:18px 0;border-top:1px solid #aebbd0}#status{min-height:3em}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:1.9rem}.panel{padding:18px}.fields,.comparison{grid-template-columns:1fr}.toolbar>button{flex:1 1 auto}}
</style></head><body><main><header><p><strong>DEMO-A · DELIBERATELY FAULTY TEACHING PAGE</strong></p><h1>Make the mismatch repeatable.</h1><p>Start from three supplied meetings. Select Today, then All. Compare the visible heading with the row IDs.</p><p class="notice">Original fictional fixture, separate from NOS behavior. Today is a fixed sample grouping, not your device's date. No production issue, customer data or completed test run is claimed.</p></header>
<section class="panel" aria-labelledby="demo-title"><h2 id="demo-title">The small reproducer</h2><p id="setup">Reset sample restores All meetings with M1, M2 and M3. Reset does not erase your report notes.</p><div class="toolbar" aria-label="Sample meeting filter"><button id="all" aria-pressed="true">All</button><button id="today" aria-pressed="false">Today</button><button id="reset-sample">Reset sample</button></div><h3 id="list-title">All meetings</h3><div id="meetings"><div class="meeting" data-id="M1"><span class="id">M1</span><span>Planning check-in · Today</span></div><div class="meeting" data-id="M2"><span class="id">M2</span><span>Archive review · Later</span></div><div class="meeting" data-id="M3"><span class="id">M3</span><span>Volunteer briefing · Later</span></div></div><div class="comparison"><div class="expected"><p class="label">Supplied expected behavior</p><p id="expected">All meetings: M1, M2 and M3 — 3 rows.</p></div><div class="visible"><p class="label">Current visible sample state</p><p id="visible" role="status" aria-live="polite">All meetings: M1, M2, M3 — 3 rows.</p></div></div><p>This display describes only the live sample state in this page. It does not record attempt counts, detect your browser version, diagnose a cause or verify a fix.</p></section>
<section class="panel"><h2>The supplied scenario report</h2><p>This is authored teaching content. Check it against your own run; environment, observation date and frequency remain TO CONFIRM.</p><dl><dt>Title</dt><dd>DEMO-A: selecting All after Today leaves only M1 under “All meetings”</dd><dt>Affected artifact</dt><dd>The deliberately faulty local teaching demo, build DEMO-A. No production application or customer account.</dd><dt>Environment</dt><dd>Browser, browser version, operating system and actual observation date: TO CONFIRM.</dd><dt>Starting state</dt><dd>Reset sample. Heading All meetings; M1, M2 and M3 visible.</dd></dl><h3>Exact steps</h3><ol class="steps"><li>Select Today.</li><li>Check Today meetings and only M1 visible.</li><li>Select All.</li><li>Compare the heading and visible row IDs.</li></ol><dl><dt>Expected result</dt><dd>All meetings with M1, M2 and M3. All should restore the complete supplied sample set.</dd><dt>Actual result in the supplied scenario</dt><dd>All meetings with only M1. Replace this with your actual observation if different.</dd><dt>Reproducibility</dt><dd>TO CONFIRM. Record attempts and matching results after running the steps.</dd><dt>Observed scope</dt><dd>This sequence in this fixture only. Other sequences, browsers and applications are not established.</dd><dt>Evidence</dt><dd>The self-contained teaching page and exact sample IDs. No screenshot, console error or stack trace is supplied as observed evidence.</dd><dt>Cause and fix status</dt><dd>Unknown. No production cause, issue ID, owner or verified resolution is established.</dd></dl></section>
<section class="panel"><button id="compare" aria-expanded="false" aria-controls="wording">Compare vague and precise wording</button><div id="wording" hidden><h2>Name the action and symptom</h2><p><strong>Vague:</strong> Filters are broken.</p><p><strong>Unsupported cause:</strong> All is broken because the database cache is stale.</p><p><strong>Actionable:</strong> Reset sample, select Today, then select All. The supplied scenario shows All meetings with only M1; the expected complete set is M1, M2 and M3.</p><p>A visible mismatch does not establish a database or cache cause. The exact starting state and sequence help another person compare their observation.</p></div></section>
<section class="panel"><h2>Your actual run notes</h2><p>Record what you actually see. These fields do not change the sample or the supplied report, and are not submitted to an issue tracker.</p><div class="fields"><label>Actual environment and observation date<textarea id="own-environment"></textarea></label><label>Actual result and visible row IDs<textarea id="own-result"></textarea></label><label>Attempts and matching results<textarea id="own-attempts"></textarea></label><label>Safe evidence references and unknowns<textarea id="own-evidence"></textarea></label></div><div class="toolbar"><button id="reset-notes" aria-expanded="false" aria-controls="confirmation">Clear my run notes</button></div><div id="confirmation" class="confirm" hidden><p>Clear all four fields? The sample state and supplied report will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all four fields</button></div></div><p id="status" role="status" aria-live="polite">All four run-note fields are blank. No attempts have been recorded here.</p></section>
<footer>Typing lasts in this open page and disappears on reload. Nothing is sent or stored. Keep permitted real observations and safe evidence in your team's maintained issue record.</footer></main><script>
'use strict';const byId=id=>document.getElementById(id);const rows=[...document.querySelectorAll('.meeting')];
function showState(){const ids=rows.filter(x=>!x.hidden).map(x=>x.dataset.id);byId('visible').textContent=byId('list-title').textContent+': '+ids.join(', ')+' — '+ids.length+' '+(ids.length===1?'row.':'rows.');}
function filterState(today){byId('today').setAttribute('aria-pressed',String(today));byId('all').setAttribute('aria-pressed',String(!today));byId('list-title').textContent=today?'Today meetings':'All meetings';byId('expected').textContent=today?'Today meetings: M1 — 1 row.':'All meetings: M1, M2 and M3 — 3 rows.';}
byId('today').addEventListener('click',()=>{filterState(true);for(const row of rows)row.hidden=row.dataset.id!=='M1';showState();});
// Intentional teaching defect: All updates the heading, but does not restore rows.
byId('all').addEventListener('click',()=>{filterState(false);showState();});
byId('reset-sample').addEventListener('click',()=>{filterState(false);for(const row of rows)row.hidden=false;showState();});
byId('compare').addEventListener('click',()=>{const open=byId('compare').getAttribute('aria-expanded')!=='true';byId('compare').setAttribute('aria-expanded',String(open));byId('wording').hidden=!open;byId('compare').textContent=open?'Hide the wording comparison':'Compare vague and precise wording';});
const fields=['own-environment','own-result','own-attempts','own-evidence'];function close(){byId('confirmation').hidden=true;byId('reset-notes').setAttribute('aria-expanded','false');}
for(const id of fields)byId(id).addEventListener('input',()=>{byId('status').textContent="Run notes changed. Review your current observations and evidence.";});byId('reset-notes').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset-notes').setAttribute('aria-expanded','true');byId('keep').focus();});byId('keep').addEventListener('click',()=>{close();byId('status').textContent='Kept all four run-note fields. No attempt count was generated.';byId('reset-notes').focus();});byId('clear').addEventListener('click',()=>{for(const id of fields)byId(id).value='';close();byId('status').textContent='All four run-note fields were cleared. Sample state and supplied report are unchanged.';byId('own-environment').focus();});
</script></body></html>