@brimveyn/aimux 1.22.10 → 1.22.12

package/src/ui/components/modals/app/ai-usage-modal.tsx

@@ -1,5 +1,8 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
-import type { ReactNode } from 'react'
+import type { RGBA } from '@opentui/core'
+
+import { useTerminalDimensions } from '@opentui/react'
+import { type ReactNode, useEffect, useMemo, useState } from 'react'
 
 import type {
   UsagePaceStage,
@@ -7,8 +10,24 @@ import type {
   UsageWindow,
 } from '../../../../services/ai-usage/types'
 
+import {
+  buildHeatmap,
+  coveredWeeks,
+  type HeatmapCell,
+  mixColor,
+  monthRuler,
+  promptCounts,
+  summarizeDays,
+} from '../../../../services/usage-history/stats'
+import {
+  readUsageHistory,
+  type UsageDays,
+  type UsageHistoryFile,
+} from '../../../../services/usage-history/store'
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
+import { formatCompact } from '../../../format-number'
 import { useTheme } from '../../../theme'
+import { truncate } from '../../../truncate'
 import { uiTokens } from '../../../ui-tokens'
 import { ModalShell } from '../shared/modal-shell'
 
@@ -55,34 +74,63 @@ function paceStageIsBehind(stage: UsagePaceStage): boolean {
   return stage === 'behind' || stage === 'farBehind' || stage === 'slightlyBehind'
 }
 
-export function AIUsageModal() {
+const TOOLS: AIUsageTool[] = ['claude', 'codex']
+const PAGE_LABELS = ['Live', 'History'] as const
+
+/** A year of weeks plus the gutter needs ~58 columns, so History takes the terminal where Live stays a popover. */
+const HISTORY_MAX_WIDTH = 104
+
+export function AIUsageModal({ page }: { page: number }) {
+  const dimensions = useTerminalDimensions()
+  const isHistory = page === 1
+
+  const width = isHistory
+    ? Math.max(uiTokens.modalWidth.md, Math.min(HISTORY_MAX_WIDTH, dimensions.width - 8))
+    : uiTokens.modalWidth.md
+
+  return (
+    <ModalShell title="AI usage" keybindsModeId="modal.ai-usage" width={width} listGap={1}>
+      <PageTabs active={page} />
+      {isHistory ? <HistoryPage width={width} /> : <LivePage />}
+    </ModalShell>
+  )
+}
+
+function PageTabs({ active }: { active: number }) {
+  const t = useTheme()
+  return (
+    <box flexDirection="row" gap={2}>
+      {PAGE_LABELS.map((label, index) => (
+        <text key={label} fg={index === active ? t.text : t.textMuted} selectable={false}>
+          {label}
+        </text>
+      ))}
+    </box>
+  )
+}
+
+function LivePage() {
   const t = useTheme()
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
-  const tools: AIUsageTool[] = ['claude', 'codex']
-  const sections = tools
-    .map((tool) => ({ snap: snapshots[tool], tool }))
-    .filter((s): s is { snap: UsageSnapshot; tool: AIUsageTool } => s.snap !== undefined)
+  const sections = TOOLS.map((tool) => ({ snap: snapshots[tool], tool })).filter(
+    (s): s is { snap: UsageSnapshot; tool: AIUsageTool } => s.snap !== undefined
+  )
+
+  if (sections.length === 0) {
+    return (
+      <text fg={t.textMuted} selectable={false}>
+        no data yet — collecting…
+      </text>
+    )
+  }
 
   return (
-    <ModalShell
-      title="AI usage"
-      keybindsModeId="modal.ai-usage"
-      width={uiTokens.modalWidth.md}
-      listGap={1}
-    >
-      {sections.length === 0 ? (
-        <text fg={t.textMuted} selectable={false}>
-          no data yet — collecting…
-        </text>
-      ) : (
-        <box flexDirection="column" gap={1}>
-          {sections.map(({ snap, tool }) => (
-            <ToolSection key={tool} snap={snap} tool={tool} />
-          ))}
-        </box>
-      )}
-    </ModalShell>
+    <box flexDirection="column" gap={1}>
+      {sections.map(({ snap, tool }) => (
+        <ToolSection key={tool} snap={snap} tool={tool} />
+      ))}
+    </box>
   )
 }
 
@@ -191,3 +239,282 @@ function PaceLine({ pace }: { pace: NonNullable<UsageWindow['pace']> }) {
     </text>
   )
 }
+
+/** One block per day, shaded by colour. Varying the glyph (`░▒▓█`) instead produced an indistinct mass. */
+const CELL = '\u{2588}'
+const ROW_LABELS = ['Mon', '', 'Wed', '', 'Fri', '', ''] as const
+const ROW_KEYS = ['mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'] as const
+const GUTTER = 5
+const COLUMN_GAP = 3
+
+/**
+ * Width on the box, never on the text: an empty <text> is not zero columns wide,
+ * so `Mon` and a padded blank did not start at the same column and the grid came
+ * out as a brick wall. Padding inside one string is fine; across siblings it is not.
+ */
+function Gutter({ label }: { label: string }) {
+  const t = useTheme()
+  return (
+    <box width={GUTTER} flexShrink={0}>
+      <text fg={t.textMuted} selectable={false}>
+        {label}
+      </text>
+    </box>
+  )
+}
+
+function SectionHeader({ label, note }: { label: string; note?: string }) {
+  const t = useTheme()
+  return (
+    <box flexDirection="row" justifyContent="space-between">
+      <text fg={t.textMuted} selectable={false}>
+        {label}
+      </text>
+      {note != null && note !== '' ? (
+        <text fg={t.textMuted} selectable={false}>
+          {note}
+        </text>
+      ) : null}
+    </box>
+  )
+}
+
+/** Width of the `input` / `output` / `cache` label column. */
+const LABEL_WIDTH = 11
+
+function LabelledRow({ label, value }: { label: string; value: string }) {
+  const t = useTheme()
+  return (
+    <box flexDirection="row">
+      <box width={LABEL_WIDTH} flexShrink={0}>
+        <text fg={t.textMuted} selectable={false}>
+          {label}
+        </text>
+      </box>
+      <text fg={t.text} selectable={false}>
+        {value}
+      </text>
+    </box>
+  )
+}
+
+function HeatRow({
+  cells,
+  cellWidth,
+  label,
+  ramp,
+}: {
+  cells: HeatmapCell[]
+  cellWidth: number
+  label: string
+  ramp: (string | RGBA)[]
+}) {
+  const t = useTheme()
+
+  // One <text> per colour run, not per cell: a full year is 371 cells.
+  const runs: { color: RGBA | string; start: number; text: string }[] = []
+  for (const [index, cell] of cells.entries()) {
+    const color = ramp[cell.level] ?? t.textMuted
+    const glyph = (cell.day === '' ? ' ' : CELL).repeat(cellWidth)
+    const last = runs.at(-1)
+    if (last !== undefined && last.color === color) last.text += glyph
+    else runs.push({ color, start: index, text: glyph })
+  }
+
+  return (
+    <box flexDirection="row">
+      <Gutter label={label} />
+      {runs.map((run) => (
+        <text key={run.start} fg={run.color} selectable={false}>
+          {run.text}
+        </text>
+      ))}
+    </box>
+  )
+}
+
+function Legend({ cellWidth, ramp }: { cellWidth: number; ramp: (string | RGBA)[] }) {
+  const t = useTheme()
+  return (
+    <box flexDirection="row">
+      <Gutter label="" />
+      <text fg={t.textMuted} selectable={false}>
+        less
+      </text>
+      <box width={1} flexShrink={0} />
+      {ramp.map((color, index) => (
+        <text key={color + String(index)} fg={color} selectable={false}>
+          {CELL.repeat(cellWidth)}
+        </text>
+      ))}
+      <box width={1} flexShrink={0} />
+      <text fg={t.textMuted} selectable={false}>
+        more
+      </text>
+    </box>
+  )
+}
+
+/** Right-hand `  2.8B  45%` block, fixed so values line up down the column. */
+const VALUE_WIDTH = 12
+
+/**
+ * One ranked table. Columns are boxes, not padded strings; two side by side line
+ * up because they share a width. Sizing each to its own longest name gave the
+ * tables unrelated geometries and stranded `main` 45 columns from its number.
+ */
+function TopColumn({
+  entries,
+  title,
+  total,
+  width,
+}: {
+  entries: [string, number][]
+  title: string
+  total: number
+  width: number
+}) {
+  const t = useTheme()
+  const nameWidth = Math.max(4, width - VALUE_WIDTH)
+
+  return (
+    <box flexDirection="column" width={width} flexShrink={0}>
+      <text fg={t.textMuted} selectable={false}>
+        {title}
+      </text>
+      {entries.map(([name, value]) => (
+        <box key={name} flexDirection="row">
+          <box width={nameWidth} flexShrink={0}>
+            <text fg={t.text} selectable={false}>
+              {truncate(name, nameWidth)}
+            </text>
+          </box>
+          {/* Padding inside one node, so nothing here is a trailing space. */}
+          <text fg={t.text} selectable={false}>
+            {formatCompact(value).padStart(7) +
+              (total > 0 ? `${Math.round((value / total) * 100)}%` : '').padStart(5)}
+          </text>
+        </box>
+      ))}
+    </box>
+  )
+}
+
+function HistoryPage({ width }: { width: number }) {
+  const t = useTheme()
+  const [history, setHistory] = useState<UsageHistoryFile | null>(null)
+
+  useEffect(() => {
+    // Synchronous, and ~100 KB even after a full year of rollups.
+    setHistory(readUsageHistory())
+  }, [])
+
+  // borderSubtle rather than a background token: backgrounds resolve to alpha 0
+  // in transparent mode. Above the early returns — hooks cannot be conditional.
+  const ramp = useMemo(
+    () => [
+      t.borderSubtle,
+      mixColor(t.borderSubtle, t.success, 0.35),
+      mixColor(t.borderSubtle, t.success, 0.6),
+      mixColor(t.borderSubtle, t.success, 0.82),
+      t.success,
+    ],
+    [t.borderSubtle, t.success]
+  )
+
+  if (history === null) {
+    return (
+      <text fg={t.textMuted} selectable={false}>
+        reading history…
+      </text>
+    )
+  }
+
+  const claude: UsageDays = history.tools.claude ?? {}
+  const codex: UsageDays = history.tools.codex ?? {}
+
+  if (Object.keys(claude).length === 0 && Object.keys(codex).length === 0) {
+    return (
+      <text fg={t.textMuted} selectable={false}>
+        no history yet — the first rollup runs in the background; reopen in a minute
+      </text>
+    )
+  }
+
+  const inner = width - 4
+  const today = new Date()
+  // Bounded by what is recorded: empty months predating the first rollup read as broken.
+  const weeks = coveredWeeks(claude, today, Math.max(4, Math.min(53, inner - GUTTER)))
+  // Terminal cells are ~2x taller than wide, so a two-column day is roughly square.
+  const cellWidth = weeks * 2 + GUTTER <= inner ? 2 : 1
+  const grid = buildHeatmap(promptCounts(claude), weeks, today)
+  const summary = summarizeDays(claude)
+  const codexSummary = summarizeDays(codex)
+
+  const average =
+    summary.promptDays === 0 ? 0 : Math.round(summary.totalPrompts / summary.promptDays)
+  const { tokens } = summary
+  // `2 * columnWidth + COLUMN_GAP <= inner` by construction.
+  const columnWidth = Math.max(16, Math.floor((inner - COLUMN_GAP) / 2))
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <box flexDirection="column">
+        <SectionHeader
+          label="ACTIVITY"
+          note={`${summary.totalPrompts.toLocaleString('en-US').replaceAll(',', ' ')} prompts over ${summary.promptDays} days · ${average} avg · ${summary.peakPrompts} peak`}
+        />
+        <box flexDirection="row">
+          <Gutter label="" />
+          <text fg={t.textMuted} selectable={false}>
+            {monthRuler(grid, weeks, cellWidth)}
+          </text>
+        </box>
+        {grid.map((cells, index) => (
+          <HeatRow
+            key={ROW_KEYS[index]}
+            cells={cells}
+            cellWidth={cellWidth}
+            label={ROW_LABELS[index] ?? ''}
+            ramp={ramp}
+          />
+        ))}
+        <Legend cellWidth={cellWidth} ramp={ramp} />
+      </box>
+
+      <box flexDirection="column">
+        <SectionHeader
+          label="TOKENS"
+          note={`${summary.tokenDays} days retained · ${formatCompact(tokens.total)} total`}
+        />
+        <LabelledRow label="input" value={formatCompact(tokens.input)} />
+        <LabelledRow label="output" value={formatCompact(tokens.output)} />
+        <LabelledRow
+          label="cache"
+          value={`${formatCompact(tokens.cacheRead)} read · ${formatCompact(tokens.cacheWrite)} written`}
+        />
+        {codexSummary.tokens.total > 0 ? (
+          <LabelledRow
+            label="codex"
+            value={`${formatCompact(codexSummary.tokens.total)} over ${codexSummary.tokenDays} days`}
+          />
+        ) : null}
+      </box>
+
+      <box flexDirection="row" gap={COLUMN_GAP}>
+        <TopColumn
+          entries={summary.models}
+          title="MODELS"
+          total={summary.modelTotal}
+          width={columnWidth}
+        />
+        <TopColumn
+          entries={summary.branches}
+          title="BRANCHES"
+          total={summary.branchTotal}
+          width={columnWidth}
+        />
+      </box>
+    </box>
+  )
+}

package/src/ui/components/overlays/ai-usage/ai-usage-indicator.tsx

@@ -4,6 +4,7 @@ import { useCallback } from 'react'
 
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { formatCompact } from '../../../format-number'
 import { useTheme } from '../../../theme'
 
 /** nf-cod-claude / nf-cod-openai. Needs a nerd font, like the status bar separators. */
@@ -12,12 +13,6 @@ const ICON: Record<AIUsageTool, string> = {
   codex: '\u{ec81}',
 }
 
-function formatTokens(total: number): string {
-  if (total >= 1_000_000) return `${(total / 1_000_000).toFixed(1)}M`
-  if (total >= 1_000) return `${(total / 1_000).toFixed(1)}k`
-  return String(total)
-}
-
 export function AIUsageIndicator() {
   const t = useTheme()
   const enabled = useAIUsageStore((s) => s.enabled)
@@ -65,7 +60,7 @@ export function AIUsageIndicator() {
         }
 
         const value =
-          snap.percent !== null ? `${Math.round(snap.percent)}%` : formatTokens(snap.tokens.total)
+          snap.percent !== null ? `${Math.round(snap.percent)}%` : formatCompact(snap.tokens.total)
 
         return (
           <box key={tool} flexDirection="row">

package/src/ui/format-number.ts

@@ -0,0 +1,12 @@
+/**
+ * Token counts, short enough for a status bar and a stats table alike.
+ *
+ * One function rather than one per surface: the indicator and the usage modal
+ * had drifted to `1.2k` and `1.2K` for the same number.
+ */
+export function formatCompact(value: number): string {
+  if (value >= 1e9) return `${(value / 1e9).toFixed(1)}B`
+  if (value >= 1e6) return `${(value / 1e6).toFixed(1)}M`
+  if (value >= 1e3) return `${(value / 1e3).toFixed(1)}k`
+  return String(value)
+}

package/src/ui/root.tsx

@@ -249,7 +249,7 @@ function renderModal(
         />
       )
     case 'ai-usage':
-      return <AIUsageModal />
+      return <AIUsageModal page={modal.selectedIndex} />
     case 'workspace-delete-confirm':
       return (
         <WorkspaceDeleteConfirm