johnandersen777.bsky.social/atlibs-socialweb-computer-app
app.socialweb.computer: socialweb.computer in one page, one atlibs composition
0
0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>app.socialweb.computer</title>
<link rel="stylesheet" href="./theme.css">
<link rel="stylesheet" href="./app.css">
<script>
document.documentElement.classList.add('js')
try { const t = localStorage.getItem('theme'); if (t === 'light' || t === 'dark') document.documentElement.dataset.theme = t } catch {}
</script>
<script type="importmap">
{
"imports": {
"@atproto/oauth-client-browser": "https://esm.sh/@atproto/oauth-client-browser@0.5.14",
"@noble/curves/secp256k1.js": "https://esm.sh/@noble/curves@2.4.0/secp256k1.js",
"age-encryption": "https://esm.sh/age-encryption@0.3.1",
"@dasl/tile-loader": "https://esm.sh/@dasl/tile-loader@2.2.0",
"@dasl/tile-loader/at": "https://esm.sh/@dasl/tile-loader@2.2.0/at",
"@publicdomainrelay/atlibs/": "https://cdn.jsdelivr.net/npm/@publicdomainrelay/atlibs@0.3.0/src/",
"@publicdomainrelay/atlibs-webrtc": "https://cdn.jsdelivr.net/npm/@publicdomainrelay/atlibs-webrtc@0.3.0/js/index.js",
"@publicdomainrelay/atlibs-webrtc/": "https://cdn.jsdelivr.net/npm/@publicdomainrelay/atlibs-webrtc@0.3.0/js/"
}
}
</script>
<script type="module" src="./main.js"></script>
</head>
<body>
<header class="site-header">
<div class="frame site-header__inner">
<a class="site-title" href="#running">app.socialweb.computer</a>
<nav class="site-nav" id="site-nav" aria-label="Primary">
<a href="#running">Running</a>
<a href="#agents">Agents</a>
<a href="#chat">Chat</a>
<a href="#shell">Shell</a>
<a href="#vouches">Vouches</a>
<a href="#tiles">Tiles</a>
<a href="#atlibs">atlibs</a>
<div class="site-nav__extras">
<a class="source-link" href="https://knotless.dev/johnandersen777.bsky.social/atlibs-socialweb-computer-app"><span>Source code</span></a>
</div>
</nav>
<div class="site-actions">
<a class="source-link" id="source" href="https://knotless.dev/johnandersen777.bsky.social/atlibs-socialweb-computer-app"><span>Source</span></a>
<button class="theme-toggle" type="button" role="switch" aria-checked="false" aria-label="Dark mode" data-theme-toggle><span class="theme-toggle__track" aria-hidden="true"><span class="theme-toggle__thumb"><span class="theme-toggle__sun">☀</span><span class="theme-toggle__moon">☾</span></span></span></button>
<a class="btn btn--small" id="sign" href="#signin">Sign in</a>
<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="site-nav" aria-label="Menu" data-menu-toggle><span class="menu-toggle__bars" aria-hidden="true"></span></button>
</div>
</div>
</header>
<main class="frame">
<p class="notice notice--error" id="error" hidden></p>
<p class="status" id="status" aria-live="polite"></p>
<section id="signin" class="band" data-view>
<h1 class="section-title">Sign in</h1>
<form class="card form" id="login">
<div class="form-row"><label for="handle">Your handle</label><input class="field" id="handle" name="handle" placeholder="you.bsky.social" autocomplete="username" required></div>
<div class="toolbar"><button class="btn">Sign in</button></div>
<p class="form-hint" id="who"></p>
</form>
</section>
<section id="running" class="band" data-view>
<h1 class="section-title">Running</h1>
<div class="toolbar"><button class="btn btn--small btn--ghost" id="refresh-running">Refresh</button></div>
<h2>Your bidders</h2>
<div class="grid" id="my-bidders"></div>
<form class="form inline" id="track"><input class="field" name="bidder" placeholder="a bidder DID you run" required><button class="btn btn--small">Follow</button></form>
<h2>Your requesters</h2>
<div class="grid" id="my-vms"></div>
<h2>Bidders of accounts you vouch for</h2>
<div class="grid" id="vouched-bidders"></div>
</section>
<section id="agents" class="band" data-view>
<h1 class="section-title">Agents</h1>
<form class="card form" id="launch">
<h3>New agent</h3>
<div class="form-grid">
<div class="form-row"><label for="nick">Name</label><input class="field" id="nick" name="nick" placeholder="scout" pattern="[a-z][a-z0-9-]{0,22}" required></div>
<div class="form-row"><label for="vm">VM</label><select class="field" id="vm" name="vm"><option value="">a new VM</option></select></div>
<div class="form-row"><label for="base_url">Model endpoint (Anthropic API)</label><input class="field" id="base_url" name="base_url" placeholder="https://api.example.com/anthropic" required></div>
<div class="form-row"><label for="model">Model</label><input class="field" id="model" name="model" placeholder="model-name" required></div>
<div class="form-row"><label for="api_key">API key</label><input class="field" id="api_key" name="api_key" type="password" autocomplete="off" placeholder="saved sealed in this browser"></div>
</div>
<details><summary class="form-hint">Harness</summary><div class="form-row"><label for="harness">A #! script that starts the agent (empty: claude)</label><textarea class="field mono" id="harness" name="harness" rows="6" spellcheck="false"></textarea></div></details>
<p class="form-hint">The key goes to the VM only. The agent joins your channel and its own.</p>
<div class="toolbar"><button class="btn">Create agent</button></div>
<ol class="steps" id="launch-steps"></ol>
</form>
<div class="grid" id="agent-list"></div>
</section>
<section id="chat" class="band" data-view>
<h1 class="section-title">Chat</h1>
<div class="toolbar"><select class="field" id="channel" aria-label="Channel"></select><span class="pill" id="peers"></span></div>
<ol class="chat" id="messages"></ol>
<form class="form inline" id="post"><input class="field" name="text" placeholder="message" autocomplete="off" required><button class="btn btn--small">Send</button></form>
</section>
<section id="shell" class="band" data-view>
<h1 class="section-title">Shell</h1>
<div class="toolbar"><select class="field" id="shell-vm" aria-label="VM"></select></div>
<div class="toolbar quick" id="quick"></div>
<pre class="output terminal" id="terminal"></pre>
<form class="form inline" id="exec"><input class="field mono" name="command" placeholder="uname -a" autocomplete="off" autocapitalize="off" spellcheck="false" required><button class="btn btn--small">Run</button></form>
</section>
<section id="vouches" class="band" data-view>
<h1 class="section-title">Vouches</h1>
<form class="card form" id="vouch">
<div class="form-row"><label for="subject">Handle or DID</label><input class="field" id="subject" name="subject" placeholder="friend.bsky.social" required></div>
<div class="form-row"><label for="reason">Reason</label><input class="field" id="reason" name="reason" maxlength="300"></div>
<div class="toolbar"><button class="btn">Vouch</button></div>
</form>
<div class="grid" id="vouch-list"></div>
</section>
<section id="tiles" class="band" data-view>
<h1 class="section-title">Tiles</h1>
<p class="lede">Web tiles: each a sandboxed frame on its own origin, no network; this page holds your session and answers what it asks.</p>
<div class="grid" id="tile-list"></div>
<div id="tile"></div>
</section>
<section id="atlibs" class="band" data-view>
<h1 class="section-title">atlibs</h1>
<p class="lede">This page is one composition (<code>composition.json</code>): instances of published modules, routes between them, each held to its own OAuth scope.</p>
<div class="grid" id="instances"></div>
</section>
</main>
</body>
</html>