| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'none'; script-src 'self'; style-src 'self'; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'"> |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23241b36'/%3E%3Cpath d='M8 24V9m0 8 8-8m-8 8 9 7m-1-15h8m-7 15h7' stroke='%23ffd166' stroke-width='3' fill='none'/%3E%3C/svg%3E"> |
| <link rel="stylesheet" href="./styles.css"> |
| <title>BranchJam — Signal Garden</title> |
| </head> |
| <body> |
| <a class="skip-link" href="#playground">Skip to playground</a> |
| <header class="site-header"> |
| <div> |
| <p class="eyebrow">A local creative playground</p> |
| <h1>BranchJam <span aria-hidden="true">✦</span></h1> |
| </div> |
| <p class="disclosure"><strong>MVP simulation:</strong> Branch outcomes are pre-authored and deterministic. This version does not use live AI or autonomous agent generation.</p> |
| </header> |
|
|
| <main id="playground" class="layout"> |
| <section class="loop-guide" aria-labelledby="loop-heading"> |
| <div> |
| <p class="section-kicker">How this local session works</p> |
| <h2 id="loop-heading">Play, decide, keep the branches</h2> |
| <p>Participants try the artifact and compare fixed outcomes. The operator chooses a constraint and records the group’s decision locally.</p> |
| </div> |
| <ol class="loop-steps"> |
| <li><strong>Play</strong> the current artifact</li> |
| <li><strong>Choose</strong> a constraint</li> |
| <li><strong>Compare</strong> two fixed outcomes</li> |
| <li><strong>Record</strong> a local decision</li> |
| <li><strong>Explore</strong> the runnable tree</li> |
| </ol> |
| </section> |
| <section class="play-column" aria-labelledby="play-heading"> |
| <div id="artifact-view" class="artifact-shell"></div> |
| <section id="round-view" class="round-shell" aria-label="Branching controls"></section> |
| </section> |
| <aside class="history-shell" aria-labelledby="history-heading"> |
| <div class="section-kicker">The lasting object</div> |
| <h2 id="history-heading">Branch history</h2> |
| <p>Every listed artifact is runnable. Choose one to inspect it; inspection never changes votes or the active lineage.</p> |
| <p class="tree-legend"><strong>Tree labels:</strong> active lineage is the chosen path; inspected is on screen; non-selected is the retained sibling.</p> |
| <nav id="history-view" aria-label="Playable branch history"></nav> |
| </aside> |
| </main> |
|
|
| <footer> |
| <p class="site-links"> |
| <a href="https://github.com/abhid1234/branchjam" rel="noopener">Code — MIT</a> |
| <span aria-hidden="true">·</span> |
| <a href="https://abhid.substack.com/p/the-branch-you-throw-away-is-the" rel="noopener">Why BranchJam — the essay</a> |
| </p> |
| <p id="storage-summary" class="storage-notice">Session data stays in one namespaced local browser entry.</p> |
| <div class="session-reset"> |
| <button id="reset-session" class="quiet-button" type="button" aria-expanded="false" aria-controls="reset-confirmation">Reset local session</button> |
| <div id="reset-confirmation" class="reset-confirmation" role="group" aria-labelledby="reset-question" hidden> |
| <p id="reset-question"><strong>Reset this local session?</strong> This removes its votes and branch history.</p> |
| <div class="reset-actions"> |
| <button id="cancel-reset" class="quiet-button" type="button">Cancel reset</button> |
| <button id="confirm-reset" class="danger-button" type="button">Yes, reset session</button> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <div id="polite-status" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div> |
| <div id="assertive-status" class="sr-only" role="alert" aria-live="assertive" aria-atomic="true"></div> |
| <script type="module" src="./src/app.js"></script> |
| </body> |
| </html> |
|
|
