<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kaizen Observe</title>
<link rel="stylesheet" href="/assets/kaizen-tokens.css">
<link rel="stylesheet" href="/assets/kaizen.css">
</head>
<body>
<a class="skip-link" href="#observe-screen">Skip to observations</a>
<header class="site-header">
<div class="brand-lockup">
<span class="brand-mark" aria-hidden="true">K</span>
<div>
<strong>Kaizen</strong>
<span>Observe</span>
</div>
</div>
<p id="connection-state" class="connection-state" role="status" aria-live="polite">
Connecting
</p>
</header>
<main id="observe-screen" aria-busy="true">
<section class="page-heading" aria-labelledby="page-title">
<p class="kicker">Local agent field notes</p>
<h1 id="page-title">See what your coding agents are doing.</h1>
<p>Review recent work, cost, errors, tools, and touched files without reading raw traces.</p>
</section>
<section class="project-controls" aria-labelledby="project-title">
<div class="control-field">
<label id="project-title" for="project-select">Project</label>
<select id="project-select" disabled>
<option>Finding current project...</option>
</select>
</div>
<button id="refresh-report" type="button" disabled>Refresh now</button>
<details id="manual-workspace">
<summary>Use a project path</summary>
<form id="manual-form">
<label for="manual-path">Workspace path</label>
<div class="manual-row">
<input id="manual-path" name="workspace" autocomplete="off" placeholder="/path/to/project">
<button type="submit">Open path</button>
</div>
</form>
</details>
</section>
<section id="journey-state" class="journey-state" data-tone="neutral" aria-live="polite" aria-atomic="true">
<span class="state-pin" aria-hidden="true"></span>
<div>
<strong id="journey-state-title">Connecting</strong>
<p id="journey-status">Opening a secure local connection.</p>
<p id="journey-error" role="alert" hidden></p>
</div>
</section>
<section class="summary-grid" aria-label="Project summary">
<article>
<span>Sessions</span>
<strong id="total-sessions">-</strong>
</article>
<article>
<span>Active now</span>
<strong id="active-sessions">-</strong>
</article>
<article>
<span>Errors</span>
<strong id="total-errors">-</strong>
</article>
<article>
<span>Estimated cost</span>
<strong id="total-cost">-</strong>
</article>
</section>
<section class="observe-grid">
<article class="notebook-panel sessions-panel" aria-labelledby="sessions-title">
<header class="panel-heading">
<div>
<p class="kicker">Recent observations</p>
<h2 id="sessions-title">Agent sessions</h2>
</div>
<span id="session-count-note">No data yet</span>
</header>
<div class="table-wrap">
<table>
<caption>Newest sessions for selected project</caption>
<thead>
<tr>
<th scope="col">Agent</th>
<th scope="col">Model</th>
<th scope="col">Started</th>
<th scope="col">Status</th>
<th scope="col">Cost</th>
<th scope="col">Errors</th>
<th scope="col">Details</th>
</tr>
</thead>
<tbody id="session-rows"></tbody>
</table>
</div>
<p id="session-empty" class="empty-note" hidden>
No captured sessions yet. Run an agent in this project, then refresh.
</p>
</article>
<article id="session-detail" class="notebook-panel detail-panel" aria-labelledby="detail-title" aria-live="polite">
<header class="panel-heading">
<div>
<p class="kicker">Selected observation</p>
<h2 id="detail-title">Session detail</h2>
</div>
<span id="selected-session">Waiting for a session</span>
</header>
<dl id="detail-facts" class="detail-facts"></dl>
<section class="detail-block" aria-labelledby="events-title">
<h3 id="events-title">Recent events</h3>
<ol id="detail-events" class="detail-list"></ol>
</section>
<section class="detail-block" aria-labelledby="spans-title">
<h3 id="spans-title">Tool spans</h3>
<ol id="detail-spans" class="detail-list"></ol>
</section>
<section class="detail-block" aria-labelledby="files-title">
<h3 id="files-title">Files touched</h3>
<ul id="detail-files" class="plain-list"></ul>
</section>
<section class="detail-block" aria-labelledby="tools-title">
<h3 id="tools-title">Top tools</h3>
<ul id="detail-tools" class="plain-list"></ul>
</section>
</article>
</section>
<details id="developer-raw" class="developer-raw">
<summary>Developer raw JSON</summary>
<p>Exact bounded visualization response. Raw event payloads are omitted.</p>
<pre id="raw-json">No response yet.</pre>
</details>
</main>
<script type="module" src="/assets/kaizen.js"></script>
</body>
</html>