agent-top 0.27.1

htop for local coding agents: processes, subagents, MCP servers, tokens and cost in one terminal view.
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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>agent-top</title>
<link rel="stylesheet" href="/app.css">
<script src="/app.js" defer></script>
</head>
<body>
<header class="top">
  <div class="brand"><span class="mark">A</span><span>agent-top</span><span class="sub">local store</span></div>
  <div class="meta" id="meta"></div>
  <button type="button" class="theme" id="theme" aria-label="Switch light or dark">◐</button>
</header>

<nav class="filters" aria-label="Filters">
  <div class="seg" role="radiogroup" aria-label="Time range" id="range">
    <button type="button" role="radio" data-range="7">7 days</button>
    <button type="button" role="radio" data-range="30">30 days</button>
    <button type="button" role="radio" data-range="90">90 days</button>
    <button type="button" role="radio" data-range="0">All</button>
  </div>
  <label class="select">Harness
    <select id="harness"><option value="">All</option></select>
  </label>
</nav>

<main id="main">
  <section class="tiles" id="tiles" aria-label="Totals"></section>

  <section class="card" aria-labelledby="h-daily">
    <div class="card-head">
      <h2 id="h-daily">Cost by day</h2>
      <div class="legend" id="legend-daily"></div>
      <button type="button" class="toggle" data-table="daily">Table</button>
    </div>
    <div class="chart" id="chart-daily"></div>
    <div class="table-view" id="table-daily" hidden></div>
  </section>

  <div class="grid2">
    <section class="card" aria-labelledby="h-project">
      <div class="card-head"><h2 id="h-project">Cost by project</h2></div>
      <div class="bars" id="chart-project"></div>
    </section>
    <section class="card" aria-labelledby="h-model">
      <div class="card-head"><h2 id="h-model">Cost by model</h2></div>
      <div class="bars" id="chart-model"></div>
    </section>
  </div>

  <section class="card" aria-labelledby="h-tools">
    <div class="card-head"><h2 id="h-tools">Tool latency</h2><span class="note">finished calls, nearest-rank percentiles</span></div>
    <div id="tools"></div>
  </section>

  <section class="card" aria-labelledby="h-mcp" id="mcp-card" hidden>
    <div class="card-head"><h2 id="h-mcp">MCP servers</h2></div>
    <div id="mcp"></div>
  </section>

  <section class="card" aria-labelledby="h-sessions">
    <div class="card-head"><h2 id="h-sessions">Sessions</h2><span class="note">newest first; select one for its spans</span></div>
    <div id="sessions"></div>
  </section>

  <section class="card" id="detail" hidden aria-labelledby="h-detail">
    <div class="card-head"><h2 id="h-detail">Session</h2><button type="button" class="toggle" id="close-detail">Close</button></div>
    <div id="detail-body"></div>
  </section>
</main>

<footer class="foot" id="foot">Read-only view of the local store. Run <code>agent-top sync</code> or <code>agent-top serve</code> to update it.</footer>
<div class="tip" id="tip" role="tooltip" hidden></div>
</body>
</html>