Skip to content

Harden AgentScope proof explorer and mobile UI #18

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
buttercode101 merged 3 commits into from
Nov 12, 2026
Merged

Harden AgentScope proof explorer and mobile UI #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1dba054
fix: preserve demo table and action states on mobile
buttercode101 Nov 12, 2026
b433e30
fix: pin browser proof checks to manifest digests and handle malforme…
buttercode101 Nov 12, 2026
0160c03
test: cover mobile demo and manifest-pinned proof verification
buttercode101 Nov 12, 2026
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
11 changes: 6 additions & 5 deletions site/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#0b0d10"><title>AgentScope Demo — Morning supervision scan</title><style>
:root{--bg:#0b0d10;--card:#11151a;--line:#272e37;--tx:#eef1f4;--mut:#89939f;--blue:#7694ff;--good:#56d68b;--bad:#ff7373;--warn:#e6ad59}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:22px 0 45px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.brand{color:#fff;text-decoration:none;font:800 15px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}.brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:8px}.top a:not(.brand){color:#9ba5b0;text-decoration:none;font:12px ui-monospace,monospace}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.eyebrow{font:800 10px ui-monospace,monospace;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}.hero h1{font:800 clamp(28px,4vw,44px)/1.05 ui-monospace,monospace;letter-spacing:-.06em;margin:8px 0}.hero p{color:var(--mut);margin:0;max-width:720px}.sample{font:10px ui-monospace;color:#7c8692;border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.kpi{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px}.kpi b{font:800 28px ui-monospace}.kpi span{display:block;color:var(--mut);font:10px ui-monospace;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}.blue{color:var(--blue)}.good{color:var(--good)}.bad{color:var(--bad)}.panel{background:var(--card);border:1px solid var(--line);border-radius:11px;margin:10px 0;overflow:hidden}.head{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line)}.head b{font:800 11px ui-monospace;letter-spacing:.1em;text-transform:uppercase}.head small{color:var(--mut)}.attention{border-color:#5e3438}.attention .head{background:#181113;color:#ff9c9c}.issue{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}.issue:first-of-type{border-top:0}.badge{font:800 9px ui-monospace;padding:4px 7px;border-radius:5px;white-space:nowrap}.fail{color:#ffb1b1;background:#4a2024}.warn{color:#f0c986;background:#3d2e18}.issue strong{font-size:13px}.issue p{color:var(--mut);margin:3px 0 0;font-size:12px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:11px 14px;border-top:1px solid var(--line);font-size:12px}.table th{color:#707a86;font:800 9px ui-monospace;text-transform:uppercase;letter-spacing:.1em;border-top:0}.pill{font:800 9px ui-monospace;padding:4px 7px;border-radius:999px}.on{background:#143323;color:#7de3a6}.off{border:1px solid var(--line);color:#77818c}.health{font:800 10px ui-monospace}.spark{height:104px;padding:20px;display:flex;align-items:end;gap:8px}.spark i{display:block;flex:1;background:#344a86;border-radius:4px 4px 1px 1px;min-height:8px}.activity{padding:0 14px 5px}.act{display:grid;grid-template-columns:65px 1fr auto;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--line);font-size:12px}.act time{color:#6f7985;font:10px ui-monospace}.act .ok{color:var(--good)}.act .err{color:var(--bad)}.controls{display:flex;gap:6px}.filter{border:1px solid var(--line);background:transparent;color:#89939f;border-radius:7px;padding:5px 9px;font:10px ui-monospace;cursor:pointer}.filter.active{background:#252e43;color:#dce4ff;border-color:#3d4f80}.footer{display:flex;justify-content:space-between;color:#66717d;font:10px ui-monospace;margin-top:18px}.footer a{color:#8c99a8;text-decoration:none}@media(max-width:800px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.hero{display:block}.sample{display:inline-block;margin-top:12px}}@media(max-width:480px){.table{display:block;overflow-x:auto;white-space:nowrap}.table th:nth-child(2),.table td:nth-child(2){display:table-cell}.shell{width:calc(100% - 20px);padding-top:14px}.kpis{gap:7px}.kpi{padding:12px}.kpi b{font-size:22px}.table th:nth-child(2),.table td:nth-child(2){display:none}.act{grid-template-columns:52px 1fr}.act span:last-child{display:none}.footer{display:block}.footer>*{display:block;margin:8px 0}}
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><meta name="theme-color" content="#f4f5f1"><title>AgentScope Demo — Morning supervision scan</title><style>
:root{--bg:#0b0d10;--card:#11151a;--line:#272e37;--tx:#eef1f4;--mut:#89939f;--blue:#7694ff;--good:#56d68b;--bad:#ff7373;--warn:#e6ad59}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.shell{width:min(1180px,calc(100% - 32px));margin:auto;padding:22px 0 45px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.brand{color:#fff;text-decoration:none;font:800 15px ui-monospace,monospace;letter-spacing:.04em;text-transform:uppercase}.brand i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--blue);margin-right:8px}.top a:not(.brand){color:#9ba5b0;text-decoration:none;font:12px ui-monospace,monospace}.hero{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.eyebrow{font:800 10px ui-monospace,monospace;letter-spacing:.14em;color:var(--blue);text-transform:uppercase}.hero h1{font:800 clamp(28px,4vw,44px)/1.05 ui-monospace,monospace;letter-spacing:-.06em;margin:8px 0}.hero p{color:var(--mut);margin:0;max-width:720px}.sample{font:10px ui-monospace;color:#7c8692;border:1px solid var(--line);border-radius:999px;padding:6px 10px;white-space:nowrap}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.kpi{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:16px}.kpi b{font:800 28px ui-monospace}.kpi span{display:block;color:var(--mut);font:10px ui-monospace;text-transform:uppercase;letter-spacing:.08em;margin-top:3px}.blue{color:var(--blue)}.good{color:var(--good)}.bad{color:var(--bad)}.panel{background:var(--card);border:1px solid var(--line);border-radius:11px;margin:10px 0;overflow:hidden}.head{display:flex;justify-content:space-between;align-items:center;padding:15px 16px;border-bottom:1px solid var(--line)}.head b{font:800 11px ui-monospace;letter-spacing:.1em;text-transform:uppercase}.head small{color:var(--mut)}.attention{border-color:#5e3438}.attention .head{background:#181113;color:#ff9c9c}.issue{display:flex;gap:10px;padding:13px 16px;border-top:1px solid var(--line)}.issue:first-of-type{border-top:0}.badge{font:800 9px ui-monospace;padding:4px 7px;border-radius:5px;white-space:nowrap}.fail{color:#ffb1b1;background:#4a2024}.warn{color:#f0c986;background:#3d2e18}.issue strong{font-size:13px}.issue p{color:var(--mut);margin:3px 0 0;font-size:12px}.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:10px}.table{width:100%;border-collapse:collapse}.table th,.table td{text-align:left;padding:11px 14px;border-top:1px solid var(--line);font-size:12px}.table th{color:#707a86;font:800 9px ui-monospace;text-transform:uppercase;letter-spacing:.1em;border-top:0}.pill{font:800 9px ui-monospace;padding:4px 7px;border-radius:999px}.on{background:#143323;color:#7de3a6}.off{border:1px solid var(--line);color:#77818c}.health{font:800 10px ui-monospace}.spark{height:104px;padding:20px;display:flex;align-items:end;gap:8px}.spark i{display:block;flex:1;background:#344a86;border-radius:4px 4px 1px 1px;min-height:8px}.activity{padding:0 14px 5px}.act{display:grid;grid-template-columns:65px 1fr auto;gap:10px;align-items:center;padding:10px 2px;border-top:1px solid var(--line);font-size:12px}.act time{color:#6f7985;font:10px ui-monospace}.act .ok{color:var(--good)}.act .err{color:var(--bad)}.controls{display:flex;gap:6px}.filter{border:1px solid var(--line);background:transparent;color:#89939f;border-radius:7px;padding:5px 9px;font:10px ui-monospace;cursor:pointer}.filter.active{background:#252e43;color:#dce4ff;border-color:#3d4f80}.footer{display:flex;justify-content:space-between;color:#66717d;font:10px ui-monospace;margin-top:18px}.footer a{color:#8c99a8;text-decoration:none}@media(max-width:800px){.grid{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}.hero{display:block}.sample{display:inline-block;margin-top:12px}}@media(max-width:480px){.table{display:block;overflow-x:auto;white-space:nowrap}.shell{width:calc(100% - 20px);padding-top:14px}.kpis{gap:7px}.kpi{padding:12px}.kpi b{font-size:22px}.act{grid-template-columns:52px minmax(0,1fr);gap:8px}.act span:last-child{grid-column:2;display:block;overflow-wrap:anywhere}.footer{display:block}.footer>*{display:block;margin:8px 0}}

/* Shared AgentScope interface system — demo */
.table-scroll{max-width:100%;overflow-x:auto;border-radius:0 0 9px 9px}.table{min-width:560px}.filter{cursor:pointer}.filter:focus-visible,.table-scroll:focus-visible{outline:3px solid #789579;outline-offset:3px}.act span{min-width:0}@media(max-width:480px){.act{align-items:start}.act time{padding-top:2px}.act span:last-child{line-height:1.45}}
:root{--bg:#f4f5f1;--card:#fff;--line:#dce2d9;--tx:#172019;--mut:#68736b;--blue:#536f59;--good:#32704b;--bad:#a8453d;--warn:#94651e}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tx);background:var(--bg);letter-spacing:-.012em}
.shell{width:min(1200px,calc(100% - 48px));padding:24px 0 52px}
Expand Down Expand Up @@ -57,6 +58,6 @@
</style></head><body><a class="skip-link" href="#dashboard-main">Skip to main content</a><main class="shell" id="dashboard-main" tabindex="-1"><header class="top"><a class="brand" href="/"><i></i>agentscope</a><a href="https://github.com/buttercode101/agentscope">view source ↗</a></header><div class="hero"><div><div class="eyebrow">interactive sample</div><h1>Morning supervision scan</h1><p>Sample data demonstrates the read-only experience. Use the filters below to see how a morning scan stays focused on signal instead of telemetry.</p></div><span class="sample">SAMPLE DATA · 08:02</span></div>
<section class="kpis"><div class="kpi"><b class="blue">8<span style="display:inline;font-size:14px">/10</span></b><span>scheduled jobs on</span></div><div class="kpi"><b class="bad">2</b><span>failed runs · 24h</span></div><div class="kpi"><b class="good">46</b><span>successful runs · 24h</span></div><div class="kpi"><b>14</b><span>active sessions · 7d</span></div></section>
<section class="panel attention"><div class="head"><b>Needs attention</b><small>2 items</small></div><div class="issue"><span class="badge fail">FAIL</span><div><strong>Nightly enrichment is skipping</strong><p>Model configuration drift was detected. The scheduler skipped the run.</p></div></div><div class="issue"><span class="badge warn">WARN</span><div><strong>Lead follow-up credentials rejected</strong><p>Three recent attempts returned an authentication failure.</p></div></div></section>
<div class="grid"><section class="panel"><div class="head"><b>Scheduled jobs & health</b><small>10 jobs</small></div><table class="table"><thead><tr><th>Job</th><th>Cadence</th><th>State</th><th>Health</th></tr></thead><tbody><tr><td>Research digest</td><td>every 6h</td><td><span class="pill on">ON</span></td><td><span class="health good">92%</span></td></tr><tr><td>Nightly enrichment</td><td>02:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health bad">41%</span></td></tr><tr><td>Lead follow-up</td><td>09:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health bad">67%</span></td></tr><tr><td>Weekly learning</td><td>Mon 09:00</td><td><span class="pill on">ON</span></td><td><span class="health good">100%</span></td></tr><tr><td>Archive cleanup</td><td>Sun 03:00</td><td><span class="pill off">OFF</span></td><td>—</td></tr><tr><td>Daily digest</td><td>08:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health good">100%</span></td></tr></tbody></table></section><section class="panel"><div class="head"><b>Session activity</b><small>7 days</small></div><div class="spark" aria-label="Session activity chart"><i style="height:35%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:75%"></i><i style="height:52%"></i><i style="height:88%"></i><i style="height:68%"></i></div></section></div>
<section class="panel"><div class="head"><b>Recent agent actions</b><div class="controls"><button class="filter active" data-days="7">7 days</button><button class="filter" data-days="1">24 hours</button></div></div><div class="activity"><div class="act" data-age="1"><time>07:50</time><span>Research digest</span><span class="ok">Completed</span></div><div class="act" data-age="3"><time>06:20</time><span>Nightly enrichment</span><span class="err">Skipped — config drift</span></div><div class="act" data-age="5"><time>04:02</time><span>Lead follow-up</span><span class="err">Failed — credentials</span></div><div class="act" data-age="26"><time>Yesterday</time><span>Weekly learning</span><span class="ok">Completed</span></div><div class="act" data-age="48"><time>2d ago</time><span>Daily digest</span><span class="ok">Completed</span></div></div></section>
<footer class="footer"><span>Read-only sample · no operational controls</span><a href="/">← back to agentscope</a></footer></main><script>document.querySelectorAll('.filter').forEach(function(btn){btn.addEventListener('click',function(){document.querySelectorAll('.filter').forEach(function(x){x.classList.remove('active')});btn.classList.add('active');var days=Number(btn.dataset.days);document.querySelectorAll('.act').forEach(function(row){row.style.display=Number(row.dataset.age)<=days*24?'grid':'none'})})});</script></body></html>
<div class="grid"><section class="panel"><div class="head"><b>Scheduled jobs & health</b><small>10 jobs</small></div><div class="table-scroll" role="region" aria-label="Scheduled jobs and health" tabindex="0"><table class="table"><thead><tr><th>Job</th><th>Cadence</th><th>State</th><th>Health</th></tr></thead><tbody><tr><td>Research digest</td><td>every 6h</td><td><span class="pill on">ON</span></td><td><span class="health good">92%</span></td></tr><tr><td>Nightly enrichment</td><td>02:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health bad">41%</span></td></tr><tr><td>Lead follow-up</td><td>09:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health bad">67%</span></td></tr><tr><td>Weekly learning</td><td>Mon 09:00</td><td><span class="pill on">ON</span></td><td><span class="health good">100%</span></td></tr><tr><td>Archive cleanup</td><td>Sun 03:00</td><td><span class="pill off">OFF</span></td><td>—</td></tr><tr><td>Daily digest</td><td>08:00 daily</td><td><span class="pill on">ON</span></td><td><span class="health good">100%</span></td></tr></tbody></table></div></section><section class="panel"><div class="head"><b>Session activity</b><small>7 days</small></div><div class="spark" aria-label="Session activity chart"><i style="height:35%"></i><i style="height:55%"></i><i style="height:40%"></i><i style="height:75%"></i><i style="height:52%"></i><i style="height:88%"></i><i style="height:68%"></i></div></section></div>
<section class="panel"><div class="head"><b>Recent agent actions</b><div class="controls"><button class="filter active" type="button" data-days="7" aria-pressed="true">7 days</button><button class="filter" type="button" data-days="1" aria-pressed="false">24 hours</button></div></div><div class="activity"><div class="act" data-age="1"><time>07:50</time><span>Research digest</span><span class="ok">Completed</span></div><div class="act" data-age="3"><time>06:20</time><span>Nightly enrichment</span><span class="err">Skipped — config drift</span></div><div class="act" data-age="5"><time>04:02</time><span>Lead follow-up</span><span class="err">Failed — credentials</span></div><div class="act" data-age="26"><time>Yesterday</time><span>Weekly learning</span><span class="ok">Completed</span></div><div class="act" data-age="48"><time>2d ago</time><span>Daily digest</span><span class="ok">Completed</span></div></div></section>
<footer class="footer"><span>Read-only sample · no operational controls</span><a href="/">← back to agentscope</a></footer></main><script>document.querySelectorAll('.filter').forEach(function(btn){btn.addEventListener('click',function(){document.querySelectorAll('.filter').forEach(function(x){x.classList.remove('active');x.setAttribute('aria-pressed','false')});btn.classList.add('active');btn.setAttribute('aria-pressed','true');var days=Number(btn.dataset.days);document.querySelectorAll('.act').forEach(function(row){row.style.display=Number(row.dataset.age)<=days*24?'grid':'none'})})});</script></body></html>
Loading
Loading