cctop 0.23.3

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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392

<title>cctop — session report</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<!-- The dark --bg: a page watched in a dark terminal's browser should not
     flash a light chrome around it. -->
<meta name="theme-color" content="#16151a">
<style>__CCTOP_CSS__
  .back { font-size: 13px; color: var(--dim); text-decoration: none; }
  .back:hover { color: var(--accent); }

  .subject { margin-bottom: 18px; }
  .subject h2 { font-size: 20px; margin-bottom: 4px; }
  .subject .where { color: var(--dim); font-size: 13px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

  /* The green end of the pill range. common.css carries warn and bad because
     the dashboard's live state is a dot and only the problems are pills; here
     the state itself is a pill, so "working" needs a colour too. */
  .pill.ok { color: var(--green); border-color: var(--green); }

  .tiles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); margin-bottom: 22px; }
  .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.bad .v { color: var(--red); }
  .tile.warn .v { color: var(--amber); }

  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; }

  /* The one finding worth leading with, so it is styled like one. */
  .failure { border-top: 1px solid var(--line); padding: 11px 14px; }
  .failure:first-child { border-top: 0; }
  .failure .head { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
  .failure .count { font-family: var(--mono); font-weight: 600; color: var(--red); }
  .failure .tool { font-family: var(--mono); font-size: 12px; color: var(--dim); }
  .failure pre { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; color: var(--ink);
                 background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
                 padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

  /* Stacked proportion bar for the context breakdown. */
  .stack { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--line); }
  .stack span { display: block; height: 100%; min-width: 0; }
  .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); }

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

  .files { columns: 2 260px; column-gap: 22px; font-family: var(--mono); font-size: 12px; }
  .files div { break-inside: avoid; color: var(--dim); padding: 1px 0; overflow-wrap: anywhere; }
  .files .plus { color: var(--green); }
  .files .minus { color: var(--red); }

  /* One file's edits. <details> rather than scripted toggling: it opens with
     no JavaScript, it is keyboard-reachable, and the browser already knows
     how to do it. */
  .diff { border-top: 1px solid var(--line); }
  .diff:first-child { border-top: 0; }
  .diff > summary {
    padding: 9px 14px; cursor: pointer; display: flex; gap: 10px;
    align-items: baseline; flex-wrap: wrap; list-style: none;
  }
  .diff > summary::-webkit-details-marker { display: none; }
  .diff > summary::before { content: "▸"; color: var(--faint); flex: 0 0 auto; }
  .diff[open] > summary::before { content: "▾"; }
  .diff > summary:hover { background: color-mix(in srgb, var(--accent) 7%, transparent); }
  .diff .path { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
  .diff .plus { color: var(--green); font-family: var(--mono); font-size: 12px; }
  .diff .minus { color: var(--red); font-family: var(--mono); font-size: 12px; }
  .diff pre {
    margin: 0; padding: 8px 0 12px; font-family: var(--mono); font-size: 12px;
    line-height: 1.45; overflow-x: auto;
  }
  .diff pre span { display: block; padding: 0 14px; white-space: pre; }
  .diff pre .add { background: color-mix(in srgb, var(--green) 14%, transparent); }
  .diff pre .del { background: color-mix(in srgb, var(--red) 14%, transparent); }
  .diff pre .meta { color: var(--faint); }

  /* The full call log. Capped in height so it is a panel rather than the rest
     of the page, and scrolled inside itself. */
  .log { max-height: 60vh; overflow-y: auto; }
  .log table { font-size: 12px; }
  .log thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; padding-top: 10px; }
  .log td { padding: 4px 10px; }
  .log tr.bad td { background: color-mix(in srgb, var(--red) 9%, transparent); }
  .log .when { color: var(--faint); white-space: nowrap; font-family: var(--mono); }

  /* --- the views -------------------------------------------------------- */

  /* One page, four things to read. Buttons rather than links: switching view
     should not be a navigation, because the report behind it was expensive to
     build and going back would build it again. */
  nav.views { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
  nav.views button {
    font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--panel); color: var(--dim);
    cursor: pointer;
  }
  nav.views button:hover { color: var(--ink); }
  nav.views button[aria-selected="true"] { color: var(--panel); background: var(--accent); border-color: var(--accent); }
  nav.views button .n { font-family: var(--mono); font-size: 11px; opacity: .75; margin-left: 5px; }
  /* Copy reads what is already on the page rather than switching it, so it is
     not a view — pushed to the far end to keep the four views at the left. */
  nav.views button.copymd { margin-left: auto; }

  /* --- the conversation, and the terminal beside it ---------------------- */

  /* One column until the terminal is asked for, two after. The conversation
     keeps the left because that is what the page is for; the terminal sticks
     to the viewport, so scrolling a long transcript does not scroll the thing
     you opened it to watch. */
  .split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .split.with-term { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .termside { display: flex; flex-direction: column; min-width: 0;
              position: sticky; top: 12px; }
  /* `display` beats the `hidden` attribute, so closed has to be said in CSS —
     without this the closed column keeps a screen's worth of height. */
  .termside[hidden] { display: none; }
  .termside .head { display: flex; align-items: center; gap: 10px; margin-bottom: 7px;
                    font-size: 12px; color: var(--faint); }
  .termside .head button {
    font: inherit; font-size: 12px; margin-left: auto; padding: 3px 10px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer;
  }
  .termside .head button:hover { color: var(--accent); border-color: var(--accent); }
  .termcard { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .termcard .open {
    font-size: 13px; padding: 6px 14px; border-radius: 7px; text-decoration: none;
    border: 1px solid var(--accent); background: var(--accent); color: var(--panel);
  }
  .termcard .why { font-size: 12px; color: var(--faint); }
  .termcard .why.bad { color: var(--amber); }
  .termside .note { font-size: 12px; color: var(--amber); margin-top: 7px; }
  nav.views button.toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
  nav.views button:disabled { color: var(--faint); cursor: default; }

  /* Two columns need a screen. On a phone the terminal goes under the
     conversation at a readable height rather than into a 40-column strip. */
  @media (max-width: 900px) {
    .split.with-term { grid-template-columns: minmax(0, 1fr); }
    .termside { position: static; }
  }

  /* --- acting on the session -------------------------------------------- */

  .acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
  .acts button, .acts select {
    font: inherit; font-size: 13px; padding: 5px 11px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer;
  }
  .acts button:hover:enabled { border-color: var(--accent); color: var(--accent); }
  .acts button:disabled { color: var(--faint); cursor: default; }
  .said { font-size: 13px; margin-top: 10px; }
  .said.bad { color: var(--red); }
  .said.ok { color: var(--green); }

  /* The prompt box. Sticky at the bottom of the conversation, which is where
     the thing being replied to is. */
  form.say { display: flex; gap: 8px; padding: 10px; position: sticky; bottom: 10px;
             background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
             box-shadow: var(--shadow); margin-top: 14px; }
  form.say input {
    flex: 1 1 auto; font: inherit; font-size: 14px; padding: 8px 10px; min-width: 0;
    border-radius: 7px; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  }
  form.say input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  form.say button {
    font: inherit; font-size: 13px; padding: 0 16px; border-radius: 7px; cursor: pointer;
    border: 1px solid var(--accent); background: var(--accent); color: var(--panel);
  }
  form.say button:disabled { opacity: .5; cursor: default; }

  /* "New activity" floats rather than sitting in the flow: it is about the
     scroll position, not the transcript. Fixed above the composer — bottom
     78px clears its ~60px of height and 10px of offset — and centred so it
     reads as the page's pill, not a turn's. */
  .more {
    position: fixed; left: 50%; bottom: 78px; transform: translateX(-50%); z-index: 5;
    font: inherit; font-size: 12px; padding: 5px 14px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--panel); color: var(--dim);
    box-shadow: var(--shadow); cursor: pointer;
  }
  .more:hover { color: var(--accent); border-color: var(--accent); }
  .earlier { display: block; width: 100%; padding: 10px 14px; border: 0;
             border-bottom: 1px solid var(--line); border-radius: 0;
             color: var(--faint); font-size: 12px; text-align: left; }
  .earlier:hover { color: var(--accent); }
  /* The "N new" jump rides on the earlier button's shape but speaks in the
     accent: it points at what arrived since the last visit, which is a
     finding rather than a chore. */
  .earlier.jumpnew { color: var(--accent); }

  /* The chat pane's own controls. They sit above #split rather than inside
     #talk because the poll rebuilds #talk every five seconds — a control in
     there would be thrown away under a typing reader. */
  .chattools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
  .chattools input {
    flex: 1 1 180px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 10px;
    border-radius: 7px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  }
  .chattools input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
  .chattools .n { font-size: 12px; color: var(--faint); white-space: nowrap; }
  .chattools button {
    font: inherit; font-size: 12px; padding: 5px 11px; border-radius: 99px;
    border: 1px solid var(--line); background: var(--panel); color: var(--dim); cursor: pointer;
  }
  .chattools button:hover:enabled { color: var(--accent); border-color: var(--accent); }
  .chattools button:disabled { color: var(--faint); cursor: default; }

  /* --- the conversation -------------------------------------------------- */

  .turn { border-top: 1px solid var(--line); padding: 12px 14px;
          /* Offscreen turns skip layout and paint — the browser's own lazy
             pass, so a long conversation is cheap even before the chunking
             below keeps its DOM small. */
          content-visibility: auto; contain-intrinsic-size: auto 140px; }
  .turn:first-child { border-top: 0; }
  .turn > .who {
    display: flex; gap: 8px; align-items: baseline; font-size: 11px;
    text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin-bottom: 5px;
  }
  .turn > .said-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; }
  .turn.user { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .turn.user > .who { color: var(--accent); }
  .turn.system > .said-text, .turn.reasoning > .said-text,
  .turn.system > .md, .turn.reasoning > .md { color: var(--dim); font-size: 13px; }

  /* What an agent writes is markdown, so it is shown as markdown. Paragraphs
     keep their own line breaks — a reply is written with them and reflowing it
     changes what it says. */
  .md { font-size: 14px; overflow-wrap: anywhere; }
  .md > * { margin: 0 0 9px; }
  .md > *:last-child { margin-bottom: 0; }
  .md p { white-space: pre-wrap; }
  .md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {
    font-size: 1em; font-weight: 600; margin-top: 14px; line-height: 1.35;
  }
  .md h1 { font-size: 1.15em; }
  .md h2 { font-size: 1.07em; }
  .md ul, .md ol { padding-left: 21px; }
  .md li { margin: 2px 0; }
  .md li > .md { margin: 2px 0; }
  .md code {
    font-family: var(--mono); font-size: .87em; padding: 0 4px; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--line);
  }
  .md pre {
    background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
    padding: 8px 10px; overflow-x: auto;
  }
  .md pre code { border: 0; background: none; padding: 0; white-space: pre; font-size: 12px; }
  /* The page's own tables are data grids, with faint uppercase headers and a
     column set the report chose. A table an agent wrote is neither, so it
     keeps the words it was given and scrolls rather than crushing a column. */
  .md .scroll { overflow-x: auto; }
  /* Sized to its contents, not to the pane: a two-column table stretched to
     full width reads as a layout rather than a table. */
  .md table { font-size: 13px; width: auto; max-width: 100%; }
  .md th {
    text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600;
    color: var(--ink); padding: 0 10px 7px; white-space: normal;
  }
  .md td { white-space: normal; }
  .md blockquote { border-left: 2px solid var(--line); padding-left: 11px; color: var(--dim); }
  .md hr { border: 0; border-top: 1px solid var(--line); }
  .md a { color: var(--accent); }
  .turn.compaction { text-align: center; color: var(--faint); font-size: 12px; }
  .turn .clip { font-size: 11px; color: var(--faint); margin-top: 4px; }

  /* The deep-link button at the .who line's far end — kept faint because it
     is a way to point at a turn, not part of what was said. */
  .turn > .who .anchor {
    margin-left: auto; font: inherit; font-size: 12px; line-height: inherit;
    text-transform: none; letter-spacing: 0; padding: 0 3px;
    border: 0; background: none; color: var(--faint); cursor: pointer; opacity: .6;
  }
  .turn > .who .anchor:hover { color: var(--accent); opacity: 1; }

  /* A turn the find box names, and the one it is sitting on — which is also
     the mark a deep link leaves. An inset shadow rather than a border, so
     marking a turn moves nothing. */
  .turn.hit { box-shadow: inset 3px 0 0 var(--accent); }
  .turn.current { background: color-mix(in srgb, var(--accent) 10%, transparent); }

  /* The keyboard selection — j/k marks a turn the way the dashboard's j/k
     marks a row. A thin frame rather than the find marks' edge or current's
     wash, so the three can be told apart on one turn. */
  .turn.sel { box-shadow: inset 0 0 0 1px var(--accent); }

  /* Newer than the stored "seen" seq: a small accent dot on the header line.
     A compaction has no header, so it takes a quiet edge instead. */
  .turn.new > .who::after {
    content: ""; align-self: center; flex: 0 0 auto;
    width: 6px; height: 6px; margin-left: 2px;
    border-radius: 50%; background: var(--accent);
  }
  .turn.new.compaction { box-shadow: inset 2px 0 0 var(--accent); }

  /* A tool call inside a turn: collapsed to one line, opened for the result. */
  details.tool { margin-top: 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg); }
  details.tool > summary {
    padding: 6px 10px; cursor: pointer; display: flex; gap: 8px; align-items: baseline;
    flex-wrap: wrap; list-style: none; font-size: 12.5px;
  }
  details.tool > summary::-webkit-details-marker { display: none; }
  details.tool > summary .name { font-family: var(--mono); font-weight: 600; }
  details.tool > summary .arg { font-family: var(--mono); color: var(--dim); overflow-wrap: anywhere; }
  details.tool.failed { border-color: var(--red); }
  details.tool.failed > summary .name { color: var(--red); }
  details.tool.running > summary .name { color: var(--amber); }
  details.tool pre {
    margin: 0; padding: 8px 10px; border-top: 1px solid var(--line); font-family: var(--mono);
    font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--dim);
  }
  details.tool pre.patch { white-space: pre; overflow-x: auto; padding: 8px 0; color: var(--ink); }
  details.tool pre.patch span { display: block; padding: 0 10px; }
  details.tool pre.patch .add { background: color-mix(in srgb, var(--green) 14%, transparent); }
  details.tool pre.patch .del { background: color-mix(in srgb, var(--red) 14%, transparent); }
  details.tool pre.patch .meta { color: var(--faint); }

  /* --- what it can reach ------------------------------------------------- */

  .kv { display: grid; grid-template-columns: max-content 1fr; gap: 5px 14px; font-size: 13px; }
  .kv dt { color: var(--faint); }
  .kv dd { margin: 0; overflow-wrap: anywhere; }
  .rule { border-top: 1px solid var(--line); }
  .rule:first-child { border-top: 0; }
  .rule > summary {
    padding: 9px 14px; cursor: pointer; display: flex; gap: 10px; align-items: baseline;
    flex-wrap: wrap; list-style: none; font-size: 13px;
  }
  .rule > summary::-webkit-details-marker { display: none; }
  .rule > summary .path { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
  .rule[data-present="false"] > summary { color: var(--faint); cursor: default; }
  .rule pre {
    margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--mono);
    font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 50vh; overflow-y: auto;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--line); }
  .chip .n { font-family: var(--mono); color: var(--faint); margin-left: 5px; }

  /* Compact is a choice about the conversation's rhythm — tighter turns,
     smaller markdown, tools that tuck in. It hangs off #talk so the choice
     survives the poll's rebuild, which only replaces what is inside it. */
  .talk[data-density="compact"] .turn { padding: 7px 14px; }
  .talk[data-density="compact"] .turn > .who { margin-bottom: 3px; }
  .talk[data-density="compact"] .turn > .said-text,
  .talk[data-density="compact"] .md { font-size: 13px; }
  .talk[data-density="compact"] .md > * { margin-bottom: 5px; }
  .talk[data-density="compact"] details.tool { margin-top: 4px; }

  /* --- a phone -------------------------------------------------------------
     The view pills get a scroll lane instead of wrapping into a stack of
     rows; the conversation keeps the full width; the find box and the
     composer stay usable — 16px inputs because a phone zooms the page on
     anything smaller. */
  @media (max-width: 700px) {
    .wrap { padding: 14px 10px 56px; }
    nav.views { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
    nav.views button { white-space: nowrap; }
    .subject h2 { font-size: 18px; }
    .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .files { columns: 1; }
    .turn { padding: 10px 10px; }
    .chattools input, form.say input { font-size: 16px; }
    form.say { bottom: 6px; }
  }
</style>
<!-- The stored light/dark choice has to land on <html> before the first
     paint, so it runs here rather than down with the page's own script. -->
<script>__CCTOP_THEME_JS__</script>

<div class="wrap">
  <header class="top">
    <a class="back" href="/__CCTOP_BACK__">← all sessions</a>
    <div class="spacer"></div>
    <span class="faint mono" style="font-size:12px">cctop __CCTOP_VERSION__</span>
  </header>
  <main id="main"><div class="empty">Reading the transcript…</div></main>
</div>

<script>
__CCTOP_REPORT_JS__</script>