cctop 0.24.0

An htop-like terminal monitor for AI coding agent sessions on Linux (Claude Code, Codex, Cursor, Devin, Gemini CLI, OpenCode, Pi, Windsurf)
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<title>cctop — analytics</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<style>__CCTOP_CSS__
  .back { font-size: 13px; color: var(--dim); text-decoration: none; }
  .back:hover { color: var(--accent); }
  #updated { font-size: 12px; }

  .tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 14px; }
  .tile { padding: 12px 14px; }
  .tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
  .tile .v { font-family: var(--mono); font-size: 21px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .tile .n { font-size: 11px; color: var(--faint); margin-top: 2px; }
  .tile.warn .v { color: var(--amber); }
  .tile.bad .v { color: var(--red); }

  .controls { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
  select {
    padding: 7px 9px; font: inherit; font-size: 13px; cursor: pointer;
    background: var(--panel); color: var(--dim);
    border: 1px solid var(--line); border-radius: 8px; max-width: 46vw;
  }

  section.block { margin-bottom: 26px; }
  section.block > h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
                       color: var(--faint); margin-bottom: 9px; }
  section.block > .note { font-size: 12px; color: var(--faint); margin: -4px 0 9px; max-width: 62ch; }
  .pad { padding: 12px 14px; }

  svg { display: block; max-width: 100%; }
  .axis { fill: var(--faint); font-size: 10px; font-family: var(--mono); }
  .gridline { stroke: var(--line); stroke-width: 1; }

  .legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 11px; font-size: 12px; }
  .legend .item { display: flex; align-items: center; gap: 6px; }
  .legend .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 9px; }
  .legend .amt { color: var(--faint); font-family: var(--mono); }

  /* The week-by-hour grid: day labels down the left, hour labels across the
     top, one cell per waking slot. Intensity is the accent at a strength, so
     a cell's colour and its tooltip always agree about which is biggest. */
  .heat { display: grid; grid-template-columns: 30px repeat(24, minmax(8px, 1fr));
          gap: 2px; align-items: center; }
  .heat .hl { font-size: 10px; color: var(--faint); font-family: var(--mono); }
  .heat .hh { font-size: 9px; color: var(--faint); font-family: var(--mono); text-align: center; }
  .heat .hc { aspect-ratio: 1; min-height: 10px; border-radius: 2px; }

  /* Most-written files as a ranked bar list: the bar is the comparison, the
     count is the figure, the path is what it was. */
  .wr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 140px) auto;
        gap: 10px; align-items: center; padding: 4px 0; }
  .wr .wp { font-family: var(--mono); font-size: 12px; color: var(--dim);
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wr .wb { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
  .wr .wb i { display: block; height: 100%; background: var(--accent); }
  .wr .wn { font-family: var(--mono); font-size: 12px; color: var(--faint);
            text-align: right; font-variant-numeric: tabular-nums; }

  /* The breakdown cards sit side by side where there is room and stack to one
     column where there is not — a phone reads them top to bottom. */
  .decks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .decks h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
              color: var(--faint); margin: 0; padding: 11px 14px 3px; }
  .decks table { font-size: 12.5px; }
  .decks td { padding: 5px 10px; }
  .decks .card { padding-bottom: 6px; }

  /* The sessions table is the way off this page — every block above it is an
     aggregate, these rows are the sessions themselves and link out to their
     reports. The name truncates inside the link so a long title cannot push
     the table sideways. */
  .sess td a { display: inline-block; max-width: 46ch; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
               text-decoration: none; }
  .sess td a:hover { color: var(--accent); }

  footer { margin-top: 24px; font-size: 12px; color: var(--faint); display: grid; gap: 4px; }
</style>
<style>
  /* A phone gets the same page in one column. The wide things — the heat
     grid, the charts, the tables — keep their size and scroll inside their
     card rather than compressing until the text is gone; the filters and
     tiles are what actually rearrange. */
  @media (max-width: 700px) {
    .controls select { flex: 1 1 140px; max-width: none; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tile .v { font-size: 18px; }
    .decks { grid-template-columns: 1fr; }
    .heat { min-width: 560px; }
    .scroll-x > svg { min-width: 620px; height: auto; }
    .sess td a { max-width: 28ch; }
    .wr { grid-template-columns: minmax(0, 1fr) 60px auto; }
  }
</style>
<script>__CCTOP_THEME_JS__</script>

<div class="wrap">
  <header class="top">
    <h1>cctop<span class="v mono">__CCTOP_VERSION__</span></h1>
    <a class="back" id="back" href="/">← dashboard</a>
    <div class="spacer"></div>
    <span class="faint" id="updated">reading…</span>
  </header>

  <div id="banners"></div>

  <div class="tiles" id="kpis"></div>

  <div class="controls">
    <select id="f-provider" title="Which agent harness"></select>
    <select id="f-project" title="Which project"></select>
    <select id="f-model" title="Which model"></select>
    <select id="f-who" title="Whose sessions — user, account or machine"></select>
    <select id="f-range" title="How far back">
      <option value="24h">Last 24h</option>
      <option value="7d">Last 7 days</option>
      <option value="30d" selected>Last 30 days</option>
      <option value="all">All time</option>
    </select>
  </div>

  <main id="main"><div class="empty">Reading the sessions…</div></main>

  <footer id="foot"></footer>
</div>

<script>
__CCTOP_ANALYTICS_JS__</script>