kaizen-cli 0.1.45

Distributable agent observability: real-time-tailable sessions, agile-style retros, and repo-level improvement (Cursor, Claude Code, Codex). SQLite, redact before any sync you enable.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

import { clock, count, dateTime, duration, label, money, shortId, statusExplanation, statusLabel } from "./kaizen-format.js";

const $ = selector => document.querySelector(selector);
const MAX_ITEMS = 40;

export function renderDetail(report) {
  const detail = report?.selected;
  const summary = report?.sessions?.find(row => row.id === detail?.session?.id);
  if (!detail) return renderEmpty();
  $("#selected-session").textContent = shortId(detail.session.id);
  $("#detail-facts").replaceChildren(...facts(detail.session, summary));
  renderPrompt(detail.prompt);
  renderEvents(detail.events || []);
  renderSpans(detail.spans || []);
  renderSimple("#detail-files", detail.files || [], "No files recorded.");
  renderTools(summary?.top_tools || []);
}

function renderEmpty() {
  $("#selected-session").textContent = "No session selected";
  $("#detail-facts").replaceChildren(...fact("Status", "Waiting for data"));
  renderPrompt(null);
  renderSimple("#detail-events", [], "No events available.");
  renderSimple("#detail-spans", [], "No spans available.");
  renderSimple("#detail-files", [], "No files recorded.");
  renderSimple("#detail-tools", [], "No tools recorded.");
}

function facts(session, summary) {
  const status = summary?.status || String(session.status).toLowerCase();
  return [
    ...fact("Agent", label(session.agent)),
    ...fact("Model", session.model || "Unknown"),
    ...fact("Started", dateTime(session.started_at_ms)),
    ...fact("Duration", duration(session.started_at_ms, session.ended_at_ms)),
    ...fact("Status", statusLabel(status)),
    ...(statusExplanation(status) ? fact("Status note", statusExplanation(status)) : []),
    ...fact("Cost", money(summary?.cost_usd_e6)),
    ...fact("Errors", count(summary?.error_count)),
  ];
}

function renderPrompt(prompt) {
  $("#detail-prompt").textContent = prompt || "Prompt unavailable for this session.";
}

function fact(name, value) {
  return [node("dt", name), node("dd", value)];
}

function renderEvents(events) {
  const recent = events.slice(-MAX_ITEMS).reverse();
  renderList("#detail-events", recent, eventRow, "No events available.");
}

function eventRow(event) {
  const row = node("li");
  row.append(node("time", clock(event.ts_ms)), node("strong", label(event.kind)));
  row.append(node("span", event.tool || label(event.source)));
  if (event.payload?.summary) row.append(node("code", event.payload.summary));
  return row;
}

function renderSpans(spans) {
  const rows = flatten(spans).slice(0, MAX_ITEMS);
  renderList("#detail-spans", rows, spanRow, "No spans available.");
}

function spanRow(entry) {
  const span = entry.node.span || {};
  const row = node("li");
  row.className = "span-row";
  row.style.setProperty("--depth", entry.depth);
  row.append(node("strong", span.tool || "Unknown tool"));
  const status = String(span.status || "").toLowerCase() === "orphaned" ? "No result event" : label(span.status);
  row.append(node("span", `${status} | ${span.lead_time_ms || 0} ms`));
  return row;
}

function flatten(nodes, depth = 0) {
  return nodes.flatMap(item => [
    { node: item, depth },
    ...flatten(item.children || [], depth + 1),
  ]);
}

function renderTools(tools) {
  const rows = tools.map(([tool, calls]) => `${tool}: ${count(calls)} calls`);
  renderSimple("#detail-tools", rows, "No tools recorded.");
}

function renderSimple(selector, values, emptyText) {
  renderList(selector, values.slice(0, MAX_ITEMS), value => node("li", value), emptyText);
}

function renderList(selector, values, render, emptyText) {
  const target = $(selector);
  const rows = values.length ? values.map(render) : [empty(emptyText)];
  target.replaceChildren(...rows);
}

function empty(text) {
  const row = node("li", text);
  row.className = "empty-note";
  return row;
}

function node(tag, text = "") {
  return Object.assign(document.createElement(tag), { textContent: text });
}