@brimveyn/aimux 1.22.12 → 1.23.0

package/src/state/reducers/stats-state.ts

@@ -0,0 +1,56 @@
+import type { AppAction } from '../actions'
+import type { AppState, StatsUIState } from '../types'
+
+import { STATS_PAGES } from '../stats-pages'
+
+export function emptyStatsUI(): StatsUIState {
+  return { pageIndex: 0, scrollTop: 0 }
+}
+
+function withStats(state: AppState, patch: Partial<StatsUIState>): AppState {
+  return { ...state, stats: { ...state.stats, ...patch } }
+}
+
+function clamp(value: number, max: number): number {
+  if (max < 0) return 0
+  return Math.max(0, Math.min(max, value))
+}
+
+export function reduceStatsState(state: AppState, action: AppAction): AppState | null {
+  switch (action.type) {
+    case 'enter-stats':
+      if (state.focusMode === 'stats') return state
+      // The page is remembered across a close/open within the session; the
+      // scroll inside it is not — reopening lands you at the top of it.
+      return { ...state, focusMode: 'stats', stats: { ...state.stats, scrollTop: 0 } }
+    case 'exit-stats':
+      if (state.focusMode !== 'stats') return state
+      return { ...state, focusMode: 'navigation' }
+    case 'stats-move-page': {
+      const pageIndex = clamp(state.stats.pageIndex + action.delta, STATS_PAGES.length - 1)
+      if (pageIndex === state.stats.pageIndex) return state
+      // A new page is a different length; carrying the old offset into it lands
+      // the viewport somewhere the user never scrolled to.
+      return withStats(state, { pageIndex, scrollTop: 0 })
+    }
+    case 'stats-select-page': {
+      const pageIndex = clamp(action.pageIndex, STATS_PAGES.length - 1)
+      if (pageIndex === state.stats.pageIndex) return state
+      return withStats(state, { pageIndex, scrollTop: 0 })
+    }
+    case 'stats-scroll':
+      // No upper clamp here: the reducer does not know how tall the rendered
+      // page is. The scrollbox is what bounds it, and `stats-scroll-settled`
+      // brings its answer back — without that round trip this offset climbs for
+      // as long as the key is held and the way back up is a dead zone the same
+      // length.
+      return withStats(state, { scrollTop: Math.max(0, state.stats.scrollTop + action.delta) })
+    case 'stats-scroll-settled': {
+      const scrollTop = Math.max(0, action.scrollTop)
+      if (scrollTop === state.stats.scrollTop) return state
+      return withStats(state, { scrollTop })
+    }
+    default:
+      return null
+  }
+}

package/src/state/stats-pages.ts

@@ -0,0 +1,33 @@
+/**
+ * The stats screen's pages, in nav order.
+ *
+ * Lives in the state layer rather than beside the view because the reducer is
+ * what clamps the page cursor: the list of pages is a bound, and a bound the
+ * reducer cannot see is a bound it cannot enforce.
+ *
+ * Three pages, not one per topic. Quotas, token cost and the calendar all answer
+ * "how much am I using this", so they share a page; everything else earns its
+ * own by being a different question.
+ *
+ * Records used to be a fourth. A page of eight one-line trivia rows was mostly
+ * empty, and every row was a record *of* something another page already covers —
+ * so each one now closes the page whose data it comes from.
+ */
+
+export interface StatsPage {
+  glyph: string
+  id: StatsPageId
+  label: string
+}
+
+export type StatsPageId = 'aimux' | 'projects' | 'usage'
+
+export const STATS_PAGES: readonly StatsPage[] = [
+  { glyph: '\u{25D4}', id: 'usage', label: 'Usage' },
+  { glyph: '\u{2632}', id: 'projects', label: 'Projects' },
+  { glyph: '\u{2318}', id: 'aimux', label: 'aimux' },
+]
+
+export function statsPageAt(index: number): StatsPage {
+  return STATS_PAGES[index] ?? STATS_PAGES[0] ?? { glyph: '\u{25D4}', id: 'usage', label: 'Usage' }
+}

package/src/state/store.ts

@@ -8,6 +8,7 @@ import { emptyModal, reduceModalState } from './reducers/modal-state'
 import { reduceMultiRepoState } from './reducers/multi-repo-state'
 import { reduceProjectState } from './reducers/project-state'
 import { emptySettingsUI, reduceSettingsState } from './reducers/settings-state'
+import { emptyStatsUI, reduceStatsState } from './reducers/stats-state'
 import { reduceTabState } from './reducers/tab-state'
 import { reduceUIState } from './reducers/ui-state'
 import { filterSnippets } from './selectors'
@@ -139,6 +140,7 @@ export function createInitialState(
     projectStatuses: {},
     settings: emptySettingsUI(),
     snippets,
+    stats: emptyStatsUI(),
     tabGroupMap: {},
     tabs: [],
     workspaceActivity: {},
@@ -174,6 +176,9 @@ export function appReducer(state: AppState, action: AppAction): AppState {
   const settingsState = reduceSettingsState(state, action)
   if (settingsState) return settingsState
 
+  const statsState = reduceStatsState(state, action)
+  if (statsState) return statsState
+
   switch (action.type) {
     case 'set-snippets':
       return { ...state, snippets: action.snippets }

package/src/state/types.ts

@@ -69,6 +69,7 @@ export type FocusMode =
   | 'command-edit'
   | 'git'
   | 'settings'
+  | 'stats'
 
 export type ModalType =
   | 'new-tab'
@@ -85,7 +86,7 @@ export type ModalType =
   | 'split-picker'
   | 'git-commit'
   | 'update-available'
-  | 'ai-usage'
+  | 'quotas'
   | 'workspace-move'
   | 'workspace-move-confirm'
   | 'workspace-delete-confirm'
@@ -580,8 +581,9 @@ export interface ModalUpdateAvailable extends ModalBase {
   latestVersion: string
 }
 
-export interface ModalAIUsage extends ModalBase {
-  type: 'ai-usage'
+/** The status bar's usage indicator, expanded. Carries nothing: it is a readout. */
+export interface ModalQuotas extends ModalBase {
+  type: 'quotas'
 }
 
 export interface ModalWorkspaceMove extends ModalBase {
@@ -686,7 +688,7 @@ export type ModalState =
   | ModalSnippetEditor
   | ModalGitCommit
   | ModalUpdateAvailable
-  | ModalAIUsage
+  | ModalQuotas
   | ModalWorkspaceMove
   | ModalWorkspaceMoveConfirm
   | ModalWorkspaceDeleteConfirm
@@ -738,6 +740,16 @@ export interface SettingsUIState {
   rowIndex: number
 }
 
+/**
+ * Where the cursor is on the stats screen. Nothing measured lives here — the
+ * numbers are read from disk by the pages that render them.
+ */
+export interface StatsUIState {
+  pageIndex: number
+  /** Rows scrolled from the top of the current page. Reset when the page changes. */
+  scrollTop: number
+}
+
 export interface AppState {
   tabs: TabSession[]
   activeTabId: string | null
@@ -759,6 +771,7 @@ export interface AppState {
   autoCommit: AutoCommitState
   multiRepo: MultiRepoState
   settings: SettingsUIState
+  stats: StatsUIState
   /**
    * Commits each workspace's branch is ahead/behind the ref it forked from,
    * keyed by workspace id. Ephemeral (polled); not persisted to the catalog.

package/src/ui/components/layout/sidebar/project-list.tsx

@@ -37,6 +37,19 @@ const HEADER_TITLE = 'Projects'
  * the one button that opens the settings.
  */
 const SETTINGS_GLYPH = '⚙'
+/**
+ * U+25A4, chosen on the same rule as the gear above: one cell, text presentation,
+ * present in the base fonts. A ▁▄█ mini bar chart reads better but is three cells
+ * wide, which pushes this row past a narrow sidebar.
+ */
+const STATS_GLYPH = '▤'
+const SETTINGS_LABEL = `${SETTINGS_GLYPH} Settings`
+const STATS_LABEL = `${STATS_GLYPH} Stats`
+/** The two entries and the gap between them, so a renamed label re-measures itself. */
+const FOOTER_GAP = 2
+const FOOTER_FULL_WIDTH = SETTINGS_LABEL.length + FOOTER_GAP + STATS_LABEL.length
+/** The row's own left and right padding. */
+const FOOTER_PAD = 2
 
 interface DragState {
   id: string
@@ -183,7 +196,19 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
     dispatchGlobal({ type: 'enter-settings' })
   }, [])
 
+  // Stats sits beside it for the same reason, and because the two are the only
+  // full-screen views the panes step aside for that a mouse can reach at all.
+  const handleOpenStats = useCallback((e: OtuiMouseEvent) => {
+    e.stopPropagation()
+    e.preventDefault()
+    dispatchGlobal({ type: 'enter-stats' })
+  }, [])
+
   const rule = RULE.repeat(Math.max(1, contentWidth))
+  // The bar clamps down to 18 columns, narrower than both labels together, so
+  // below that the second entry drops to its glyph rather than being sliced
+  // mid-word by the overflow.
+  const statsLabel = contentWidth - FOOTER_PAD >= FOOTER_FULL_WIDTH ? STATS_LABEL : STATS_GLYPH
 
   return (
     // Drag and release are handled here, not on the row that started them:
@@ -293,9 +318,15 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
           {rule}
         </text>
       </box>
+      {/* Each entry is its own <text>, with a spacer box between them: one string
+          holding both would make the whole footer a single click target. */}
       <box flexDirection="row" flexShrink={0} paddingLeft={1} paddingRight={1}>
         <text fg={t.textMuted} selectable={false} wrapMode="none" onMouseDown={handleOpenSettings}>
-          {`${SETTINGS_GLYPH} Settings`}
+          {SETTINGS_LABEL}
+        </text>
+        <box width={FOOTER_GAP} flexShrink={1} />
+        <text fg={t.textMuted} selectable={false} wrapMode="none" onMouseDown={handleOpenStats}>
+          {statsLabel}
         </text>
       </box>
     </box>

package/src/ui/components/modals/app/quotas-modal.tsx

@@ -0,0 +1,42 @@
+import { QuotaWindows } from '../../stats/quotas'
+import { ModalShell } from '../shared/modal-shell'
+
+/**
+ * The quota windows, and nothing else.
+ *
+ * What the status-bar indicator is a summary of: clicking it asks "how much is
+ * left", which is one block of the stats screen. Opening the whole screen for
+ * that made the reader find the answer among four other sections and then find
+ * their way back. The screen is still there, behind the Stats button.
+ */
+
+/**
+ * Wider than the shell's usual sizes, and deliberately so: at 56 the reset times
+ * end a column from the border and the block reads as cramped. This one is a
+ * readout, not a list of choices — it can afford the air.
+ */
+const WIDTH = 76
+/** The shell's border and its one column of padding, both sides. */
+const CHROME = 4
+
+export function QuotasModal() {
+  // Read per render like the stats page does: the store pushes a new snapshot
+  // and the relative times ("1m ago") are measured against now, not against
+  // when the modal happened to open.
+  const now = new Date()
+
+  return (
+    <ModalShell
+      title="Quotas"
+      subtitle="live"
+      keybindsModeId="modal.quotas"
+      width={WIDTH}
+      listGap={1}
+    >
+      {/* No projection here. `empty ~Fri 13:02` is worth the width on a page
+          being read; on a glance at what is left it is a second timestamp to
+          parse next to the one that matters. */}
+      <QuotaWindows now={now} projection={false} width={WIDTH - CHROME} />
+    </ModalShell>
+  )
+}

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

@@ -18,11 +18,11 @@ export function AIUsageIndicator() {
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
-  const openModal = useCallback(
+  const openQuotas = useCallback(
     (e: { preventDefault: () => void; stopPropagation: () => void }) => {
       e.preventDefault()
       e.stopPropagation()
-      dispatchGlobal({ type: 'open-ai-usage-modal' })
+      dispatchGlobal({ type: 'open-quotas-modal' })
     },
     []
   )
@@ -36,7 +36,7 @@ export function AIUsageIndicator() {
 
   if (entries.length === 0) {
     return (
-      <box flexDirection="row" onMouseDown={openModal}>
+      <box flexDirection="row" onMouseDown={openQuotas}>
         <text fg={t.textMuted} selectable={false}>
           …
         </text>
@@ -45,7 +45,7 @@ export function AIUsageIndicator() {
   }
 
   return (
-    <box flexDirection="row" gap={2} onMouseDown={openModal}>
+    <box flexDirection="row" gap={2} onMouseDown={openQuotas}>
       {entries.map(({ snap, tool }) => {
         if (!snap) return null
 

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

@@ -14,6 +14,7 @@ import { ListItem } from '../primitives/list-item'
 import { SettingsRow } from './settings-row'
 
 const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+
 /**
  * Share of the window the settings themselves are allowed. Without a cap the
  * value sits on the far edge of a wide terminal, a hundred columns from the label
@@ -81,7 +82,9 @@ export const SettingsView = memo(function SettingsView() {
   }, [])
 
   const section = SETTING_SECTIONS.find((s) => s.id === settings.sectionId)
-  const sectionLabel = section?.label ?? 'Settings'
+  // The glyph rides with the label: a section that could not be found has
+  // neither, and the fallback title stands on its own.
+  const sectionTitle = section === undefined ? 'Settings' : `${section.glyph} ${section.label}`
   const sectionNote = section?.description
   // Same 1-cell seam the bar draws between itself and the terminal, so the two
   // views line up to the column.
@@ -103,7 +106,7 @@ export const SettingsView = memo(function SettingsView() {
                 onClickIndex={handleSectionClick}
                 title={
                   <text fg={section.id === settings.sectionId ? t.text : t.textMuted}>
-                    {section.label}
+                    {`${section.glyph} ${section.label}`}
                   </text>
                 }
                 trailing={
@@ -127,7 +130,7 @@ export const SettingsView = memo(function SettingsView() {
       <box
         border
         borderColor={settings.pane === 'rows' ? t.borderActive : t.border}
-        title={sectionLabel}
+        title={sectionTitle}
         padding={0}
         flexDirection="column"
         flexGrow={1}

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

@@ -0,0 +1,245 @@
+import type { CounterDays } from '../../../services/aimux-counters/store'
+import type { StatsData } from './use-stats-data'
+
+import {
+  lastCounterDays,
+  peakOf,
+  summarizeCounter,
+  sumOf,
+} from '../../../services/aimux-counters/summary'
+import { formatCompact } from '../../format-number'
+import { chartColumns } from './chart'
+import {
+  formatCount,
+  formatDayLabel,
+  formatDuration,
+  formatFingerDistance,
+  formatSpan,
+  weeklyLabels,
+} from './format'
+import {
+  FactGrid,
+  GLYPH,
+  Muted,
+  pageLayout,
+  PageNotice,
+  type PageTile,
+  recordsOf,
+  RecordsSection,
+  Section,
+  StatsPage,
+  TwoColumn,
+  VBarChart,
+} from './shared'
+
+/**
+ * aimux — what the editor itself has seen.
+ *
+ * Two daily series and a block of totals. The series are the point: "12 hours
+ * today" against "6 hours on an average day" is a comparison a reader has to do
+ * in their head, and a chart of the last few weeks does it for them.
+ *
+ * Everything here is a count and nothing else — no key identity, no content, and
+ * nothing that leaves the machine.
+ */
+
+const MS_PER_MINUTE = 60_000
+/** Two charts side by side, short enough that the totals below stay on screen. */
+const CHART_HEIGHT = 7
+
+/** The axis is in minutes so the gridlines land on 30, 60, 120 — round clock numbers. */
+function formatMinutes(minutes: number): string {
+  return formatDuration(minutes * MS_PER_MINUTE)
+}
+
+/** Named rather than inlined so the series is a call's result, not an array built in render. */
+function uptimeMinutes(counters: CounterDays, count: number, today: Date): number[] {
+  return lastCounterDays(counters, count, today, 'uptimeMs').map((ms) => ms / MS_PER_MINUTE)
+}
+
+/**
+ * The lifetime totals, as label/value pairs.
+ *
+ * Counts of unrelated things: a bar between "workspaces" and "lines scrolled"
+ * would encode a comparison nobody is making, so they are simply listed.
+ */
+function builtFacts(counters: CounterDays): [string, string][] {
+  const vertical = sumOf(counters, 'splitsVertical')
+  const splits = vertical + sumOf(counters, 'splitsHorizontal')
+  return [
+    ['Workspaces', formatCount(sumOf(counters, 'workspacesCreated'))],
+    ['Runs', formatCount(sumOf(counters, 'runsStarted'))],
+    ['Tabs', formatCount(sumOf(counters, 'tabsOpened'))],
+    [
+      'Splits',
+      splits === 0
+        ? '0'
+        : `${formatCount(splits)} \u{00B7} ${Math.round((vertical / splits) * 100)}% vertical`,
+    ],
+    ['Snippets', formatCount(sumOf(counters, 'snippetsFired'))],
+    ['Lines scrolled', formatCompact(sumOf(counters, 'scrollLines'))],
+    ['Daemon restarts', formatCount(sumOf(counters, 'daemonRestarts'))],
+    ['Days counted', formatCount(Object.keys(counters).length)],
+  ]
+}
+
+function aimuxTiles(uptimeMs: number, keys: number, runs: number): PageTile[] {
+  return [
+    { glyph: GLYPH.clock, label: 'In aimux', value: formatSpan(uptimeMs) },
+    { glyph: GLYPH.keyboard, label: 'Keys', value: formatCount(keys) },
+    { glyph: GLYPH.distance, label: 'Distance', value: formatFingerDistance(keys) },
+    { glyph: GLYPH.aimux, label: 'Runs', value: formatCount(runs) },
+  ]
+}
+
+export function AimuxPage({ data, width }: { data: StatsData; width: number }) {
+  const { counters, today, todayDate } = data
+
+  // First, before the derivations it would make pointless.
+  if (Object.keys(counters).length === 0) {
+    return (
+      <PageNotice>nothing counted yet — this starts the first time aimux runs with it</PageNotice>
+    )
+  }
+
+  const { split, usable } = pageLayout(width)
+  const { leftWidth, rightWidth } = split
+
+  const uptime = summarizeCounter(counters, 'uptimeMs', today)
+  const keys = summarizeCounter(counters, 'keys', today)
+  const tabs = summarizeCounter(counters, 'tabsOpened', today)
+  const longestRun = peakOf(counters, 'longestRunMs')
+  const dailyUptime = uptime.days === 0 ? 0 : uptime.total / uptime.days
+
+  const uptimeDays = chartColumns(leftWidth - 9)
+  const uptimeSeries = uptimeMinutes(counters, uptimeDays, todayDate)
+  const uptimeLabels = weeklyLabels(uptimeDays, todayDate)
+
+  const keyDays = chartColumns(rightWidth - 8)
+  const keySeries = lastCounterDays(counters, keyDays, todayDate, 'keys')
+  const keyLabels = weeklyLabels(keyDays, todayDate)
+
+  const built = builtFacts(counters)
+
+  // Only records that exist. A row of `—` teaches nothing and reads as broken.
+  const records = recordsOf([
+    longestRun.value === 0
+      ? null
+      : {
+          label: 'Longest run',
+          value: formatDuration(longestRun.value),
+          when: formatDayLabel(longestRun.day),
+        },
+    uptime.best.value === 0
+      ? null
+      : {
+          label: 'Longest day',
+          value: formatDuration(uptime.best.value),
+          when: formatDayLabel(uptime.best.day),
+        },
+    keys.best.value === 0
+      ? null
+      : {
+          label: 'Most keystrokes',
+          value: formatCount(keys.best.value),
+          when: formatDayLabel(keys.best.day),
+        },
+    tabs.best.value === 0
+      ? null
+      : {
+          label: 'Most tabs',
+          value: `${formatCount(tabs.best.value)} opened`,
+          when: formatDayLabel(tabs.best.day),
+        },
+    keys.total === 0
+      ? null
+      : {
+          label: 'Finger mileage',
+          value: formatFingerDistance(keys.total),
+          when: 'at 0.8 mm a key',
+        },
+  ])
+
+  const left = (
+    <Section
+      glyph={GLYPH.clock}
+      title="Time a day"
+      note={uptime.days === 0 ? '' : `${formatDuration(dailyUptime)} on an average day`}
+      width={leftWidth}
+    >
+      {uptime.total === 0 ? (
+        <Muted>counted from the next run onward</Muted>
+      ) : (
+        <>
+          <VBarChart
+            caption={`last ${uptimeDays} days`}
+            format={formatMinutes}
+            height={CHART_HEIGHT}
+            labels={uptimeLabels}
+            values={uptimeSeries}
+          />
+          <Muted>
+            {[
+              `today ${formatDuration(uptime.today)}`,
+              `best ${formatDuration(uptime.best.value)}`,
+              `longest run ${formatDuration(longestRun.value)}`,
+            ].join(' \u{00B7} ')}
+          </Muted>
+        </>
+      )}
+    </Section>
+  )
+
+  const right = (
+    <Section
+      glyph={GLYPH.keyboard}
+      title="Keys a day"
+      note={keys.today === 0 ? '' : `${formatCount(keys.today)} today`}
+      width={rightWidth}
+    >
+      {keys.total === 0 ? (
+        <Muted>counted from the next run onward</Muted>
+      ) : (
+        <>
+          <VBarChart
+            caption={`last ${keyDays} days`}
+            format={formatCompact}
+            height={CHART_HEIGHT}
+            labels={keyLabels}
+            values={keySeries}
+          />
+          <Muted>
+            {[
+              `${formatCompact(keys.total)} all time`,
+              `best ${formatCount(keys.best.value)}`,
+              `${formatFingerDistance(keys.total)} of travel`,
+            ].join(' \u{00B7} ')}
+          </Muted>
+        </>
+      )}
+    </Section>
+  )
+
+  return (
+    <StatsPage
+      tiles={aimuxTiles(uptime.total, keys.total, sumOf(counters, 'runsStarted'))}
+      usable={usable}
+    >
+      <TwoColumn split={split}>
+        {left}
+        {right}
+      </TwoColumn>
+
+      <Section glyph={GLYPH.aimux} title="What you built" note="all time" width={usable}>
+        <FactGrid columns={split.twoUp ? 2 : 1} facts={built} width={usable} />
+      </Section>
+
+      <RecordsSection
+        empty="nothing to beat yet — records appear as aimux is used"
+        records={records}
+        width={usable}
+      />
+      <Muted>A count and nothing else — no key identity is recorded.</Muted>
+    </StatsPage>
+  )
+}