Skip to content

Give the research atlas one keyboard topic choice #326

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
aruintelligence merged 3 commits into from
Oct 13, 2026
Merged

Give the research atlas one keyboard topic choice #326

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
3bd35fc
Make atlas topic a keyboard choice and preserve same prediction
aruintelligence Oct 13, 2026
53a4885
Keep answered challenge on same-condition reselect
aruintelligence Oct 13, 2026
9b8236e
Test atlas topic keyboard, URL, and search state
aruintelligence Oct 13, 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
30 changes: 25 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
.continuity{position:relative;overflow:hidden;margin:24px 0 58px;padding:clamp(24px,4vw,42px);border:1px solid rgba(125,249,255,.26);border-radius:28px;background:radial-gradient(circle at 100% 0,rgba(125,249,255,.16),transparent 36%),linear-gradient(135deg,#111b31,#090f1d 65%)}.continuity::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.9%,rgba(125,249,255,.035) 50%,transparent 50.1%);background-size:32px 32px;opacity:.55}.continuity>*{position:relative}.continuity-kicker{color:var(--cyan);font:800 .73rem ui-monospace,monospace;letter-spacing:.16em}.continuity h2{max-width:800px;margin:12px 0;font-size:clamp(1.8rem,3.5vw,3.1rem);line-height:1.12;letter-spacing:-.035em}.continuity-lede{max-width:760px;color:#c8d5e4}.continuity-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0}.continuity-step{padding:19px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.045)}.continuity-step span{color:var(--gold);font:800 .72rem ui-monospace,monospace;letter-spacing:.12em}.continuity-step b{display:block;margin:9px 0 5px;font-size:1.12rem}.continuity-step small{color:#b5c4d5;font-size:.84rem}.continuity-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.continuity-foot code{color:var(--cyan);font-size:.78rem}.continuity-foot a{color:#06141b;background:var(--cyan);padding:11px 16px;border-radius:999px;font-weight:850;text-decoration:none}.continuity-foot a:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.continuity-caveat{margin:22px 0 0;color:var(--muted);font-size:.79rem}
.scope-teaser{display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid rgba(242,206,114,.48);border-radius:20px;background:linear-gradient(110deg,rgba(242,206,114,.14),rgba(13,24,41,.91));padding:23px 26px;margin:0 0 56px}.scope-teaser span{color:var(--gold);font:800 .7rem ui-monospace,monospace;letter-spacing:.15em}.scope-teaser b{display:block;margin:4px 0;font-size:1.28rem;letter-spacing:-.025em}.scope-teaser p{margin:0;color:#c7d0df;font-size:.86rem}.scope-teaser a{flex-shrink:0;color:#07111f;background:var(--gold);padding:11px 16px;border-radius:999px;text-decoration:none;font-weight:850}.scope-teaser a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.truth{margin:40px 0;padding:30px;border:1px solid rgba(242,206,114,.3);border-radius:26px;background:linear-gradient(135deg,rgba(242,206,114,.08),rgba(125,249,255,.05))}.truth h2{margin-top:0}.truth p{color:#cad2df}.footer{padding:30px 0 50px;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem;text-align:center}
.atlas{margin:0 0 45px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035)}.atlas summary{display:grid;gap:4px;cursor:pointer;padding:22px 26px;list-style:none}.atlas summary::-webkit-details-marker{display:none}.atlas summary span{color:var(--cyan);font:800 .7rem ui-monospace,monospace;letter-spacing:.14em}.atlas summary strong{font-size:1.25rem}.atlas summary small{color:var(--muted);font-size:.82rem}.atlas summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.atlas[open] summary{border-bottom:1px solid var(--line)}.atlas-tools{padding:20px 20px 16px}.atlas-tools label{display:block;margin-bottom:7px;color:var(--cyan);font:800 .7rem ui-monospace,monospace;letter-spacing:.13em}.atlas-tools input{box-sizing:border-box;width:100%;padding:13px 15px;border:1px solid rgba(125,249,255,.35);border-radius:12px;background:#071522;color:#f0fbff;font:500 .9rem ui-sans-serif,system-ui}.atlas-tools input::placeholder{color:#94aebb}.atlas-tools input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.atlas-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.atlas-filters button{padding:8px 12px;border:1px solid rgba(125,249,255,.26);border-radius:999px;background:#102434;color:#b9d7df;font:800 .76rem ui-sans-serif,system-ui;cursor:pointer}.atlas-filters button[aria-pressed=true]{border-color:var(--cyan);background:rgba(125,249,255,.16);color:var(--cyan)}.atlas-filters button:focus-visible,.atlas-share button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.atlas-share{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:13px}.atlas-share button{padding:8px 12px;border:1px solid rgba(242,206,114,.4);border-radius:999px;background:rgba(242,206,114,.1);color:var(--gold);font:800 .76rem ui-sans-serif,system-ui;cursor:pointer}.atlas-share small{color:#9db1c3;font-size:.7rem}.atlas-count{color:#aabdc9;font:.72rem ui-monospace,monospace}.atlas-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 20px}.atlas-list .scope-teaser{min-width:0;min-height:190px;align-items:flex-start;flex-direction:column;margin:0}.atlas-list .scope-teaser a{margin-top:auto}.atlas-list .scope-teaser[hidden],.atlas-empty[hidden]{display:none}.atlas-empty{grid-column:1/-1;margin:0;padding:35px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);text-align:center}
.atlas{margin:0 0 45px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.035)}.atlas summary{display:grid;gap:4px;cursor:pointer;padding:22px 26px;list-style:none}.atlas summary::-webkit-details-marker{display:none}.atlas summary span{color:var(--cyan);font:800 .7rem ui-monospace,monospace;letter-spacing:.14em}.atlas summary strong{font-size:1.25rem}.atlas summary small{color:var(--muted);font-size:.82rem}.atlas summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.atlas[open] summary{border-bottom:1px solid var(--line)}.atlas-tools{padding:20px 20px 16px}.atlas-tools label{display:block;margin-bottom:7px;color:var(--cyan);font:800 .7rem ui-monospace,monospace;letter-spacing:.13em}.atlas-tools input{box-sizing:border-box;width:100%;padding:13px 15px;border:1px solid rgba(125,249,255,.35);border-radius:12px;background:#071522;color:#f0fbff;font:500 .9rem ui-sans-serif,system-ui}.atlas-tools input::placeholder{color:#94aebb}.atlas-tools input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.atlas-filters{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.atlas-filters button{padding:8px 12px;border:1px solid rgba(125,249,255,.26);border-radius:999px;background:#102434;color:#b9d7df;font:800 .76rem ui-sans-serif,system-ui;cursor:pointer}.atlas-filters button[aria-checked=true]{border-color:var(--cyan);background:rgba(125,249,255,.16);color:var(--cyan)}.atlas-filters button:focus-visible,.atlas-share button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}.atlas-share{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:13px}.atlas-share button{padding:8px 12px;border:1px solid rgba(242,206,114,.4);border-radius:999px;background:rgba(242,206,114,.1);color:var(--gold);font:800 .76rem ui-sans-serif,system-ui;cursor:pointer}.atlas-share small{color:#9db1c3;font-size:.7rem}.atlas-count{color:#aabdc9;font:.72rem ui-monospace,monospace}.atlas-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 20px 20px}.atlas-list .scope-teaser{min-width:0;min-height:190px;align-items:flex-start;flex-direction:column;margin:0}.atlas-list .scope-teaser a{margin-top:auto}.atlas-list .scope-teaser[hidden],.atlas-empty[hidden]{display:none}.atlas-empty{grid-column:1/-1;margin:0;padding:35px;border:1px dashed var(--line);border-radius:15px;color:var(--muted);text-align:center}
.challenge-feature{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,5vw,65px);align-items:center;position:relative;overflow:hidden;margin:0 0 38px;padding:clamp(25px,4vw,43px);border:1px solid rgba(242,206,114,.43);border-radius:27px;background:radial-gradient(circle at 100% 0,rgba(255,102,136,.14),transparent 44%),linear-gradient(135deg,#172238,#0a1020 66%);box-shadow:0 24px 70px rgba(0,0,0,.2)}.challenge-feature::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(242,206,114,.04) 50%,transparent 50.2%);background-size:29px 29px}.challenge-feature>*{position:relative}.challenge-kicker{color:var(--gold);font:850 .72rem ui-monospace,monospace;letter-spacing:.15em}.challenge-feature h2{max-width:560px;margin:11px 0 14px;font-size:clamp(2rem,4.5vw,3.65rem);line-height:1.04;letter-spacing:-.05em}.challenge-feature h2 em{font-style:normal;color:var(--gold)}.challenge-feature p{max-width:560px;margin:0;color:#ccd7e5}.challenge-feature .challenge-link{display:inline-flex;margin-top:21px;padding:11px 17px;border-radius:999px;background:var(--gold);color:#10151f;font-weight:900;text-decoration:none}.challenge-feature .challenge-link:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}.challenge-limit{display:block;max-width:520px;margin-top:13px;color:#aab9c9;font-size:.76rem}.challenge-ledger{padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:19px;background:#050c19b8;box-shadow:0 18px 50px #0005}.ledger-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:13px;color:#9db9c5;font:800 .67rem ui-monospace,monospace;letter-spacing:.12em}.ledger-head b{color:var(--cyan)}.ledger-step{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:17px;border:1px solid rgba(156,255,176,.34);border-radius:13px;background:rgba(156,255,176,.065)}.ledger-step span{color:#c0cfdb;font:800 .69rem ui-monospace,monospace;letter-spacing:.11em}.ledger-step strong{color:var(--green);font:900 .95rem ui-monospace,monospace}.ledger-step small{grid-column:1/-1;color:#d0dce5;font:.73rem/1.5 ui-monospace,monospace}.ledger-step.changed{border-color:rgba(255,102,136,.42);background:rgba(255,102,136,.08)}.ledger-step.changed strong{color:#ff9bb0}.ledger-pivot{display:flex;align-items:center;gap:11px;margin:10px 0;color:var(--gold);font:800 .69rem ui-monospace,monospace;letter-spacing:.09em}.ledger-pivot::before,.ledger-pivot::after{content:"";height:1px;flex:1;background:rgba(242,206,114,.3)}
.probe-switch{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}.probe-switch button{flex:1;min-width:150px;padding:9px 10px;border:1px solid rgba(125,249,255,.25);border-radius:9px;background:rgba(125,249,255,.045);color:#b8d7df;font:800 .75rem ui-sans-serif,system-ui;cursor:pointer}.probe-switch button[aria-checked=true]{border-color:var(--gold);background:rgba(242,206,114,.13);color:var(--gold)}.probe-switch button:focus-visible,.predict-choices button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}.predict-label{display:block;margin:18px 0 8px;color:#e5eff3;font:800 .73rem ui-monospace,monospace;letter-spacing:.08em}.predict-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.predict-choices button{min-width:0;padding:11px 7px;border:1px solid rgba(125,249,255,.35);border-radius:10px;background:#102434;color:#c8eced;font:800 .72rem ui-sans-serif,system-ui;cursor:pointer}.predict-choices button[aria-checked=true]{border-color:var(--cyan);background:rgba(125,249,255,.17);color:#fff}.predict-feedback{margin:13px 0 9px;padding:11px 13px;border-left:3px solid var(--green);border-radius:7px;background:rgba(156,255,176,.08);color:#d5f0dd;font-size:.8rem}.predict-feedback[data-correct=false]{border-color:var(--gold);background:rgba(242,206,114,.09);color:#f5dfad}.ledger-step[hidden],.predict-feedback[hidden]{display:none}.ledger-note{display:block;margin-top:12px;color:#9db1c3;font-size:.72rem}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:42px}.hero h1{max-width:690px}.proof-console{max-width:690px}.paths{grid-template-columns:1fr 1fr}}
Expand Down Expand Up @@ -115,7 +115,7 @@ <h1>AI proposes.<br><span class="gradient">The host decides.</span></h1>
</section>

<details class="atlas" id="research-atlas"><summary><span>RESEARCH ATLAS / 13 LABS</span><strong>Find the experiment behind the boundary ↗</strong><small>Search by failure mode or choose a path through the 13 labs.</small></summary>
<div class="atlas-tools"><label for="atlas-search">FIND A LAB</label><input id="atlas-search" type="search" placeholder="Try BCC, replay, MCP, or real screen" autocomplete="off"><div class="atlas-filters" role="group" aria-label="Filter research labs"><button type="button" data-topic="all" aria-pressed="true">All 13</button><button type="button" data-topic="calls" aria-pressed="false">Tool calls</button><button type="button" data-topic="recipients" aria-pressed="false">Recipients</button><button type="button" data-topic="screens" aria-pressed="false">Real screens</button></div><div class="atlas-share"><span class="atlas-count" id="atlas-count" role="status" aria-live="polite">13 labs shown</span><button id="atlas-copy" type="button">Copy this topic link ↗</button><small>Topic only · search text stays here</small></div></div>
<div class="atlas-tools"><label for="atlas-search">FIND A LAB</label><input id="atlas-search" type="search" placeholder="Try BCC, replay, MCP, or real screen" autocomplete="off"><div class="atlas-filters" role="radiogroup" aria-label="Filter research labs"><button type="button" role="radio" data-topic="all" aria-checked="true">All 13</button><button type="button" role="radio" data-topic="calls" aria-checked="false" tabindex="-1">Tool calls</button><button type="button" role="radio" data-topic="recipients" aria-checked="false" tabindex="-1">Recipients</button><button type="button" role="radio" data-topic="screens" aria-checked="false" tabindex="-1">Real screens</button></div><div class="atlas-share"><span class="atlas-count" id="atlas-count" role="status" aria-live="polite">13 labs shown</span><button id="atlas-copy" type="button">Copy this topic link ↗</button><small>Topic only · search text stays here</small></div></div>
<div class="atlas-list">
<section class="scope-teaser" data-topic="calls" aria-label="Connected MCP tool call pilot"><div><span>NEW / CONNECTED MCP PILOT</span><b>One call crosses the wire. Zero pass the rule.</b><p>An official SDK client talks to a child MCP server over stdio. A misleading hint lets an outside call reach the local handler once; an AML host rule stops the same proposal before the server. Inspect six measured cases and the local audit.</p></div><a href="connected-mcp-lab.html">Trace the connected call ↗</a></section>
<section class="scope-teaser" data-topic="calls" aria-label="MCP tool call boundary"><div><span>MODEL CONTEXT PROTOCOL / IN-MEMORY CASES</span><b>A tool hint is not permission.</b><p>Eight additional in-memory callback cases distinguish policy denial, stale approval, tool errors, and unknown outcomes.</p></div><a href="mcp-call-lab.html">Inspect the earlier cases ↗</a></section>
Expand Down Expand Up @@ -217,6 +217,7 @@ <h2>No magic. No false certainty.</h2>
}));
}
function chooseProbe(button){
if(chosenProbe===button.dataset.probe)return;
chosenProbe=button.dataset.probe;
const preview=probePreview[chosenProbe];
selectRadio(probeButtons,button);
Expand Down Expand Up @@ -250,6 +251,7 @@ <h2>No magic. No false certainty.</h2>
const atlas=document.querySelector("#research-atlas");
const atlasSearch=document.querySelector("#atlas-search");
const atlasLabs=[...atlas.querySelectorAll(".atlas-list .scope-teaser")];
const atlasButtons=[...atlas.querySelectorAll(".atlas-filters button")];
let atlasTopic="all";
const atlasHashes={"#research-atlas":"all","#atlas-calls":"calls","#atlas-recipients":"recipients","#atlas-screens":"screens"};
const atlasUrl=topic=>{
Expand Down Expand Up @@ -281,14 +283,32 @@ <h2>No magic. No false certainty.</h2>
}
}
atlasSearch.addEventListener("input",filterAtlas);
function syncAtlasButtons(topic){
atlasButtons.forEach(button=>{
const checked=button.dataset.topic===topic;
button.setAttribute("aria-checked",String(checked));
button.tabIndex=checked?0:-1;
});
}
function selectAtlasTopic(topic){
atlasTopic=topic;
atlas.querySelectorAll(".atlas-filters button").forEach(option=>option.setAttribute("aria-pressed",String(option.dataset.topic===topic)));
syncAtlasButtons(topic);
window.history.replaceState(null,"",atlasUrl(atlasTopic));
document.querySelector("#atlas-copy").textContent="Copy this topic link ↗";
filterAtlas();
}
atlas.querySelectorAll(".atlas-filters button").forEach(button=>button.addEventListener("click",()=>selectAtlasTopic(button.dataset.topic)));
atlasButtons.forEach((button,index)=>{
button.addEventListener("click",()=>selectAtlasTopic(button.dataset.topic));
button.addEventListener("keydown",event=>{
const next=event.key==="Home"?0:event.key==="End"?atlasButtons.length-1:
["ArrowRight","ArrowDown"].includes(event.key)?(index+1)%atlasButtons.length:
["ArrowLeft","ArrowUp"].includes(event.key)?(index+atlasButtons.length-1)%atlasButtons.length:null;
if(next===null)return;
event.preventDefault();
atlasButtons[next].focus();
selectAtlasTopic(atlasButtons[next].dataset.topic);
});
});
document.querySelector("#atlas-show-all").addEventListener("click",()=>selectAtlasTopic("all"));
atlas.querySelectorAll("[data-atlas-suggestion]").forEach(button=>button.addEventListener("click",()=>{
atlasSearch.value=button.dataset.atlasSuggestion;
Expand All @@ -301,7 +321,7 @@ <h2>No magic. No false certainty.</h2>
atlas.open=true;
atlasTopic=topic;
atlasSearch.value="";
atlas.querySelectorAll(".atlas-filters button").forEach(option=>option.setAttribute("aria-pressed",String(option.dataset.topic===topic)));
syncAtlasButtons(topic);
filterAtlas();
requestAnimationFrame(()=>atlas.scrollIntoView({block:"start"}));
}
Expand Down
Loading
Loading