3ca5983ecd
Adds a 'See it in motion' section on the Tokunia landing page with the rendered motion-design video (re-encoded 44MB -> ~20MB via ffmpeg libx264 CRF 23, same resolution/duration) and poster frame. Autoplay muted on load, tap/click the overlay button to unmute (browsers block unmuted autoplay anyway), styled to match the page's dark ink/receipt aesthetic.
345 lines
15 KiB
HTML
345 lines
15 KiB
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>Tokunia — your agents, itemised</title>
|
|
<meta
|
|
name="description"
|
|
content="A self-hosted agent layer for your computer. Spawn coding agents, watch them work, and see what every turn cost — in dollars and in carbon. Private by construction, one container. Watch the 2-minute reel."
|
|
/>
|
|
<meta name="theme-color" content="#0E0D0C" />
|
|
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
|
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Tokunia — your agents, itemised" />
|
|
<meta
|
|
property="og:description"
|
|
content="Spawn coding agents, watch them work, and see what every turn cost — in dollars and in carbon. Self-hosted, one container."
|
|
/>
|
|
<meta property="og:url" content="https://tokunia.dev.gabvdl.xyz/" />
|
|
<meta property="og:image" content="https://tokunia.dev.gabvdl.xyz/og-image.png" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Tokunia — your agents, itemised" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="Spawn coding agents, watch them work, and see what every turn cost — in dollars and in carbon."
|
|
/>
|
|
<meta name="twitter:image" content="https://tokunia.dev.gabvdl.xyz/og-image.png" />
|
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="/styles.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<a class="skip" href="#main">Skip to content</a>
|
|
|
|
<header class="bar">
|
|
<a class="wordmark" href="/" aria-label="Tokunia, home">
|
|
<span class="wordmark__tok">Tokun</span><span class="wordmark__dot">·</span
|
|
><span class="wordmark__ia">IA</span>
|
|
</a>
|
|
<nav class="bar__nav">
|
|
<a href="https://demo.tokunia.dev.gabvdl.xyz">Demo</a>
|
|
<a href="https://git.gabvdl.xyz/gabrielvidal/ai-agent">Source</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main id="main">
|
|
<!-- ── Hero ─────────────────────────────────────────────────────── -->
|
|
<section class="hero">
|
|
<div class="hero__thesis">
|
|
<p class="eyebrow">Self-hosted agent layer</p>
|
|
<h1 class="display">
|
|
Your agents,<br /><em>itemised.</em>
|
|
</h1>
|
|
<p class="lede">
|
|
Tokunia runs coding agents on your own machine and keeps the books.
|
|
Every turn is a line: what it read, what it wrote, what it cost you,
|
|
and what it cost the planet.
|
|
</p>
|
|
<div class="cta">
|
|
<a class="btn btn--primary" href="https://demo.tokunia.dev.gabvdl.xyz">
|
|
Open the demo
|
|
</a>
|
|
<a class="btn" href="https://git.gabvdl.xyz/gabrielvidal/ai-agent">
|
|
Read the source
|
|
</a>
|
|
</div>
|
|
<p class="footnote">
|
|
The demo runs entirely in your browser on generated data. No account,
|
|
no backend, nothing to install.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Signature element: the receipt. -->
|
|
<figure class="receipt" aria-labelledby="receipt-cap">
|
|
<div class="receipt__paper">
|
|
<div class="receipt__head" data-line="0">
|
|
<p class="receipt__brand">TOKUNIA</p>
|
|
<p class="receipt__sub">ITEMISED AGENT RUN</p>
|
|
</div>
|
|
|
|
<hr class="receipt__rule" data-line="1" />
|
|
|
|
<dl class="receipt__meta">
|
|
<div data-line="2"><dt>SESSION</dt><dd>gbif-images</dd></div>
|
|
<div data-line="3"><dt>MODEL</dt><dd>claude-opus-4-8</dd></div>
|
|
<div data-line="4"><dt>TURNS</dt><dd>304</dd></div>
|
|
</dl>
|
|
|
|
<hr class="receipt__rule" data-line="5" />
|
|
|
|
<ul class="receipt__items">
|
|
<li data-line="6"><span>messages</span><b>$13.46</b></li>
|
|
<li data-line="7"><span>bash</span><b>$8.00</b></li>
|
|
<li data-line="8"><span>edit</span><b>$1.92</b></li>
|
|
<li data-line="9"><span>read</span><b>$1.33</b></li>
|
|
<li data-line="10"><span>skills</span><b>$0.87</b></li>
|
|
<li data-line="11"><span>context</span><b>$0.21</b></li>
|
|
</ul>
|
|
|
|
<hr class="receipt__rule receipt__rule--double" data-line="12" />
|
|
|
|
<p class="receipt__total" data-line="13">
|
|
<span>TOTAL</span><b>$25.79</b>
|
|
</p>
|
|
<p class="receipt__note" data-line="14">30.7M tokens</p>
|
|
|
|
<hr class="receipt__rule" data-line="15" />
|
|
|
|
<p class="receipt__section" data-line="16">ALSO BILLED TO THE PLANET</p>
|
|
<ul class="receipt__items receipt__items--eco">
|
|
<li data-line="17"><span>carbon</span><b>478 g eqCO2</b></li>
|
|
<li data-line="18"><span>energy</span><b>1.66 kWh</b></li>
|
|
<li data-line="19"><span>water</span><b>5.53 L</b></li>
|
|
</ul>
|
|
<p class="receipt__note receipt__note--eco" data-line="20">
|
|
about 4 km in a petrol car
|
|
</p>
|
|
|
|
<hr class="receipt__rule" data-line="21" />
|
|
|
|
<p class="receipt__thanks" data-line="22">— KEEP THIS RECEIPT —</p>
|
|
</div>
|
|
<figcaption id="receipt-cap" class="receipt__caption">
|
|
One real run from the archive. Carbon estimated with the open-source
|
|
<a href="https://github.com/gwittebolle/claude-carbon">claude-carbon</a>
|
|
factors.
|
|
</figcaption>
|
|
</figure>
|
|
</section>
|
|
|
|
<!-- ── The reel ─────────────────────────────────────────────────── -->
|
|
<section class="section section--reel">
|
|
<h2 class="section__title">See it in motion</h2>
|
|
<div class="reel">
|
|
<video
|
|
class="reel__video"
|
|
poster="/assets/tokunia-reel-poster.jpg"
|
|
muted
|
|
autoplay
|
|
loop
|
|
playsinline
|
|
preload="metadata"
|
|
width="1920"
|
|
height="1080"
|
|
>
|
|
<source src="/assets/tokunia-reel.mp4" type="video/mp4" />
|
|
</video>
|
|
<button
|
|
type="button"
|
|
class="reel__sound btn"
|
|
aria-pressed="false"
|
|
>
|
|
<span class="reel__sound-icon" aria-hidden="true"></span>
|
|
<span class="reel__sound-label">Sound on</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Ledger of the archive ───────────────────────────────────── -->
|
|
<section class="strip" aria-label="What the author's own instance has accounted for">
|
|
<p class="strip__intro">Accounted for on the author's own machine:</p>
|
|
<dl class="strip__stats">
|
|
<div><dt>conversations</dt><dd>482</dd></div>
|
|
<div><dt>tokens</dt><dd>10.1<span>B</span></dd></div>
|
|
<div><dt>assistant turns</dt><dd>67,825</dd></div>
|
|
<div><dt>spend, to the cent</dt><dd>$11,329</dd></div>
|
|
</dl>
|
|
</section>
|
|
|
|
<!-- ── What it does ────────────────────────────────────────────── -->
|
|
<section class="section">
|
|
<h2 class="section__title">What it does</h2>
|
|
<ol class="lines">
|
|
<li class="line">
|
|
<div class="line__label"><span>Spawn a session</span></div>
|
|
<div class="line__body">
|
|
<p>
|
|
Pick a model and an effort level, attach files, and send. The run
|
|
streams into a live thread within seconds — interrupt it, resume
|
|
it, or fork it from any turn.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="line">
|
|
<div class="line__label"><span>Watch it work</span></div>
|
|
<div class="line__body">
|
|
<p>
|
|
Every transcript becomes a readable thread: tool cards with
|
|
durations and diff stats, thinking blocks, task panels, and the
|
|
token cost of each turn as it lands.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="line">
|
|
<div class="line__label"><span>Account for it</span></div>
|
|
<div class="line__body">
|
|
<p>
|
|
Spend by tool, by project, by model, over time. Which skills earn
|
|
their context. Which files are expensive to load. And the same
|
|
run priced again in carbon, water and energy.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
<li class="line">
|
|
<div class="line__label"><span>Tune what it reads</span></div>
|
|
<div class="line__body">
|
|
<p>
|
|
Edit every <code>CLAUDE.md</code> and the whole
|
|
<code>.claude/</code> tree — skills, hooks, agents, memories —
|
|
with real token counts beside each file. Cheaper context, cheaper
|
|
runs.
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</section>
|
|
|
|
<!-- ── The screens ─────────────────────────────────────────────── -->
|
|
<section class="section section--shots">
|
|
<h2 class="section__title">The screens</h2>
|
|
<figure class="shot shot--wide">
|
|
<img
|
|
src="/assets/shot-env.webp"
|
|
alt="The Environment dashboard: 479 g eqCO2, 5.54 L of water and 1.67 kWh, with everyday equivalents, carbon over time, and a split by model and project."
|
|
width="1440"
|
|
height="900"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>
|
|
The footprint of your agents, in grams and in glasses of water.
|
|
</figcaption>
|
|
</figure>
|
|
<div class="shot-grid">
|
|
<figure class="shot">
|
|
<img
|
|
src="/assets/shot-home.webp"
|
|
alt="The conversation view: six running sessions with live costs, project tags and a composer for starting a new one."
|
|
width="1440"
|
|
height="900"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>Running sessions, priced as they go.</figcaption>
|
|
</figure>
|
|
<figure class="shot">
|
|
<img
|
|
src="/assets/shot-dashboard.webp"
|
|
alt="The context dashboard: total context cost, token count, skill usage bars and the most expensive files."
|
|
width="1440"
|
|
height="900"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
<figcaption>What your context costs to load, file by file.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Pillars ─────────────────────────────────────────────────── -->
|
|
<section class="section">
|
|
<h2 class="section__title">Why self-hosted</h2>
|
|
<div class="pillars">
|
|
<article class="pillar">
|
|
<h3>It stays yours</h3>
|
|
<p>
|
|
Prompts, transcripts, code and costs live on your disk. Nothing
|
|
leaves the machine except the model API calls you configure — and
|
|
you can point those at a local model instead.
|
|
</p>
|
|
</article>
|
|
<article class="pillar pillar--eco">
|
|
<h3>It shows the real price</h3>
|
|
<p>
|
|
Agents are cheap per token and expensive per hour. Tokunia prices
|
|
every run twice — once in dollars, once in grams of CO<sub>2</sub>e
|
|
— so the cost of a habit is visible before the invoice arrives.
|
|
</p>
|
|
</article>
|
|
<article class="pillar">
|
|
<h3>It's one container</h3>
|
|
<p>
|
|
Backend, UI and the agent runner ship in a single image. No host
|
|
agent to install, no cloud account, no per-seat pricing. Read the
|
|
code, change it, rebuild it.
|
|
</p>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ── Run it ──────────────────────────────────────────────────── -->
|
|
<section class="section section--run">
|
|
<h2 class="section__title">Run it</h2>
|
|
<div class="run">
|
|
<pre class="run__code"><code>git clone https://git.gabvdl.xyz/gabrielvidal/ai-agent
|
|
cd ai-agent
|
|
AI_AGENT_WORKSPACE=/path/to/your/repo \
|
|
docker compose -f docker-compose.standalone.yml up -d --build
|
|
<span class="run__comment"># → http://localhost:8096</span></code></pre>
|
|
<p class="run__note">
|
|
Set <code>ANTHROPIC_API_KEY</code>, or mount a logged-in Claude home,
|
|
and the bundled runner spawns sessions with no host process at all.
|
|
Catalogs you don't mount simply stay empty.
|
|
</p>
|
|
<p class="run__caveat">
|
|
<b>One honest caveat.</b> That build still resolves this project's
|
|
design-system package from a private registry, so today it only
|
|
completes on the author's own network. Publishing that package — and
|
|
with it a real one-line install — is the next thing on the
|
|
<a href="https://git.gabvdl.xyz/gabrielvidal/ai-agent/src/branch/main/GOAL.md">roadmap</a>.
|
|
Until then, the demo is the way to try it.
|
|
</p>
|
|
<div class="cta">
|
|
<a class="btn btn--primary" href="https://demo.tokunia.dev.gabvdl.xyz">
|
|
Open the demo instead
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="foot">
|
|
<p class="foot__mark">Tokun<span>·</span>IA</p>
|
|
<p class="foot__etym">
|
|
From <span lang="ja">徳用</span> <i>tokuyō</i> — “good value for the
|
|
money”.
|
|
</p>
|
|
<nav class="foot__nav">
|
|
<a href="https://demo.tokunia.dev.gabvdl.xyz">Demo</a>
|
|
<a href="https://git.gabvdl.xyz/gabrielvidal/ai-agent">Source</a>
|
|
<a href="https://git.gabvdl.xyz/gabrielvidal/ai-agent/src/branch/main/GOAL.md">Roadmap</a>
|
|
</nav>
|
|
</footer>
|
|
|
|
<script src="/app.js" defer></script>
|
|
</body>
|
|
</html>
|