@brimveyn/aimux 1.23.7 → 1.24.1

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

@@ -9,6 +9,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-
 import { formatDiffStat } from '../../../../state/project-workspaces'
 // eslint-disable-next-line no-duplicate-imports
 import { IDLE_WORKSPACE_ACTIVITY } from '../../../../state/types'
+import { useWorkspaceDeleteStore } from '../../../../state/workspace-delete-store'
 import { useActivitySprite } from '../../../hooks/use-activity-sprite'
 import { useBusySpinner } from '../../../hooks/use-busy-spinner'
 // eslint-disable-next-line no-duplicate-imports
@@ -33,14 +34,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,
@@ -59,9 +57,13 @@ export const WorkspaceRow = memo(function WorkspaceRow({
   // own: one shape is what keeps a cell from resolving to the wrong image.
   const hasBranch = workspace.branch != null && workspace.branch !== ''
   const sprite = useActivitySprite(hasBranch ? spriteStateFor(activity) : null)
+  // A delete takes seconds of git work with the row still on screen. The branch
+  // line is where it says so — the name above it is what you are looking for,
+  // and the branch under it is the one fact the delete is about to take away.
+  const isDeleting = useWorkspaceDeleteStore((s) => s.deleting[workspace.id] !== undefined)
   // Only the working case animates, so the timer is off for every other row —
   // and off entirely when a sprite is drawing this row instead.
-  const spinner = useBusySpinner(activity.working && sprite === null)
+  const spinner = useBusySpinner(isDeleting || (activity.working && sprite === null))
   // A primitive, so the selector stays referentially stable across renders.
   const hasSleepingTabs = useAppStore((s) =>
     s.tabs.some((tab) => tab.workspaceId === workspace.id && tab.hibernated === true)
@@ -124,7 +126,6 @@ export const WorkspaceRow = memo(function WorkspaceRow({
             closeTabs: true,
             force: false,
             projectId: project.id,
-            reason: 'Its assistant tabs will be closed and the worktree removed.',
             type: 'open-workspace-delete-confirm',
             workspaceId: workspace.id,
             workspaceLabel: workspace.branch ?? workspace.name,
@@ -134,12 +135,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
@@ -246,7 +247,7 @@ export const WorkspaceRow = memo(function WorkspaceRow({
           </text>
         ) : null}
       </box>
-      {branchLabel == null ? null : (
+      {branchLabel == null && !isDeleting ? null : (
         <box flexDirection="row" alignItems="center">
           <text fg={t.primary} selectable={false} wrapMode="none">
             {cursorGlyph}
@@ -257,9 +258,15 @@ export const WorkspaceRow = memo(function WorkspaceRow({
           <text fg={statusColor} selectable={false} wrapMode="none">
             {sprite?.glyphs[1] ?? '  '}
           </text>
-          <text fg={t.textMuted} selectable={false} wrapMode="none">
-            {'\u{e702}'} {branchLabel}
-          </text>
+          {isDeleting ? (
+            <text fg={t.error} selectable={false} wrapMode="none">
+              {spinner} Deleting…
+            </text>
+          ) : (
+            <text fg={t.textMuted} selectable={false} wrapMode="none">
+              {'\u{e702}'} {branchLabel}
+            </text>
+          )}
         </box>
       )}
     </ContextMenuBox>

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/shared/workspace-delete-confirm.tsx

@@ -6,7 +6,11 @@ import { Form } from './form'
 
 interface WorkspaceDeleteConfirmProps {
   keybindsModeId: ModeId
-  reason: string
+  /**
+   * One short line naming what confirming costs beyond the delete itself.
+   * Omitted for the ordinary case, where the title already said everything.
+   */
+  reason?: string
   workspaceLabel: string
 }
 
@@ -24,16 +28,13 @@ export function WorkspaceDeleteConfirm({
   return (
     <Form
       title="Delete workspace?"
+      subtitle={workspaceLabel}
       keybindsModeId={keybindsModeId}
       width={uiTokens.modalWidth.md}
+      // Destructive confirmation — the one place §7 keeps an inline key hint.
       footer={<text fg={t.textMuted}>Enter / y to delete · Esc / n to cancel</text>}
     >
-      <box flexDirection="column" gap={1}>
-        <text fg={t.text}>
-          Delete <strong>{workspaceLabel}</strong>?
-        </text>
-        <text fg={t.warning}>{reason}</text>
-      </box>
+      {reason == null || reason === '' ? null : <text fg={t.textMuted}>{reason}</text>}
     </Form>
   )
 }

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(