@brimveyn/aimux 1.22.11 → 1.23.0

package/src/ui/components/stats/chart.ts

@@ -0,0 +1,157 @@
+/**
+ * The vertical bar chart as pure string building, like `table.ts`: an off-by-one
+ * in the row thresholds draws bars that do not sit on the baseline, and only a
+ * string-level test catches that.
+ */
+
+/**
+ * Two columns of bar, one of gap.
+ *
+ * A one-column bar packs twice the days in, but a bar you cannot point at is
+ * not worth the days: at that width there is no room to label which day is
+ * which, and every column looks like every other. Two columns is wide enough
+ * to carry a date ruler underneath and to read a single day off the chart.
+ *
+ * The cap is LOWER HALF BLOCK — the body's width, half its height — so a column
+ * can end part-way up a row. Twenty levels over a ten-row chart.
+ */
+const SOLID = '\u{2588}'
+const HALF = '\u{2584}'
+
+export interface BarShape {
+  /** Blank columns between bars. Zero packs a distribution into one silhouette. */
+  gap: number
+  /** Columns of bar. */
+  width: number
+}
+
+const DEFAULT_SHAPE: BarShape = { gap: 1, width: 2 }
+/** Bar plus gap: the columns one day occupies. */
+export const CHART_STRIDE = DEFAULT_SHAPE.width + DEFAULT_SHAPE.gap
+
+export function strideOf(shape: BarShape = DEFAULT_SHAPE): number {
+  return shape.width + shape.gap
+}
+
+/**
+ * The widest shape whose `count` bars fit in `room` columns.
+ *
+ * A series with a fixed number of bars — the 24 hours of a day — cannot drop
+ * columns to fit a narrow terminal the way a rolling window can, so it gives up
+ * the gap first and the second column of bar only after that. The last rung
+ * always fits something, even when it overflows: a squeezed chart beats none.
+ */
+const NARROWEST: BarShape = { gap: 0, width: 1 }
+
+export function fitShape(count: number, room: number): BarShape {
+  const ladder: BarShape[] = [DEFAULT_SHAPE, { gap: 0, width: 2 }, { gap: 1, width: 1 }, NARROWEST]
+  return (
+    ladder.find((shape) => count * shape.width + Math.max(0, count - 1) * shape.gap <= room) ??
+    NARROWEST
+  )
+}
+
+export interface ChartLines {
+  /** One label per row, top first, all the same width; blank on unlabelled rows. */
+  axis: string[]
+  /** One string per row, top first — bar columns separated by gaps. */
+  bars: string[]
+  /** The value the top of the chart stands for. */
+  niceMax: number
+}
+
+/** How many bars fit in `width` columns, capped at `max` days. */
+export function chartColumns(width: number, max = 45): number {
+  return Math.max(4, Math.min(max, Math.floor(width / CHART_STRIDE)))
+}
+
+/**
+ * A ruler under the columns: each label sits under the bar it belongs to.
+ *
+ * Labels come in one per bar, blank where a bar goes unlabelled — the caller
+ * decides the interval, because how often a date is worth repeating depends on
+ * what the dates are. A label that would run into the one before it is dropped
+ * rather than overlapping.
+ */
+export function buildRuler(labels: string[], stride = CHART_STRIDE): string {
+  const chars: string[] = Array.from({ length: labels.length * stride }, () => ' ')
+  let usedUpTo = 0
+  for (const [index, label] of labels.entries()) {
+    if (label === '') continue
+    // Pulled back from the right edge rather than dropped: the last bar is
+    // today, and today is the one date on the ruler worth reading.
+    const offset = Math.min(index * stride, chars.length - label.length)
+    if (offset < usedUpTo) continue
+    for (let position = 0; position < label.length; position++) {
+      chars[offset + position] = label[position] ?? ' '
+    }
+    usedUpTo = offset + label.length + 1
+  }
+  return chars.join('')
+}
+
+/**
+ * The smallest 1, 2 or 5 times a power of ten that covers `raw`.
+ *
+ * Without this the step is whatever `max / height` happens to be, and the axis
+ * reads 798K, 399K — numbers that look like measurements when they are only
+ * arithmetic. A reader should be able to tell a bar's value from the axis, which
+ * needs gridlines on numbers worth counting in.
+ */
+function niceStep(raw: number): number {
+  if (raw <= 0) return 1
+  const magnitude = 10 ** Math.floor(Math.log10(raw))
+  for (const multiple of [1, 2, 5]) {
+    if (multiple * magnitude >= raw) return multiple * magnitude
+  }
+  return 10 * magnitude
+}
+
+/**
+ * Scale the chart so every axis label is a round number: the max rounds up to a
+ * multiple of the height, and each row is worth exactly `niceMax / height`.
+ *
+ * `format` is for series whose raw numbers are unreadable on an axis — millions
+ * of tokens want `2.4M`, not `2400000`, which would be wider than the chart.
+ */
+export function buildChart(
+  values: number[],
+  height = 10,
+  format: (value: number) => string = String,
+  shape: BarShape = DEFAULT_SHAPE
+): ChartLines {
+  const body = SOLID.repeat(shape.width)
+  const cap = HALF.repeat(shape.width)
+  const blank = ' '.repeat(shape.width)
+  const spacer = ' '.repeat(shape.gap)
+  const max = Math.max(...values, 0)
+  // A floor of one: these are counts, so half a prompt is not a gridline.
+  const step = Math.max(1, niceStep(max / height))
+  const niceMax = step * height
+  const axisWidth = Math.max(
+    ...Array.from({ length: height }, (_, row) => format(step * (row + 1)).length)
+  )
+
+  const axis: string[] = []
+  const bars: string[] = []
+  for (let row = height; row >= 1; row--) {
+    const labelled = row === height || row % 2 === 0
+    axis.push(labelled ? format(step * row).padStart(axisWidth) : ' '.repeat(axisWidth))
+    bars.push(
+      values
+        .map((value) => {
+          // How much of *this* row the column fills, 0 to 1, rounded to the
+          // nearest half — the two levels the body and the cap can express.
+          const fill = Math.min(1, Math.max(0, (value / niceMax) * height - (row - 1)))
+          if (fill >= 0.75) return body
+          if (fill >= 0.25) return cap
+          // The bottom row keeps any non-zero day visible: a recorded day that
+          // renders as nothing reads as a gap in the data rather than as a
+          // quiet day.
+          return row === 1 && value > 0 ? cap : blank
+        })
+        .join(spacer)
+    )
+  }
+  return { axis, bars, niceMax }
+}

package/src/ui/components/stats/day-facts.tsx

@@ -0,0 +1,268 @@
+import type { UsageDay } from '../../../services/usage-history/store'
+
+import { dayCost, formatUsd } from '../../../services/usage-history/cost'
+import { formatCompact } from '../../format-number'
+import { useTheme } from '../../theme'
+import { truncate } from '../../truncate'
+import { formatClock, formatCount, formatDuration, shortenPath } from './format'
+
+/**
+ * Everything recorded about one day, for the readout under the calendar.
+ *
+ * The heatmap encodes a single number as a shade; this is where the rest of the
+ * day lives. Rows that have nothing to say are omitted rather than shown as a
+ * dash — an old day whose transcripts have been pruned says what it still knows
+ * and nothing more.
+ */
+
+const WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+
+/** `2026-03-14` as `Saturday 14 March` — the popover has room for the long form. */
+function longDate(key: string): string {
+  const [year, month, day] = key.split('-').map(Number)
+  const date = new Date(year ?? 0, (month ?? 1) - 1, day ?? 1)
+  return `${WEEKDAYS[date.getDay()] ?? ''} ${day ?? ''} ${MONTHS[(month ?? 1) - 1] ?? ''}`
+}
+
+/** The largest entry of a `name -> number` map, with its share of the total. */
+function top(counts: Record<string, number>): { name: string; share: number } | null {
+  let total = 0
+  let best: [string, number] | null = null
+  for (const entry of Object.entries(counts)) {
+    total += entry[1]
+    if (best === null || entry[1] > best[1]) best = entry
+  }
+  if (best === null || total <= 0) return null
+  return { name: best[0], share: Math.round((best[1] / total) * 100) }
+}
+
+/** First prompt to last, and the time actually inside a session — not their gap. */
+function spanOf(day: UsageDay): string {
+  let first = Number.POSITIVE_INFINITY
+  let last = 0
+  let ms = 0
+  for (const session of Object.values(day.sessions)) {
+    first = Math.min(first, session.first)
+    last = Math.max(last, session.last)
+    ms += Math.max(0, session.last - session.first)
+  }
+  if (!Number.isFinite(first)) return ''
+  const clockOf = (epoch: number): string => {
+    const date = new Date(epoch)
+    return formatClock(date.getHours() * 60 + date.getMinutes())
+  }
+  return `${clockOf(first)} \u{2192} ${clockOf(last)} \u{00B7} ${formatDuration(ms)}`
+}
+
+export interface DayDetails {
+  rows: [string, string][]
+  title: string
+}
+
+/**
+ * A day always has a title, even with nothing behind it.
+ *
+ * The readout follows the pointer, so a day the calendar draws but never
+ * recorded — a quiet one inside the covered range — has to say so under its own
+ * date rather than blank the slot as the pointer crosses it.
+ */
+export function dayDetails(key: string, day: UsageDay | undefined): DayDetails {
+  if (day === undefined) return { rows: [], title: longDate(key) }
+
+  const rows: [string, string][] = []
+  const add = (label: string, value: string): void => {
+    if (value !== '') rows.push([label, value])
+  }
+
+  add('Prompts', day.prompts > 0 ? formatCount(day.prompts) : '')
+
+  const busiest = day.hours.indexOf(Math.max(...day.hours, 0))
+  if (day.hours.length > 0 && (day.hours[busiest] ?? 0) > 0) {
+    add(
+      'Busiest hour',
+      `${formatClock(busiest * 60)} \u{00B7} ${formatCount(day.hours[busiest] ?? 0)}`
+    )
+  }
+  add('Active', spanOf(day))
+
+  const sessions = Object.keys(day.sessions).length
+  add('Sessions', sessions > 0 ? formatCount(sessions) : '')
+  if (day.promptChars.count > 0) {
+    add('Prompt length', `${Math.round(day.promptChars.sum / day.promptChars.count)} chars average`)
+  }
+  if (day.turnMs.count > 0) {
+    add('Average turn', formatDuration(day.turnMs.sum / day.turnMs.count))
+  }
+
+  if (day.tokens.total > 0) {
+    add('Tokens', formatCompact(day.tokens.total))
+    add(
+      'In / out',
+      `${formatCompact(day.tokens.input)} \u{00B7} ${formatCompact(day.tokens.output)}`
+    )
+    add('Cache read', formatCompact(day.tokens.cacheRead))
+    add('Cost', `${formatUsd(dayCost(day).total)} estimated`)
+  }
+
+  const model = top(day.models)
+  if (model !== null)
+    add('Top model', `${model.name.replace(/^claude-/, '')} \u{00B7} ${model.share}%`)
+  const project = top(day.projects)
+  if (project !== null)
+    add('Top project', `${shortenPath(project.name)} \u{00B7} ${project.share}%`)
+  const branch = top(day.branches)
+  if (branch !== null) add('Top branch', `${branch.name} \u{00B7} ${branch.share}%`)
+
+  return { rows, title: longDate(key) }
+}
+
+const SEPARATOR = ' \u{00B7} '
+
+/**
+ * The day's facts as running lines rather than a table.
+ *
+ * The page already reads this way — the calendar's own summary and the token
+ * chart's caption are both `a · b · c` — and a readout that changes on every
+ * mouse move must not redraw as a block of shifting columns. Fourteen labelled
+ * numbers wrapped into three lines settle into the same shape whichever day
+ * they describe.
+ */
+export function packFacts(rows: [string, string][], width: number, maxLines = 3): string[] {
+  const lines: string[] = []
+  let line = ''
+  for (const [label, value] of rows) {
+    const fact = `${label} ${value}`
+    if (line === '') {
+      line = fact
+      continue
+    }
+    // ponytail: the last line takes the remainder and truncates rather than
+    // dropping facts. Three lines hold a full day past about 90 columns, and
+    // the calendar itself needs more than that to be worth reading.
+    if (line.length + SEPARATOR.length + fact.length > width && lines.length < maxLines - 1) {
+      lines.push(line)
+      line = fact
+      continue
+    }
+    line += SEPARATOR + fact
+  }
+  if (line !== '') lines.push(line)
+  return lines
+}
+
+/** Rows reserved under the calendar: the date, then the facts. */
+export const FACT_LINES = 3
+export const DAY_FACTS_HEIGHT = 1 + FACT_LINES
+
+/**
+ * The readout under the calendar, for when there is no room beside it.
+ *
+ * Running lines rather than columns: at this width a label/value grid would be
+ * mostly gap, and the height is fixed so nothing below shifts as the pointer
+ * crosses the year.
+ */
+export function DayFacts({ details, width }: { details: DayDetails; width: number }) {
+  const t = useTheme()
+  const lines = details.rows.length === 0 ? ['nothing recorded'] : packFacts(details.rows, width)
+
+  return (
+    <box height={DAY_FACTS_HEIGHT} flexDirection="column" flexShrink={0}>
+      <text fg={t.text} selectable={false} wrapMode="none">
+        {details.title}
+      </text>
+      {lines.map((line) => (
+        <text key={line} fg={t.textMuted} selectable={false} wrapMode="none">
+          {truncate(line, width)}
+        </text>
+      ))}
+    </box>
+  )
+}
+
+/**
+ * Two columns, sized so the panel is no taller than the calendar it stands
+ * beside — seven rows of facts inside a border is nine, against the grid's
+ * eleven. One column would be fourteen rows and would set the height of the
+ * whole section.
+ */
+const LABEL_WIDTH = 14
+const VALUE_WIDTH = 22
+/** Between the two columns: the longest value fills its width exactly. */
+const COLUMN_GAP = 2
+const COLUMN_WIDTH = LABEL_WIDTH + VALUE_WIDTH + COLUMN_GAP
+/** Border and padding, both sides. */
+const CHROME = 4
+export const PANEL_WIDTH = COLUMN_WIDTH * 2 + CHROME
+/** The calendar's height, so the panel's own rows can be padded up to it. */
+const PANEL_ROWS = 7
+
+function Column({ rows }: { rows: [string, string][] }) {
+  const t = useTheme()
+  return (
+    <box width={COLUMN_WIDTH} flexDirection="column" flexShrink={0}>
+      {rows.map(([label, value]) => (
+        <box key={`${label}:${value}`} flexDirection="row" flexShrink={0}>
+          <box width={LABEL_WIDTH} flexShrink={0}>
+            <text fg={t.textMuted} selectable={false} wrapMode="none">
+              {label}
+            </text>
+          </box>
+          <text fg={t.text} selectable={false} wrapMode="none">
+            {truncate(value, VALUE_WIDTH)}
+          </text>
+        </box>
+      ))}
+    </box>
+  )
+}
+
+/**
+ * The readout beside the calendar.
+ *
+ * Beside rather than below or over it: the calendar is bounded by what has been
+ * recorded, so it rarely fills the pane, and the room to its right was going
+ * spare. Nothing is covered, nothing has to be dismissed, and the labels line
+ * up in a column instead of running together as prose.
+ *
+ * The date rides the border as a title, so no row has to double as a heading.
+ */
+export function DayPanel({ details }: { details: DayDetails }) {
+  const t = useTheme()
+  // Padded to a constant height: a bare day and a full one must not resize the
+  // panel as the pointer moves between them.
+  const rows: [string, string][] =
+    details.rows.length === 0 ? [['', 'nothing recorded']] : details.rows
+  const perColumn = Math.max(PANEL_ROWS, Math.ceil(rows.length / 2))
+
+  return (
+    <box
+      border
+      borderStyle="rounded"
+      borderColor={t.border}
+      title={details.title}
+      paddingLeft={1}
+      paddingRight={1}
+      width={PANEL_WIDTH}
+      height={PANEL_ROWS + 2}
+      flexDirection="row"
+      flexShrink={0}
+    >
+      <Column rows={rows.slice(0, perColumn)} />
+      <Column rows={rows.slice(perColumn)} />
+    </box>
+  )
+}

package/src/ui/components/stats/format.ts

@@ -0,0 +1,98 @@
+import { localDay } from '../../../services/usage-history/store'
+
+/**
+ * Number and time formatting for the stats screen.
+ *
+ * Separate from `format-number.ts`, which is the shared token formatter: these
+ * are durations, clock times and dates that only this screen renders.
+ */
+
+const MINUTES_IN_HOUR = 60
+const MS_PER_SECOND = 1000
+const MS_PER_MINUTE = 60 * MS_PER_SECOND
+const MS_PER_HOUR = 60 * MS_PER_MINUTE
+
+const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+
+/** Thin spaces rather than commas, matching the History page's existing totals. */
+export function formatCount(value: number): string {
+  return Math.round(value).toLocaleString('en-US').replaceAll(',', ' ')
+}
+
+/** `9h 04` / `22 min` / `41 s`. Picks the largest unit that is not a rounding lie. */
+export function formatDuration(ms: number): string {
+  if (ms <= 0) return '—'
+  if (ms < MS_PER_MINUTE) return `${Math.round(ms / MS_PER_SECOND)} s`
+  if (ms < MS_PER_HOUR) return `${Math.round(ms / MS_PER_MINUTE)} min`
+  const hours = Math.floor(ms / MS_PER_HOUR)
+  const minutes = Math.round((ms % MS_PER_HOUR) / MS_PER_MINUTE)
+  return `${hours}h ${String(minutes).padStart(2, '0')}`
+}
+
+/**
+ * A lifetime span as `78d 23h`.
+ *
+ * `formatDuration` counts in hours all the way up, which is right for a session
+ * and useless for a total: `1894h 58` is a number nobody reads as an amount of
+ * time. Two days is where the hour stops being the unit that means something.
+ */
+export function formatSpan(ms: number): string {
+  const hours = ms / MS_PER_HOUR
+  if (hours < 48) return formatDuration(ms)
+  return `${Math.floor(hours / 24)}d ${Math.round(hours % 24)}h`
+}
+
+/** Minutes past local midnight as `09:12`. */
+export function formatClock(minutes: number): string {
+  const hours = Math.floor(minutes / MINUTES_IN_HOUR)
+  return `${String(hours).padStart(2, '0')}:${String(minutes % MINUTES_IN_HOUR).padStart(2, '0')}`
+}
+
+/** The last two path segments — `Documents/aimux` says more than `aimux` and still fits. */
+export function shortenPath(path: string): string {
+  return path
+    .split('/')
+    .filter((part) => part !== '')
+    .slice(-2)
+    .join('/')
+}
+
+/** `2026-03-14` as `Mar 14`. Empty in, empty out — a record with no day shows none. */
+export function formatDayLabel(key: string): string {
+  if (key === '') return ''
+  const [, month, day] = key.split('-').map(Number)
+  const name = MONTHS[(month ?? 1) - 1]
+  if (name === undefined) return key
+  return `${name} ${day ?? ''}`
+}
+
+/**
+ * The ruler under a daily chart: a date every seventh bar, blank between.
+ *
+ * Weekly rather than daily so the labels have room to breathe instead of
+ * colliding into a smear, and counted back from the last bar because that bar is
+ * today — the one date on the ruler worth reading.
+ */
+export function weeklyLabels(count: number, today: Date): string[] {
+  return Array.from({ length: count }, (_, index) => {
+    if ((count - 1 - index) % 7 !== 0) return ''
+    const date = new Date(today)
+    date.setDate(date.getDate() - (count - 1 - index))
+    return formatDayLabel(localDay(date))
+  })
+}
+
+export function formatPercent(part: number, whole: number): string {
+  if (whole <= 0) return '—'
+  return `${Math.round((part / whole) * 100)}%`
+}
+
+/** Keystrokes as a distance, at roughly the travel of one key press. */
+const KEY_TRAVEL_MM = 0.8
+
+export function formatFingerDistance(keys: number): string {
+  const metres = (keys * KEY_TRAVEL_MM) / 1000
+  if (metres >= 1000) return `${(metres / 1000).toFixed(1)} km`
+  if (metres >= 1) return `${metres.toFixed(0)} m`
+  return `${(metres * 100).toFixed(0)} cm`
+}