()
| 31 | |
| 32 | /** Render the self-contained, interactive demo page. PURE (no data, no I/O). */ |
| 33 | export function buildMaintainDemoHtml(): string { |
| 34 | const stepFlow = STEPS.map((s, i) => `<div class="step" data-step="${i}"><span class="n">${i + 1}</span>${s}</div>${i < STEPS.length - 1 ? '<div class="arr">→</div>' : ''}`).join(''); |
| 35 | const scopeCards = SCOPES.map((s, i) => `<button class="scope${i === 1 ? ' sel' : ''}" data-scope="${i}"><b>${s.name}</b> <i class="tag ${s.verdict}">${s.verdict === 'opened' ? 'PR' : 'safe-block'}</i><span>${s.blurb}</span></button>`).join(''); |
| 36 | const scopeData = JSON.stringify(SCOPES.map(s => ({ n: s.name, v: s.verdict, r: s.receipt }))); |
| 37 | return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> |
| 38 | <title>QodeX — Maintain in action</title><style> |
| 39 | :root{--bg:#0b0e14;--panel:#131722;--line:#222838;--ink:#e6e9ef;--dim:#8a93a6;--accent:#7c9cff;--green:#5be3a7;--amber:#ffcf6b} |
| 40 | *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto} |
| 41 | .wrap{max-width:900px;margin:0 auto;padding:48px 24px} |
| 42 | h1{font-size:38px;margin:0 0 8px;background:linear-gradient(90deg,#7c9cff,#5be3a7);-webkit-background-clip:text;background-clip:text;color:transparent} |
| 43 | .lead{color:var(--dim);font-size:18px;margin:0 0 36px} |
| 44 | .panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px} |
| 45 | h2{font-size:13px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);margin:0 0 16px} |
| 46 | .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}.row h2{margin:0} |
| 47 | button.play{background:var(--accent);color:#0b0e14;border:0;border-radius:9px;padding:8px 14px;font-weight:700;cursor:pointer;font-size:13px} |
| 48 | button.play:disabled{opacity:.5;cursor:default} |
| 49 | .flow{display:flex;flex-wrap:wrap;align-items:center;gap:8px} |
| 50 | .step{display:flex;align-items:center;gap:8px;background:#1b2233;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;opacity:.5;transition:.25s} |
| 51 | .step .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#0b0e14;font-weight:700;font-size:11px} |
| 52 | .step.active{opacity:1;border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,156,255,.25)} |
| 53 | .step.done{opacity:1}.step.done .n{background:var(--green)} |
| 54 | .arr{color:var(--dim)} |
| 55 | .scopes{display:grid;grid-template-columns:1fr 1fr;gap:12px} |
| 56 | .scope{text-align:left;background:#1b2233;border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;color:var(--ink);font:inherit;transition:.18s} |
| 57 | .scope:hover{border-color:var(--accent)}.scope.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,156,255,.25)} |
| 58 | .scope b{color:var(--accent)}.scope span{display:block;color:var(--dim);font-size:13px;margin-top:3px} |
| 59 | .tag{font-style:normal;font-size:10px;font-weight:700;padding:1px 6px;border-radius:20px;vertical-align:middle} |
| 60 | .tag.opened{background:rgba(91,227,167,.16);color:var(--green)}.tag.blocked{background:rgba(255,207,107,.16);color:var(--amber)} |
| 61 | pre{margin:0;background:#0c0f17;border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;font:12px/1.5 ui-monospace,Menlo,monospace;color:var(--green);min-height:120px} |
| 62 | pre.blocked{color:var(--amber)} |
| 63 | .ok{color:var(--green)}.dim{color:var(--dim)}a{color:var(--accent)} |
| 64 | @media(max-width:640px){.scopes{grid-template-columns:1fr}} |
| 65 | </style></head><body><div class="wrap"> |
| 66 | <h1>A codebase that improves itself</h1> |
| 67 | <p class="lead">Every night, QodeX uses its <b>code graph</b> to find one safe improvement, <b>verifies</b> it, and leaves you a <b>pull request you can trust</b> — or a receipt explaining why it safely did nothing. Autonomy you can audit, not a confident lie.</p> |
| 68 | |
| 69 | <div class="panel"><div class="row"><h2>The nightly loop</h2><button class="play" id="play">▶ Play the nightly run</button></div><div class="flow" id="flow">${stepFlow}</div></div> |
| 70 | |
| 71 | <div class="panel"><h2>Pick a scope — watch the decision (each conservative + provable)</h2><div class="scopes" id="scopes">${scopeCards}</div></div> |
| 72 | |
| 73 | <div class="panel"><h2>What lands in your inbox — a trust receipt</h2> |
| 74 | <pre id="receipt">✅ QodeX schedule: nightly-tidy · maintain · <span id="rscope">unused-imports</span> |
| 75 | 🧾 Receipt |
| 76 | ${DEFAULT_RECEIPT}</pre> |
| 77 | <p class="dim" style="margin:12px 0 0">The <b>filesChanged</b> and <b>verification</b> are measured by QodeX from a real git diff + the checkers it ran — the model can’t fabricate a green receipt. Click <b>unused-locals</b> above to see a <span style="color:var(--amber)">safe block</span>: when it can’t prove safety, it ships nothing and tells you why.</p> |
| 78 | </div> |
| 79 | |
| 80 | <div class="panel"><h2>Proven on QodeX itself</h2> |
| 81 | <p>This isn’t a mockup. The <span class="mono">maintain</span> loop has already cleaned this very codebase via verified PRs — 6 unused imports, then 4 unused consts (with the side-effect gate blocking 6 risky ones). The guardrails ran while no one was watching.</p> |
| 82 | <p class="dim">Why a code-graph-less agent can’t copy this: it can’t prove an item is unused, can’t verify before shipping, and can’t produce a receipt of what actually ran.</p> |
| 83 | </div> |
| 84 | |
| 85 | <p class="dim" style="text-align:center;margin-top:32px">qodex schedule add --recipe maintain --prompt "unused-imports" --deliver telegram:<id></p> |
| 86 | </div> |
| 87 | <script> |
| 88 | (function(){ |
| 89 | var SCOPES=${scopeData}; |
| 90 | var steps=[].slice.call(document.querySelectorAll('.step')); |
no outgoing calls
no test coverage detected