e7ad200bb0
- New backend endpoint /api/history?hours=N returns chronological replay frames reconstructed from the events table: agent positions, energy/knowledge/influence/credits/mood, tool, model, tau, pace, clocks and drift per tick/action. - Frontend: new Replay panel with Play/Pause, timeline slider, Live button and history window selector (1h/3h/6h/12h/24h). - Canvas draw() now renders either the live snapshot or the current replay frame; agent cards and drift/clock panels sync in replay mode. - Overlay on the canvas shows current tick, timestamp, agent action and model while replaying. - Also adds the missing refreshTexts() implementation so the Generated Texts panel is populated. Verified: /api/history returns frames; JS syntax check passes; pytest 100/100; web UI renders with new Replay controls.
91 lines
2.6 KiB
HTML
91 lines
2.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Emergence-Mini · Live World</title>
|
|
<link rel="stylesheet" href="/static/style.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>Emergence-Mini</h1>
|
|
<div class="meta">
|
|
<span>Tick <b id="tick">0</b></span>
|
|
<span>Agents <b id="agentCount">0</b></span>
|
|
<span>Proposals <b id="propCount">0</b></span>
|
|
<span id="llmInfo" class="llm-info">…</span>
|
|
<span class="ws-status" id="wsStatus">connecting…</span>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="canvas-wrap">
|
|
<canvas id="world" width="640" height="640"></canvas>
|
|
<div class="legend">
|
|
<span class="dot anchor"></span>Anchor
|
|
<span class="dot flora"></span>Flora
|
|
<span class="dot lovely"></span>Lovely
|
|
<span class="dot spark"></span>Spark
|
|
</div>
|
|
|
|
<section class="replay-panel" id="replayPanel">
|
|
<h2>Replay</h2>
|
|
<div class="replay-controls">
|
|
<button id="replayPlay">▶ Play</button>
|
|
<button id="replayLive" class="active">● Live</button>
|
|
<input type="range" id="replaySlider" min="0" max="100" value="0" step="1" />
|
|
<span id="replayTime">—</span>
|
|
<select id="replayHours">
|
|
<option value="1">last 1h</option>
|
|
<option value="3">last 3h</option>
|
|
<option value="6">last 6h</option>
|
|
<option value="12" selected>last 12h</option>
|
|
<option value="24">last 24h</option>
|
|
</select>
|
|
</div>
|
|
<div class="replay-mode">replay mode</div>
|
|
</section>
|
|
</section>
|
|
|
|
<aside>
|
|
<h2>Time Dilation · Eigenzeit τ</h2>
|
|
<div id="clocks"></div>
|
|
<div id="drift"></div>
|
|
|
|
<h2>📝 Generated Texts <small id="textsCount">(0)</small></h2>
|
|
<div id="texts">
|
|
<small>Noch keine Texte. Agenten generieren welche über
|
|
write_blog, add_to_billboard, speak_to_all, say_to_agent,
|
|
add_to_longterm_memory.</small>
|
|
</div>
|
|
|
|
<h2>Live Feed</h2>
|
|
<ul id="feed"></ul>
|
|
|
|
<h2>Agents</h2>
|
|
<div id="agentList"></div>
|
|
|
|
<h2>Town Hall · Active Proposals</h2>
|
|
<div id="proposals"></div>
|
|
|
|
<h2>Constitution</h2>
|
|
<div id="constitution"></div>
|
|
|
|
<h2>Manual Control</h2>
|
|
<form id="manual">
|
|
<label>Agent
|
|
<select name="agent"></select>
|
|
</label>
|
|
<label>Tool
|
|
<select name="tool"></select>
|
|
</label>
|
|
<label>Args (JSON)
|
|
<input name="args" value="{}" />
|
|
</label>
|
|
<button type="submit">Run</button>
|
|
</form>
|
|
</aside>
|
|
</main>
|
|
|
|
<script src="/static/app.js"></script>
|
|
</body>
|
|
</html>
|