<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kaizen Visualization</title>
<link rel="icon" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="%23050507"/><path d="M14 22l10 10-10 10" fill="none" stroke="%2300d992" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/><rect x="32" y="38" width="18" height="6" rx="3" fill="%2300d992"/></svg>'>
<link rel="stylesheet" href="/assets/kaizen.css">
</head>
<body>
<div class="shell">
<header class="topbar">
<a class="brand" href="/"><span class="terminal-mark" aria-hidden="true"><span></span></span><span>Kaizen</span></a>
<form id="snapshot-form" class="workspace-form">
<label for="workspace-input">Workspace</label>
<input id="workspace-input" class="input" name="workspace" autocomplete="off" placeholder="/path/to/repo" required>
<button id="refresh-report" class="btn primary" type="submit">Refresh</button>
</form>
<button id="open-dev" class="btn" type="button">Developer</button>
<span id="socket-pill" class="pill warn">connecting</span>
</header>
<main id="visualization-screen" class="main">
<section class="intro" aria-labelledby="page-title">
<p class="eyebrow">Activity visualization</p>
<h1 id="page-title">Workspace activity snapshot</h1>
<p id="report-status" aria-live="polite">Enter workspace path, then refresh.</p>
</section>
<section class="kpi-grid" aria-label="Totals">
<article class="card kpi"><span>Sessions</span><strong id="total-sessions">-</strong></article>
<article class="card kpi"><span>Events</span><strong id="total-events">-</strong></article>
<article class="card kpi"><span>Tokens</span><strong id="total-tokens">-</strong></article>
<article class="card kpi"><span>Cost</span><strong id="total-cost">-</strong></article>
<article class="card kpi"><span>Running</span><strong id="running-sessions">-</strong></article>
<article class="card kpi"><span>Errors</span><strong id="total-errors">-</strong></article>
</section>
<section class="panel-grid">
<article class="panel span-8" aria-labelledby="activity-title">
<div class="row">
<h2 id="activity-title">Activity</h2>
<span id="tool-count" class="chip">MCP tools: -</span>
</div>
<ol id="activity-bars" class="activity-bars" aria-label="Recent activity by time bucket"></ol>
</article>
<article class="panel span-4" aria-labelledby="quality-title">
<h2 id="quality-title">Data quality</h2>
<dl id="quality-list" class="metric-list"></dl>
<ul id="quality-warnings" class="warning-list" aria-live="polite"></ul>
</article>
<article class="panel span-7" aria-labelledby="sessions-title">
<div class="row">
<h2 id="sessions-title">Sessions</h2>
<span id="selected-session" class="chip">No session selected</span>
</div>
<div class="table-wrap">
<table>
<caption>Recent sessions in workspace</caption>
<thead>
<tr><th scope="col">Session</th><th scope="col">Status</th><th scope="col">Events</th><th scope="col">Tokens</th><th scope="col">Inspect</th></tr>
</thead>
<tbody id="session-rows"></tbody>
</table>
</div>
<p id="session-empty" class="empty">No sessions loaded.</p>
</article>
<article class="panel span-5" aria-labelledby="selected-title">
<h2 id="selected-title">Selected trace</h2>
<div id="selected-detail" class="selected-detail empty">Select session to inspect events.</div>
</article>
</section>
</main>
<dialog id="developer-drawer" class="drawer" aria-labelledby="developer-title">
<form method="dialog"><div class="row"><h2 id="developer-title">Developer details</h2><button class="btn" value="close">Close</button></div></form>
<label for="dev-filter">Filter history</label>
<input id="dev-filter" class="input" placeholder="snapshot, status, error">
<div id="dev-list" class="dev-list"></div>
<pre id="dev-raw" class="output"></pre>
</dialog>
</div>
<script type="module" src="/assets/kaizen.js"></script>
</body>
</html>