@rikcodes/teamclaude 1.1.22-rik.1 → 1.1.22-rik.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rikcodes/teamclaude",
-  "version": "1.1.22-rik.1",
+  "version": "1.1.22-rik.3",
   "description": "Multi-account proxy for Claude Code and Codex: pools Claude Max, ChatGPT/Codex, API-key and third-party backend accounts, and rotates on quota",
   "type": "module",
   "main": "src/index.js",

package/src/config.js

@@ -107,6 +107,9 @@ export function createDefaultConfig() {
     distributeSessions: false,
     sessionTitles: { enabled: false, width: 18 },
     quotaBarPercent: true,
+    // Tokens-per-second readouts in the TUI. Off unless asked for: with it off
+    // the proxy does no throughput work at all (see OutputTracker).
+    throughputMeter: false,
     projection: { enabled: true, windowMinutes: 90, wasteFloor: 0.1 },
     eventLogging: 'hide',
     defaultClientMode: 'mitm',

package/src/index.js

@@ -532,6 +532,9 @@ async function serverCommand() {
     config.messageThreads = fleetThreads;
     // Read by the TUI on every frame, so a hand edit lands on the next reload.
     config.quotaBarPercent = diskConfig.quotaBarPercent !== false;
+    // Read by the server per request and by the TUI per frame, so the reload
+    // is the whole application: the next request is timed, or is not.
+    config.throughputMeter = diskConfig.throughputMeter === true;
     // Read by `run`/`env` from disk, but the TUI settings screen shows it live.
     config.defaultClientMode = diskConfig.defaultClientMode === 'base-url' ? 'base-url' : 'mitm';
     // The fleet switch for spending Codex reset credits. The redeemer reads it
@@ -632,6 +635,7 @@ async function serverCommand() {
         // the edit never reached disk and was silently undone by the next start.
         if (config.eventLogging != null) diskConfig.eventLogging = config.eventLogging;
         if (config.quotaBarPercent != null) diskConfig.quotaBarPercent = config.quotaBarPercent;
+        if (config.throughputMeter != null) diskConfig.throughputMeter = config.throughputMeter;
         if (config.defaultClientMode != null) diskConfig.defaultClientMode = config.defaultClientMode;
         if (config.autoRedeemResets != null) diskConfig.autoRedeemResets = config.autoRedeemResets;
         if (config.blockedModels != null) diskConfig.blockedModels = config.blockedModels;
@@ -671,6 +675,9 @@ async function serverCommand() {
       onRequestStart: (id, info) => tui.onRequestStart(id, info),
       onRequestModel: (id, info) => tui.onRequestModel(id, info),
       onRequestRouted: (id, info) => tui.onRequestRouted(id, info),
+      // Fired from inside the stream reader, and only with `throughputMeter` on,
+      // so it is bound once here rather than wrapped in one more call.
+      onRequestProgress: tui.onRequestProgress.bind(tui),
       onRequestEnd: (id, info) => tui.onRequestEnd(id, info),
     };
   }

package/src/server.js

@@ -23,6 +23,7 @@ import { forwardRefusal, guardedLookup, FORBIDDEN_FORWARD } from './forward-targ
 import { renderDashboardHtml, dashboardCsp } from './dashboard.js';
 import { createUsageRecorder, resolveUsageDimensions, usageDimensionHeaderNames } from './client-usage.js';
 import { responsesEventUsage, isResponsesBody, normalizeResponsesUsage } from './responses-usage.js';
+import { OutputTracker } from './throughput.js';
 import { classificationPath } from './classification-path.js';
 import { serveManagementMcp } from './mcp-tools.js';
 import { codexSpentWindows, isAccountWideCodexWindow } from './codex-quota.js';
@@ -1245,7 +1246,10 @@ export function clientSessionId(headers) {
  * @param {Object} opts.accountManager
  * @param {string} opts.upstream
  * @param {string|null} [opts.logDir]
- * @param {Object} [opts.hooks]  activity callbacks (onRequestStart, onRequestEnd, ...), all optional
+ * @param {Object} [opts.hooks]  activity callbacks (onRequestStart, onRequestEnd, ...), all optional.
+ *   onRequestProgress(reqId, { chars, at }) is called once per output event of
+ *   a streamed response, and only while `config.throughputMeter` is on: it runs
+ *   inside the stream reader, so it must stay O(1) and never render.
  * @param {Object|null} [opts.sx]
  * @param {number} [opts.holdMs]
  * @param {Object} [opts.config]  the live config object; read per request, never copied
@@ -1507,7 +1511,8 @@ export function createProxyRequestListener({ accountManager, upstream, logDir =
 
       // stripOverage is sampled once here, at dispatch: retries and holds of
       // this request keep it, and a reload applies to subsequent requests.
-      const ctx = { account: null, status: null, tried: new Set(), reauthed: new Set(), model, advisorModel, streamRequested: parseRequestStream(body), fleetMessageThreads: config?.messageThreads === true, pinnedIndex, provider, holdBudgetMs: holdMs, pinKey, client, delivered: false, abandoned: false, onUsage: usageRecorder.onUsage, stripHeaders, stripOverage: shouldStripOverageHeaders(config), logLevel: resolveLogLevel(config), logMaxBodyBytes: resolveLogMaxBodyBytes(config) };
+      const output = hideActivity ? null : outputTrackerFor(config, hooks, reqId);
+      const ctx = { account: null, status: null, tried: new Set(), reauthed: new Set(), model, advisorModel, streamRequested: parseRequestStream(body), fleetMessageThreads: config?.messageThreads === true, pinnedIndex, provider, holdBudgetMs: holdMs, pinKey, client, delivered: false, abandoned: false, onUsage: usageRecorder.onUsage, output, stripHeaders, stripOverage: shouldStripOverageHeaders(config), logLevel: resolveLogLevel(config), logMaxBodyBytes: resolveLogMaxBodyBytes(config) };
       // Hold the session "in flight" across the WHOLE request (incl. retries and
       // a multi-minute streaming completion) so it stays counted as active and
       // never expires mid-request.
@@ -1563,7 +1568,9 @@ export function createProxyRequestListener({ accountManager, upstream, logDir =
         // marked open would send the outer catch to call that same throwing hook
         // a second time for one request.
         openEntry = null;
-        if (!hideActivity) hooks.onRequestEnd?.(reqId, { method: req.method, path: req.url, account: ctx.account, status: ctx.status, model: ctx.model, sessionId, pinned: ctx.pinnedIndex != null, client });
+        // With the meter on, the end also carries the settled output count and
+        // when the output started and stopped; off, the entry is what it was.
+        if (!hideActivity) hooks.onRequestEnd?.(reqId, { method: req.method, path: req.url, account: ctx.account, status: ctx.status, model: ctx.model, sessionId, pinned: ctx.pinnedIndex != null, client, ...output?.summary() });
       }
     } catch (err) {
       reportFailure('[TeamClaude] Unhandled error:', err);
@@ -1604,6 +1611,23 @@ export function createProxyRequestListener({ accountManager, upstream, logDir =
   };
 }
 
+/**
+ * The throughput meter's tracker for one request, or null while the meter is off
+ * (`throughputMeter`, opt-in). Sampled at dispatch off the live config, like
+ * the telemetry mode, so the settings toggle lands on the next request. Off,
+ * there is no tracker, and the stream reader's whole cost is testing for one.
+ * A consumer with no progress hook (the headless activity log) gets none
+ * either way: nothing would read it.
+ *
+ * @param {any} config the live config
+ * @param {any} hooks
+ * @param {number} reqId
+ */
+function outputTrackerFor(config, hooks, reqId) {
+  const onProgress = hooks.onRequestProgress;
+  return config?.throughputMeter === true && typeof onProgress === 'function' ? new OutputTracker(reqId, onProgress) : null;
+}
+
 /**
  * Report a failure without depending on the console to survive it.
  *
@@ -3110,6 +3134,10 @@ export async function forwardRequest(req, res, body, accountManager, upstream, r
     }
     let upstreamRes;
     let admittedLoad = 0;
+    // For the throughput meter: this attempt is being sent. A later attempt
+    // overwrites it, so the time that survives is the answering attempt's, and
+    // a buffered answer is timed from here rather than from the client's ask.
+    ctx.output?.dispatched();
     try {
       upstreamRes = await upstreamFetch(upstreamUrl, {
         method,
@@ -3669,7 +3697,7 @@ export async function forwardRequest(req, res, body, accountManager, upstream, r
       const l = getLog();
       const bw = l ? l.bodyWriter('RESPONSE BODY (streamed)', contentType) : null;
       try {
-        await streamResponse(upstreamBody, res, account.index, accountManager, bw, ctx.onUsage, ctx.pinKey, ctx.model);
+        await streamResponse(upstreamBody, res, account.index, accountManager, bw, ctx.onUsage, ctx.pinKey, ctx.model, ctx.output);
         // Reached only when the stream completed. A stream that dies upstream
         // throws out of streamResponse, so it never marks itself delivered —
         // which is the failure the token counters cannot see, since a stream
@@ -3684,7 +3712,7 @@ export async function forwardRequest(req, res, body, accountManager, upstream, r
       l?.end();
     } else {
       const buf = Buffer.from(await upstreamRes.arrayBuffer());
-      extractUsageFromBody(buf, account.index, accountManager, ctx.onUsage, ctx.pinKey, ctx.model);
+      extractUsageFromBody(buf, account.index, accountManager, ctx.onUsage, ctx.pinKey, ctx.model, ctx.output);
       const l = getLog();
       if (l) { l.body('RESPONSE BODY', buf, contentType); l.end(); }
       res.end(buf);
@@ -3855,8 +3883,9 @@ export function readWithIdleTimeout(reader, ms) {
 
 /**
  * Stream an SSE response to the client, parsing usage data along the way.
+ * `output` is the throughput meter's tracker for this response, when it is on.
  */
-export async function streamResponse(webStream, res, accountIndex, accountManager, bodyWriter, onUsage = null, pinKey = null, model = null) {
+export async function streamResponse(webStream, res, accountIndex, accountManager, bodyWriter, onUsage = null, pinKey = null, model = null, output = null) {
   const reader = webStream.getReader();
   // A client that leaves while upstream is silent must not hold the pending
   // read — and with it the upstream socket and its admission permit — until
@@ -3876,7 +3905,7 @@ export async function streamResponse(webStream, res, accountIndex, accountManage
   // remembers that it did — the incremental counters would book the turn again
   // if a second terminal event arrived. See parseSSEDataLine.
   const responsesTurn = { settled: false };
-  const usage = createSseLineScanner(line => parseSSEDataLine(line, accountIndex, accountManager, onUsage, merged, responsesTurn));
+  const usage = createSseLineScanner(line => parseSSEDataLine(line, accountIndex, accountManager, onUsage, merged, responsesTurn, output));
 
   try {
     while (true) {
@@ -4032,8 +4061,9 @@ export function createSseLineScanner(onLine, maxChars = SSE_MAX_LINE_CHARS) {
  * @param {((inputTokens: number, outputTokens: number) => void)|null} [onUsage]
  * @param {Record<string, any>|null} [merged]
  * @param {{settled: boolean}|null} [responsesTurn] this stream's "already booked" flag
+ * @param {OutputTracker|null} [output] the throughput meter's tracker, when it is on
  */
-function parseSSEDataLine(line, accountIndex, accountManager, onUsage = null, merged = null, responsesTurn = null) {
+function parseSSEDataLine(line, accountIndex, accountManager, onUsage = null, merged = null, responsesTurn = null, output = null) {
   if (!line.startsWith('data: ')) return;
 
   try {
@@ -4046,6 +4076,7 @@ function parseSSEDataLine(line, accountIndex, accountManager, onUsage = null, me
       accountManager.updateUsage(accountIndex, 0, data.usage.output_tokens);
       onUsage?.(0, data.usage.output_tokens || 0);
       if (merged) Object.assign(merged, data.usage);
+      output?.settle(data.usage.output_tokens);
     } else if (!responsesTurn?.settled) {
       // Both sides settle at once here, so unlike the Anthropic branches above
       // this is a single incremental update rather than one per side — and it
@@ -4059,14 +4090,20 @@ function parseSSEDataLine(line, accountIndex, accountManager, onUsage = null, me
         accountManager.updateUsage(accountIndex, usage.input_tokens, usage.output_tokens);
         onUsage?.(usage.input_tokens, usage.output_tokens);
         if (merged) Object.assign(merged, usage);
+        output?.settle(usage.output_tokens);
       }
     }
+    // The same parsed event, read for generated text. After the usage branches,
+    // so a progress hook that throws costs only its own line: the catch below
+    // swallows it, and the accounting for this line has already run.
+    output?.event(data);
   } catch {
     // not valid JSON, skip
   }
 }
 
-function extractUsageFromBody(buffer, accountIndex, accountManager, onUsage = null, pinKey = null, model = null) {
+/** @param {OutputTracker|null} [output] the throughput meter's tracker, when it is on */
+function extractUsageFromBody(buffer, accountIndex, accountManager, onUsage = null, pinKey = null, model = null, output = null) {
   try {
     const json = JSON.parse(buffer.toString());
     if (json.usage) {
@@ -4083,6 +4120,9 @@ function extractUsageFromBody(buffer, accountIndex, accountManager, onUsage = nu
       accountManager.updateUsage(accountIndex, usage.input_tokens, usage.output_tokens);
       onUsage?.(usage.input_tokens || 0, usage.output_tokens || 0);
       accountManager.recordTokenUsage(accountIndex, pinKey, model, usage);
+      // Buffered, so there is no generation interval to time: the tracker's
+      // first and last token stay null and the reader times the whole request.
+      output?.settle(usage.output_tokens);
     }
   } catch {
     // not JSON or no usage

package/src/speedo.js

@@ -0,0 +1,252 @@
+// The fleet speedo: a car-style dial drawn in Braille for the TUI.
+//
+// Braille because each cell is a 2×4 grid of dots, which is eight times the
+// resolution of a character grid, and a terminal cell is about twice as tall as
+// it is wide, so the dots come out close to square and a circle drawn in them
+// comes out round. Every Braille character is one display column wide.
+//
+// The arc sweeps 240°: zero at the lower left, full scale at the lower right,
+// half scale straight up. The needle pivots at the hub, and the reading sits
+// under the hub with its unit below it. The needle is never drawn over the
+// reading: it stops at the text's edge and picks up past it.
+//
+// The arc is lit in one colour up to the reading and dim past it. No green,
+// yellow and red zones: the scale follows the fleet's own recent peak, so the
+// top of it is "busier than lately", not a limit, and a zone would change
+// colour the moment the scale stepped up under the same reading.
+//
+// Pure: a reading and a size in, lines out. Colour comes from the painter the
+// caller hands over, so the dial is drawn with the same SGR helpers as the rest
+// of the frame.
+
+import { formatRate } from './throughput.js';
+
+/** Rows the dial is drawn in at the least, and at the most. Six is the smallest
+ *  that keeps an arc, a reading and its unit apart; past ten the dial only grows
+ *  wider, and the top block has better uses for the columns. */
+export const SPEEDO_MIN_H = 6;
+export const SPEEDO_MAX_H = 10;
+
+const DEG = Math.PI / 180;
+const START = 210 * DEG;  // where zero sits, counter-clockwise from 3 o'clock
+const SWEEP = 240 * DEG;  // clockwise from START to full scale
+// Half the arc's stroke, in dots. A one-dot stroke leaves gaps where the circle
+// crosses the dot grid at a shallow angle.
+const HALF_STROKE = 0.75;
+// Clear dots between the needle's tip and the inside of the arc.
+const TIP_GAP = 3.5;
+
+// Braille dot bits by [row][column] within a cell (Unicode's dots 1-8).
+const DOT_BITS = [[0x01, 0x08], [0x02, 0x10], [0x04, 0x20], [0x40, 0x80]];
+const BRAILLE_BLANK = 0x2800;
+
+const SGR = (/** @type {string} */ code) => (/** @type {string} */ s) => `\x1b[${code}m${s}\x1b[0m`;
+/** @typedef {{ cyan: (s: string) => string, dim: (s: string) => string, bold: (s: string) => string }} Painter */
+/** @type {Painter} */
+const DEFAULT_PAINT = { cyan: SGR('36'), dim: SGR('2'), bold: SGR('1') };
+
+/** @typedef {'blank'|'arc'|'arc-dim'|'needle'|'value'|'unit'|'label'} CellKind */
+/** @typedef {{ ch: string, kind: CellKind }} Cell */
+
+/**
+ * The radius, in dots, of the largest arc a dial `height` rows tall holds. The
+ * arc reaches R above the hub and R·sin 30° below it, and the bottom row is kept
+ * for the scale labels.
+ * @param {number} height
+ */
+function radiusFor(height) {
+  return Math.floor((4 * (height - 1) - 2.5) / 1.5);
+}
+
+/**
+ * The columns a dial `height` rows tall is drawn in: the arc's width, a column
+ * either side, rounded up to odd so the hub sits in the middle of a column and
+ * the needle stands straight at half scale.
+ * @param {number} height
+ */
+export function speedoWidth(height) {
+  const w = radiusFor(height) + 2;
+  return w % 2 ? w : w + 1;
+}
+
+/** Where `angle` falls along the sweep, 0 at zero and 1 at full scale, or null
+ *  outside it (the gap at the bottom).
+ *  @param {number} angle radians, counter-clockwise from 3 o'clock */
+function sweepFraction(angle) {
+  let delta = (START - angle) % (2 * Math.PI);
+  if (delta < 0) delta += 2 * Math.PI;
+  const f = delta / SWEEP;
+  return f <= 1 + 1e-9 ? Math.min(1, f) : null;
+}
+
+/** A scale end as it is labelled: `500`, `1k`, `20k`, `1M`. The scale is a
+ *  1-2-5 step, so it divides evenly and `1.0k` would only be noise.
+ *  @param {number} n */
+export function formatScale(n) {
+  if (n >= 1e6) return `${+(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${+(n / 1e3).toFixed(1)}k`;
+  return String(Math.round(n));
+}
+
+
+/**
+ * The dial as a grid of cells, before any colour: what each cell shows and what
+ * it belongs to. Exposed so the tests can find the needle without parsing SGR.
+ *
+ * @param {{ rate: number, max: number, width: number, height: number }} opts
+ * @returns {Cell[][]} `height` rows of `width` cells
+ */
+export function speedoCells({ rate, max, width, height }) {
+  width = Math.max(0, Math.floor(width));
+  height = Math.max(0, Math.floor(height));
+  /** @type {Cell[][]} */
+  const cells = Array.from({ length: height }, () => Array.from({ length: width }, () => ({ ch: ' ', kind: /** @type {CellKind} */ ('blank') })));
+  if (!width || !height) return cells;
+
+  const frac = max > 0 && rate > 0 ? Math.min(1, rate / max) : 0;
+  const R = Math.min(radiusFor(height), width - 2);
+  const Wp = width * 2;
+  const Hp = height * 4;
+  // Dot coordinates: x to the right, y down, a dot's centre at +0.5. With an
+  // odd width, `width` dots across is the middle of the middle column.
+  const cx = width;
+  const cy = R + 1.5;
+
+  // 0 nothing, 1 arc, 2 needle.
+  const layer = new Uint8Array(Wp * Hp);
+  if (R >= 3) {
+    for (let py = 0; py < Hp; py++) {
+      for (let px = 0; px < Wp; px++) {
+        const dx = px + 0.5 - cx;
+        const dy = py + 0.5 - cy;
+        if (Math.abs(Math.hypot(dx, dy) - R) > HALF_STROKE) continue;
+        if (sweepFraction(Math.atan2(-dy, dx)) !== null) layer[py * Wp + px] = 1;
+      }
+    }
+    const angle = START - frac * SWEEP;
+    // Snapped, because the hub sits on the line between the middle column's two
+    // dots: cos(90°) comes out a hair either side of zero, and an upright
+    // needle would zigzag between them.
+    const snap = (/** @type {number} */ v) => (Math.abs(v) < 1e-9 ? 0 : v);
+    const ux = snap(Math.cos(angle));
+    const uy = snap(Math.sin(angle));
+    const len = R - TIP_GAP;
+    for (let t = 0; t <= len; t += 0.25) {
+      const px = Math.floor(cx + t * ux);
+      const py = Math.floor(cy - t * uy);
+      if (px >= 0 && px < Wp && py >= 0 && py < Hp) layer[py * Wp + px] = 2;
+    }
+  }
+
+  // The reading under the hub, its unit under that, the scale ends on the
+  // bottom row beneath the arc's two ends. Rows are clamped so a short dial
+  // still keeps the reading.
+  const hubRow = Math.floor(cy / 4);
+  const valueRow = Math.max(0, Math.min(hubRow + 1, height - 2));
+  const unitRow = valueRow + 1;
+  const labelRow = height - 1;
+  const centre = width / 2;
+  const colFor = (/** @type {string} */ text) => Math.round(centre - text.length / 2);
+
+  /** @type {{ row: number, col: number, text: string, kind: CellKind }[]} */
+  const texts = [];
+  const value = formatRate(rate);
+  texts.push({ row: valueRow, col: colFor(value), text: value, kind: 'value' });
+  if (unitRow < height) texts.push({ row: unitRow, col: colFor('tok/s'), text: 'tok/s', kind: 'unit' });
+
+  // Nothing but text in the box around the reading: the needle stops at its
+  // edge, a column clear of the widest line.
+  const boxFrom = Math.min(...texts.map(t => t.col)) - 1;
+  const boxTo = Math.max(...texts.map(t => t.col + t.text.length)) + 1;
+  const inBox = (/** @type {number} */ r, /** @type {number} */ c) => r >= valueRow && r <= unitRow && c >= boxFrom && c < boxTo;
+
+  // The scale ends, both or neither: a lone `0` says nothing. Each must sit in
+  // the dial and clear of any text already on its row.
+  if (R >= 3 && labelRow > valueRow) {
+    const endX = R * Math.cos(30 * DEG);
+    const place = (/** @type {string} */ text, /** @type {number} */ dotX) => {
+      const col = Math.round(dotX / 2 - text.length / 2);
+      return { row: labelRow, col: Math.max(0, Math.min(width - text.length, col)), text, kind: /** @type {CellKind} */ ('label') };
+    };
+    const ends = [place('0', cx - endX), place(formatScale(max), cx + endX)];
+    const clear = (/** @type {{ row: number, col: number, text: string }} */ a) =>
+      a.col >= 0 && a.col + a.text.length <= width
+      && texts.every(t => t.row !== a.row || a.col + a.text.length + 1 <= t.col || t.col + t.text.length + 1 <= a.col);
+    if (ends[0].col + ends[0].text.length + 1 <= ends[1].col && ends.every(clear)) texts.push(...ends);
+  }
+
+  for (let r = 0; r < height; r++) {
+    for (let c = 0; c < width; c++) {
+      if (inBox(r, c)) continue;
+      let bits = 0;
+      let needle = false;
+      let fsum = 0;
+      let fn = 0;
+      for (let dy = 0; dy < 4; dy++) {
+        for (let dx = 0; dx < 2; dx++) {
+          const px = c * 2 + dx;
+          const py = r * 4 + dy;
+          const v = layer[py * Wp + px];
+          if (!v) continue;
+          bits |= DOT_BITS[dy][dx];
+          if (v === 2) needle = true;
+          else {
+            const f = sweepFraction(Math.atan2(-(py + 0.5 - cy), px + 0.5 - cx));
+            if (f !== null) { fsum += f; fn++; }
+          }
+        }
+      }
+      if (!bits) continue;
+      const ch = String.fromCodePoint(BRAILLE_BLANK + bits);
+      if (needle) { cells[r][c] = { ch, kind: 'needle' }; continue; }
+      const f = fn ? fsum / fn : 0;
+      cells[r][c] = { ch, kind: frac > 0 && f <= frac ? 'arc' : 'arc-dim' };
+    }
+  }
+
+  for (const t of texts) {
+    if (t.row < 0 || t.row >= height) continue;
+    for (let i = 0; i < t.text.length; i++) {
+      const c = t.col + i;
+      if (c >= 0 && c < width) cells[t.row][c] = { ch: t.text[i], kind: t.kind };
+    }
+  }
+  return cells;
+}
+
+/**
+ * The dial as `height` lines of exactly `width` display columns each.
+ *
+ * Colour runs are closed on every change of style, so no cell's colour can
+ * bleed into the next, or past the dial into whatever follows it on the line.
+ *
+ * @param {{ rate: number, max: number, width: number, height: number, paint?: Painter }} opts
+ * @returns {string[]}
+ */
+export function renderSpeedo({ rate, max, width, height, paint = DEFAULT_PAINT }) {
+  // Cyan is the dashboard's accent for what is live — the spinner, the active
+  // count — and the lit arc is exactly that.
+  /** @type {Record<CellKind, (s: string) => string>} */
+  const style = {
+    blank: (s) => s,
+    arc: (s) => paint.cyan(s),
+    'arc-dim': (s) => paint.dim(s),
+    needle: (s) => paint.bold(s),
+    value: (s) => paint.bold(s),
+    unit: (s) => paint.dim(s),
+    label: (s) => paint.dim(s),
+  };
+  return speedoCells({ rate, max, width, height }).map(row => {
+    let out = '';
+    let run = '';
+    /** @type {Cell|null} */
+    let head = null;
+    const flush = () => { if (head) out += style[head.kind](run); run = ''; };
+    for (const cell of row) {
+      if (!head || cell.kind !== head.kind) { flush(); head = cell; }
+      run += cell.ch;
+    }
+    flush();
+    return out;
+  });
+}