@brimveyn/aimux 1.22.12 → 1.23.1

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

@@ -0,0 +1,170 @@
+import { memo, useCallback } from 'react'
+
+import type { SettingRow } from '../../../settings/types'
+
+import { readRow, storedRow, useSettingsStore } from '../../../settings/settings-store'
+import { useAppStore } from '../../../state/app-store'
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { useTheme } from '../../theme'
+import { truncate } from '../../truncate'
+import { Rule } from '../stats/shared'
+import { describeValue } from './row-value'
+
+/**
+ * Everything the rows used to carry on a second line of their own, moved to the
+ * foot of the screen and shown for the selected row only.
+ *
+ * Three lines, always, whatever the row is: a footer that grows and shrinks
+ * moves the list above it, and a list that shifts while you walk down it is the
+ * thing this screen was rebuilt to stop doing.
+ */
+
+/**
+ * `[key, what it does]`, so the keys can wear the theme and the prose cannot.
+ *
+ * Cut to what works on the row you are standing on: `←/→` does nothing to a
+ * text field, and a hint for a key that does nothing is worse than no hint.
+ */
+function hintsFor(row: SettingRow | null): [string, string][] {
+  const hints: [string, string][] = []
+  if (row?.kind === 'number' || row?.kind === 'select' || row?.kind === 'toggle') {
+    hints.push(['←/→', 'adjust'])
+  }
+  if (row != null && row.kind !== 'info') {
+    hints.push(['↵', row.kind === 'number' || row.kind === 'text' ? 'type a value' : 'change'])
+  }
+  hints.push(['r', 'reset'], ['/', 'search'], ['} {', 'section'], ['esc', 'close'])
+  return hints
+}
+
+/**
+ * What the row itself does not say. Not its description — the row carries that
+ * under its own label now — but where its value comes from and when it takes
+ * effect, which belong to the row you are on rather than to the setting.
+ */
+function notesFor(row: SettingRow, fromConfigFile: boolean): string {
+  if (fromConfigFile) return 'set in aimux.config.ts — comes back on restart'
+  return storedRow(row)?.restart === true ? 'applies on restart' : ''
+}
+
+/**
+ * The options of a select, spelled out with the current one lit. The row can
+ * only show the one it is on, and stepping through the rest to find out what
+ * they are is not reading, it is guessing.
+ */
+function OptionStrip({ row }: { row: Extract<SettingRow, { kind: 'select' }> }) {
+  const t = useTheme()
+  const values = useSettingsStore((s) => s.values)
+  const current = useAppStore((s) => readRow(row, { state: s, values }))
+  return (
+    <box flexDirection="row" gap={1}>
+      {row.options.map((option) => (
+        <text
+          key={String(option.value)}
+          fg={option.value === current ? t.text : t.textMuted}
+          selectable={false}
+          wrapMode="none"
+        >
+          {option.value === current ? `[${option.label}]` : option.label}
+        </text>
+      ))}
+    </box>
+  )
+}
+
+/** What the second line says when the row is not one with options to list. */
+function rangeOf(row: SettingRow): string {
+  if (row.kind === 'number') return `${String(row.min)} – ${String(row.max)}`
+  if (row.kind === 'toggle') return 'on · off'
+  return ''
+}
+
+/**
+ * The whole of a value the row could only show the start of. A command or a
+ * path is the one kind of value that does not fit its column, and it is also
+ * the one you most need to read before changing it.
+ */
+function FullValue({ row }: { row: Extract<SettingRow, { kind: 'text' | 'action' | 'info' }> }) {
+  const t = useTheme()
+  const values = useSettingsStore((s) => s.values)
+  const value = useAppStore((s) => readRow(row, { state: s, values }))
+  return (
+    <text fg={t.textMuted} selectable={false} wrapMode="none">
+      {String(value)}
+    </text>
+  )
+}
+
+export const SettingsFooter = memo(function SettingsFooter({
+  pad,
+  row,
+  width,
+}: {
+  pad: number
+  row: SettingRow | null
+  width: number
+}) {
+  const t = useTheme()
+  const fromConfigFile = useSettingsStore((s) => (row ? s.fromConfigFile.has(row.id) : false))
+  const touched = useSettingsStore((s) => (row ? s.touched.has(row.id) : false))
+  const defaultValue = useSettingsStore((s) => (row ? s.defaults[row.id] : undefined))
+
+  const handleClose = useCallback(() => dispatchGlobal({ type: 'exit-settings' }), [])
+
+  const notes = row ? notesFor(row, fromConfigFile) : ''
+  // Only once the row has been changed — `r` is otherwise a key you press to
+  // find out what it does.
+  const resetHint =
+    row && touched && defaultValue !== undefined
+      ? `default: ${describeValue(row, defaultValue)}`
+      : null
+
+  return (
+    <box flexDirection="column" flexShrink={0} paddingLeft={pad} paddingRight={pad}>
+      <Rule width={width} />
+      <box width={width} flexDirection="row" flexShrink={0}>
+        <box flexGrow={1} flexShrink={1}>
+          <text fg={t.textMuted} selectable={false} wrapMode="none">
+            {truncate(notes, Math.max(0, width - (resetHint?.length ?? 0) - 2))}
+          </text>
+        </box>
+        {resetHint != null ? (
+          <text fg={t.textMuted} selectable={false} wrapMode="none">
+            {resetHint}
+          </text>
+        ) : null}
+      </box>
+      <box height={1} flexShrink={0} overflow="hidden">
+        {row?.kind === 'select' ? <OptionStrip row={row} /> : null}
+        {row?.kind === 'text' || row?.kind === 'action' || row?.kind === 'info' ? (
+          <FullValue row={row} />
+        ) : null}
+        {row?.kind === 'number' || row?.kind === 'toggle' ? (
+          <text fg={t.textMuted} selectable={false} wrapMode="none">
+            {rangeOf(row)}
+          </text>
+        ) : null}
+      </box>
+      {/* Clipped rather than squeezed: a row of hints allowed to shrink loses
+          the spaces *inside* the words first, and `↵change  -/+step` is worse
+          than the same line with its tail cut off on a narrow terminal. */}
+      <box width={width} flexDirection="row" flexShrink={0} gap={2} overflow="hidden">
+        {hintsFor(row).map(([key, what]) => (
+          <box key={key} flexDirection="row" flexShrink={0}>
+            <text
+              fg={t.primary}
+              selectable={false}
+              wrapMode="none"
+              onMouseDown={key === 'esc' ? handleClose : undefined}
+            >
+              {key}
+            </text>
+            <text fg={t.textMuted} selectable={false} wrapMode="none">
+              {` ${what}`}
+            </text>
+          </box>
+        ))}
+      </box>
+    </box>
+  )
+})

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

@@ -2,53 +2,118 @@ import { memo } from 'react'
 
 import type { SettingRow } from '../../../settings/types'
 
-import { storedRow, useSettingsStore } from '../../../settings/settings-store'
+import { readRow, useSettingsStore } from '../../../settings/settings-store'
+import { useAppStore } from '../../../state/app-store'
 import { useTheme } from '../../theme'
+import { truncate } from '../../truncate'
 import { ListItem } from '../primitives/list-item'
-import { describeValue, RowValue } from './row-value'
+import { Bar } from '../stats/shared'
+import { RowValue } from './row-value'
 
-/** Where the value comes from, on the left, out of the value column's way. */
-const CONFIG_FILE_MARK = '*'
-const TOUCHED_MARK = '~'
+/**
+ * Where the value comes from, on the left, out of the value column's way. Both
+ * are legended by the headline row at the top of the screen, which counts them.
+ */
+export const CONFIG_FILE_MARK = '*'
+export const TOUCHED_MARK = '~'
+
+/** The cursor, the mark, their spaces, and the row's own padding either side. */
+const ROW_CHROME = 6
+/** The column every value ends on, and the least the widest of them needs. */
+const VALUE_WIDTH = 12
+/**
+ * Uncapped, unlike the stats bars, which stop at 32.
+ *
+ * That cap is there because those bars share a scale and get compared to each
+ * other, and comparing two lengths gets harder as they grow. These do not: each
+ * one is a position inside its own row's range, read on its own. So it runs to
+ * the value column and the row has no gap in the middle of it.
+ */
+const BAR_MAX = Infinity
+/**
+ * Every label there is fits in this, so nothing on the screen is cropped when
+ * the column is wide enough to give it — which is what the column layout is
+ * sized around. (`Auto-rename minimum words` is the longest at 25.)
+ */
+const LABEL_MAX = 28
 
 interface SettingsRowProps {
   row: SettingRow
   active: boolean
   index: number
+  /** The column this row stands in — it fills it, edge to edge. */
+  width: number
   onSelect: (index: number) => void
 }
 
+/**
+ * The gauge on a row that has a floor and a ceiling.
+ *
+ * A bar is honest here for the same reason it is honest on a quota and dishonest
+ * on a headline number: `min` and `max` are a real scale, so the fraction means
+ * something. It is measured from `min`, not from zero — a delay that runs 60s to
+ * 3600s sitting at 60 is at the bottom of its range, not at 2% of it.
+ */
+function RangeGauge({
+  row,
+  width,
+}: {
+  row: Extract<SettingRow, { kind: 'number' }>
+  width: number
+}) {
+  const t = useTheme()
+  const values = useSettingsStore((s) => s.values)
+  const value = useAppStore((s) => readRow(row, { state: s, values }))
+  const span = row.max - row.min
+  if (span <= 0) return null
+  return (
+    <Bar
+      color={t.primary}
+      max={span}
+      segments={width}
+      value={Math.max(0, (typeof value === 'number' ? value : row.min) - row.min)}
+    />
+  )
+}
+
+/**
+ * What it is, what it is set to, where that sits in its range, and what it does
+ * underneath. It can afford the second line because the screen shows one section
+ * at a time — fifty rows in one scroll could not, which is what made the old
+ * two-line row a wall rather than a paragraph.
+ *
+ * The same three-part geometry as a stats bar row: label on the left, the gauge
+ * in the middle, the column's right edge on the right. Every value on the screen
+ * therefore ends on one column, which is what makes a page of them read as a
+ * page rather than as rows that happen to sit above each other.
+ *
+ * Both columns at full strength, unlike a stats row, which mutes its label. On
+ * that screen the number is the content and the label only says which number it
+ * is; here you are scanning the labels to find the one you came for.
+ */
 export const SettingsRow = memo(function SettingsRow({
   active,
   index,
   onSelect,
   row,
+  width,
 }: SettingsRowProps) {
   const t = useTheme()
   const fromConfigFile = useSettingsStore((s) => s.fromConfigFile.has(row.id))
   const touched = useSettingsStore((s) => s.touched.has(row.id))
-  const defaultValue = useSettingsStore((s) => s.defaults[row.id])
-  const editable = row.kind !== 'info'
   // A blank when neither applies, never nothing: a marker that comes and goes
   // would shift the label of every row it is missing from.
   let mark = ' '
   if (fromConfigFile) mark = CONFIG_FILE_MARK
   else if (touched) mark = TOUCHED_MARK
 
-  // Always, never only on the focused row: a row that grows a line when you land
-  // on it shifts everything under it, so the list moves under the cursor the
-  // whole way down. A taller list that holds still reads better than a compact
-  // one that does not.
-  const notes: string[] = []
-  if (row.description != null && row.description !== '') notes.push(row.description)
-  if (fromConfigFile) notes.push('set in aimux.config.ts — comes back on restart')
-  else if (storedRow(row)?.restart === true) notes.push('applies on restart')
-  // Right-aligned on the same line rather than tacked onto the end of the
-  // description: it is about the row, not about what the setting does, and the
-  // value column above it is on that edge too. Only once the row has been
-  // changed — `r` is otherwise a key you press to find out what it does.
-  const resetHint =
-    touched && defaultValue !== undefined ? `r resets to ${describeValue(row, defaultValue)}` : null
+  // The label gets first call on the column and the gauge takes what is left,
+  // not the other way round: a bar two cells shorter still reads as the same
+  // proportion, where `Transparent bac…` and `Transparent bak…` do not read as
+  // different settings.
+  const inner = Math.max(12, width - ROW_CHROME)
+  const labelWidth = Math.max(10, Math.min(LABEL_MAX, inner - VALUE_WIDTH))
+  const barWidth = Math.min(BAR_MAX, inner - labelWidth - VALUE_WIDTH - 1)
 
   return (
     <ListItem
@@ -57,22 +122,33 @@ export const SettingsRow = memo(function SettingsRow({
       index={index}
       onClickIndex={onSelect}
       leading={<text fg={fromConfigFile ? t.warning : t.secondary}>{mark}</text>}
-      title={<text fg={editable ? t.text : t.textMuted}>{row.label}</text>}
       subtitle={
-        notes.length > 0 || resetHint != null ? (
-          <box flexDirection="row">
-            <box flexGrow={1} flexShrink={1}>
-              <text fg={t.textMuted}>{notes.join(' · ')}</text>
-            </box>
-            {resetHint != null ? (
-              <text fg={t.textMuted} wrapMode="none">
-                {resetHint}
-              </text>
-            ) : null}
+        row.description != null && row.description !== '' ? (
+          <box width={inner}>
+            <text fg={t.textMuted} selectable={false}>
+              {row.description}
+            </text>
           </box>
         ) : undefined
       }
-      trailing={<RowValue row={row} />}
+      title={
+        <box width={inner} flexDirection="row" flexShrink={0}>
+          <box width={labelWidth} flexShrink={0}>
+            <text fg={row.kind === 'info' ? t.textMuted : t.text} wrapMode="none">
+              {truncate(row.label, labelWidth - 1)}
+            </text>
+          </box>
+          {row.kind === 'number' && barWidth > 0 ? <RangeGauge row={row} width={barWidth} /> : null}
+          {/* Grows into whatever the label and the gauge left, so the value ends
+              on the column's edge whether or not the row has a gauge. */}
+          <box flexGrow={1} flexDirection="row" justifyContent="flex-end">
+            <RowValue
+              row={row}
+              maxWidth={inner - labelWidth - (barWidth > 0 && row.kind === 'number' ? barWidth : 0)}
+            />
+          </box>
+        </box>
+      }
     />
   )
 })

package/src/ui/components/settings/settings-search-bar.tsx

@@ -0,0 +1,61 @@
+import { memo, useCallback } from 'react'
+
+import { dispatchGlobal } from '../../../state/dispatch-ref'
+import { useTheme } from '../../theme'
+
+const SEARCH_GLYPH = '\u{2315}'
+
+/**
+ * The way into the search, drawn rather than remembered.
+ *
+ * `/` opened the picker long before this existed, and the footer said so — but a
+ * key you have to read a hint to know about is a key nobody presses. A field you
+ * can see and click is the only version of this that gets used, so the screen
+ * spends three rows on it and keeps it out of the scroll.
+ *
+ * It never holds text. Clicking it opens the picker, which is where the typing
+ * and the filtering actually happen; this is its handle.
+ */
+export const SettingsSearchBar = memo(function SettingsSearchBar({ width }: { width: number }) {
+  const t = useTheme()
+  const handleOpen = useCallback(() => {
+    dispatchGlobal({ type: 'open-settings-search' })
+  }, [])
+
+  // Filled, bordered in the active colour, and the prompt at full strength: it
+  // is the one control on a read-mostly screen, and a control drawn like the
+  // text around it is a control nobody sees.
+  return (
+    <box
+      border
+      borderStyle="rounded"
+      borderColor={t.borderActive}
+      backgroundColor={t.backgroundElement}
+      width={width}
+      flexShrink={0}
+      flexDirection="row"
+      paddingLeft={1}
+      paddingRight={1}
+      onMouseDown={handleOpen}
+    >
+      <text fg={t.primary} selectable={false} wrapMode="none">
+        {`${SEARCH_GLYPH} `}
+      </text>
+      <box flexGrow={1} flexShrink={1}>
+        <text fg={t.text} selectable={false} wrapMode="none">
+          Search every setting…
+        </text>
+      </box>
+      {/* The key drawn as the cap you press, not as a letter in a sentence. */}
+      <text fg={t.textMuted} selectable={false} wrapMode="none">
+        {'[ '}
+      </text>
+      <text fg={t.primary} selectable={false} wrapMode="none">
+        /
+      </text>
+      <text fg={t.textMuted} selectable={false} wrapMode="none">
+        {' ]'}
+      </text>
+    </box>
+  )
+})