@brimveyn/aimux 1.22.12 → 1.23.1

package/src/state/app-store.ts

@@ -4,6 +4,7 @@ import { createStore } from 'zustand/vanilla'
 import type { AppAction } from './actions'
 import type { AppState } from './types'
 
+import { countAction } from '../services/aimux-counters/observe'
 import { appReducer, createInitialState } from './store'
 
 export interface AppStore extends AppState {
@@ -12,7 +13,17 @@ export interface AppStore extends AppState {
 
 export const appStore = createStore<AppStore>((set) => ({
   ...createInitialState(),
-  dispatch: (action: AppAction) => set((state) => appReducer(state, action)),
+  // Counting happens here rather than inside the reducers, which stay pure —
+  // and on the outcome rather than the intent: an `add-tab` or a `split-pane`
+  // the reducer declines is not a tab or a split, and counting it would report
+  // something that never happened. Outside the `set` updater, which has to stay
+  // a pure function of the state it is handed.
+  dispatch: (action: AppAction) => {
+    const before = appStore.getState()
+    const after = appReducer(before, action)
+    if (after !== before) countAction(action)
+    set(after)
+  },
 }))
 
 export function useAppStore<T>(selector: (state: AppStore) => T): T {

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

@@ -62,9 +62,6 @@ function getCreateWorkspaceBaseOptions(state: AppState, queryOverride?: string):
 function getModalOptionCount(state: AppState): number {
   const { modal } = state
   switch (modal.type) {
-    // Not a list: the two pages of the AI usage modal, Live and History.
-    case 'ai-usage':
-      return 2
     case 'create-project':
       return modal.directoryResults.length
     case 'help':
@@ -145,19 +142,6 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         },
       }
     }
-    case 'open-ai-usage-modal': {
-      return {
-        ...state,
-        focusMode: 'modal',
-        modal: {
-          cursorPos: 0,
-          editBuffer: '',
-          projectTargetId: null,
-          selectedIndex: 0,
-          type: 'ai-usage',
-        },
-      }
-    }
     case 'open-workspace-move-modal': {
       // Overlay: keep focusMode (git when opened via `m`, navigation when opened
       // from a tab menu) so the view underneath stays mounted, like the help
@@ -476,6 +460,18 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
           type: 'theme-picker',
         },
       }
+    case 'open-quotas-modal':
+      return {
+        ...state,
+        focusMode: 'modal',
+        modal: {
+          cursorPos: 0,
+          editBuffer: null,
+          projectTargetId: null,
+          selectedIndex: 0,
+          type: 'quotas',
+        },
+      }
     case 'open-update-available-modal':
       return {
         ...state,
@@ -540,7 +536,6 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         return { ...state, modal: { ...state.modal, selectedIndex: nextIndex } }
       }
       if (
-        state.modal.type !== 'ai-usage' &&
         state.modal.type !== 'new-tab' &&
         state.modal.type !== 'project-picker' &&
         state.modal.type !== 'snippet-picker' &&

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

@@ -1,10 +1,10 @@
 import type { AppAction } from '../actions'
 import type { AppState, SettingsUIState } from '../types'
 
-import { DEFAULT_SECTION_ID, getSectionRowCount, SETTING_SECTIONS } from '../../settings/sections'
+import { sectionStartIndexes, totalRowCount } from '../../settings/sections'
 
 export function emptySettingsUI(): SettingsUIState {
-  return { pane: 'nav', rowIndex: 0, sectionId: DEFAULT_SECTION_ID }
+  return { rowIndex: 0 }
 }
 
 function clamp(value: number, max: number): number {
@@ -12,68 +12,46 @@ function clamp(value: number, max: number): number {
   return Math.max(0, Math.min(max, value))
 }
 
-function withSettings(state: AppState, patch: Partial<SettingsUIState>): AppState {
-  return { ...state, settings: { ...state.settings, ...patch } }
-}
-
-function moveSelection(state: AppState, delta: -1 | 1): AppState {
-  const { pane, rowIndex, sectionId } = state.settings
-
-  if (pane === 'nav') {
-    const index = SETTING_SECTIONS.findIndex((section) => section.id === sectionId)
-    const next = clamp((index === -1 ? 0 : index) + delta, SETTING_SECTIONS.length - 1)
-    const nextId = SETTING_SECTIONS[next]?.id
-    if (nextId == null || nextId === sectionId) return state
-    // A new section has its own rows, so the row cursor from the old one means
-    // nothing here.
-    return withSettings(state, { rowIndex: 0, sectionId: nextId })
+function withRowIndex(state: AppState, rowIndex: number): AppState {
+  return {
+    ...state,
+    settings: { ...state.settings, rowIndex: clamp(rowIndex, totalRowCount(state.projects) - 1) },
   }
+}
 
-  return withSettings(state, {
-    rowIndex: clamp(rowIndex + delta, getSectionRowCount(sectionId, state.projects) - 1),
-  })
+/**
+ * The first row of the next section down, or of the one the cursor is already
+ * inside when going up and it is not on its first row — the paragraph motion `}`
+ * and `{` are named after, rather than a plain "section ± 1" that would skip the
+ * heading you were standing under.
+ */
+function jumpSection(state: AppState, delta: -1 | 1): AppState {
+  const starts = sectionStartIndexes(state.projects)
+  const current = state.settings.rowIndex
+  const next =
+    delta === 1
+      ? starts.find((start) => start > current)
+      : starts.filter((start) => start < current).at(-1)
+  if (next === undefined) return state
+  return withRowIndex(state, next)
 }
 
 export function reduceSettingsState(state: AppState, action: AppAction): AppState | null {
   switch (action.type) {
     case 'enter-settings':
       if (state.focusMode === 'settings') return state
-      // The section is remembered across a close/open within the session; the
-      // cursor inside it is not — reopening lands you at the top of it.
-      return {
-        ...state,
-        focusMode: 'settings',
-        settings: { ...state.settings, pane: 'nav', rowIndex: 0 },
-      }
+      // Reopening lands at the top: the list is one column now, so the top of it
+      // is where the search and the first section both are.
+      return { ...state, focusMode: 'settings', settings: { ...state.settings, rowIndex: 0 } }
     case 'exit-settings':
       if (state.focusMode !== 'settings') return state
       return { ...state, focusMode: 'navigation' }
-    case 'settings-focus-pane': {
-      // A section with no rows has nothing to focus, so `l` stays put rather
-      // than parking the cursor in an empty column.
-      if (
-        action.pane === 'rows' &&
-        getSectionRowCount(state.settings.sectionId, state.projects) === 0
-      ) {
-        return state
-      }
-      return withSettings(state, { pane: action.pane })
-    }
     case 'settings-move-selection':
-      return moveSelection(state, action.delta)
-    case 'settings-select-section':
-      if (action.sectionId === state.settings.sectionId) {
-        return withSettings(state, { pane: 'nav' })
-      }
-      return withSettings(state, { pane: 'nav', rowIndex: 0, sectionId: action.sectionId })
+      return withRowIndex(state, state.settings.rowIndex + action.delta)
+    case 'settings-jump-section':
+      return jumpSection(state, action.delta)
     case 'settings-select-row':
-      return withSettings(state, {
-        pane: 'rows',
-        rowIndex: clamp(
-          action.rowIndex,
-          getSectionRowCount(state.settings.sectionId, state.projects) - 1
-        ),
-      })
+      return withRowIndex(state, action.rowIndex)
     default:
       return null
   }

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
@@ -732,12 +734,24 @@ export const EMPTY_MULTI_REPO_STATE: MultiRepoState = { prefixes: {}, repos: []
  * two of them.
  */
 export interface SettingsUIState {
-  sectionId: string
-  /** Which of the two columns has the keyboard: the section list, or its rows. */
-  pane: 'nav' | 'rows'
+  /**
+   * Where the cursor is in the screen's one list, counted across every section.
+   * The sections are headings in that list, not a column you move into, so this
+   * is the whole of the screen's state.
+   */
   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 +773,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/row-value.tsx

@@ -5,6 +5,7 @@ import type { SettingRow, SettingValue } from '../../../settings/types'
 import { readRow, useSettingsStore } from '../../../settings/settings-store'
 import { useAppStore } from '../../../state/app-store'
 import { type ResolvedTuiTheme, useTheme } from '../../theme'
+import { truncate } from '../../truncate'
 
 /** Filled means on. Both are one cell wide in a Latin-width terminal. */
 const ON = '●'
@@ -51,11 +52,17 @@ export function describeValue(row: SettingRow, value: SettingValue): string {
   }
 }
 
+/**
+ * Text wears text tokens, the way it does on the stats screen — a value is not a
+ * status. The two exceptions earn it: a toggle whose colour *is* its state, and
+ * an action row, where the colour is the affordance saying it does something.
+ */
 function valueColor(row: SettingRow, value: SettingValue, t: ResolvedTuiTheme): string {
   // A toggle is read at a glance or not at all, so its state is the colour as much
   // as the glyph: lit when on, as quiet as the rest of the row when off.
   if (row.kind === 'toggle') return value === true ? t.success : t.textMuted
-  return row.kind === 'info' ? t.textMuted : t.primary
+  if (row.kind === 'action') return t.primary
+  return row.kind === 'info' ? t.textMuted : t.text
 }
 
 /**
@@ -66,9 +73,21 @@ function valueColor(row: SettingRow, value: SettingValue, t: ResolvedTuiTheme):
  * renders nothing. A parent subscribing to the whole store for every row in the
  * list would repaint it at the rate the terminals print.
  */
-export const RowValue = memo(function RowValue({ row }: { row: SettingRow }) {
+export const RowValue = memo(function RowValue({
+  maxWidth,
+  row,
+}: {
+  /** Cropped rather than wrapped: a row that grows a line shifts the list. */
+  maxWidth?: number
+  row: SettingRow
+}) {
   const t = useTheme()
   const values = useSettingsStore((s) => s.values)
   const value = useAppStore((s) => readRow(row, { state: s, values }))
-  return <text fg={valueColor(row, value, t)}>{formatValue(row, value)}</text>
+  const text = formatValue(row, value)
+  return (
+    <text fg={valueColor(row, value, t)} wrapMode="none">
+      {maxWidth === undefined ? text : truncate(text, maxWidth)}
+    </text>
+  )
 })