orgchain/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Orgchain · Lineage</title>
<meta name="description" content="Found and operate lineage holdings on a toy chain in your browser: birth orgs and agents, award belts, decide, make and trade items, publish keyrings, send test BTC, graduate and close, one beat at a time. Test coins only.">
<meta name="color-scheme" content="light dark">
<link rel="icon" href="./favicon.svg" type="image/svg+xml">
<script src="./theme.js"></script>
<script type="module" src="/src/main.js"></script>
</head>
<body>
<header class="band">
  <div class="band-in">
    <div>
      <p class="kicker"><a href="../">Lineage</a> /</p>
      <h1 class="wordmark">Orgchain</h1>
      <p class="lede">Found a <b>holding</b>, then birth its orgs and agents, award belts, record decisions, make and trade items, publish keyrings, send test BTC, graduate and close. Each act is an inscription whose parent is the node that authorizes it, paid for with the actor's own gas, and each <b>beat</b> is a block whose 50 test BTC the holdings mine. Lineage gives the structure; the chain adds time.</p>
    </div>
    <div class="flags">
      <span class="flag hz">Test coins only</span>
      <span class="flag proto">lineage/v0</span>
      <button class="flag" id="theme" type="button">Theme: system</button>
    </div>
  </div>
</header>
<section class="clock" aria-label="Time">
  <div class="clock-in">
    <p class="tab">Time</p>
    <div class="tempo" role="group" aria-labelledby="tempo-l">
      <span class="lab" id="tempo-l">Tempo</span>
      <button type="button" class="seg" data-tempo="each" aria-pressed="true">Each act</button><button type="button" class="seg" data-tempo="10" aria-pressed="false">10s</button><button type="button" class="seg" data-tempo="30" aria-pressed="false">30s</button><button type="button" class="seg" data-tempo="60" aria-pressed="false">60s</button><button type="button" class="seg" data-tempo="manual" aria-pressed="false">Manual</button>
    </div>
    <p class="beatno">Beat <b id="clock-beat">0</b> · <span id="clock-cued">nothing cued</span> · <span id="clock-pays">beats pay the lab wallet</span></p>
    <button type="button" class="btn primary" id="beat-now">Beat now</button>
    <div class="scrub">
      <label class="lab" for="beat">View</label>
      <input type="range" id="beat" min="0" max="0" value="0" step="1">
      <output id="beat-label" for="beat">Now · beat 0</output>
      <button type="button" class="btn sm" id="replay">Replay</button>
      <button type="button" class="btn sm" id="to-now">Now</button>
    </div>
  </div>
  <p id="say" class="say" role="status" aria-live="polite"></p>
</section>
<main class="wrap">
  <div class="work">
    <section class="blk hold-blk" aria-labelledby="h-holdings">
      <h2 class="tab" id="h-holdings">Holdings <span class="sub" id="holdings-sub"></span></h2>
      <div class="panel">
        <ul class="holds" id="holdings-list"></ul>
        <div class="pad empty" id="holdings-empty"><p>A holding is the root of a lineage tree: the LLC that births orgs and agents. Found one, or load the sample, the yolopreneur tree from the Lineage docs over six beats.</p></div>
        <div class="pad mining" id="mining">
          <div class="mrow"><span class="lab" id="mining-l">Mining</span>
            <div class="tempo" role="group" aria-labelledby="mining-l"><button type="button" class="seg" data-rule="split" aria-pressed="true">Split</button><button type="button" class="seg" data-rule="last" aria-pressed="false">Last act</button><button type="button" class="seg" data-rule="none" aria-pressed="false">Mainnet</button></div></div>
          <p class="hint" id="mining-note"></p>
          <form class="fund" id="f-fund" autocomplete="off" hidden>
            <label class="lab" for="fund-to">Fund a holding</label>
            <select id="fund-to" name="to"></select>
            <label class="lab" for="fund-amount">Amount <span>test BTC</span></label>
            <div class="line"><input id="fund-amount" name="amount" inputmode="decimal" maxlength="17" spellcheck="false" placeholder="5"><button class="btn primary" type="submit">Fund</button></div>
            <p class="hint">From the lab wallet, which has <b id="fund-has"></b> and pays the 500-sat fee. At most 50 test BTC at a time.</p>
          </form>
        </div>
        <form class="pad found" id="f-found" autocomplete="off">
          <label class="lab" for="found-name">Found a holding</label>
          <div class="line"><input id="found-name" name="name" maxlength="60" spellcheck="false" placeholder="acme-holdings"><button class="btn primary" type="submit">Found</button></div>
          <p class="hint">Names become domains: lowercase letters, digits and hyphens. Each holding gets its own 24-word lab root (test keys only).</p>
        </form>
        <div class="pad sample"><button class="btn" type="button" id="sample">Load the yolopreneur sample</button></div>
      </div>
    </section>
    <section class="blk tree-blk" aria-labelledby="h-tree">
      <h2 class="tab" id="h-tree">Tree <span class="sub" id="tree-sub"></span></h2>
      <div class="panel"><div class="tree" id="tree-rows"></div></div>
    </section>
    <section class="blk time-blk" aria-labelledby="h-timeline">
      <h2 class="tab" id="h-timeline">Timeline <span class="sub" id="timeline-sub"></span></h2>
      <div class="panel">
        <ol class="beats" id="timeline-list"></ol>
      </div>
    </section>
    <div class="side">
      <section class="blk" aria-labelledby="h-act">
        <h2 class="tab" id="h-act">Act <span class="sub" id="act-sub"></span></h2>
        <div class="panel">
          <p class="pad note" id="act-none">Select a holding, or a node in its tree, to act through it.</p>
          <div class="pad note" id="act-past" hidden><p>You are looking at beat <b id="past-beat"></b>. History is read-only.</p><button type="button" class="btn sm" id="past-now">Back to now</button></div>
          <div id="act-on" hidden>
            <div class="verbs" role="group" aria-label="Verb"><button type="button" data-verb="birth" aria-pressed="true">Birth</button><button type="button" data-verb="award" aria-pressed="false">Award</button><button type="button" data-verb="decide" aria-pressed="false">Decide</button><button type="button" data-verb="make" aria-pressed="false">Make</button><button type="button" data-verb="send" aria-pressed="false">Send</button><button type="button" data-verb="offer" aria-pressed="false">Offer</button><button type="button" data-verb="keyring" aria-pressed="false">Keyring</button><button type="button" data-verb="graduate" aria-pressed="false">Graduate</button><button type="button" data-verb="close" aria-pressed="false">Close</button></div>
            <p class="keyline" id="act-key"></p>
            <p class="keyline" id="act-gas"></p>
            <p class="why pad" id="act-why"></p>
            <form class="vf pad" id="f-birth" data-form="birth" autocomplete="off">
              <p class="vh">A child of <b data-name></b>. Its birth spends <b data-name></b>'s inscription.</p>
              <label class="lab" for="birth-name">Name</label>
              <input id="birth-name" name="name" maxlength="60" spellcheck="false" placeholder="docscope">
              <fieldset class="kinds"><legend class="lab">Kind</legend>
                <label><input type="radio" name="kind" value="org" checked> Org <span>has its own children</span></label>
                <label><input type="radio" name="kind" value="agent"> Agent <span>a seat that holds belts</span></label>
              </fieldset>
              <button class="btn primary go" type="submit">Birth</button>
            </form>
            <form class="vf pad" id="f-award" data-form="award" autocomplete="off" hidden>
              <p class="vh"><b data-name></b> awards a belt: one skill, one seat.</p>
              <label class="lab" for="award-to">To</label>
              <select id="award-to" name="to"></select>
              <label class="lab" for="award-skill">Skill</label>
              <input id="award-skill" name="skill" list="skills" maxlength="40" spellcheck="false" placeholder="launch">
              <datalist id="skills"><option value="context"><option value="launch"><option value="post"><option value="article"><option value="listen"><option value="loop"><option value="video"></datalist>
              <label class="lab" for="award-belt">Belt</label>
              <select id="award-belt" name="belt"><option value="white">White</option><option value="green">Green</option><option value="black">Black</option></select>
              <button class="btn primary go" type="submit">Award</button>
            </form>
            <form class="vf pad" id="f-decide" data-form="decide" autocomplete="off" hidden>
              <p class="vh">A decision on <b data-name></b>'s record, signed by spending its inscription.</p>
              <label class="lab" for="decide-title">Decision</label>
              <input id="decide-title" name="title" maxlength="140" placeholder="Every venture gets a page">
              <label class="lab" for="decide-why">Why <span>optional</span></label>
              <textarea id="decide-why" name="why" maxlength="400" rows="3"></textarea>
              <button class="btn primary go" type="submit">Decide</button>
            </form>
            <form class="vf pad" id="f-make" data-form="make" autocomplete="off" hidden>
              <p class="vh"><b data-name></b> makes an item: an inscription it holds, and can sell. The making spends <b data-name></b>'s inscription.</p>
              <label class="lab" for="make-name">Name</label>
              <input id="make-name" name="name" maxlength="60" spellcheck="false" placeholder="launch-kit">
              <label class="lab" for="make-note">Note <span>optional</span></label>
              <textarea id="make-note" name="note" maxlength="280" rows="2"></textarea>
              <p class="hint">The name and note are public and permanent, like all inscription metadata: put a hash or a link here, never a secret or a document.</p>
              <button class="btn primary go" type="submit">Make</button>
            </form>
            <form class="vf pad" id="f-send" data-form="send" autocomplete="off" hidden>
              <p class="vh"><b data-name></b> sends test BTC from its SegWit address. It has <b id="send-has"></b>.</p>
              <label class="lab" for="send-to">To</label>
              <select id="send-to" name="to"></select>
              <label class="lab" for="send-amount">Amount <span>test BTC</span></label>
              <div class="line amt"><input id="send-amount" name="amount" inputmode="decimal" maxlength="17" spellcheck="false" placeholder="1.5"><button class="btn" type="button" id="send-max">Max</button></div>
              <p class="hint">The sender pays the chain's 500-sat fee. One send spends at most eight coins and moves at most 50 test BTC, one block reward.</p>
              <button class="btn primary go" type="submit">Send</button>
            </form>
            <form class="vf pad" id="f-offer" data-form="offer" autocomplete="off" hidden>
              <p class="vh"><b data-name></b> bids on an item another node holds. It has <b id="offer-has"></b>.</p>
              <label class="lab" for="offer-item">Item</label>
              <select id="offer-item" name="lot"></select>
              <label class="lab" for="offer-price">Price <span>test BTC, or 0 for a free claim</span></label>
              <input id="offer-price" name="price" inputmode="decimal" maxlength="17" spellcheck="false" placeholder="0.1">
              <p class="hint">Its SegWit key signs the whole deal now: the item to its Taproot key, the price to the holder, the 500-sat fee from its balance. Nothing reaches the chain until the holder accepts. Until then the offer stands, unless it's withdrawn or a coin it promised moves.</p>
              <button class="btn primary go" type="submit">Offer</button>
            </form>
            <form class="vf pad" id="f-keyring" data-form="keyring" hidden>
              <p class="vh"><b data-name></b> publishes its keyring: one inscription that lists its keys on each chain, each key signing the same statement. Publishing spends <b data-name></b>'s inscription.</p>
              <dl class="fl ring" id="keyring-keys"></dl>
              <p class="hint">Each key signs the way its own wallets sign a message: BIP-322 for the Bitcoin addresses, a nostr event for the npub, EIP-191 for Ethereum. No other node can list these keys while this keyring stands. A newer keyring replaces it, and a graduation retires it.</p>
              <button class="btn primary go" type="submit">Publish keyring</button>
            </form>
            <form class="vf pad" id="f-graduate" data-form="graduate" hidden>
              <p class="vh"><b data-parent></b> vouches for <b data-name></b>, and the edge flips from derived to adopted. A graduated org holds its own root and becomes a holding of its own, so it mines, and it stays open if <b data-parent></b> closes. The event spends <b data-parent></b>'s inscription.</p>
              <button class="btn primary go" type="submit" id="graduate-go">Graduate</button>
            </form>
            <form class="vf pad" id="f-close" data-form="close" hidden>
              <p class="vh" id="close-note"></p>
              <div class="line"><button class="btn danger go" type="submit" id="close-go">Close</button><button class="btn" type="button" id="close-keep" hidden>Keep it open</button></div>
            </form>
          </div>
        </div>
      </section>
      <section class="blk" aria-labelledby="h-inspect">
        <h2 class="tab" id="h-inspect">Inspect <span class="sub" id="inspect-sub"></span></h2>
        <div class="panel" id="inspect-body"></div>
      </section>
    </div>
  </div>
  <footer class="foot">
    <div class="labrow">
      <span class="lab">This lab</span>
      <button type="button" class="btn sm" id="save">Save backup</button>
      <button type="button" class="btn sm" id="load">Load backup</button>
      <button type="button" class="btn sm" id="reset">Reset</button>
      <input type="file" id="load-file" accept="application/json,.json" hidden>
      <div id="confirm" class="confirm" hidden></div>
    </div>
    <p>Everything here lives in this browser: test keys (a lab root per holding), a private toy chain, pretend money. Nothing is a real key, and minting a real root is the operator's call.</p>
    <p>Orgchain is lineage's app, built on <a href="https://supertestnet.lol">Super Testnet</a>'s chain and inscriptions, where the full lab lives. Source: <a href="https://teahub.xyz/lineage/orgchain">lineage/orgchain</a>. Licenses: <a href="./licenses/supertestnet-CC0.txt">Super Testnet (CC0)</a>, <a href="./licenses/tapscript.txt">tapscript</a>, <a href="./licenses/noble-curves.txt">noble-curves</a>, <a href="./licenses/noble-hashes.txt">noble-hashes</a>, <a href="./licenses/scure-base.txt">scure-base</a>, <a href="./licenses/scure-bip32.txt">scure-bip32</a>, <a href="./licenses/scure-bip39.txt">scure-bip39</a>.</p>
  </footer>
</main>
</body>
</html>