<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Continuo · Playground</title>
<link rel="stylesheet" href="/assets/app.css">
<script src="/assets/app.js" defer></script>
</head>
<body>
<aside class="rail">
<a class="mark" href="/" aria-label="Continuo home">
<svg viewBox="0 0 40 40" fill="none" aria-hidden="true"><path d="M29 10H17a10 10 0 0 0 0 20h12M11 16h12a4 4 0 0 1 0 8H11" stroke="currentColor" stroke-width="4" stroke-linecap="round"/></svg>
</a>
<span class="rail-link selected" title="Playground">◈</span>
<a class="rail-link" href="/services" title="Services">▤</a>
<span class="rail-bottom" title="Local development">⌘</span>
</aside>
<div class="shell">
<header>
<a class="wordmark" href="/">continuo<span> / playground</span></a>
<span class="environment"><i></i> LOCAL INSTANCE</span>
</header>
<main>
<div class="page-heading">
<div><p class="eyebrow">RUNTIME PLAYGROUND</p><h1>Small services.<br><span>One continuous flow.</span></h1>
<p class="intro">Register, configure and control — without losing the thread.</p></div>
<div class="build-tag">HTTP SERVER<br><span>Rust + Congif</span></div>
</div>
<div class="grid">
<section class="card counter-card">
<div class="card-heading"><span class="eyebrow">COUNTER SERVICE</span><span id="state" class="badge neutral">Checking</span></div>
<div class="counter-display">
<span class="counter-caption">Current count</span>
<div class="counter-value-row">
<strong id="count">—</strong>
<div class="controls hit-controls"><form method="post" action="/hit"><button class="hit-button" aria-label="Add a hit"><span id="hit-increment">+…</span></button></form></div>
</div>
<span id="live" class="stream-state">Connecting to live updates…</span>
</div>
<div class="controls">
<form method="post" action="/services/counter/start"><button>▶ Start</button></form>
<form method="post" action="/services/counter/stop"><button>■ Stop</button></form>
<form method="post" action="/services/counter/restart"><button>↻ Restart</button></form>
<form method="post" action="/services/counter/reload"><button>⟳ Reload</button></form>
</div>
<div class="runtime-details"><span class="eyebrow">SERVICE STATUS</span><p id="action-status" role="status">Ready for commands</p><code id="runtime-snapshot">{{status}}</code></div>
</section>
<section class="card editor-card">
<div class="card-heading"><div><span class="eyebrow">LIVE CONFIGURATION</span><h2>Edit the file.</h2></div><span class="file-tag">counter.json</span></div>
<p class="muted">Save the file. Let the watcher do the rest.</p>
<aside class="manual-config-note"><strong>Your editor is the editor.</strong><p>Edit <code>examples/playground/config/counter.json</code> and save. The application watches the file, validates the candidate and reloads the counter settings, even while the counter is stopped. An invalid edit is rejected and the previous configuration stays in effect.</p></aside>
<div class="config-hints"><div><code>increment</code><span>Added when you press Hit. Reload preserves the count.</span></div><div><code>state</code><span>The count is saved separately when the service stops.</span></div></div>
</section>
</div>
<section class="card" aria-label="Terminal commands">
<h2>From your terminal</h2>
<p>Hit · JavaScript reloads this page when the event arrives.</p>
<pre><code>{{hit_command}}</code></pre>
<p>Reload configuration</p>
<pre><code>{{reload_command}}</code></pre>
<p class="muted">Hits are ignored while the counter is stopped. Standard Unix signals may coalesce; this is a demo trigger, not a counted message queue.</p>
</section>
<section class="flow-strip">
<div><span class="step">01</span><strong>Save</strong><small>Your editor writes the file</small></div><span class="arrow">→</span>
<div><span class="step">02</span><strong>Watch</strong><small>Native filesystem signal</small></div><span class="arrow">→</span>
<div><span class="step">03</span><strong>Validate</strong><small>Typed schema + domain rules</small></div><span class="arrow">→</span>
<div><span class="step">04</span><strong>Apply</strong><small>Swap configuration · preserve count</small></div>
</section>
<footer><span>Built with <strong>continuo</strong> + <strong>congif</strong></span><nav><a href="/services">Service registry ↗</a><a href="/reload">Reload components ↗</a></nav></footer>
</main>
</div>
</body>
</html>