@brimveyn/aimux 1.23.6 → 1.24.0

package/src/ui/components/modals/tabs/new-tab-modal.tsx

@@ -5,6 +5,7 @@ import type { AssistantId } from '../../../../state/types'
 import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { getNewTabAssistantOptions } from '../../../../state/selectors'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Form, TextField } from '../shared/form'
@@ -35,6 +36,7 @@ export function NewTabModal({
   selectedIndex,
 }: NewTabModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const excludeTerminal = pendingPrompt != null && pendingPrompt.trim() !== ''
   const footerText =
     pendingPrompt == null
@@ -66,16 +68,16 @@ export function NewTabModal({
             dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
           subtitle: (
             <box flexDirection="column">
-              <text fg={t.textMuted}>{option.description}</text>
+              <text fg={active ? ink : t.textMuted}>{option.description}</text>
               {customCmd != null && customCmd !== '' ? (
-                <text fg={t.primary}>{customCmd}</text>
+                <text fg={active ? ink : t.primary}>{customCmd}</text>
               ) : null}
             </box>
           ),
-          title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+          title: <text fg={active ? ink : t.textMuted}>{option.label}</text>,
         }
       }),
-    [customCommands, filtered, selectedIndex, t]
+    [customCommands, filtered, ink, selectedIndex, t]
   )
 
   if (editingCommand !== null) {
@@ -86,20 +88,16 @@ export function NewTabModal({
         keybindsModeId="modal.new-tab.editing-command"
         width={uiTokens.modalWidth.md}
       >
-        <TextField
-          active
-          description={<>blank to reset to default: {option.command}</>}
-          value={editBuffer}
-          cursorPos={cursorPos}
-          placeholder={option.command}
-        />
+        {/* No description: the placeholder is the default command, so the field
+            already shows what leaving it blank gets you. */}
+        <TextField active value={editBuffer} cursorPos={cursorPos} placeholder={option.command} />
       </Form>
     )
   }
 
   return (
     <Picker
-      title="New tab: choose assistant"
+      title="New tab"
       keybindsModeId="modal.new-tab.command-edit"
       width={uiTokens.modalWidth.md}
       gap={1}

package/src/ui/components/modals/themes/theme-picker-modal.tsx

@@ -4,6 +4,7 @@ import type { ThemeId } from '../../../themes'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterThemeIds, themeDisplayName } from '../../../filter-themes'
+import { useSelectionInk } from '../../../selection-ink'
 import { useMode, useTheme, useTransparent } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -27,6 +28,7 @@ export function ThemePickerModal({
   selectedIndex,
 }: ThemePickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const transparent = useTransparent()
   const mode = useMode()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
@@ -48,11 +50,11 @@ export function ThemePickerModal({
             dispatchGlobal({ type: 'close-modal' })
             runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
           },
-          title: <text fg={active ? t.text : t.textMuted}>{themeDisplayName(id)}</text>,
-          trailing: isCurrent ? <text fg={t.primary}>current</text> : undefined,
+          title: <text fg={active ? ink : t.textMuted}>{themeDisplayName(id)}</text>,
+          trailing: isCurrent ? <text fg={active ? ink : t.primary}>current</text> : undefined,
         }
       }),
-    [currentThemeId, effectiveIndex, filtered, t]
+    [currentThemeId, effectiveIndex, filtered, ink, t]
   )
 
   const handleHover = useCallback(
@@ -68,13 +70,15 @@ export function ThemePickerModal({
       filter={filter}
       cursorPos={cursorPos}
       footer={
-        <box flexDirection="column" gap={0}>
-          <text fg={t.textMuted}>
-            {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
-          </text>
-          <text fg={t.textMuted}>{` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}</text>
-          <text fg={t.textMuted}>{` mode: ${mode} (ctrl-l)`}</text>
-        </box>
+        <text fg={t.textMuted}>
+          {[
+            filtered.length === 0 ? '' : `${effectiveIndex + 1}/${filtered.length}`,
+            `transparent ${transparent ? 'on' : 'off'} (ctrl-t)`,
+            `mode ${mode} (ctrl-l)`,
+          ]
+            .filter((part) => part !== '')
+            .join(' · ')}
+        </text>
       }
       items={items}
       selectedIndex={effectiveIndex}

package/src/ui/components/modals/workspace/create-workspace-modal.tsx

@@ -4,6 +4,7 @@ import type { WorkspaceRecord } from '../../../../state/types'
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { buildBaseRefOptions } from '../../../../state/selectors'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
@@ -35,6 +36,7 @@ export function CreateWorkspaceModal({
   workspaces,
 }: CreateWorkspaceModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
 
   const handleHover = useCallback(
     (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),
@@ -45,24 +47,30 @@ export function CreateWorkspaceModal({
     () =>
       buildBaseRefOptions(workspaces, baseBranches, baseQuery).map((option) => ({
         key: option.ref,
-        leading: (
-          <text fg={option.kind === 'workspace' ? t.warning : t.textMuted}>
-            {option.kind === 'workspace' ? '\u{e728}' : '\u{e702}'}
-          </text>
-        ),
+        leading: (active) => {
+          let fg = t.textMuted
+          if (active) fg = ink
+          else if (option.kind === 'workspace') fg = t.warning
+          return <text fg={fg}>{option.kind === 'workspace' ? '\u{e728}' : '\u{e702}'}</text>
+        },
         subtitle:
-          option.kind === 'workspace' ? (
-            <text fg={t.textMuted}>workspace: {option.detail}</text>
-          ) : null,
-        title: (active) => <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
+          option.kind === 'workspace'
+            ? (active) => <text fg={active ? ink : t.textMuted}>workspace: {option.detail}</text>
+            : null,
+        title: (active) => <text fg={active ? ink : t.textMuted}>{option.label}</text>,
       })),
-    [baseBranches, baseQuery, t, workspaces]
+    [baseBranches, baseQuery, ink, t, workspaces]
   )
 
   const baseActive = activeField === 'base'
   return (
+    // The title asks the question and the subtitle answers what happens with the
+    // answer, so the prompt field needs no label of its own — a heading, a
+    // question, a paragraph and a placeholder all saying the same thing was four
+    // lines of chrome above an empty box.
     <Form
       title="New workspace"
+      subtitle="What do you want to work on? Names the workspace and its branch, and is sent to the assistant."
       keybindsModeId="modal.create-workspace"
       width={uiTokens.modalWidth.xl}
     >
@@ -70,11 +78,9 @@ export function CreateWorkspaceModal({
         <box flexDirection="column">
           <TextField
             active={activeField === 'prompt'}
-            label="What do you want to work on? (optional)"
-            description="Sent to the assistant, and names the workspace and its branch. Leave empty for a bare workspace."
             value={prompt}
             cursorPos={activeField === 'prompt' ? cursorPos : undefined}
-            placeholder="Describe the task, or leave empty..."
+            placeholder="Describe the task, or leave empty for a bare workspace..."
             minLines={PROMPT_LINES}
           />
           {branchError != null && branchError !== '' ? (
@@ -94,7 +100,6 @@ export function CreateWorkspaceModal({
           onHover={handleHover}
           emptyState={<text fg={t.textMuted}>No branches found</text>}
         />
-        <text fg={t.textMuted}>Ctrl+Enter newline · Tab picks a base · Enter creates</text>
       </box>
     </Form>
   )

package/src/ui/components/modals/workspace/workspace-move-modal.tsx

@@ -4,6 +4,7 @@ import type { ModalWorkspaceMove, WorkspaceRecord } from '../../../../state/type
 
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { formatDivergence } from '../../../../state/project-workspaces'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
@@ -34,6 +35,7 @@ export function WorkspaceMoveModal({
   workspaces,
 }: WorkspaceMoveModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const source = useMemo(
     () => workspaces.find((w) => w.id === sourceWorkspaceId),
     [sourceWorkspaceId, workspaces]
@@ -106,11 +108,11 @@ export function WorkspaceMoveModal({
                 onHoverIndex={handleSelectIndex}
                 onClickIndex={handleSelectIndex}
                 title={
-                  <text fg={active ? t.text : t.textMuted} wrapMode="none">
+                  <text fg={active ? ink : t.textMuted} wrapMode="none">
                     {label}
                     {workspace.source === 'primary' ? ' (primary)' : ''}
                     {ahead !== '' ? ` ${ahead}` : ''}
-                    {dirty ? <span fg={t.warning}> ●</span> : null}
+                    {dirty ? <span fg={active ? ink : t.warning}> ●</span> : null}
                   </text>
                 }
               />

package/src/ui/components/overlays/context-menu/context-menu-overlay.tsx

@@ -9,6 +9,7 @@ import {
   type ContextMenuState,
   subscribeContextMenu,
 } from '../../../context-menu/controller'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme, useTransparent } from '../../../theme'
 import { fillBorderedBoxInterior } from '../../../transparent-fill'
 
@@ -28,6 +29,7 @@ const MenuItem = memo(function MenuItem({
   width: number
 }) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const handleMouseOver = useCallback(() => onHover(index), [index, onHover])
   const handleMouseDown = useCallback(
     (e: OtuiMouseEvent) => {
@@ -45,11 +47,11 @@ const MenuItem = memo(function MenuItem({
       flexShrink={0}
       paddingLeft={1}
       paddingRight={1}
-      backgroundColor={active ? t.backgroundElement : undefined}
+      backgroundColor={active ? t.primary : undefined}
       onMouseOver={handleMouseOver}
       onMouseDown={handleMouseDown}
     >
-      <text fg={active ? t.text : t.textMuted} selectable={false}>
+      <text fg={active ? ink : t.textMuted} selectable={false}>
         {label}
       </text>
     </box>
@@ -131,9 +133,13 @@ export function ContextMenuOverlay() {
         left={left}
         width={width}
         flexDirection="column"
-        border
+        // backgroundElement, not backgroundPanel: this pops up over the bars as
+        // often as over the terminal, and the bars are panel — a panel menu on a
+        // panel bar has no edge. Transparent mode keeps the border for the same
+        // reason the modal does: there is no background there to stand on.
+        border={transparent}
         borderColor={t.border}
-        backgroundColor={transparent ? 'transparent' : t.backgroundPanel}
+        backgroundColor={transparent ? 'transparent' : t.backgroundElement}
         renderAfter={transparent ? fillBorderedBoxInterior : undefined}
         onMouseDown={handleMenuMouseDown}
       >

package/src/ui/components/primitives/list-item.tsx

@@ -1,13 +1,23 @@
 import { memo, type ReactNode, useMemo } from 'react'
 
+import { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
 
+/**
+ * How the selected row is filled. `primary` by default — the accent fill every
+ * picker and nav list wants. `elevated` is for a row that carries a colour scale
+ * of its own (the settings rows and their gauges): an accent behind those would
+ * swallow the very thing the row is there to show.
+ */
+export type ListItemFill = 'primary' | 'elevated'
+
 interface ListItemProps {
   active: boolean
   direction?: ListItemDirection
+  fill?: ListItemFill
   id?: string
   index?: number
   leading?: ReactNode
@@ -23,6 +33,7 @@ interface ListItemProps {
 export const ListItem = memo(function ListItem({
   active,
   direction = 'column',
+  fill = 'primary',
   id,
   index,
   leading,
@@ -35,7 +46,14 @@ export const ListItem = memo(function ListItem({
   trailing,
 }: ListItemProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const isRow = direction === 'row'
+  const filled = active && fill === 'primary'
+  // The cursor glyph: the selection ink on a filled row, the accent on a row
+  // that only lifts, muted on the rest.
+  let markerFg = t.textMuted
+  if (filled) markerFg = ink
+  else if (active) markerFg = t.primary
   // Build per-item handlers from the stable index-based callbacks so callers can
   // avoid creating fresh closures inside their list `.map()`.
   const handleHover = useMemo<(() => void) | undefined>(() => {
@@ -51,7 +69,7 @@ export const ListItem = memo(function ListItem({
       <box flexDirection="row">
         {isRow ? null : (
           <>
-            <text fg={active ? t.primary : t.textMuted}>{active ? '›' : '·'}</text>
+            <text fg={markerFg}>{active ? '›' : '·'}</text>
             <text> </text>
           </>
         )}
@@ -66,7 +84,11 @@ export const ListItem = memo(function ListItem({
   return (
     <box id={id} onMouseOver={handleHover} onMouseDown={handleClick}>
       {active ? (
-        <Surface tone="selected" paddingLeft={isRow ? 2 : 1} paddingRight={isRow ? 2 : 1}>
+        <Surface
+          tone={fill === 'primary' ? 'selected' : 'elevated'}
+          paddingLeft={isRow ? 2 : 1}
+          paddingRight={isRow ? 2 : 1}
+        >
           {inner}
         </Surface>
       ) : (

package/src/ui/components/primitives/surface.tsx

@@ -10,8 +10,11 @@ function toneToToken(tone: SurfaceTone): TuiColorToken {
   switch (tone) {
     case 'elevated':
       return 'backgroundElement'
+    // Filled with the theme's own accent, not another step of grey: a
+    // selection is the one thing on the screen you always need to find without
+    // reading. Everything drawn on it uses `useSelectionInk`.
     case 'selected':
-      return 'backgroundElement'
+      return 'primary'
     case 'input':
       return 'backgroundElement'
     case 'inputActive':

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

@@ -74,9 +74,16 @@ function valueColor(row: SettingRow, value: SettingValue, t: ResolvedTuiTheme):
  * list would repaint it at the rate the terminals print.
  */
 export const RowValue = memo(function RowValue({
+  fg,
   maxWidth,
   row,
 }: {
+  /**
+   * Overrides the value's own colour. A row filled with `primary` has room for
+   * one ink, so the search results hand theirs down rather than let a green
+   * toggle sit on the accent.
+   */
+  fg?: string
   /** Cropped rather than wrapped: a row that grows a line shifts the list. */
   maxWidth?: number
   row: SettingRow
@@ -86,7 +93,7 @@ export const RowValue = memo(function RowValue({
   const value = useAppStore((s) => readRow(row, { state: s, values }))
   const text = formatValue(row, value)
   return (
-    <text fg={valueColor(row, value, t)} wrapMode="none">
+    <text fg={fg ?? valueColor(row, value, t)} wrapMode="none">
       {maxWidth === undefined ? text : truncate(text, maxWidth)}
     </text>
   )

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

@@ -7,7 +7,6 @@ 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'
 
 /**
@@ -121,7 +120,9 @@ export const SettingsFooter = memo(function SettingsFooter({
 
   return (
     <box flexDirection="column" flexShrink={0} paddingLeft={pad} paddingRight={pad}>
-      <Rule width={width} />
+      {/* A blank row, not a rule: the footer is set off from the list by the gap,
+          the same way the sidebar's is. */}
+      <box height={1} flexShrink={0} />
       <box width={width} flexDirection="row" flexShrink={0}>
         <box flexGrow={1} flexShrink={1}>
           <text fg={t.textMuted} selectable={false} wrapMode="none">

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

@@ -119,6 +119,9 @@ export const SettingsRow = memo(function SettingsRow({
     <ListItem
       id={`setting-row-${row.id}`}
       active={active}
+      // Lifted, not filled: the gauge is drawn in `primary` and the value's
+      // colour is its state, both of which an accent fill would swallow.
+      fill="elevated"
       index={index}
       onClickIndex={onSelect}
       leading={<text fg={fromConfigFile ? t.warning : t.secondary}>{mark}</text>}

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

@@ -22,14 +22,12 @@ export const SettingsSearchBar = memo(function SettingsSearchBar({ width }: { wi
     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.
+  // Filled, 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. The fill is enough to say so — the frame it used to wear cost
+  // two rows to repeat what the fill already said.
   return (
     <box
-      border
-      borderStyle="rounded"
-      borderColor={t.borderActive}
       backgroundColor={t.backgroundElement}
       width={width}
       flexShrink={0}

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

@@ -10,9 +10,10 @@ import { useAppStore } from '../../../state/app-store'
 import { clampBarWidth } from '../../../state/bars'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 import { useScrollActiveIntoView } from '../../hooks/use-scroll-active-into-view'
+import { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { ListItem } from '../primitives/list-item'
-import { Muted, Rule, Section, TileRow } from '../stats/shared'
+import { Muted, 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'
@@ -23,6 +24,8 @@ const SETTINGS_GLYPH = '\u{2699}'
 
 /** One padding column either side, the same inset the stats pages sit in. */
 const PAGE_PAD = 1
+/** Matches the bar's own gutter, so the nav and a bar line up to the column. */
+const NAV_GUTTER = 2
 
 /** A section and the rows it owns, each keeping the index the cursor holds. */
 interface Group {
@@ -71,6 +74,7 @@ function groupBySection(hits: SettingSearchHit[]): Group[] {
  */
 export const SettingsView = memo(function SettingsView() {
   const t = useTheme()
+  const ink = useSelectionInk()
   // 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 rowIndex = useAppStore((s) => s.settings.rowIndex)
@@ -146,14 +150,21 @@ export const SettingsView = memo(function SettingsView() {
     [hits.length, touchedCount, configCount]
   )
 
-  // Same 1-cell seam the bar draws between itself and the terminal, so the two
+  // The same gutter 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 navContentWidth = Math.max(1, navWidth - NAV_GUTTER)
   const usable = Math.max(24, dimensions.width - navWidth - 2 - PAGE_PAD * 2)
 
   return (
     <box flexDirection="row" flexGrow={1} overflow="hidden">
-      <box width={navWidth} flexDirection="row" overflow="hidden" backgroundColor={t.background}>
+      {/* The nav is this screen's bar, so it wears the bar's surface: panel
+          against the page the content pane keeps. */}
+      <box
+        width={navWidth}
+        flexDirection="row"
+        overflow="hidden"
+        backgroundColor={t.backgroundPanel}
+      >
         <box width={navContentWidth} flexDirection="column" overflow="hidden">
           <box paddingLeft={1} paddingRight={1}>
             <text fg={t.textMuted}>Settings</text>
@@ -169,12 +180,12 @@ export const SettingsView = memo(function SettingsView() {
                 index={index}
                 onClickIndex={handleSectionClick}
                 title={
-                  <text fg={group.sectionId === current?.sectionId ? t.text : t.textMuted}>
+                  <text fg={group.sectionId === current?.sectionId ? ink : t.textMuted}>
                     {`${group.glyph} ${group.label}`}
                   </text>
                 }
                 trailing={
-                  group.sectionId === current?.sectionId ? <text fg={t.primary}>›</text> : undefined
+                  group.sectionId === current?.sectionId ? <text fg={ink}>›</text> : undefined
                 }
               />
             ))}
@@ -185,19 +196,13 @@ export const SettingsView = memo(function SettingsView() {
             </text>
           </box>
         </box>
-        <box width={1} flexShrink={0} backgroundColor={t.border} />
+        <box width={NAV_GUTTER} flexShrink={0} backgroundColor={t.backgroundPanel} />
       </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={`${SETTINGS_GLYPH} Settings`}
-        padding={0}
-        flexDirection="column"
-        flexGrow={1}
-        backgroundColor={t.background}
-      >
+      {/* The pane the terminal would be in, with the same inset — padding where
+          that one has padding, and no frame, for the same reason. The titled
+          border said "Settings" a third time, after the nav heading and the
+          section header. */}
+      <box padding={1} flexDirection="column" flexGrow={1} backgroundColor={t.background}>
         {/* 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}>
@@ -212,14 +217,13 @@ export const SettingsView = memo(function SettingsView() {
         >
           <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>
+            <box height={1} flexShrink={0} />
             {current === undefined ? (
               <Muted>Nothing to configure here yet.</Muted>
             ) : (
               <Section
                 glyph={current.glyph}
+                rule={false}
                 title={current.label}
                 // Pinned to the same right edge every note on the screen lands on.
                 note={String(current.rows.length)}

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

@@ -7,6 +7,7 @@ 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 { useSelectionInk } from '../../selection-ink'
 import { useTheme } from '../../theme'
 import { ListItem } from '../primitives/list-item'
 import { AimuxPage } from './aimux-page'
@@ -26,6 +27,7 @@ const COLUMN_CONTENT_OPTIONS = { flexDirection: 'column' as const, gap: 0 }
  */
 export const StatsView = memo(function StatsView() {
   const t = useTheme()
+  const ink = useSelectionInk()
   const stats = useAppStore((s) => s.stats)
   const navWidth = useAppStore((s) => clampBarWidth(s.bars.left.width))
   const dimensions = useTerminalDimensions()
@@ -104,11 +106,11 @@ export const StatsView = memo(function StatsView() {
                 index={index}
                 onClickIndex={handlePageClick}
                 title={
-                  <text fg={index === stats.pageIndex ? t.text : t.textMuted}>
+                  <text fg={index === stats.pageIndex ? ink : t.textMuted}>
                     {`${entry.glyph} ${entry.label}`}
                   </text>
                 }
-                trailing={index === stats.pageIndex ? <text fg={t.primary}>›</text> : undefined}
+                trailing={index === stats.pageIndex ? <text fg={ink}>›</text> : undefined}
               />
             ))}
           </box>

package/src/ui/selection-ink.ts

@@ -0,0 +1,20 @@
+import { useBaseTheme } from './theme'
+
+/**
+ * The one legible colour on a selected list row.
+ *
+ * A selected row is filled with `primary`, so everything drawn on it has to read
+ * against that rather than against the modal behind it — the page background
+ * does, which is the same trick the status bar's accent tiles already use for
+ * their mode and version badges. Every tone the caller would otherwise use on
+ * that row (muted subtitle, warning mark, accent badge) collapses to this one:
+ * a fill that strong leaves room for exactly one ink.
+ *
+ * Always the opaque base, never the live theme. In transparent mode
+ * `t.background` resolves to 'transparent' and the text would be painted away,
+ * while the fill itself stays opaque — `primary` is not one of the chrome
+ * background tokens the transparent overlay rewrites.
+ */
+export function useSelectionInk(): string {
+  return useBaseTheme().background
+}