routstrd 0.4.10 → 0.4.11

package/src/tui/usage/render.ts

@@ -585,14 +585,111 @@ function truncateNpub(npub: string): string {
   return npub.slice(0, 10) + "…" + npub.slice(-6);
 }
 
+/**
+ * Token breakdown of a single request, split the way the TUI colours it:
+ * input read from the prompt cache (green) vs input that was not (red,
+ * i.e. cache writes plus uncached input), plus output tokens.
+ */
+export interface TokenSegments {
+  /** Input tokens served from the prompt cache. */
+  cacheRead: number;
+  /** Input tokens that were not served from the cache. */
+  notCached: number;
+  /** Total input tokens, cached and not. */
+  input: number;
+  output: number;
+  /** Input + output. */
+  total: number;
+}
+
+/**
+ * Split a usage entry into cache read / not-cached input and output tokens.
+ *
+ * Providers report prompt tokens inconsistently: OpenAI-style `prompt_tokens`
+ * already includes the cached subsets, while Anthropic-style `input_tokens`
+ * reports them alongside. If the prompt is at least as large as the cached
+ * counts it is treated as containing them (OpenAI); otherwise the cached
+ * counts are extra (Anthropic). `input` is the sum of what is drawn rather
+ * than a possibly under-counted `totalTokens`.
+ */
+export function tokenSegments(entry: {
+  promptTokens?: number;
+  completionTokens?: number;
+  cacheReadInputTokens?: number;
+  cacheCreationInputTokens?: number;
+}): TokenSegments {
+  const cacheRead = Math.max(0, entry.cacheReadInputTokens || 0);
+  const cacheWrite = Math.max(0, entry.cacheCreationInputTokens || 0);
+  const prompt = Math.max(0, entry.promptTokens || 0);
+  const output = Math.max(0, entry.completionTokens || 0);
+  const cached = cacheRead + cacheWrite;
+  const uncachedInput = prompt >= cached ? prompt - cached : prompt;
+  const notCached = cacheWrite + uncachedInput;
+  const input = cacheRead + notCached;
+  return { cacheRead, notCached, input, output, total: input + output };
+}
+
+/** One coloured slice of a {@link renderStackedBar}. */
+export interface BarSegment {
+  /** Segment magnitude; negatives are treated as zero. */
+  value: number;
+  /** ANSI escape applied to this segment's cells. */
+  color: string;
+}
+
+/**
+ * Render a fixed-width stacked bar: `trackWidth` cells split between the
+ * segments in proportion to their values, so the bar conveys *composition*
+ * (magnitude is reported separately, e.g. as the token total beside it).
+ *
+ * Cell counts use largest-remainder rounding, so the segments always fill
+ * exactly `trackWidth` cells. A row with no tokens renders as an empty track.
+ */
+export function renderStackedBar(segments: BarSegment[], trackWidth: number): string {
+  const track = Math.max(0, Math.floor(trackWidth));
+  if (track === 0) return "";
+
+  const values = segments.map((segment) => Math.max(0, segment.value));
+  const total = values.reduce((sum, value) => sum + value, 0);
+  if (total <= 0) return " ".repeat(track);
+
+  const exact = values.map((value) => (value / total) * track);
+  const cells = exact.map((value) => Math.floor(value));
+  let remaining = track - cells.reduce((sum, value) => sum + value, 0);
+
+  // Largest-remainder: leftover cells go to the biggest fractional parts.
+  const remainders = exact
+    .map((value, index) => ({ index, frac: value - Math.floor(value) }))
+    .sort((a, b) => b.frac - a.frac);
+  for (let i = 0; i < remainders.length && remaining > 0; i++, remaining--) {
+    cells[remainders[i]!.index]! += 1;
+  }
+
+  const bar = segments
+    .map((segment, i) => (cells[i]! > 0 ? `${segment.color}${"█".repeat(cells[i]!)}` : ""))
+    .join("");
+  return bar.length > 0 ? bar + COLORS.reset : " ".repeat(track);
+}
+
+/** Colour coding for the Recent tab's cache-hit bars. */
+const TOKEN_BAR_COLORS = {
+  cacheRead: COLORS.green,
+  notCached: COLORS.red,
+};
+
 export function renderRecent(stats: UsageStats, width: number, naming: ClientNaming): string {
   const recentEntries = stats.entries.slice(0, 50);
   if (recentEntries.length === 0) return renderBox(["No recent entries"], width, "Recent Requests");
 
-  const timeCol = 10;
-  const modelCol = 18;
-  const tokensCol = 18;
-  const costCol = 18;
+  const timeCol = 8;
+  const costCol = 12;
+  // Width reserved left of the token counts for the cache-hit bar. `CACHE HIT`
+  // is the header drawn over the bar, so the bar can never be narrower.
+  const minBarWidth = "CACHE HIT".length;
+  const maxBarWidth = 20;
+  const minProviderCol = 12;
+  const minModelCol = 10;
+  const minClientCol = 6;
 
   // Remote mode: `Alice (claude-code)` — owner display name + the client id
   // with the `-<npub tail>` suffix stripped. Local mode (no owner/name data)
@@ -602,39 +699,81 @@ export function renderRecent(stats: UsageStats, width: number, naming: ClientNam
     hasOwnerInfo ? resolveClientLabel(entry.client, naming) : entry.client || "unknown"
   );
   const maxLabelLen = clientLabels.reduce((max, label) => Math.max(max, label.length), 6);
-  const clientCol = hasOwnerInfo ? Math.min(32, Math.max(14, maxLabelLen)) : 14;
 
-  // Budget: time + model + tokens + cost + provider + client + 5 separators.
+  // Token counts are drawn as `IN - OUT` with IN pinned to the left edge of the
+  // column and OUT to the right, so both halves need the widest value on show.
+  const tokenRows = recentEntries.map((entry) => tokenSegments(entry));
+  const inputTexts = tokenRows.map((row) => formatNumber(row.input));
+  const outputTexts = tokenRows.map((row) => formatNumber(row.output));
+  const inputCol = Math.max(...inputTexts.map((text) => text.length));
+  const outputCol = Math.max(...outputTexts.map((text) => text.length));
+  const inOutCol = inputCol + outputCol + " - ".length;
+
+  // Lay out the columns against the box's inner width: start from the widest
+  // layout, hand the slack to the provider column, then give space back in
+  // priority order (bar, provider, model, client) until everything fits.
   const innerWidth = Math.max(0, width - 4);
-  const providerCol = Math.max(12, innerWidth - timeCol - modelCol - tokensCol - costCol - 5 - clientCol);
+  let modelCol = 18;
+  let clientCol = hasOwnerInfo ? Math.min(32, Math.max(14, maxLabelLen)) : 14;
+  let barWidth = maxBarWidth;
+  let showProvider = false;
+  let providerCol = 0;
+  // Column widths plus one separator between each visible column.
+  const usedWidth = () =>
+    timeCol + modelCol + (barWidth + 1 + inOutCol) + costCol + clientCol +
+    (showProvider ? providerCol + 1 : 0) + 4;
+
+  if (innerWidth - usedWidth() > minProviderCol + 1) {
+    showProvider = true;
+    providerCol = innerWidth - usedWidth();
+  }
+  while (usedWidth() > innerWidth && barWidth > minBarWidth) barWidth -= 1;
+  while (usedWidth() > innerWidth && providerCol > minProviderCol) providerCol -= 1;
+  while (usedWidth() > innerWidth && modelCol > minModelCol) modelCol -= 1;
+  while (usedWidth() > innerWidth && clientCol > minClientCol) clientCol -= 1;
+
+  const tokensCol = barWidth + 1 + inOutCol;
 
-  const msatsToSats = (msats?: number) => typeof msats === "number" ? msats / 1000 : 0;
   const lines: string[] = [];
-  lines.push(`${COLORS.bold}${["TIME".padEnd(timeCol), "MODEL".padEnd(modelCol), "I/CR/CW/O".padEnd(tokensCol), "I/O/T in sats".padEnd(costCol), "BASE:PROVIDER".padEnd(providerCol), "CLIENT".padEnd(clientCol)].join(" ")}${COLORS.reset}`);
-  lines.push(COLORS.dim + "─".repeat(width - 4) + COLORS.reset);
+  const header = [
+    "TIME".padEnd(timeCol),
+    "MODEL".padEnd(modelCol),
+    "CACHE HIT".padEnd(tokensCol - inOutCol) + "IN".padEnd(inputCol) + " - " + "OUT".padStart(outputCol),
+    // Right-aligned like the values below it, so the column's right edge is
+    // shared by the header and every `n sats` cell.
+    "COST".padStart(costCol),
+    ...(showProvider ? ["BASE:PROVIDER".padEnd(providerCol)] : []),
+    "CLIENT".padEnd(clientCol),
+  ];
+  lines.push(`${COLORS.bold}${header.join(" ")}${COLORS.reset}`);
+  lines.push(COLORS.dim + "─".repeat(innerWidth) + COLORS.reset);
 
   for (let i = 0; i < recentEntries.length; i++) {
     const entry = recentEntries[i]!;
     const time = formatTime(entry.timestamp).slice(0, 8);
     const model = entry.modelId.slice(0, modelCol).padEnd(modelCol);
-    const tokens = [
-      entry.promptTokens,
-      entry.cacheReadInputTokens || 0,
-      entry.cacheCreationInputTokens || 0,
-      entry.completionTokens,
-    ].map(formatNumber).join("/");
+    const segments = tokenRows[i]!;
+    const bar = renderStackedBar([
+      { value: segments.cacheRead, color: TOKEN_BAR_COLORS.cacheRead },
+      { value: segments.notCached, color: TOKEN_BAR_COLORS.notCached },
+    ], barWidth);
+    const tokens = `${bar} ${inputTexts[i]!.padEnd(inputCol)} - ${outputTexts[i]!.padStart(outputCol)}`;
     const totalSats = typeof entry.totalMsats === "number" ? entry.totalMsats / 1000 : entry.satsCost;
-    const cost = [
-      formatCost(msatsToSats(entry.inputMsats)),
-      formatCost(msatsToSats(entry.outputMsats)),
-      formatCost(totalSats),
-    ].join("/");
+    // Right-aligned so the `sats` unit ends at the same column on every row.
+    const cost = `${formatCost(totalSats)} sats`.padStart(costCol);
     const baseUrl = (entry.baseUrl || "unknown").replace("https://", "").replace("http://", "");
     const provider = `${baseUrl}:${entry.provider || "unknown"}`.slice(0, providerCol).padEnd(providerCol);
     const clientLabel = clientLabels[i]!.slice(0, clientCol).padEnd(clientCol);
     const clientColor = CLIENT_COLORS[entry.client || "unknown"] || CLIENT_COLORS.default || COLORS.white;
     const modelColor = MODEL_COLORS[entry.modelId] || MODEL_COLORS.default;
-    lines.push(`${COLORS.dim}${time}${COLORS.reset} ${modelColor}${model}${COLORS.reset} ${tokens.padEnd(tokensCol)} ${COLORS.green}${cost.padEnd(costCol)}${COLORS.reset} ${COLORS.dim}${provider}${COLORS.reset} ${clientColor}${clientLabel}${COLORS.reset}`);
+    lines.push([
+      `${COLORS.dim}${time}${COLORS.reset}`,
+      `${modelColor}${model}${COLORS.reset}`,
+      tokens,
+      `${COLORS.green}${cost.padEnd(costCol)}${COLORS.reset}`,
+      ...(showProvider ? [`${COLORS.dim}${provider}${COLORS.reset}`] : []),
+      `${clientColor}${clientLabel}${COLORS.reset}`,
+    ].join(" "));
   }
 
   return renderBox(lines, width, `Recent Requests (${stats.entries.length} shown)`);

package/src/TUI refactor.md

@@ -1,113 +0,0 @@
-# TUI refactor plan
-
-## Goals
-- Move the usage TUI implementation out of `src/cli/usage-tui.ts` into a dedicated `src/tui/` folder.
-- Reduce the size and responsibility of the current monolithic file.
-- Keep the existing CLI entrypoint stable so current usage does not break.
-- Preserve behavior while making future TUI work easier.
-
-## Current state
-`src/cli/usage-tui.ts` currently mixes several concerns in one file:
-- TUI-specific types and constants
-- ANSI/terminal helpers
-- scroll/search/vim navigation state
-- data fetching from the daemon
-- usage aggregation/stat helpers
-- rendering for all tabs
-- app lifecycle and keyboard event handling
-
-This makes the file hard to extend safely.
-
-## Refactor strategy
-Do this incrementally and keep a thin compatibility wrapper in `src/cli/usage-tui.ts`.
-
-### Target structure
-- `src/tui/usage/index.ts`
-  - public entrypoint: `runUsageTui()`
-- `src/tui/usage/types.ts`
-  - `UsageStats`, tab ids, tab metadata, derived stat types
-- `src/tui/usage/constants.ts`
-  - tabs, colors, model/client color maps
-- `src/tui/usage/terminal.ts`
-  - ANSI helpers, width/height helpers, `stripAnsi`
-- `src/tui/usage/state.ts`
-  - vim/search/scroll state and state mutation helpers
-- `src/tui/usage/data.ts`
-  - `fetchUsage()` and usage aggregation helpers
-- `src/tui/usage/render.ts`
-  - shared render helpers and tab renderers
-- `src/tui/usage/app.ts`
-  - main loop, render orchestration, input handling, cleanup
-- `src/cli/usage-tui.ts`
-  - compatibility wrapper that re-exports or calls `runUsageTui()` from `src/tui/usage`
-
-## Design choices
-### 1. Keep CLI path compatibility
-Do not delete the CLI file outright. Turn it into a tiny wrapper:
-- minimal import from `../tui/usage/index.ts`
-- export `runUsageTui()`
-
-This avoids breaking any existing imports or scripts.
-
-### 2. Separate pure logic from side effects
-Keep these pure where possible:
-- aggregation helpers
-- formatting helpers
-- render helpers that return strings
-- scroll clamping logic
-
-Keep side effects isolated in the app layer:
-- reading terminal size
-- writing to stdout
-- raw mode setup
-- signal handling
-- interval scheduling
-
-### 3. Avoid over-engineering
-This should be a pragmatic refactor, not a framework:
-- no unnecessary classes
-- keep function-based design
-- only extract modules around clear responsibility boundaries
-
-### 4. Preserve behavior first
-No UX changes unless needed to support the extraction.
-That means:
-- same tabs
-- same keybindings
-- same output format
-- same fetch cadence
-- same search/scroll behavior
-
-## Implementation steps
-1. Create `src/tui/usage/`.
-2. Extract types/constants first.
-3. Extract terminal helpers.
-4. Extract data fetching + aggregation helpers.
-5. Extract state/search/scroll logic.
-6. Extract rendering helpers + tab renderers.
-7. Build `app.ts` using the extracted modules.
-8. Replace `src/cli/usage-tui.ts` with a thin wrapper.
-9. Run a TypeScript/bun check and fix imports.
-10. Smoke-test keyboard handling and rendering behavior.
-
-## Risks
-- circular imports between render/state/constants
-- broken relative import paths during extraction
-- subtle behavior regressions in scroll/search state
-- terminal escape handling differences if helpers are split carelessly
-
-## Validation checklist
-- `src/cli/usage-tui.ts` still exposes `runUsageTui()`
-- TUI starts from the same CLI path
-- scroll still works for long content
-- vim keys still work
-- arrow keys still work
-- tab switching still resets scroll
-- search mode still works
-- cleanup still restores cursor and alternate screen
-
-## Non-goals
-- redesigning the UI
-- changing tab contents
-- introducing tests unless needed for safety
-- adding new features unrelated to the refactor