@emesoft/tokenhub 0.3.0 → 0.3.1

package/lib/dashboard.js

@@ -151,13 +151,16 @@ function blockedText(report, timeZone) {
   return `BLOCKED: ${period} budget reached${lifts}.`;
 }
 
+const MAX_MODEL_WIDTH = 24;
+const MIN_MODEL_WIDTH = 5;
+
 /**
- * Pick the optional table columns that fit the terminal width.
- * @param {number} columns Terminal width.
- * @returns {{ latency: boolean, tokens: boolean }} Which optional columns to show.
+ * Format a request cost at the precision the pool logs it, so small amounts are never rounded away.
+ * @param {number} amount USD.
+ * @returns {string} For example `$0.0435`.
  */
-function tableLayout(columns) {
-  return { latency: columns >= 50, tokens: columns >= 70 };
+function exactMoney(amount) {
+  return `$${(Number(amount) || 0).toFixed(4)}`;
 }
 
 /**
@@ -170,37 +173,116 @@ function statusTone(status) {
 }
 
 /**
- * Render one request as a table row.
+ * Choose the table columns: sized to the content, then thinned to fit the terminal.
+ * Drops In/Out first, then Latency, then shrinks the model column.
+ * @param {number} columns Terminal width.
+ * @param {Record<string, any>[]} recent Requests to show (the model column fits the longest name, capped).
+ * @returns {{ id: string, title: string, width: number, right: boolean }[]} Visible columns in order.
+ */
+function tableColumns(columns, recent) {
+  const model = Math.min(MAX_MODEL_WIDTH, Math.max(MIN_MODEL_WIDTH, ...recent.map((request) => String(request.model ?? "-").length)));
+  let cols = [
+    { id: "time", title: "Time", width: 8, right: false },
+    { id: "model", title: "Model", width: model, right: false },
+    { id: "status", title: "Status", width: 6, right: false },
+    { id: "latency", title: "Latency", width: 7, right: true },
+    { id: "in", title: "In", width: 6, right: true },
+    { id: "out", title: "Out", width: 6, right: true },
+    { id: "cost", title: "Cost", width: 9, right: true },
+  ];
+  for (const drop of [["in", "out"], ["latency"]]) {
+    if (tableWidth(cols) <= columns - 1) break;
+    cols = cols.filter((col) => !drop.includes(col.id));
+  }
+  const excess = tableWidth(cols) - (columns - 1);
+  if (excess > 0) {
+    const modelCol = cols.find((col) => col.id === "model");
+    modelCol.width = Math.max(MIN_MODEL_WIDTH, modelCol.width - excess);
+  }
+  return cols;
+}
+
+/**
+ * Total width of a bordered table.
+ * @param {{ width: number }[]} cols Columns.
+ * @returns {number} Characters per line, borders and padding included.
+ */
+function tableWidth(cols) {
+  return cols.reduce((sum, col) => sum + col.width + 3, 1);
+}
+
+/**
+ * Draw a horizontal table border.
+ * @param {{ width: number }[]} cols Columns.
+ * @param {[string, string, string]} corners Left, junction and right characters.
+ * @param {boolean} color Whether to emit colour.
+ * @returns {string} One grey line.
+ */
+function border(cols, [left, mid, right], color) {
+  return paint(color, "grey", `${left}${cols.map((col) => "─".repeat(col.width + 2)).join(mid)}${right}`);
+}
+
+/**
+ * Draw one table line from already padded cells.
+ * @param {string[]} cells Cell text, each exactly its column width (colour codes allowed).
+ * @param {boolean} color Whether to emit colour.
+ * @returns {string} One line with grey vertical borders.
+ */
+function tableLine(cells, color) {
+  const bar = paint(color, "grey", "│");
+  return `${bar}${cells.map((cell) => ` ${cell} `).join(bar)}${bar}`;
+}
+
+/**
+ * Pad text to a column width on its alignment side.
+ * @param {string} text Plain text, already no longer than the column.
+ * @param {{ width: number, right: boolean }} col Column.
+ * @returns {string} Text of exactly `col.width` characters.
+ */
+function fit(text, col) {
+  return col.right ? text.padStart(col.width) : text.padEnd(col.width);
+}
+
+/**
+ * Render one request as table cells.
  * @param {Record<string, any>} request Entry from `/member/api/recent`.
- * @param {{ latency: boolean, tokens: boolean }} layout Visible columns.
- * @param {number} modelWidth Width reserved for the model name.
+ * @param {{ id: string, width: number, right: boolean }[]} cols Visible columns.
  * @param {boolean} color Whether to emit colour.
  * @param {string | undefined} timeZone IANA zone.
- * @returns {string} One line.
+ * @returns {string[]} One padded cell per column.
  */
-function requestRow(request, layout, modelWidth, color, timeZone) {
-  const cells = [clock(request.started_at, timeZone), truncate(String(request.model ?? "-"), modelWidth).padEnd(modelWidth)];
-  cells.push(paint(color, statusTone(request.status), String(request.status).padEnd(6)));
-  if (layout.latency) cells.push(latency(request.latency_ms).padStart(7));
-  if (layout.tokens) cells.push(tokens(request.input_tokens).padStart(7), tokens(request.output_tokens).padStart(7));
-  cells.push(money(request.usd).padStart(8));
-  return cells.join(" ");
+function requestCells(request, cols, color, timeZone) {
+  const text = {
+    time: clock(request.started_at, timeZone),
+    model: String(request.model ?? "-"),
+    status: String(request.status),
+    latency: latency(request.latency_ms),
+    in: tokens(request.input_tokens),
+    out: tokens(request.output_tokens),
+    cost: exactMoney(request.usd),
+  };
+  return cols.map((col) => {
+    const cell = fit(truncate(text[col.id], col.width), col);
+    return col.id === "status" ? paint(color, statusTone(request.status), cell) : cell;
+  });
 }
 
 /**
  * Render the whole dashboard as text. Pure: no I/O, so it can be tested without a terminal.
  * @param {{ report: Record<string, any> | null, recent: Record<string, any>[], refreshedAt: number | null, error: string | null, intervalSec: number, poolHost?: string, timeZone?: string }} state Latest poll result.
  * @param {{ columns: number, rows: number, color: boolean, now: number, fill?: boolean }} view Terminal size, colour switch, current epoch ms and whether to pad to `rows` so the footer sits on the last row (default true).
- * @returns {string} Lines joined with `\n`, each at most `columns` wide, at most `rows` lines, no trailing newline.
+ * @returns {string} Lines joined with `\n`, each at most `columns - 1` wide (the last column is left free: some terminals clip it), at most `rows` lines, no trailing newline.
  */
 export function renderFrame(state, { columns, rows, color, now, fill = true }) {
   const { report, recent, refreshedAt, error, intervalSec, timeZone } = state;
+  const cols = tableColumns(columns, recent);
+  const width = tableWidth(cols);
   const lines = [];
   const stale = refreshedAt !== null && now - refreshedAt > intervalSec * 2000 + 1000;
   const refreshed = refreshedAt === null ? "waiting for first refresh" : `refreshed ${clock(refreshedAt, timeZone)}${stale ? " (stale)" : ""}`;
   const title = `${report ? report.member : "TokenHub"}${state.poolHost ? ` @ ${state.poolHost}` : ""}`;
   const right = `${refreshed} · every ${intervalSec}s`;
-  lines.push(`${paint(color, "bold", title)}${" ".repeat(Math.max(2, columns - title.length - right.length))}${paint(color, "grey", right)}`);
+  lines.push(`${paint(color, "bold", title)}${" ".repeat(Math.max(2, width - title.length - right.length))}${paint(color, "grey", right)}`);
   lines.push("");
 
   if (report) {
@@ -216,23 +298,19 @@ export function renderFrame(state, { columns, rows, color, now, fill = true }) {
   lines.push("");
 
   const footer = error ? paint(color, "red", `reconnecting… ${error}`) : paint(color, "grey", "q quit · r refresh now");
-  const layout = tableLayout(columns);
-  const fixed = 8 + 1 + 6 + 1 + 8 + (layout.latency ? 8 : 0) + (layout.tokens ? 16 : 0) + 1;
-  const modelWidth = Math.max(8, columns - fixed);
-  const header = ["Time".padEnd(8), "Model".padEnd(modelWidth), "Status".padEnd(6)];
-  if (layout.latency) header.push("Latency".padStart(7));
-  if (layout.tokens) header.push("In".padStart(7), "Out".padStart(7));
-  header.push("$".padStart(8));
-  lines.push(paint(color, "grey", header.join(" ")));
-  const room = Math.max(0, rows - lines.length - 1);
+  lines.push(border(cols, ["┌", "┬", "┐"], color));
+  lines.push(tableLine(cols.map((col) => paint(color, "bold", fit(col.title, col))), color));
+  lines.push(border(cols, ["├", "┼", "┤"], color));
+  const room = Math.max(0, rows - lines.length - 2);
   if (recent.length === 0) {
-    if (room > 0) lines.push(paint(color, "grey", "No requests yet."));
+    if (room > 0) lines.push(tableLine([paint(color, "grey", "No requests yet.".padEnd(width - 4))], color));
   } else {
-    for (const request of recent.slice(0, room)) lines.push(requestRow(request, layout, modelWidth, color, timeZone));
+    for (const request of recent.slice(0, room)) lines.push(tableLine(requestCells(request, cols, color, timeZone), color));
   }
+  lines.push(border(cols, ["└", "┴", "┘"], color));
   while (fill && lines.length < rows - 1) lines.push("");
   lines.push(footer);
-  return lines.slice(-Math.max(rows, 1)).map((line) => clip(line, columns)).join("\n");
+  return lines.slice(-Math.max(rows, 1)).map((line) => clip(line, Math.max(columns - 1, 1))).join("\n");
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@emesoft/tokenhub",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Pair Claude Code on this machine with a TokenHub pool",
   "type": "module",
   "bin": {