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, 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, send test BTC, graduate and close. Each act is an inscription whose parent is the node that authorizes it, and each <b>beat</b> is a block that pays the holding 50 test BTC. 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>
        <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="send" aria-pressed="false">Send</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="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-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 two 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-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, so 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>