@brimveyn/aimux 1.23.6 → 1.24.0

package/src/ui/components/layout/bar.tsx

@@ -20,6 +20,12 @@ export interface BarBoundaryResizeInfo {
   totalSize: number
 }
 
+/**
+ * Columns between the widgets and the terminal: one to grab for a resize, one so
+ * the content is not flush against the edge. Both grab.
+ */
+const GUTTER = 2
+
 interface BarProps {
   side: BarSide
   onResizeDrag?: (event: OtuiMouseEvent) => boolean
@@ -28,8 +34,6 @@ interface BarProps {
   onBoundaryResizeStart?: (info: BarBoundaryResizeInfo) => void
 }
 
-const RESIZE_HANDLE = '─'
-
 /**
  * One edge bar hosting a vertical stack of widgets. Both bars are this
  * component; the only asymmetry is which side the resize handle sits on.
@@ -78,11 +82,21 @@ export function Bar({
   if (width === 0) return null
 
   const visible = visibleWidgets(bar)
-  const contentWidth = Math.max(1, width - 1)
-
-  // Drag handle on the side facing the terminal.
+  const contentWidth = Math.max(1, width - GUTTER)
+
+  // The gutter on the side facing the terminal: the resize grip and the widgets'
+  // inset from the terminal are the same two columns — the padding is not dead
+  // space, both cells start a resize. Painted with the bar, not in the page
+  // colour: a page-coloured strip here left a seam between the bar and the tab
+  // bar above it, which are the same panel. What separates the bar from the
+  // terminal is the terminal's own background, nothing drawn.
   const edge = (
-    <box width={1} flexShrink={0} backgroundColor={t.border} onMouseDown={handleEdgeMouseDown} />
+    <box
+      width={GUTTER}
+      flexShrink={0}
+      backgroundColor={t.backgroundPanel}
+      onMouseDown={handleEdgeMouseDown}
+    />
   )
 
   const body = (
@@ -93,7 +107,6 @@ export function Bar({
           bodyRef={bodyRef}
           contentWidth={contentWidth}
           grow={widget.grow}
-          handleColor={t.border}
           index={index}
           isLast={index === visible.length - 1}
           onBoundaryResizeStart={onBoundaryResizeStart}
@@ -109,7 +122,7 @@ export function Bar({
       width={width}
       padding={0}
       flexDirection="row"
-      backgroundColor={t.background}
+      backgroundColor={t.backgroundPanel}
       gap={0}
       overflow="hidden"
       rightClickMenu={buildBarContextMenu(bars, side)}
@@ -118,7 +131,17 @@ export function Bar({
       onMouseUp={handleMouseUp}
     >
       {side === 'right' ? edge : null}
-      <box width={contentWidth} flexGrow={1} flexDirection="column" overflow="hidden">
+      {/* The bar is one surface, top to bottom: widgets, the gaps between them,
+          the footer and the gutter all share it, and it runs straight into the
+          tab bar above. Painting each widget separately left the gaps and the
+          footer showing the page colour through, which read as seams. */}
+      <box
+        width={contentWidth}
+        flexGrow={1}
+        flexDirection="column"
+        overflow="hidden"
+        backgroundColor={t.backgroundPanel}
+      >
         {body}
         {side === 'left' ? <BarFooter contentWidth={contentWidth} /> : null}
       </box>
@@ -131,7 +154,6 @@ function BarWidgetSlot({
   bodyRef,
   contentWidth,
   grow,
-  handleColor,
   index,
   isLast,
   onBoundaryResizeStart,
@@ -141,7 +163,6 @@ function BarWidgetSlot({
   bodyRef: React.RefObject<BoxRenderable | null>
   contentWidth: number
   grow: number
-  handleColor: string
   index: number
   isLast: boolean
   side: BarSide
@@ -181,12 +202,16 @@ function BarWidgetSlot({
       >
         {render(contentWidth)}
       </ContextMenuBox>
+      {/* The boundary between two widgets: a blank grabbable row, no rule drawn
+          in it. Widgets read as separate because of the gap, the same way
+          opencode separates its surfaces. */}
       {isLast ? null : (
-        <box minHeight={1} flexShrink={0} onMouseDown={handleBoundaryMouseDown}>
-          <text fg={handleColor} selectable={false}>
-            {RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}
-          </text>
-        </box>
+        <box
+          minHeight={1}
+          width={contentWidth}
+          flexShrink={0}
+          onMouseDown={handleBoundaryMouseDown}
+        />
       )}
     </>
   )

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

@@ -234,7 +234,6 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
               <ProjectRow
                 key={`ws:${project.id}`}
                 project={project}
-                inCurrentGroup={isCurrentProject}
                 projectIndex={projectIndex}
                 dragging={draggingId === project.id}
                 contentWidth={contentWidth}
@@ -249,7 +248,6 @@ export function ProjectList({ contentWidth }: ProjectListProps) {
                   workspace={workspace}
                   projectIndex={projectIndex}
                   isActiveItem={isCurrentProject && workspace.id === activeWorkspaceId}
-                  inCurrentGroup={isCurrentProject}
                   contentWidth={contentWidth}
                 />
               )
@@ -300,13 +298,6 @@ function DropGap({ active, contentWidth, index, setGapRef }: DropGapProps) {
 
 interface ProjectRowProps {
   project: ProjectRecord
-  /**
-   * True when this row belongs to the current project (selection scope).
-   *
-   * There is deliberately no `isActiveItem`: the cursor lives on workspace
-   * rows, and this row is the heading they sit under.
-   */
-  inCurrentGroup: boolean
   /** 1-based index in the visible order, so the "+" can switch projects first. */
   projectIndex: number
   dragging: boolean
@@ -318,7 +309,6 @@ interface ProjectRowProps {
 const ProjectRow = memo(function ProjectRow({
   contentWidth,
   dragging,
-  inCurrentGroup,
   onDragStart,
   project,
   projectIndex,
@@ -329,12 +319,12 @@ const ProjectRow = memo(function ProjectRow({
   const base = useBaseTheme()
   // Only the drag highlight is "selected"-strength here. A heading that lights
   // up like a cursor row is what made the project look like a workspace.
-  let bgColor: string | undefined
-  if (dragging) {
-    bgColor = base.backgroundElement
-  } else if (inCurrentGroup) {
-    bgColor = base.backgroundPanel
-  }
+  // No band for "this row's project is the current one": the bar is a single
+  // backgroundPanel surface now and backgroundElement is spoken for by the
+  // cursor row, which leaves no third tone that works in every theme. The
+  // cursor row — one step off the panel, plus its accent bar — is what says
+  // where you are; the group it sits in follows from that.
+  const bgColor = dragging ? base.backgroundElement : undefined
   const currentProjectId = useAppStore((s) => s.currentProjectId)
 
   const handleMouseDown = useCallback(

package/src/ui/components/layout/sidebar/workspace-row.tsx

@@ -33,14 +33,11 @@ interface WorkspaceRowProps {
   projectIndex: number
   /** True when this row is the active cursor item. */
   isActiveItem: boolean
-  /** True when this row's project is the current project (selection scope). */
-  inCurrentGroup: boolean
   contentWidth: number
 }
 
 export const WorkspaceRow = memo(function WorkspaceRow({
   contentWidth,
-  inCurrentGroup,
   isActiveItem,
   project,
   projectIndex,
@@ -134,12 +131,12 @@ export const WorkspaceRow = memo(function WorkspaceRow({
     return entries
   }, [project.id, workspace.branch, workspace.id, workspace.name, workspace.source])
 
-  let bgColor: string | undefined
-  if (isActiveItem) {
-    bgColor = base.backgroundElement
-  } else if (inCurrentGroup) {
-    bgColor = base.backgroundPanel
-  }
+  // No band for "this row's project is the current one": the bar is a single
+  // backgroundPanel surface now and backgroundElement is spoken for by the
+  // cursor row, which leaves no third tone that works in every theme. The
+  // cursor row — one step off the panel, plus its accent bar — is what says
+  // where you are; the group it sits in follows from that.
+  const bgColor = isActiveItem ? base.backgroundElement : undefined
   // The cursor: a full-height accent bar down the left of the row, both lines
   // of it. The background alone is one step of grey and gets lost among rows
   // that carry colour of their own; a bar the height of the row is found

package/src/ui/components/layout/status-bar.tsx

@@ -129,9 +129,15 @@ export function StatusBar() {
 
   const glyphs = SEPARATOR_GLYPHS[getStatusBarSeparator()]
 
-  const tileB = t.backgroundElement
-  const tileFiller = t.backgroundPanel
-  const tileX = t.backgroundElement
+  // The bar's own band is backgroundElement, not backgroundPanel: the chrome
+  // directly above it — the tab bar and both widget bars — is panel, and with no
+  // rules left anywhere the status bar merged into it. Its two mid tiles drop to
+  // panel to keep a step between tile and filler. Which of the three tones is
+  // lighter is a theme's business (catppuccin recesses, aimux lifts); all that
+  // matters is that they are three different tokens.
+  const tileB = t.backgroundPanel
+  const tileFiller = t.backgroundElement
+  const tileX = t.backgroundPanel
   const tileY = modeColor
 
   const hasB = model.projectSegments.length > 0

package/src/ui/components/layout/terminal-pane.tsx

@@ -44,12 +44,6 @@ interface TerminalPaneProps {
   junctionEdges?: JunctionEdges
 }
 
-function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
-  const t = getCurrentTheme()
-  if (!isActive) return t.border
-  return focusMode === 'terminal-input' ? t.accent : t.primary
-}
-
 function renderSpan(span: TerminalSpan, key: string, softCursor: boolean): ReactNode {
   let node: ReactNode = span.text
 
@@ -177,15 +171,19 @@ const NOOP = (): void => {}
 // wraps) a wheel event bumps _scrollY, and opentui's onResize never re-clamps it,
 // so the offset sticks for the renderable's life: the viewport shifts up, dead
 // rows appear at the bottom, and the prompt scrolls off-screen after `clear`.
-// Pin the offset to 0 and disable the built-in wheel handler outright (it also
-// drives horizontal scroll once wrapMode is "none"). The event still bubbles to
-// forwardScrollEvent, so local scrollback / mouse-forwarding keep working, and
-// selection is unaffected (it's driven by the renderer, not handleScroll).
-// handleScroll is protected; reach it via Reflect, mirroring the scrollY reset
-// already used in TerminalPane.
+//
+// Kill the built-in wheel handler at its dispatch point: processMouseEvent calls
+// onMouseEvent() unconditionally after any React mouse listener, and
+// TextBufferRenderable.onMouseEvent() unconditionally calls handleScroll() for a
+// scroll event. Overriding onMouseEvent (rather than only handleScroll) is a
+// single deterministic no-op standing between every wheel step and _scrollY, so
+// the drift can no longer slip in on a path the later reset misses. Selection is
+// unaffected: it is driven by the renderer (startSelection/updateSelection), not
+// by onMouseEvent, which exists only to scroll. Both are protected; reach them
+// via Reflect, mirroring the scrollY reset already used elsewhere in the pane.
 const pinTerminalScroll = (node: TextRenderable | null): void => {
   if (!node) return
-  Reflect.set(node, 'handleScroll', NOOP)
+  Reflect.set(node, 'onMouseEvent', NOOP)
   if (node.scrollY !== 0) node.scrollY = 0
 }
 
@@ -498,9 +496,13 @@ export function TerminalPane({
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       <ContextMenuBox
-        border
-        borderColor={getBorderColor(paneIsActive, focusMode)}
-        padding={0}
+        // No frame, in any state — not around the pane, not between two split
+        // panes, and nothing that colours itself by focus mode. What was the
+        // border is now plain padding: same one-cell inset, so the geometry
+        // PANE_BORDER describes and the resize/hit-test gutter both still hold,
+        // but the cells are painted in the editor background like everything
+        // else. Surfaces are told apart by their background alone.
+        padding={1}
         flexDirection="column"
         flexGrow={1}
         backgroundColor={editorBg}

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

@@ -5,6 +5,7 @@ import { useCallback, useLayoutEffect, useMemo } from 'react'
 import { collectHelpEntries, HELP_MODE_LABELS } from '../../../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
 import { useKeymap } from '../../../keymap-context'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -24,6 +25,7 @@ function matchesFilter(needle: string, ...fields: (string | undefined)[]): boole
 
 export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const config = useKeymap()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
   const scoped = useMemo(
@@ -50,21 +52,24 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
 
   const items = useMemo<PickerItem[]>(
     () =>
-      filtered.map((entry, index) => ({
-        group: entry.modeLabel,
-        key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
-        title: (
-          <text fg={t.textMuted} wrapMode="none">
-            {entry.description ?? ''}
-          </text>
-        ),
-        trailing: (
-          <text fg={t.textMuted} wrapMode="none">
-            {entry.keysDisplay}
-          </text>
-        ),
-      })),
-    [filtered, t]
+      filtered.map((entry, index) => {
+        const active = index === selectedIndex
+        return {
+          group: entry.modeLabel,
+          key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
+          title: (
+            <text fg={active ? ink : t.textMuted} wrapMode="none">
+              {entry.description ?? ''}
+            </text>
+          ),
+          trailing: (
+            <text fg={active ? ink : t.textMuted} wrapMode="none">
+              {entry.keysDisplay}
+            </text>
+          ),
+        }
+      }),
+    [filtered, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(

package/src/ui/components/modals/app/update-available-modal.tsx

@@ -1,3 +1,4 @@
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
@@ -20,6 +21,7 @@ export function UpdateAvailableModal({
   selectedIndex,
 }: UpdateAvailableModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   return (
     <ModalShell
       title="Update available"
@@ -36,7 +38,7 @@ export function UpdateAvailableModal({
               key={option.label}
               active={active}
               direction="row"
-              title={<text fg={active ? t.text : t.textMuted}>{option.label}</text>}
+              title={<text fg={active ? ink : t.textMuted}>{option.label}</text>}
             />
           )
         })}

package/src/ui/components/modals/git/git-commit-modal.tsx

@@ -172,9 +172,9 @@ export function GitCommitModal({
 
       {isConfirm || isGenerating || !isAutoCommitEnabled() ? null : (
         <box flexDirection="row" gap={1} marginTop={1} alignItems="center">
+          {/* Filled, not framed — the same button the setup widget uses. */}
           <box
-            border
-            borderColor={t.border}
+            backgroundColor={t.backgroundElement}
             paddingLeft={1}
             paddingRight={1}
             flexDirection="row"

package/src/ui/components/modals/projects/create-project-modal.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import type { DirectoryResult } from '../../../../state/types'
 
 import { abbreviatePath } from '../../../path-format'
+import { useSelectionInk } from '../../../selection-ink'
 import { getCurrentTheme, useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
@@ -40,6 +41,7 @@ export function CreateProjectModal({
   selectedIndex,
 }: CreateProjectModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
@@ -47,12 +49,16 @@ export function CreateProjectModal({
     () =>
       results.map((result) => ({
         key: result.path,
-        leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
+        leading: (active) => (
+          <text fg={active ? ink : getDirectoryResultColor(result)}>
+            {getDirectoryResultIcon(result)}
+          </text>
+        ),
         title: (active) => (
-          <text fg={active ? t.text : t.textMuted}>{abbreviatePath(result.path)}</text>
+          <text fg={active ? ink : t.textMuted}>{abbreviatePath(result.path)}</text>
         ),
       })),
-    [results, t]
+    [ink, results, t]
   )
 
   return (

package/src/ui/components/modals/projects/project-picker-modal.tsx

@@ -6,6 +6,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-
 import { filterProjects } from '../../../../state/selectors'
 import { abbreviatePath } from '../../../path-format'
 import { orderProjectsForDisplay } from '../../../project-ordering'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -44,6 +45,7 @@ export function ProjectPickerModal({
   selectedIndex,
 }: ProjectPickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const ordered = useMemo(() => orderProjectsForDisplay(projects), [projects])
   const filtered = useMemo(() => filterProjects(ordered, filter), [filter, ordered])
   const hasFilter = !!(filter != null && filter !== '')
@@ -59,10 +61,10 @@ export function ProjectPickerModal({
         onDelete: () => runSideEffectGlobal({ type: 'delete-selected-project' }),
         subtitle:
           project.projectPath != null && project.projectPath !== '' ? (
-            <text fg={t.textMuted}>{abbreviatePath(project.projectPath)}</text>
+            <text fg={active ? ink : t.textMuted}>{abbreviatePath(project.projectPath)}</text>
           ) : undefined,
         title: (
-          <text fg={active ? t.text : t.textMuted}>
+          <text fg={active ? ink : t.textMuted}>
             {formatProjectLine(project, currentProjectId, currentTabCount, displayIndex)}
           </text>
         ),
@@ -72,13 +74,11 @@ export function ProjectPickerModal({
       key: '__create-new__',
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-project' }),
       title: (
-        <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
-          Create new project
-        </text>
+        <text fg={selectedIndex === filtered.length ? ink : t.textMuted}>Create new project</text>
       ),
     }
     return [...projectItems, createNewItem]
-  }, [currentProjectId, currentTabCount, filtered, ordered, selectedIndex, t])
+  }, [currentProjectId, currentTabCount, filtered, ink, ordered, selectedIndex, t])
 
   const handleHover = useCallback(
     (index: number) => dispatchGlobal({ index, type: 'set-modal-selection-index' }),

package/src/ui/components/modals/settings/settings-search-modal.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react'
 import { filterSettingRows } from '../../../../settings/search'
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { RowValue } from '../../settings/row-value'
@@ -28,25 +29,29 @@ export function SettingsSearchModal({
   selectedIndex,
 }: SettingsSearchModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const projects = useAppStore((s) => s.projects)
   const hits = useMemo(() => filterSettingRows(projects, filter), [projects, filter])
 
   const items = useMemo<PickerItem[]>(
     () =>
-      hits.map((hit) => ({
-        group: hit.sectionLabel,
-        key: hit.row.id,
-        // Acts on the selection, which the hover just set — the same two-step
-        // every other picker's rows use.
-        onClick: () => runSideEffectGlobal({ type: 'confirm-settings-search' }),
-        subtitle:
-          hit.row.description != null && hit.row.description !== '' ? (
-            <text fg={t.textMuted}>{hit.row.description}</text>
-          ) : undefined,
-        title: <text fg={t.text}>{hit.row.label}</text>,
-        trailing: <RowValue row={hit.row} />,
-      })),
-    [hits, t]
+      hits.map((hit, index) => {
+        const active = index === selectedIndex
+        return {
+          group: hit.sectionLabel,
+          key: hit.row.id,
+          // Acts on the selection, which the hover just set — the same two-step
+          // every other picker's rows use.
+          onClick: () => runSideEffectGlobal({ type: 'confirm-settings-search' }),
+          subtitle:
+            hit.row.description != null && hit.row.description !== '' ? (
+              <text fg={active ? ink : t.textMuted}>{hit.row.description}</text>
+            ) : undefined,
+          title: <text fg={active ? ink : t.text}>{hit.row.label}</text>,
+          trailing: <RowValue fg={active ? ink : undefined} row={hit.row} />,
+        }
+      }),
+    [hits, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -37,11 +37,21 @@ export function ModalShell({
       justifyContent="center"
       alignItems="center"
     >
+      {/* No frame, like everything else — the panel background is what lifts the
+          modal off the terminal, and the extra column either side is what makes
+          it read as a card rather than a box drawn on the screen.
+
+          Transparent mode is the one exception that keeps the border: there is
+          no background there to lift anything, so without a rule the modal has
+          no edge at all. */}
       <box
-        border
+        border={transparent}
         borderColor={t.border}
         backgroundColor={bg}
-        padding={1}
+        paddingTop={1}
+        paddingBottom={1}
+        paddingLeft={2}
+        paddingRight={2}
         width={width}
         renderAfter={transparent ? fillBorderedBoxInterior : undefined}
       >

package/src/ui/components/modals/shared/picker.tsx

@@ -4,6 +4,7 @@ import type { MouseEvent as OtuiMouseEvent, ScrollBoxRenderable } from '@opentui
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { BareInput } from '../../primitives/bare-input'
 import { ListItem } from '../../primitives/list-item'
@@ -48,7 +49,10 @@ function PickerItemCtas({
   onDelete?: () => void
   onWorkspace?: () => void
 }) {
-  const t = useTheme()
+  // These only ever render on the selected row, which is filled with `primary` —
+  // so they wear its ink, not the primary/warning/error they would carry
+  // anywhere else. `[edit]` in primary on primary is nothing at all.
+  const ink = useSelectionInk()
   const handleEdit = useCallback(
     (event: OtuiMouseEvent) => {
       event.stopPropagation()
@@ -74,17 +78,17 @@ function PickerItemCtas({
     <box flexDirection="row" gap={1}>
       {onEdit ? (
         <box onMouseDown={handleEdit}>
-          <text fg={t.primary}>[edit]</text>
+          <text fg={ink}>[edit]</text>
         </box>
       ) : null}
       {onWorkspace ? (
         <box onMouseDown={handleWorkspace}>
-          <text fg={t.warning}>[WT]</text>
+          <text fg={ink}>[WT]</text>
         </box>
       ) : null}
       {onDelete ? (
         <box onMouseDown={handleDelete}>
-          <text fg={t.error}>[del]</text>
+          <text fg={ink}>[del]</text>
         </box>
       ) : null}
     </box>

package/src/ui/components/modals/snippets/snippet-picker-modal.tsx

@@ -5,6 +5,7 @@ import type { SnippetRecord } from '../../../../state/types'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { filterSnippets } from '../../../../state/selectors'
 import { isConfigSnippetId } from '../../../../state/snippet-catalog'
+import { useSelectionInk } from '../../../selection-ink'
 import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -33,6 +34,7 @@ export function SnippetPickerModal({
   snippets,
 }: SnippetPickerModalProps) {
   const t = useTheme()
+  const ink = useSelectionInk()
   const filtered = useMemo(() => filterSnippets(snippets, filter), [filter, snippets])
 
   const items = useMemo<PickerItem[]>(
@@ -52,21 +54,21 @@ export function SnippetPickerModal({
           onEdit: fromConfig
             ? undefined
             : () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-          subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
+          subtitle: <text fg={active ? ink : t.textMuted}>{truncateContent(snippet.content)}</text>,
           title: (
             <box flexDirection="row">
-              <text fg={active ? t.text : t.textMuted}>
+              <text fg={active ? ink : t.textMuted}>
                 <strong>{snippet.name}</strong>
               </text>
               {snippet.trigger != null && snippet.trigger !== '' ? (
-                <text fg={t.textMuted}>{` :${snippet.trigger}`}</text>
+                <text fg={active ? ink : t.textMuted}>{` :${snippet.trigger}`}</text>
               ) : null}
-              {fromConfig ? <text fg={t.textMuted}>{' [config]'}</text> : null}
+              {fromConfig ? <text fg={active ? ink : t.textMuted}>{' [config]'}</text> : null}
             </box>
           ),
         }
       }),
-    [filtered, selectedIndex, t]
+    [filtered, ink, selectedIndex, t]
   )
 
   const handleHover = useCallback(