jetstream v2 in zig stream.waow.tech
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>strata · stream</title><meta name="description" content="what's in the stream archive: every app on the atproto network, how much it writes, and when"><meta name="theme-color" content="#050607"><meta property="og:title" content="strata"><meta property="og:description" content="what's in the stream archive: every app on the atproto network, how much it writes, and when"><link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Crect width=%2716%27 height=%2716%27 fill=%27%23050607%27/%3E%3Crect y=%272%27 width=%2716%27 height=%276%27 fill=%27%236f9cb0%27/%3E%3Crect y=%279%27 width=%2716%27 height=%272%27 fill=%27%23b6c2c9%27/%3E%3Crect y=%2712%27 width=%2716%27 height=%271%27 fill=%27%237d8992%27/%3E%3C/svg%3E"><style>:root{--bg:#050607;--ink:#b6c2c9;--dim:#7d8992;--faint:#39424a;--hot:#e2ebf0;--water:#6f9cb0;--well:#0b0e11;color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);font:14px/1.65 ui-monospace,"SF Mono",Menlo,Consolas,monospace}a{color:inherit;text-decoration:none}em{font-style:normal;color:var(--hot)}.wrap{max-width:1100px;margin:0 auto;padding:0 3ch 2rem;display:flex;flex-direction:column;min-height:100vh;gap:2.4rem}header{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.7rem 0 0;text-align:center}.brand{letter-spacing:.12em;font-size:.9rem;color:var(--hot)}a.brand:hover{color:var(--water)}.livedot{font-size:.74rem;color:var(--dim);font-variant-numeric:tabular-nums}.livedot b{color:var(--water);font-weight:400}main{flex:1;display:flex;flex-direction:column;gap:2.4rem}section{display:flex;flex-direction:column;gap:.8rem}.copy{max-width:70ch}.lede{font-size:1rem;line-height:1.6;color:var(--ink)}.sect{font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;color:var(--dim)}.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 3ch;color:var(--dim);font-size:.8rem}.bar .tools{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2ch}select,input,button,textarea{max-width:100%;font:inherit;font-size:.8rem;color:var(--ink);background:var(--well);border:1px solid var(--faint);padding:.25rem .8ch;border-radius:0}select:focus-visible,input:focus-visible,button:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:1px solid var(--water);outline-offset:2px}button{cursor:pointer;color:var(--dim)}button:hover{color:var(--hot);border-color:var(--water)}button:disabled{opacity:.5;cursor:default}.linkish{background:none;border:0;padding:0;color:var(--water);cursor:pointer;font-size:inherit}.linkish:hover{color:var(--hot);border:0}.linkish:disabled{color:var(--faint)}input{width:18ch}input::placeholder,textarea::placeholder{color:var(--faint)}
/* the picture: one grid row per app — name | activity strip | total. the name column is fixed so opening an app never moves the strips; children indent inside it. on phones the strip drops under the name. */.layers{position:relative;display:flex;flex-direction:column;gap:3px;--name:22ch;--total:7ch}.lane{display:grid;grid-template-columns:var(--name) minmax(0,1fr) var(--total);column-gap:2ch;align-items:center}.name{display:flex;align-items:center;gap:.6ch;background:none;border:0;padding:0;text-align:left;color:var(--ink);font-size:.8rem;min-width:0;cursor:default}.name .glyph{color:var(--water);width:1.2ch;flex:none}.name .label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}.name .label bdi{direction:ltr;unicode-bidi:isolate}.name[aria-expanded]{cursor:pointer}.name[aria-expanded]:hover .label,.name:focus-visible .label{color:var(--hot)}.lane.child .name{padding-left:2.4ch;color:var(--dim);font-size:.76rem}.lane.child .name .glyph{color:var(--faint)}.strip{position:relative;height:var(--h,20px);background:var(--well);min-width:0}.strip svg{display:block;width:100%;height:100%}.count{font-size:.76rem;color:var(--dim);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.lane.child .count{color:var(--faint)}.cursor{position:absolute;top:0;bottom:0;pointer-events:none;display:none;background:rgba(226,235,240,.08);border-left:1px solid var(--hot)}.axis .strip{height:28px;background:none}.axis .era{position:absolute;top:2px;height:2px;background:var(--faint)}.axis .era.live{background:var(--water)}.axis .tick{position:absolute;top:8px;font-size:.7rem;color:var(--dim);white-space:nowrap}.axis .tick.era-tick{color:var(--ink)}.axis .tick.end{transform:translateX(-100%)}.reader{min-height:3rem;font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;line-height:1.6}.reader b{color:var(--hot);font-weight:400}.reader i{font-style:normal;color:var(--water)}.legend{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.2ch;font-size:.74rem;color:var(--dim)}.legend .ramp{width:14ch;height:8px;border:1px solid var(--faint)}.legend .none{display:inline-block;width:1.4em;height:8px;background:var(--well);border:1px solid var(--faint);vertical-align:-1px}details{max-width:70ch;font-size:.8rem;color:var(--dim)}summary{cursor:pointer;color:var(--water);list-style:none}summary::-webkit-details-marker{display:none}summary:hover{color:var(--hot)}details[open] summary{margin-bottom:.5rem}details p{margin:0 0 .5rem;line-height:1.6}details p:last-child{margin-bottom:0}.table-wrap{width:100%;overflow-x:auto}table{border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums}th,td{text-align:right;padding:.2rem 1.4ch;border-bottom:1px solid var(--well);white-space:nowrap;color:var(--dim)}td:first-child,th:first-child{text-align:left;color:var(--ink);position:sticky;left:0;background:var(--bg);padding-left:0}th{color:var(--dim);font-weight:400;letter-spacing:.1em;text-transform:uppercase;font-size:.66rem}.ask .row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5ch;color:var(--dim);font-size:.8rem}.ask select{width:34ch;min-width:0}.ask .prompts{display:flex;flex-wrap:wrap;gap:.3rem 1ch;font-size:.8rem;color:var(--faint)}.ask textarea{width:100%;max-width:100ch;min-height:5.5rem;resize:vertical;line-height:1.5;tab-size:2}.ask .fine{font-size:.74rem;color:var(--faint);max-width:70ch}.ask .out{font-size:.78rem;color:var(--dim);min-height:1.2rem}.ask .out b{color:var(--hot);font-weight:400}.ask .err{color:#d99a8a;white-space:pre-wrap}.ask .blurb{color:var(--dim);font-size:.8rem}footer{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 3ch;padding-top:1rem;border-top:1px dotted var(--faint);color:var(--dim);font-size:.76rem}footer a{border-bottom:1px dotted var(--faint);white-space:nowrap}footer a:hover{color:var(--hot);border-bottom-color:var(--water)}.status{color:var(--faint)}@media (max-width:640px){ .wrap{padding:0 2ch 2rem;gap:2rem} .layers{gap:8px} .lane{grid-template-columns:1fr auto;row-gap:3px;column-gap:1ch} .lane .strip{grid-column:1/-1} .ask select{width:100%} input{width:100%}}</style></head><body><div class="wrap"><header> <a class="brand" href="../">~ s t r e a m ~</a> <span class="livedot" id="live">· reading the archive</span></header><main> <section class="copy"> <p class="lede" id="lede"><em>strata</em> — what's in the archive. every app on the network writes its own kinds of records; this is how much of each there is, and when it arrived.</p> </section>
<section id="picture"> <div class="bar"> <span class="sect">apps in the archive</span> <span class="tools"> <button class="linkish" id="more" type="button">show more</button> <input id="find" list="ns-list" placeholder="find an app…" autocomplete="off" spellcheck="false" aria-label="add an app to the picture"> <datalist id="ns-list"></datalist> </span> </div> <div class="layers" id="layers" role="img" aria-label="the archive by app: row height is total records, brightness is records per slice"><div class="cursor" id="cursor"></div></div> <div class="reader" id="reader" aria-live="polite"><span class="status">move over the picture to read a cell · open an app to see its record types</span></div> <div class="legend"> <span>taller = more records</span><span>·</span> <span>quieter</span><span class="ramp" id="legend-bar"></span><span>busier, within that app</span><span>·</span> <span><span class="none"></span> nothing in that slice</span> </div> <details> <summary>how to read this</summary> <p>each row is an app, named by the identifier its records carry — <em>app.bsky</em> is Bluesky, <em>sh.tangled</em> is Tangled. <span style="color:var(--water)">▸</span> opens an app to show its record types.</p> <p>columns are the archive in order, oldest on the left, in chunks of about 3 million records. the dates are when the archive <em>received</em> the records, not when people wrote them: in its first six days it replayed the network's whole history (<em>history, replayed</em>); after that each chunk is a few minutes of live traffic (<em>as it happened</em>).</p> <p>account and identity changes belong to no app and aren't counted. <em>everything else</em> bundles the apps not shown. <button class="linkish" id="table-toggle" type="button" aria-pressed="false" aria-controls="table">show the numbers as a table</button></p> </details> <div class="table-wrap" id="table" hidden></div> </section>
<section class="ask"> <span class="sect">look inside an app</span> <p class="copy blurb">every record an app has ever written, searched in your browser from the public archive. Bluesky is too big for this and is shown from summaries only.</p> <div class="row"> <select id="ask-ns" aria-label="app to look inside"></select> <button id="ask-run" type="button" disabled>look</button> <span id="ask-size" class="status"></span> <button id="ask-edit" type="button" aria-pressed="false" aria-controls="ask-sql">edit the query</button> </div> <div class="prompts" id="prompts"></div> <textarea id="ask-sql" spellcheck="false" aria-label="sql over this app's records" hidden></textarea> <p class="fine" id="ask-fine" hidden>the query runs in your browser only. it can read the public archive files and nothing else; nothing you type is sent anywhere.</p> <div class="out" id="ask-out"></div> <div class="table-wrap" id="ask-table"></div> </section></main><footer> <span id="updated"></span> <a href="../">stream</a> <a href="../stats">stats</a> <a href="api">api</a> <a href="https://tangled.org/zat.dev/stream/tree/main/strata">source</a></footer></div><script type="module" src="ui.js"></script></body></html>