Gabriel Vidal
57d896e59e
Names the project **Tokunia** (Tokun·IA, from 徳用 tokuyō — "good value for the money") and gives it a public face on two hosts: tokunia.dev.gabvdl.xyz the landing page demo.tokunia.dev.gabvdl.xyz the PWA on its in-browser mock backend The demo is this frontend built with VITE_MOCK=1, so a stranger gets every screen with no API exposed and nothing to install. Branding is env-driven (VITE_APP_TITLE / _SHORT_NAME / _DESCRIPTION in vite.config.ts); unset, the homelab build keeps its existing title and manifest byte for byte. landing/ is a dependency-free static site — the page is a ledger printed on ink, and its signature is a thermal receipt itemising one real run from the archive (opus-4-8, 304 turns, $25.79, 30.7M tokens) that then bills the same run again in carbon, energy and water using the app's own footprint.ts factors. Archive stats on the page are the live instance's real numbers. The "Run it" section states the one honest caveat: that build still resolves @gabvdl/ui from a private registry, so it only completes on the author's network today (GOAL.md's open item). Better to say so than to ship a one-liner that fails for everyone else. landing/deploy.sh publishes both hosts and excludes `demo./` from the landing rsync — the hosts are nested in zipgo's trailing-dot tree and zipgo mirrors by default, so an unfiltered deploy would delete the demo underneath it. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
317 lines
14 KiB
HTML
317 lines
14 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."
|
|
/>
|
|
<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>
|
|
|
|
<!-- ── 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>
|