@brimveyn/aimux 1.22.12 → 1.23.0

package/src/ui/components/stats/stats-view.tsx

@@ -0,0 +1,153 @@
+import type { ScrollBoxRenderable } from '@opentui/core'
+
+import { useTerminalDimensions } from '@opentui/react'
+import { memo, useCallback, useEffect, useRef } from 'react'
+
+import { useAppStore } from '../../../state/app-store'
+import { clampBarWidth } from '../../../state/bars'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { STATS_PAGES, statsPageAt } from '../../../state/stats-pages'
+import { useTheme } from '../../theme'
+import { ListItem } from '../primitives/list-item'
+import { AimuxPage } from './aimux-page'
+import { ProjectsPage } from './projects-page'
+import { UsagePage } from './usage-page'
+import { useStatsData } from './use-stats-data'
+
+const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+
+/**
+ * The stats screen.
+ *
+ * Same shape as the settings screen — a nav column exactly where the left bar
+ * stands, so opening it does not shift the column under the cursor, and a
+ * bordered content pane where the terminal would be. Read-only: nothing here
+ * dispatches anything but page selection.
+ */
+export const StatsView = memo(function StatsView() {
+  const t = useTheme()
+  const stats = useAppStore((s) => s.stats)
+  const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
+  const dimensions = useTerminalDimensions()
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const data = useStatsData()
+
+  const page = statsPageAt(stats.pageIndex)
+
+  // The reducer owns the offset but cannot know how tall the page renders, so
+  // the scrollbox is what actually bounds it: push the requested offset in, read
+  // back what it accepted, and tell the reducer. Without the read-back the
+  // offset keeps climbing past the bottom of the page and the way up is a dead
+  // zone as long as the overshoot.
+  useEffect(() => {
+    const box = scrollRef.current
+    if (box === null) return
+    box.scrollTop = stats.scrollTop
+    // A box that has not been laid out yet reports no height, and its clamp
+    // would snap every offset to zero. Wait for the frame that measures it.
+    if (box.scrollHeight <= 0) return
+    if (box.scrollTop !== stats.scrollTop) {
+      dispatchGlobal({ scrollTop: box.scrollTop, type: 'stats-scroll-settled' })
+    }
+  }, [stats.scrollTop, stats.pageIndex])
+
+  const handlePageClick = useCallback((index: number) => {
+    dispatchGlobal({ pageIndex: index, type: 'stats-select-page' })
+  }, [])
+
+  const handleClose = useCallback(() => {
+    dispatchGlobal({ type: 'exit-stats' })
+  }, [])
+
+  // Same 1-cell seam the bar draws between itself and the terminal, so the two
+  // views line up to the column.
+  const navContentWidth = Math.max(1, navWidth - 1)
+  const contentWidth = Math.max(24, dimensions.width - navWidth - 2)
+
+  let body = null
+  if (data === null) {
+    body = (
+      <box paddingLeft={2}>
+        <text fg={t.textMuted} selectable={false}>
+          reading history…
+        </text>
+      </box>
+    )
+  } else {
+    switch (page.id) {
+      case 'usage':
+        body = <UsagePage data={data} width={contentWidth} />
+        break
+      case 'projects':
+        body = <ProjectsPage data={data} width={contentWidth} />
+        break
+      case 'aimux':
+        body = <AimuxPage data={data} width={contentWidth} />
+        break
+      default:
+        page.id satisfies never
+    }
+  }
+
+  return (
+    <box flexDirection="row" flexGrow={1} overflow="hidden">
+      <box width={navWidth} flexDirection="row" overflow="hidden" backgroundColor={t.background}>
+        <box width={navContentWidth} flexDirection="column" overflow="hidden">
+          <box paddingLeft={1} paddingRight={1}>
+            <text fg={t.textMuted}>Stats</text>
+          </box>
+          <box flexGrow={1} flexShrink={1} flexDirection="column" overflow="hidden">
+            {STATS_PAGES.map((entry, index) => (
+              <ListItem
+                key={entry.id}
+                active={index === stats.pageIndex}
+                index={index}
+                onClickIndex={handlePageClick}
+                title={
+                  <text fg={index === stats.pageIndex ? t.text : t.textMuted}>
+                    {`${entry.glyph} ${entry.label}`}
+                  </text>
+                }
+                trailing={index === stats.pageIndex ? <text fg={t.primary}>›</text> : undefined}
+              />
+            ))}
+          </box>
+          <box flexDirection="row" flexShrink={0} paddingLeft={1} paddingRight={1}>
+            <text fg={t.textMuted} onMouseDown={handleClose}>
+              ‹ Close
+            </text>
+          </box>
+        </box>
+        <box width={1} flexShrink={0} backgroundColor={t.border} />
+      </box>
+      {/* The pane the terminal would be in, with the same border — the content
+          keeps the inset it had instead of jumping to the edge of the screen. */}
+      <box
+        border
+        borderColor={t.borderActive}
+        title={`${page.glyph} ${page.label}`}
+        padding={0}
+        flexDirection="column"
+        flexGrow={1}
+        backgroundColor={t.background}
+      >
+        {data?.unreadable === true ? (
+          <box paddingLeft={2} flexShrink={0}>
+            <text fg={t.error} selectable={false}>
+              usage-history.json did not parse — nothing is being recorded over it
+            </text>
+          </box>
+        ) : null}
+        <scrollbox
+          ref={scrollRef}
+          scrollY
+          flexGrow={1}
+          flexShrink={1}
+          contentOptions={COLUMN_CONTENT_OPTIONS}
+        >
+          {body}
+        </scrollbox>
+      </box>
+    </box>
+  )
+})

package/src/ui/components/stats/usage-page.tsx

@@ -0,0 +1,291 @@
+import { dayCost, formatUsd, totalCost } from '../../../services/usage-history/cost'
+import {
+  daysBetween,
+  hourTotals,
+  lastDays,
+  parseDayKey,
+  streaks,
+  typicalDay,
+  weekdayTotals,
+} from '../../../services/usage-history/insights'
+import { summarizeDays } from '../../../services/usage-history/stats'
+import { formatCompact } from '../../format-number'
+import { chartColumns, fitShape } from './chart'
+import { formatClock, formatCount, formatPercent, weeklyLabels } from './format'
+import { Heatmap, HeatmapLegend, heatmapWidth, useHeatmapRamp } from './heatmap'
+import { QuotaSection } from './quotas'
+import {
+  BarRow,
+  GLYPH,
+  Muted,
+  pageLayout,
+  type PageTile,
+  Section,
+  StatsPage,
+  TwoColumn,
+  VBarChart,
+} from './shared'
+import { isEmpty, type StatsData } from './use-stats-data'
+
+/**
+ * Usage — quotas and the shape of the work, on one page.
+ *
+ * Quotas and activity were two pages answering one question: how much am I
+ * using this. Splitting them meant looking at a gauge on one screen and at the
+ * days that filled it on another.
+ *
+ * There are no summary tables here. A table earns its place when several
+ * unrelated numbers have to be read against each other; a row of totals nobody
+ * compares is just a border drawn around four numbers, and the same numbers sit
+ * better on the headline row or in the charts that show how they got there.
+ */
+
+/** Sunday first, like the calendar's rows — one week order on the page. */
+const WEEKDAY_LABELS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] as const
+
+/**
+ * Every fourth hour, at module scope so the ruler is not a fresh array each frame.
+ *
+ * Six labels rather than twenty-four: the reader is looking for where the mass
+ * of the day sits, and a number under every column would draw more ink than the
+ * columns do.
+ */
+const HOUR_LABELS = Array.from({ length: 24 }, (_, hour) =>
+  hour % 4 === 0 ? String(hour).padStart(2, '0') : ''
+)
+/** Tall enough to show the shape of a day, short enough to sit under Quotas. */
+const HOUR_HEIGHT = 6
+
+/**
+ * `claude-haiku-4-5-20251001` as `haiku-4-5`. The vendor prefix is the same on
+ * every row and the release date is a build stamp, not something a reader is
+ * comparing models on.
+ */
+function modelLabel(model: string): string {
+  return model.replace(/^claude-/, '').replace(/-\d{8}$/, '')
+}
+
+/** Notional cost per day over the last `span` recorded days. */
+function recentBurn(data: StatsData, span = 7): { cost: number; days: number } {
+  let cost = 0
+  let days = 0
+  for (const [key, day] of Object.entries(data.claude)) {
+    if (daysBetween(parseDayKey(key), data.todayDate) >= span) continue
+    days += 1
+    cost += dayCost(day).total
+  }
+  return { cost: days === 0 ? 0 : cost / days, days }
+}
+
+function monthCost(data: StatsData): number {
+  const prefix = data.today.slice(0, 7)
+  let cost = 0
+  for (const [key, day] of Object.entries(data.claude)) {
+    if (key.startsWith(prefix)) cost += dayCost(day).total
+  }
+  return cost
+}
+
+function usageTiles(prompts: number, perDay: number, streak: number, month: number): PageTile[] {
+  return [
+    { glyph: GLYPH.calendar, label: 'Prompts', value: formatCount(prompts) },
+    { glyph: GLYPH.clock, label: 'Per day', value: formatCount(perDay) },
+    { glyph: GLYPH.streak, label: 'Streak', value: `${streak}d` },
+    { glyph: GLYPH.cost, label: 'Month', value: `${formatUsd(month)} est.` },
+  ]
+}
+
+export function UsagePage({ data, width }: { data: StatsData; width: number }) {
+  const ramp = useHeatmapRamp()
+  const now = new Date()
+
+  const { split, usable } = pageLayout(width)
+  const { leftWidth, rightWidth } = split
+
+  const summary = summarizeDays(data.claude)
+  const codexSummary = summarizeDays(data.codex)
+  const streak = streaks(data.claude, data.todayDate)
+  const hours = hourTotals(data.claude)
+  const weekdays = weekdayTotals(data.claude)
+  const typical = typicalDay(data.claude)
+
+  const claudeCost = totalCost(data.claude)
+  const codexCost = totalCost(data.codex)
+  const month = monthCost(data)
+  const burn = recentBurn(data)
+
+  const average =
+    summary.promptDays === 0 ? 0 : Math.round(summary.totalPrompts / summary.promptDays)
+  const hoursTotal = hours.reduce((sum, value) => sum + value, 0)
+  const lateHours = hours.slice(22).reduce((sum, value) => sum + value, 0)
+  const peakHour = hours.indexOf(Math.max(...hours))
+  const weekendPrompts = (weekdays[0] ?? 0) + (weekdays[6] ?? 0)
+  const weekTotal = weekdays.reduce((sum, value) => sum + value, 0)
+  const weekdayMax = Math.max(...weekdays)
+  const modelMax = summary.models[0]?.[1] ?? 0
+
+  // Both charts reserve the same eight columns for the axis and its gutter, so
+  // the hours and the days start on the same column of their sections.
+  const hourShape = fitShape(hours.length, leftWidth - 8)
+  const chartDays = chartColumns(usable - 8)
+  const dailyTokens = lastDays(data.claude, chartDays, data.todayDate, (day) => day.tokens.total)
+  const chartLabels = weeklyLabels(chartDays, data.todayDate)
+
+  const hasHistory = !isEmpty(data.claude)
+  const tiles = usageTiles(summary.totalPrompts, average, streak.current, month)
+
+  // The calendar facts, as one muted line rather than a table: nobody reads
+  // "busiest day" against "longest gap", they just want to know each.
+  const calendarFacts = [
+    `${formatCount(summary.promptDays)} active days`,
+    summary.peakPrompts === 0 ? '' : `busiest ${formatCount(summary.peakPrompts)}`,
+    streak.longest === 0 ? '' : `best streak ${streak.longest}d`,
+    streak.longestGapDays === 0 ? '' : `longest gap ${streak.longestGapDays}d`,
+  ]
+    .filter((part) => part !== '')
+    .join(' \u{00B7} ')
+
+  // Both tools, and what the estimate does not cover. Every Codex model is
+  // unpriced today, so reporting its cost as `$0.00` would present the absence
+  // of a published rate as a measurement of zero.
+  const unpriced = claudeCost.unpricedTokens + codexCost.unpricedTokens
+  const costFacts = [
+    `${formatCompact(summary.tokens.total + codexSummary.tokens.total)} tokens`,
+    `${formatUsd(claudeCost.total + codexCost.total)} estimated`,
+    `${formatUsd(claudeCost.saved + codexCost.saved)} saved by cache`,
+    unpriced === 0 ? '' : `${formatCompact(unpriced)} at no published price`,
+    'not metered',
+  ]
+    .filter((part) => part !== '')
+    .join(' \u{00B7} ')
+
+  const left = (
+    <>
+      <QuotaSection now={now} width={leftWidth} />
+
+      <Section
+        glyph={GLYPH.clock}
+        title="Time of day"
+        note={hoursTotal === 0 ? '' : `peak ${formatClock(peakHour * 60)}`}
+        width={leftWidth}
+      >
+        {hoursTotal === 0 ? (
+          <Muted>recorded from the next rollup onward</Muted>
+        ) : (
+          <>
+            <VBarChart
+              bar={hourShape}
+              format={formatCompact}
+              height={HOUR_HEIGHT}
+              labels={HOUR_LABELS}
+              values={hours}
+            />
+            <Muted>
+              {[
+                typical.days === 0
+                  ? ''
+                  : `typical day ${formatClock(typical.startMinutes)} \u{2192} ${formatClock(typical.endMinutes)}`,
+                `${formatPercent(lateHours, hoursTotal)} after 22:00`,
+              ]
+                .filter((part) => part !== '')
+                .join(' \u{00B7} ')}
+            </Muted>
+          </>
+        )}
+      </Section>
+    </>
+  )
+
+  const right = (
+    <>
+      <Section
+        glyph={GLYPH.week}
+        title="Week"
+        note={weekTotal === 0 ? '' : `weekends ${formatPercent(weekendPrompts, weekTotal)}`}
+        width={rightWidth}
+      >
+        {WEEKDAY_LABELS.map((label, index) => (
+          <BarRow
+            key={label}
+            label={label}
+            max={weekdayMax}
+            value={weekdays[index] ?? 0}
+            valueText={formatCount(weekdays[index] ?? 0)}
+            width={rightWidth}
+          />
+        ))}
+      </Section>
+
+      <Section
+        glyph={GLYPH.models}
+        title="Models"
+        note={formatCompact(summary.modelTotal)}
+        width={rightWidth}
+      >
+        {summary.models.length === 0 ? (
+          <Muted>no model attribution recorded</Muted>
+        ) : (
+          summary.models.map(([model, value]) => (
+            <BarRow
+              key={model}
+              label={modelLabel(model)}
+              max={modelMax}
+              value={value}
+              valueText={formatCompact(value)}
+              width={rightWidth}
+            />
+          ))
+        )}
+      </Section>
+    </>
+  )
+
+  return (
+    <StatsPage tiles={tiles} usable={usable}>
+      {hasHistory ? (
+        <Section
+          glyph={GLYPH.calendar}
+          title="Activity"
+          note={<HeatmapLegend ramp={ramp} />}
+          rule={false}
+          // The calendar's own width, not the pane's: the legend belongs over
+          // the grid's top-right corner, and the grid is only as wide as the
+          // history is long. This section draws no rule, so nothing else uses it.
+          width={heatmapWidth(data.claude, data.todayDate, usable)}
+        >
+          <Heatmap
+            days={data.claude}
+            ramp={ramp}
+            summary={calendarFacts}
+            today={data.todayDate}
+            width={usable}
+          />
+        </Section>
+      ) : (
+        <Muted>no history yet — the first rollup runs in the background</Muted>
+      )}
+
+      <TwoColumn split={split}>
+        {left}
+        {right}
+      </TwoColumn>
+
+      {hasHistory ? (
+        <Section
+          glyph={GLYPH.tokens}
+          title="Tokens"
+          note={burn.days === 0 ? '' : `${formatUsd(burn.cost)} a day`}
+          width={usable}
+        >
+          <VBarChart
+            caption={`last ${chartDays} days`}
+            format={formatCompact}
+            labels={chartLabels}
+            values={dailyTokens}
+          />
+          <Muted>{costFacts}</Muted>
+        </Section>
+      ) : null}
+    </StatsPage>
+  )
+}

package/src/ui/components/stats/use-stats-data.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+
+import { type CounterDays, readCounters } from '../../../services/aimux-counters/store'
+import { localDay, readUsageHistory, type UsageDays } from '../../../services/usage-history/store'
+
+export interface StatsData {
+  claude: UsageDays
+  codex: UsageDays
+  counters: CounterDays
+  /** The history file exists but did not parse, so every number here is missing one. */
+  unreadable: boolean
+  /** Local day key for "today", captured once so every page agrees on it. */
+  today: string
+  todayDate: Date
+}
+
+/**
+ * Reads both on-disk files once, when the screen opens.
+ *
+ * Synchronous and small: the history file is ~100 KB after a full year and the
+ * counters file is a few KB. Re-reading on every page change would reparse them
+ * for nothing, so the read is tied to the screen, not to the page.
+ */
+export function useStatsData(): StatsData | null {
+  const [data, setData] = useState<StatsData | null>(null)
+
+  useEffect(() => {
+    const history = readUsageHistory()
+    const todayDate = new Date()
+    setData({
+      claude: history.tools.claude ?? {},
+      codex: history.tools.codex ?? {},
+      counters: readCounters().days,
+      today: localDay(todayDate),
+      todayDate,
+      // Below every real version: the file is there and unparseable, which also
+      // means the rollup is refusing to write over it. Silent until now.
+      unreadable: history.version < 1,
+    })
+  }, [])
+
+  return data
+}
+
+/** True when nothing has been recorded yet, so a page can say so instead of rendering zeros. */
+export function isEmpty(days: UsageDays): boolean {
+  return Object.keys(days).length === 0
+}

package/src/ui/root.tsx

@@ -25,8 +25,8 @@ import { SplitLayout } from './components/layout/split-layout'
 import { StatusBar } from './components/layout/status-bar'
 import { TerminalPane } from './components/layout/terminal-pane'
 import { TopTabBar } from './components/layout/top-tab-bar'
-import { AIUsageModal } from './components/modals/app/ai-usage-modal'
 import { HelpModal } from './components/modals/app/help-modal'
+import { QuotasModal } from './components/modals/app/quotas-modal'
 import { UpdateAvailableModal } from './components/modals/app/update-available-modal'
 import { GitCommitModal } from './components/modals/git/git-commit-modal'
 import { CreateProjectModal } from './components/modals/projects/create-project-modal'
@@ -45,6 +45,7 @@ import { ContextMenuOverlay } from './components/overlays/context-menu/context-m
 import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
 import { ToastViewport } from './components/overlays/toast/toast-viewport'
 import { SettingsView } from './components/settings/settings-view'
+import { StatsView } from './components/stats/stats-view'
 import { useTheme } from './theme'
 
 const EMPTY_WORKSPACES: WorkspaceRecord[] = []
@@ -206,6 +207,8 @@ function renderModal(
           cursorPos={modal.cursorPos}
         />
       )
+    case 'quotas':
+      return <QuotasModal />
     case 'update-available':
       return (
         <UpdateAvailableModal
@@ -248,8 +251,6 @@ function renderModal(
           cursorPos={modal.cursorPos}
         />
       )
-    case 'ai-usage':
-      return <AIUsageModal page={modal.selectedIndex} />
     case 'workspace-delete-confirm':
       return (
         <WorkspaceDeleteConfirm
@@ -434,6 +435,9 @@ export function RootView({
   let replacesPanes: ReactNode = null
   if (inGitMode) replacesPanes = <GitView themeId={themeId} />
   else if (inSettings) replacesPanes = <SettingsView />
+  // Read-only, so unlike settings it has no modal that belongs to it and no
+  // second condition: the screen is up exactly while focus is on it.
+  else if (focusMode === 'stats') replacesPanes = <StatsView />
 
   const center =
     replacesPanes !== null ? (