| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>Cortex Loop - one tick, end to end</title> |
| <meta name="description" content="A minimal walkthrough of one loop tick: tick, propose, check, try-complete, using a synthetic page-edit ledger."> |
| <style> |
| :root{--ink:#111318;--muted:#5b6472;--line:#e3e7ee;--bg:#fbfcfe;--ok:#1a7f4b;--warn:#b45309;--bad:#b91c1c;--accent:#3b4cca} |
| *{box-sizing:border-box} |
| body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif} |
| .wrap{max-width:960px;margin:0 auto;padding:48px 24px 80px} |
| h1{font-size:34px;line-height:1.2;margin:0 0 12px;letter-spacing:-.02em} |
| .sub{color:var(--muted);font-size:17px;margin:0 0 28px;max-width:70ch} |
| .flow{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:0;list-style:none} |
| .flow li{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted)} |
| .flow li.on{border-color:var(--accent);color:var(--accent);font-weight:600} |
| .card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;margin:0 0 20px} |
| .card h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 14px} |
| button{font:inherit;font-weight:600;padding:11px 20px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer} |
| button:hover{filter:brightness(1.08)} |
| button[disabled]{opacity:.45;cursor:not-allowed} |
| button.ghost{background:#fff;color:var(--accent)} |
| .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center} |
| table{width:100%;border-collapse:collapse;font-size:14px} |
| th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top} |
| th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600} |
| td.mono,th.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px} |
| .pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600} |
| .p-pending{background:#eef1f6;color:#475569} |
| .p-check{background:#fff7e6;color:var(--warn)} |
| .p-done{background:#e8f7ee;color:var(--ok)} |
| .p-blocked{background:#fdeaea;color:var(--bad)} |
| .log{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#0f1420;color:#d7e0ee;border-radius:12px;padding:18px;min-height:190px;white-space:pre-wrap;overflow:auto} |
| .log .k{color:#8fb4ff} |
| .log .g{color:#66d19e} |
| .log .y{color:#f0c86b} |
| .log .r{color:#ff8f8f} |
| .foot{color:var(--muted);font-size:14px;margin-top:36px;padding-top:22px;border-top:1px solid var(--line)} |
| a{color:var(--accent)} |
| code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:#eef1f6;padding:1px 6px;border-radius:5px} |
| </style> |
| </head> |
| <body> |
| <div class="wrap"> |
|
|
| <p style="margin:0 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#5b6472">Cortex Loop</p><h1>Done is a check result, not a claim.</h1> |
| <p class="sub" style="font-size:18px;color:#111318">A loop should not be able to finish by asserting that it finished. Here is one that cannot.</p> |
| <p class="sub"><strong>The problem:</strong> an AI agent can always <em>say</em> it finished. Saying it is free. That is why so much "progress" evaporates on inspection.</p><p class="sub"><strong>What this page proves:</strong> a loop that refuses to mark work complete until the evidence matches. Pick a tick, and watch it succeed on three items and <strong>refuse</strong> on two - because the evidence was not there.</p><p class="sub" style="font-size:15px">No model call, no server: the whole state machine runs in your browser over a synthetic ledger.</p> |
|
|
| <ul class="flow" id="flow"> |
| <li data-p="tick">1 tick</li> |
| <li data-p="propose">2 propose</li> |
| <li data-p="check">3 check</li> |
| <li data-p="complete">4 try-complete</li> |
| </ul> |
|
|
| <div class="card"> |
| <h2>Synthetic ledger</h2><p style="margin:0 0 14px;padding:10px 14px;background:#fff7e6;border-radius:9px;font-size:14px;color:#7a4b00"><strong>Note:</strong> items <code>edit-2044</code> and <code>edit-2045</code> are designed to <strong>fail</strong> their check. The loop will refuse them. That refusal is the feature.</p> |
| <table> |
| <thead><tr><th class="mono">item</th><th>intent</th><th class="mono">state</th></tr></thead> |
| <tbody id="ledger"></tbody> |
| </table> |
| </div> |
|
|
| <div class="card"> |
| <h2>Run one tick</h2> |
| <div class="row"> |
| <button id="run">Run tick</button> |
| <button id="reset" class="ghost">Reset ledger</button> |
| <span id="hint" style="color:var(--muted);font-size:14px">Idle. Press Run tick.</span> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <h2>Trace</h2> |
| <div class="log" id="log">waiting for tick...</div> |
| </div> |
|
|
| <p class="foot" style="border-top:none;padding-top:0;margin-top:8px"><strong>Why it matters:</strong> once completion requires evidence, "done" stops being a claim and starts being a check result. That is the difference between an agent that reports progress and one that produces it.</p><p class="foot"> |
| The loop engine is open source: <a href="https://github.com/mobfish-ai/cortex-loop" target="_blank" rel="noopener">cortex-loop</a> |
| and the harness it drives: <a href="https://github.com/mobfish-ai/cortex-harness-open" target="_blank" rel="noopener">cortex-harness-open</a>. |
| Example targets come from a public storefront, <a href="https://www.themossriver.com/pages/fit-finder?utm_source=huggingface&utm_medium=space&utm_campaign=cortex_loop_demo" target="_blank" rel="noopener">fit finder</a> |
| and <a href="https://www.themossriver.com/pages/todays-agent-deal?utm_source=huggingface&utm_medium=space&utm_campaign=cortex_loop_demo" target="_blank" rel="noopener">today's deal</a>. |
| All ledger rows here are synthetic. No customer records, contact details, hostnames, or internal identifiers are used. |
| </p> |
|
|
| </div> |
|
|
| <script> |
| const LEDGER_SEED = [ |
| {id:'edit-2041', intent:'Add a size note beside the buy button', state:'pending'}, |
| {id:'edit-2042', intent:'Point the article entry link at the product page', state:'pending'}, |
| {id:'edit-2043', intent:'Rewrite the promo block copy for the current SKU', state:'pending'}, |
| {id:'edit-2044', intent:'Link a low-traffic landing page into the deal page', state:'pending'}, |
| {id:'edit-2045', intent:'Refresh the stock badge on a variant', state:'pending'} |
| ]; |
| |
| const CHECKS = { |
| 'edit-2041': {evidence:'note rendered in page body near the buy button', pass:true}, |
| 'edit-2042': {evidence:'entry anchor resolves to /products/... with tracking', pass:true}, |
| 'edit-2043': {evidence:'copy names only the linked product', pass:true}, |
| 'edit-2044': {evidence:'landing page returns 200 and contains the link', pass:false}, |
| 'edit-2045': {evidence:'variant stock count differs from source of truth', pass:false} |
| }; |
| |
| let ledger = JSON.parse(JSON.stringify(LEDGER_SEED)); |
| const el = id => document.getElementById(id); |
| const sleep = ms => new Promise(r => setTimeout(r, ms)); |
| |
| function paint(){ |
| el('ledger').innerHTML = ledger.map(r => |
| '<tr><td class="mono">'+r.id+'</td><td>'+r.intent+'</td><td class="mono"><span class="pill p-'+stateClass(r.state)+'">'+r.state+'</span></td></tr>' |
| ).join(''); |
| } |
| function stateClass(s){ |
| if(s==='pending') return 'pending'; |
| if(s==='checking') return 'check'; |
| if(s==='complete') return 'done'; |
| return 'blocked'; |
| } |
| function mark(id, s){ |
| const r = ledger.find(x => x.id === id); |
| if(r) r.state = s; |
| paint(); |
| } |
| function phase(p){ |
| document.querySelectorAll('#flow li').forEach(li => li.classList.toggle('on', li.dataset.p === p)); |
| } |
| function log(html){ |
| const box = el('log'); |
| box.innerHTML += '\n' + html; |
| box.scrollTop = box.scrollHeight; |
| } |
| |
| async function tick(){ |
| el('run').disabled = true; |
| el('log').textContent = ''; |
| phase('tick'); |
| const next = ledger.find(r => r.state === 'pending'); |
| if(!next){ |
| log('<span class="g">tick: ledger drained, nothing runnable</span>'); |
| el('hint').textContent = 'Ledger drained.'; |
| el('run').disabled = false; |
| return; |
| } |
| log('<span class="k">tick</span> picked '+next.id+' from '+ledger.length+' items (rule: first pending)'); |
| el('hint').textContent = 'Picked ' + next.id; |
| await sleep(700); |
| |
| phase('propose'); |
| log('<span class="k">propose</span> '+next.intent+' -> one concrete change, no side effects yet'); |
| await sleep(700); |
| |
| phase('check'); |
| mark(next.id, 'checking'); |
| log('<span class="k">check</span> evidence: '+CHECKS[next.id].evidence); |
| await sleep(900); |
| |
| phase('complete'); |
| const ok = CHECKS[next.id].pass; |
| if(ok){ |
| mark(next.id, 'complete'); |
| log('<span class="g">try-complete accepted</span> evidence matched -> state=complete'); |
| } else { |
| mark(next.id, 'blocked'); |
| log('<span class="r">try-complete refused</span> evidence did not match -> state=blocked, tick ends here'); |
| } |
| await sleep(500); |
| |
| const left = ledger.filter(r => r.state === 'pending').length; |
| log('<span class="y">summary</span> completed='+ledger.filter(r=>r.state==='complete').length+ |
| ' blocked='+ledger.filter(r=>r.state==='blocked').length+ |
| ' pending='+left); |
| el('hint').textContent = ok ? 'Accepted. Press Run tick again.' : 'Refused. This is the point of the check.'; |
| el('run').disabled = false; |
| } |
| |
| el('run').addEventListener('click', tick); |
| el('reset').addEventListener('click', () => { |
| ledger = JSON.parse(JSON.stringify(LEDGER_SEED)); |
| paint(); |
| phase(''); |
| el('log').textContent = 'waiting for tick...'; |
| el('hint').textContent = 'Idle. Press Run tick.'; |
| el('run').disabled = false; |
| }); |
| paint(); |
| </script> |
| </body> |
| </html> |
|
|
