Ade Scene

Live ADE data

Ask on the marker line, and the scene stays true after the turn ends: scrolled back into view tomorrow, it shows tomorrow's lanes.

<!-- @scene title="Lanes" data="lanes,prs" -->

url is an ade:// deeplink: put it in an <a href> (or pass it to ade.open) and a click opens that lane, chat or PR in ADE. The snapshot { at, lanes?, sessions?, prs? } arrives after load and again when it changes, so render from ade.on("data", render), and draw an empty state until the first one arrives.

Use live data instead of typing ADE's numbers in. Asking for data= and then hardcoding values you looked up is the worst of both: the numbers are stale tomorrow and wrong if your lookup was. Start from this and restyle it:

```scene
<!-- @scene title="Lanes" data="lanes,prs" -->
<style>
  .row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 16px; align-items: center;
         padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--fg); text-decoration: none; }
  .row:hover { background: var(--surface); }
  .m { color: var(--fg-muted); font-size: 12px; } .n { font-family: var(--font-mono); font-size: 12px; }
</style>
<div id="rows" class="m">Loading lanes…</div>
<script>
  function esc(s) { return String(s).replace(/[&<>"]/g, function (c) { return "&#" + c.charCodeAt(0) + ";"; }); }
  ade.on("data", function (d) {
    var prs = d.prs || [];
    document.getElementById("rows").innerHTML = (d.lanes || []).map(function (l) {
      var pr = prs.filter(function (p) { return p.laneId === l.id; })[0];
      return '<a class="row" href="' + l.url + '"><span>' + esc(l.name) + ' <span class="m">' + esc(l.branch) + '</span></span>'
        + '<span class="n">+' + l.ahead + ' −' + l.behind + '</span>'
        + '<span class="n" style="color:var(' + (l.dirty ? '--warning' : '--success') + ')">' + (l.dirty ? 'dirty' : 'clean') + '</span>'
        + '<span class="n">' + (pr ? '#' + pr.number + ' ' + esc(pr.state) : 'no PR') + '</span></a>';
    }).join("") || "No lanes.";
    ade.resize();
  });
  ade.ready();
</script>
```

ade scene preview sends a live-data scene the same snapshot the chat will, so the preview shows real lanes, chats and PRs.

What the frame does not give you

• No network. connect-src 'none': no fetch, no XHR, no WebSocket, no remote fonts, no remote images, no <script src>. Put the data in the markup or ask for live data. Images must be data: or blob: URLs.
• No storage. localStorage, sessionStorage, indexedDB and cookies throw in the sandbox. Keep state in variables.
• No globals named top, parent, opener, frames or self. In a sandboxed frame those are the window's own, and touching them throws. var top = [] breaks the whole script. Rename them.
• No access to ADE beyond the above. Different origin, sandboxed without allow-same-origin. ade.open and the data feed are the only bridges.
• No external libraries. They cannot be fetched. Native CSS animations, SVG, canvas and the Web Animations API are what you have, and they are enough.

Lifetime

A scene is live while it is on screen: hovers, toggles, zoom and links keep working in scrollback. Off screen for a few seconds, it is swapped for a still picture of itself, and swapped back when it returns (restored: no replayed entrance). While the reader scrolls, they see the stills; a scene comes alive where they stop.

When a scene has settled and the reader's pointer is elsewhere, it idles: endless CSS and SVG animations pause and requestAnimationFrame runs a few times a second, until the pointer, a key or new data wakes it. So a looping spinner costs nothing while nobody looks at it, and a canvas animation should read well at its idle frame. Do not depend on setInterval loops; use requestAnimationFrame or CSS so the idle rules apply.

The still is taken once, when the scene first settles fully on screen: no Web Animation or CSS animation running and no DOM change for 600 ms (endless loops do not count), or 4 seconds after load. Make the scene readable when it stops moving. A scene whose meaning depends on an animation the user has to catch is meaningless tomorrow.

Size

Keep it under roughly 500 lines of markup. Past that it is a document, not a view. The hard cap is 96,000 source bytes. Over it ADE renders your code as highlighted text instead of a view. Scenes can be up to 960 px tall in the transcript (taller ones scroll inside), and the reader can expand any scene to a full-window view.