@brimveyn/aimux 1.22.12 → 1.23.1

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

@@ -3,7 +3,8 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { useTerminalDimensions } from '@opentui/react'
 import { memo, useCallback, useMemo, useRef } from 'react'
 
-import { getSectionRows, SETTING_SECTIONS } from '../../../settings/sections'
+import { filterSettingRows, type SettingSearchHit } from '../../../settings/search'
+import { getSection } from '../../../settings/sections'
 import { useSettingsStore } from '../../../settings/settings-store'
 import { useAppStore } from '../../../state/app-store'
 import { clampBarWidth } from '../../../state/bars'
@@ -11,81 +12,144 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref
 import { useScrollActiveIntoView } from '../../hooks/use-scroll-active-into-view'
 import { useTheme } from '../../theme'
 import { ListItem } from '../primitives/list-item'
-import { SettingsRow } from './settings-row'
+import { Muted, Rule, Section, TileRow } from '../stats/shared'
+import { SettingsFooter } from './settings-footer'
+import { CONFIG_FILE_MARK, SettingsRow, TOUCHED_MARK } from './settings-row'
+import { SettingsSearchBar } from './settings-search-bar'
 
 const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
+
+const SETTINGS_GLYPH = '\u{2699}'
+
+/** One padding column either side, the same inset the stats pages sit in. */
+const PAGE_PAD = 1
+
+/** A section and the rows it owns, each keeping the index the cursor holds. */
+interface Group {
+  sectionId: string
+  label: string
+  glyph: string
+  note: string
+  /** `[cursor index, hit]`, in screen order. */
+  rows: [number, SettingSearchHit][]
+}
+
+function groupBySection(hits: SettingSearchHit[]): Group[] {
+  const groups: Group[] = []
+  for (const [index, hit] of hits.entries()) {
+    const last = groups.at(-1)
+    if (last?.sectionId === hit.sectionId) {
+      last.rows.push([index, hit])
+      continue
+    }
+    const section = getSection(hit.sectionId)
+    groups.push({
+      glyph: section?.glyph ?? ' ',
+      label: hit.sectionLabel,
+      note: section?.description ?? '',
+      rows: [[index, hit]],
+      sectionId: hit.sectionId,
+    })
+  }
+  return groups
+}
+
 /**
- * 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
- * it belongs to, and the pair stops reading as a pair.
+ * The settings screen.
+ *
+ * Same shape as the stats 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, showing one section at a
+ * time.
  *
- * A share of the window rather than a fixed column count, so it holds whatever
- * the window is; the floor is there for the narrow ones, where the pane is
- * smaller than the cap anyway and this stops binding.
+ * One section at a time, but still one cursor: the pane is a view of whatever
+ * section the cursor is standing in, so `j` off the end of a section simply
+ * lands in the next one and the pane follows. That is what lets a row afford
+ * three lines — the setting, what it does, and a gap — where fifty rows in one
+ * scroll could only afford one, and what keeps the nav column from being a
+ * place you have to move into and back out of.
  */
-const CONTENT_WIDTH_RATIO = 0.45
-const CONTENT_MIN_WIDTH = 56
-
 export const SettingsView = memo(function SettingsView() {
   const t = useTheme()
   // The cursor is all this component needs from the app state. Rows read their
   // own values, so nothing here re-renders at the rate the terminals print.
-  const settings = useAppStore((s) => s.settings)
-  // The section list stands exactly where the left bar stands, so opening the
-  // screen does not shift the column under the cursor. Its configured width, not
-  // `getBarWidth`: a hidden bar still says how wide the sidebar is.
-  const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
+  const rowIndex = useAppStore((s) => s.settings.rowIndex)
   // Which rows exist can depend on the projects — Setup has one per project — and
   // building a Setup row reads its script off disk. So the list is rebuilt when
-  // the section changes, when the projects change, and after any write; not on
-  // every render, which at the rate this store changes would mean reading files
-  // at the rate the terminals print.
+  // the projects change and after any write; not on every render, which at the
+  // rate this store changes would mean reading files at the rate the terminals
+  // print.
   const projects = useAppStore((s) => s.projects)
   const revision = useSettingsStore((s) => s.revision)
-  const rows = useMemo(
-    () => getSectionRows(settings.sectionId, projects),
+  const touchedCount = useSettingsStore((s) => s.touched.size)
+  const configCount = useSettingsStore((s) => s.fromConfigFile.size)
+  // The section list stands exactly where the left bar stands. Its configured
+  // width, not `getBarWidth`: a hidden bar still says how wide the sidebar is.
+  const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
+  const dimensions = useTerminalDimensions()
+  const hits = useMemo(
+    // No query: this is the whole list, and the same function the search filters
+    // with — so the index a hit carries is the index this cursor holds.
+    () => filterSettingRows(projects, null),
     // `revision` is an invalidation key, not an input: it says a value the builder
     // read from disk may have changed under it.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [settings.sectionId, projects, revision]
-  )
-  const dimensions = useTerminalDimensions()
-  const contentMaxWidth = Math.max(
-    CONTENT_MIN_WIDTH,
-    Math.round(dimensions.width * CONTENT_WIDTH_RATIO)
+    [projects, revision]
   )
+  const groups = useMemo(() => groupBySection(hits), [hits])
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
+  const selected = hits[rowIndex]
+  const current = groups.find((group) => group.sectionId === selected?.sectionId)
 
   useScrollActiveIntoView({
-    activeId: settings.pane === 'rows' ? (rows[settings.rowIndex]?.id ?? null) : null,
+    activeId: selected?.row.id ?? null,
     idPrefix: 'setting-row-',
     scrollRef,
     visible: true,
   })
 
-  const handleSectionClick = useCallback((index: number) => {
-    const sectionId = SETTING_SECTIONS[index]?.id
-    if (sectionId == null) return
-    dispatchGlobal({ sectionId, type: 'settings-select-section' })
-  }, [])
-
   // One click selects the row and changes it — a checkbox you have to select
   // first and then click again is not a checkbox.
-  const handleRowClick = useCallback((rowIndex: number) => {
-    dispatchGlobal({ rowIndex, type: 'settings-select-row' })
+  const handleRowClick = useCallback((index: number) => {
+    dispatchGlobal({ rowIndex: index, type: 'settings-select-row' })
     runSideEffectGlobal({ type: 'activate-settings-row' })
   }, [])
 
+  const handleSectionClick = useCallback(
+    (index: number) => {
+      const first = groups[index]?.rows[0]?.[0]
+      if (first === undefined) return
+      dispatchGlobal({ rowIndex: first, type: 'settings-select-row' })
+    },
+    [groups]
+  )
+
   const handleClose = useCallback(() => {
     dispatchGlobal({ type: 'exit-settings' })
   }, [])
 
-  const section = SETTING_SECTIONS.find((s) => s.id === settings.sectionId)
-  const sectionLabel = section?.label ?? 'Settings'
-  const sectionNote = section?.description
+  // The headline row doubles as the legend for the two marks the rows wear —
+  // the counts are the only reason anyone would need to know what they mean.
+  const tiles = useMemo(
+    () =>
+      [
+        { glyph: SETTINGS_GLYPH, label: 'settings', value: String(hits.length) },
+        // A mark no row is wearing needs no legend, and a count of zero is not
+        // news — so the tile only exists while the mark does.
+        touchedCount === 0
+          ? null
+          : { glyph: TOUCHED_MARK, label: 'changed', value: String(touchedCount) },
+        configCount === 0
+          ? null
+          : { glyph: CONFIG_FILE_MARK, label: 'from config', value: String(configCount) },
+      ].filter((tile) => tile !== null),
+    [hits.length, touchedCount, configCount]
+  )
+
   // 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 usable = Math.max(24, dimensions.width - navWidth - 2 - PAGE_PAD * 2)
 
   return (
     <box flexDirection="row" flexGrow={1} overflow="hidden">
@@ -94,22 +158,23 @@ export const SettingsView = memo(function SettingsView() {
           <box paddingLeft={1} paddingRight={1}>
             <text fg={t.textMuted}>Settings</text>
           </box>
+          {/* A jump list, not a column you move into: it says which section the
+              cursor is in and takes it somewhere. Nothing here holds focus,
+              which is why the screen needs no notion of which pane has it. */}
           <box flexGrow={1} flexShrink={1} flexDirection="column" overflow="hidden">
-            {SETTING_SECTIONS.map((section, index) => (
+            {groups.map((group, index) => (
               <ListItem
-                key={section.id}
-                active={section.id === settings.sectionId}
+                key={group.sectionId}
+                active={group.sectionId === current?.sectionId}
                 index={index}
                 onClickIndex={handleSectionClick}
                 title={
-                  <text fg={section.id === settings.sectionId ? t.text : t.textMuted}>
-                    {section.label}
+                  <text fg={group.sectionId === current?.sectionId ? t.text : t.textMuted}>
+                    {`${group.glyph} ${group.label}`}
                   </text>
                 }
                 trailing={
-                  section.id === settings.sectionId && settings.pane === 'nav' ? (
-                    <text fg={t.primary}>›</text>
-                  ) : undefined
+                  group.sectionId === current?.sectionId ? <text fg={t.primary}>›</text> : undefined
                 }
               />
             ))}
@@ -123,46 +188,67 @@ export const SettingsView = memo(function SettingsView() {
         <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. */}
+          keeps the inset it had instead of jumping to the edge of the screen. */}
       <box
         border
-        borderColor={settings.pane === 'rows' ? t.borderActive : t.border}
-        title={sectionLabel}
+        borderColor={t.borderActive}
+        title={`${SETTINGS_GLYPH} Settings`}
         padding={0}
         flexDirection="column"
         flexGrow={1}
         backgroundColor={t.background}
       >
-        <box flexDirection="column" flexGrow={1} flexShrink={1} maxWidth={contentMaxWidth}>
-          {sectionNote != null && sectionNote !== '' ? (
-            <box flexShrink={0} paddingLeft={1} paddingRight={1}>
-              <text fg={t.textMuted}>{sectionNote}</text>
+        {/* Outside the scroll: the way to find a setting should not be a thing
+            you have to scroll back up to. */}
+        <box flexShrink={0} paddingLeft={PAGE_PAD} paddingRight={PAGE_PAD} paddingTop={1}>
+          <SettingsSearchBar width={usable} />
+        </box>
+        <scrollbox
+          ref={scrollRef}
+          scrollY
+          flexGrow={1}
+          flexShrink={1}
+          contentOptions={COLUMN_CONTENT_OPTIONS}
+        >
+          <box flexDirection="column" paddingLeft={PAGE_PAD} paddingRight={PAGE_PAD}>
+            <TileRow tiles={tiles} usable={usable} />
+            <box paddingTop={1} paddingBottom={1} flexShrink={0}>
+              <Rule width={usable} />
             </box>
-          ) : null}
-          <scrollbox
-            ref={scrollRef}
-            scrollY
-            flexGrow={1}
-            flexShrink={1}
-            contentOptions={COLUMN_CONTENT_OPTIONS}
-          >
-            {rows.length === 0 ? (
-              <box paddingLeft={1}>
-                <text fg={t.textMuted}>Nothing to configure here yet.</text>
-              </box>
+            {current === undefined ? (
+              <Muted>Nothing to configure here yet.</Muted>
             ) : (
-              rows.map((row, index) => (
-                <SettingsRow
-                  key={row.id}
-                  row={row}
-                  index={index}
-                  active={settings.pane === 'rows' && index === settings.rowIndex}
-                  onSelect={handleRowClick}
-                />
-              ))
+              <Section
+                glyph={current.glyph}
+                title={current.label}
+                // Pinned to the same right edge every note on the screen lands on.
+                note={String(current.rows.length)}
+                width={usable}
+              >
+                {current.note === '' ? null : (
+                  <box width={usable} paddingBottom={1}>
+                    <text fg={t.textMuted} selectable={false}>
+                      {current.note}
+                    </text>
+                  </box>
+                )}
+                <box flexDirection="column" gap={1}>
+                  {current.rows.map(([index, hit]) => (
+                    <SettingsRow
+                      key={hit.row.id}
+                      row={hit.row}
+                      index={index}
+                      active={index === rowIndex}
+                      onSelect={handleRowClick}
+                      width={usable}
+                    />
+                  ))}
+                </box>
+              </Section>
             )}
-          </scrollbox>
-        </box>
+          </box>
+        </scrollbox>
+        <SettingsFooter row={selected?.row ?? null} width={usable} pad={PAGE_PAD} />
       </box>
     </box>
   )

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>
+  )
+}