@brimveyn/aimux 1.6.1 → 1.7.0

package/src/ui/components/sidebar.tsx

@@ -1,9 +1,11 @@
-import type { ScrollBoxRenderable } from '@opentui/core'
+import type { Theme } from '@brimveyn/aimux-config'
 
+import { type ScrollBoxRenderable } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
-import { getCurrentTheme, useTheme } from '../theme'
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -19,6 +21,20 @@ const GUTTER_MIDDLE = '├'
 const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
 
+function getRowBackground({
+  alternate,
+  isActive,
+  theme,
+}: {
+  isActive: boolean
+  alternate: boolean
+  theme: Theme
+}): string | undefined {
+  if (isActive) return theme.colors['list.activeSelectionBackground']
+  if (alternate) return theme.colors['editor.lineHighlightBackground']
+  return undefined
+}
+
 const SidebarTop = memo(function SidebarTop() {
   const theme = useTheme()
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
@@ -44,6 +60,19 @@ const SidebarTop = memo(function SidebarTop() {
           <text fg={theme.colors['descriptionForeground']}>{branch}</text>
         </box>
       ) : null}
+      <box
+        flexDirection="row"
+        paddingY={1}
+        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        justifyContent="center"
+        marginTop={1}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+          dispatchGlobal({ type: 'open-new-tab-modal' })
+        }}
+      >
+        <text fg={theme.colors['editor.foreground']}>+ New assistant</text>
+      </box>
       <text fg={theme.colors['editor.lineHighlightBackground']}>
         {'·'.repeat(Math.max(0, sidebarWidth - 2))}
       </text>
@@ -51,25 +80,14 @@ const SidebarTop = memo(function SidebarTop() {
   )
 })
 
-function renderGroupGutter(
-  isGroupStart: boolean,
-  isGroupMiddle: boolean,
-  isGroupEnd: boolean,
-  isActive: boolean
-) {
+function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text
-        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
-        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
-      >
+      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text
-        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
-        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
-      >
+      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
         {isGroupEnd ? GUTTER_END : GUTTER_PAD}
       </text>
     </box>
@@ -116,6 +134,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
       ) : (
         tabs.map((tab, index) => {
           const isActive = tab.id === activeTabId
+          const alternate = index % 2 === 1
           const info = tabGroupInfo.get(tab.id)
           const inLayout = !!info?.inLayout
           const inGroup = info ? index >= info.groupStart && index <= info.groupEnd : false
@@ -126,19 +145,20 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
           return (
             <box
               key={tab.id}
+              backgroundColor={getRowBackground({ alternate, isActive, theme })}
               flexDirection="row"
-              onMouseDown={onTabActivate ? () => onTabActivate(tab.id) : undefined}
+              onMouseDown={(event) => {
+                event.stopPropagation()
+                onTabActivate?.(tab.id)
+              }}
             >
-              {inGroup
-                ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd, isActive)
-                : null}
+              {inGroup ? renderGroupGutter(isGroupStart, isGroupMiddle, isGroupEnd) : null}
               <box flexGrow={1}>
                 <TabItem
                   id={`sidebar-tab-${tab.id}`}
                   tab={tab}
                   active={isActive}
                   focused={focusMode === 'navigation'}
-                  isFocusedInput={isActive && focusMode === 'terminal-input'}
                   inLayout={inLayout}
                 />
               </box>
@@ -152,9 +172,11 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
 
 export function Sidebar({ onTabActivate }: SidebarProps) {
   const theme = useTheme()
+  const sidebarBg = useBg('sideBar.background')
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
+  const focusMode = useAppStore((s) => s.focusMode)
 
   if (!sidebarVisible) {
     return null
@@ -184,8 +206,13 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       width={sidebarWidth}
       padding={0}
       flexDirection="column"
-      backgroundColor={theme.colors['sideBar.background']}
+      backgroundColor={sidebarBg}
       gap={0}
+      onMouseDown={() => {
+        if (focusMode === 'terminal-input') {
+          dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
+        }
+      }}
     >
       <SidebarTop />
       {gitOnTop ? (

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

@@ -1,16 +1,16 @@
 import type { SnippetRecord } from '../../state/types'
 
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterSnippets } from '../../state/selectors'
 import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalFilterBar } from './modal-filter-bar'
-import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface SnippetPickerModalProps {
   snippets: SnippetRecord[]
   selectedIndex: number
   filter: string | null
+  cursorPos?: number
 }
 
 const MAX_PREVIEW_LENGTH = 60
@@ -21,45 +21,54 @@ function truncateContent(content: string): string {
   return `${normalized.slice(0, MAX_PREVIEW_LENGTH - 3)}...`
 }
 
-export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
+export function SnippetPickerModal({
+  cursorPos,
+  filter,
+  selectedIndex,
+  snippets,
+}: SnippetPickerModalProps) {
   const theme = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
+  const items: PickerItem[] = filtered.map((snippet, index) => {
+    const active = index === selectedIndex
+    return {
+      key: snippet.id,
+      onClick: () => {
+        dispatchGlobal({ type: 'close-modal' })
+        runSideEffectGlobal({ type: 'paste-selected-snippet' })
+      },
+      onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
+      onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
+      subtitle: (
+        <text fg={theme.colors['descriptionForeground']}>{truncateContent(snippet.content)}</text>
+      ),
+      title: (
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          <strong>{snippet.name}</strong>
+        </text>
+      ),
+    }
+  })
+
   return (
-    <ModalShell
+    <Picker
       title="Snippets"
-      keybindsModeId="modal.snippet-picker"
+      keybindsModeId="modal.snippet-picker.filtering"
       width={uiTokens.modalWidth.xl}
-      footer={<ModalFilterBar filter={filter} />}
-    >
-      {filtered.length === 0 ? (
+      gap={1}
+      filter={filter}
+      cursorPos={cursorPos}
+      items={items}
+      selectedIndex={selectedIndex}
+      emptyState={
         <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
-      ) : null}
-      {filtered.map((snippet, index) => {
-        const active = index === selectedIndex
-        return (
-          <ListItem
-            key={snippet.id}
-            active={active}
-            title={
-              <text
-                fg={
-                  active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-                }
-              >
-                <strong>{snippet.name}</strong>
-              </text>
-            }
-            subtitle={
-              <text fg={theme.colors['descriptionForeground']}>
-                {truncateContent(snippet.content)}
-              </text>
-            }
-          />
-        )
-      })}
-    </ModalShell>
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }

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

@@ -4,7 +4,7 @@ import { version as APP_VERSION } from '../../../package.json'
 import { useAppStore } from '../../state/app-store'
 import { useKeymap } from '../keymap-context'
 import { getStatusBarModel } from '../status-bar-model'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
   const t = getCurrentTheme()
@@ -41,6 +41,7 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 
 export function StatusBar() {
   const theme = useTheme()
+  const headerBg = useBg('sideBarSectionHeader.background')
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
@@ -54,7 +55,7 @@ export function StatusBar() {
       paddingTop={0}
       paddingBottom={0}
       flexDirection="column"
-      backgroundColor={theme.colors['sideBarSectionHeader.background']}
+      backgroundColor={headerBg}
     >
       <box width="100%" flexDirection="row">
         <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>

package/src/ui/components/surface.tsx

@@ -1,22 +1,24 @@
 import type { ReactNode } from 'react'
 
-import { getCurrentTheme } from '../theme'
+import type { ThemeColorMap } from '../themes'
+
+import { useBg } from '../theme'
 
 type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 
-function getSurfaceColor(tone: SurfaceTone): string {
+function toneToColorKey(tone: SurfaceTone): keyof ThemeColorMap {
   switch (tone) {
     case 'elevated':
-      return getCurrentTheme().colors['sideBar.background']
+      return 'sideBar.background'
     case 'selected':
-      return getCurrentTheme().colors['list.activeSelectionBackground']
+      return 'list.activeSelectionBackground'
     case 'input':
-      return getCurrentTheme().colors['editor.background']
+      return 'editor.background'
     case 'inputActive':
-      return getCurrentTheme().colors['list.activeSelectionBackground']
+      return 'list.activeSelectionBackground'
     case 'muted':
     default:
-      return getCurrentTheme().colors['sideBarSectionHeader.background']
+      return 'sideBarSectionHeader.background'
   }
 }
 
@@ -45,9 +47,10 @@ export function Surface({
   tone = 'muted',
   width,
 }: SurfaceProps) {
+  const bg = useBg(toneToColorKey(tone))
   return (
     <box
-      backgroundColor={getSurfaceColor(tone)}
+      backgroundColor={bg}
       flexDirection={flexDirection}
       gap={gap}
       padding={padding}

package/src/ui/components/tab-item.tsx

@@ -1,5 +1,8 @@
+import { useState } from 'react'
+
 import type { TabSession } from '../../state/types'
 
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { getCurrentTheme, useTheme } from '../theme'
 
@@ -8,7 +11,6 @@ interface TabItemProps {
   tab: TabSession
   active: boolean
   focused: boolean
-  isFocusedInput: boolean
   inLayout?: boolean
 }
 
@@ -20,8 +22,6 @@ function getStatusColor(status: TabSession['status']): string {
       return getCurrentTheme().colors['editorWarning.foreground']
     case 'error':
       return getCurrentTheme().colors['editorError.foreground']
-    case 'exited':
-      return getCurrentTheme().colors['editorWarning.foreground']
     default:
       return getCurrentTheme().colors['descriptionForeground']
   }
@@ -50,10 +50,15 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 function BusyIndicator() {
   const theme = useTheme()
   const frame = useBusySpinner()
-  return <text fg={theme.colors['textLink.foreground']}>{frame} busy</text>
+  return <text fg={theme.colors['textLink.foreground']}>{frame} working</text>
+}
+
+function WaitingIndicator() {
+  const theme = useTheme()
+  return <text fg={theme.colors['editorWarning.foreground']}>? waiting</text>
 }
 
-function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {
+function ActivityIndicator({ tab }: { tab: TabSession }) {
   const theme = useTheme()
   if (tab.status === 'error') {
     return <text fg={theme.colors['editorError.foreground']}>✗ error</text>
@@ -63,16 +68,12 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
     return <text fg={theme.colors['editorWarning.foreground']}>⏸ restore</text>
   }
 
-  if (tab.status === 'exited') {
-    return <text fg={theme.colors['editorWarning.foreground']}>⏹ exited</text>
+  if (tab.activity === 'working') {
+    return <BusyIndicator />
   }
 
-  if (isFocusedInput) {
-    return <text fg={theme.colors['focusBorder']}>▸ focused</text>
-  }
-
-  if (tab.activity === 'busy') {
-    return <BusyIndicator />
+  if (tab.activity === 'waiting-input') {
+    return <WaitingIndicator />
   }
 
   if (tab.activity === 'idle') {
@@ -82,12 +83,13 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
   return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
 }
 
-export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }: TabItemProps) {
+export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
   const theme = useTheme()
   const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
   const indicatorColor = getIndicatorColor(active, focused, isInLayout)
+  const [hovered, setHovered] = useState(false)
 
   return (
     <box
@@ -96,21 +98,35 @@ export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }:
       paddingRight={1}
       paddingTop={0}
       paddingBottom={0}
-      backgroundColor={active ? theme.colors['list.activeSelectionBackground'] : undefined}
       flexDirection="column"
       gap={0}
+      onMouseOver={() => setHovered(true)}
+      onMouseOut={() => setHovered(false)}
     >
-      <box flexDirection="row">
+      <box flexDirection="row" alignItems="center">
         <text fg={indicatorColor}>{indicator} </text>
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
-          {tab.title}
-        </text>
+        <box flexGrow={1}>
+          <text
+            fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+          >
+            {tab.title}
+          </text>
+        </box>
+        {hovered ? (
+          <box
+            onMouseDown={(event) => {
+              event.stopPropagation()
+              dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+              runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+            }}
+          >
+            <text fg={theme.colors['descriptionForeground']}>×</text>
+          </box>
+        ) : null}
       </box>
       <box flexDirection="row">
         <text fg={theme.colors['descriptionForeground']}> {label} </text>
-        <ActivityIndicator tab={tab} isFocusedInput={isFocusedInput} />
+        <ActivityIndicator tab={tab} />
       </box>
     </box>
   )

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

@@ -6,7 +6,7 @@ import type { TerminalContentOrigin } from '../../input/raw-input-handler'
 import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
 
 import { logInputDebug } from '../../debug/input-log'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTheme, useBg, useTheme } from '../theme'
 
 interface TerminalPaneProps {
   tab?: TabSession
@@ -125,6 +125,7 @@ export function TerminalPane({
   tabId,
 }: TerminalPaneProps) {
   const theme = useTheme()
+  const editorBg = useBg('editor.background')
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
@@ -185,7 +186,8 @@ export function TerminalPane({
         padding={0}
         flexDirection="column"
         flexGrow={1}
-        backgroundColor={theme.colors['editor.background']}
+        backgroundColor={editorBg}
+        onMouseDown={forwardMouseEvent}
         onMouseDrag={forwardMouseEvent}
         onMouseScroll={forwardScrollEvent}
         onMouseUp={forwardMouseEvent}
@@ -205,7 +207,10 @@ export function TerminalPane({
             flexDirection="column"
             flexGrow={1}
             width="100%"
-            onMouseDown={forwardMouseEvent}
+            onMouseDown={(e) => {
+              e.stopPropagation()
+              forwardMouseEvent(e)
+            }}
             onMouseUp={forwardMouseEvent}
             onMouseDrag={forwardMouseEvent}
             onMouseScroll={forwardScrollEvent}
@@ -214,11 +219,6 @@ export function TerminalPane({
           </box>
         )}
       </box>
-      {tab?.status === 'exited' && tab.exitCode !== undefined ? (
-        <text fg={theme.colors['editorWarning.foreground']}>
-          Process exited with code {tab.exitCode}
-        </text>
-      ) : null}
       {tab?.status === 'disconnected' ? (
         <text fg={theme.colors['editorWarning.foreground']}>
           Restored snapshot. Press Ctrl+r to restart this session.

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

@@ -1,52 +1,32 @@
-import { useTerminalDimensions } from '@opentui/react'
-import { useLayoutEffect, useMemo, useRef } from 'react'
+import { useLayoutEffect, useMemo } from 'react'
 
-import { dispatchGlobal } from '../../state/dispatch-ref'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterThemeIds } from '../filter-themes'
-import { useTheme } from '../theme'
+import { useTheme, useTransparent } from '../theme'
 import { type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalFilterBar } from './modal-filter-bar'
-import { ModalShell } from './modal-shell'
+import { Picker, type PickerItem } from './picker'
 
 interface ThemePickerModalProps {
   currentThemeId: ThemeId
   filter: string | null
   selectedIndex: number
+  cursorPos?: number
 }
 
-const VIEWPORT_HEIGHT_RATIO = 0.6
-const MODAL_CHROME_ROWS = 6
-
 function clampSelection(index: number, count: number): number {
   if (count === 0) return 0
   return Math.max(0, Math.min(count - 1, index))
 }
 
-function computeWindowStart(
-  prevStart: number,
-  selectedRowIndex: number,
-  total: number,
-  windowSize: number
-): number {
-  if (total <= windowSize) return 0
-  const margin = 1
-  const maxStart = total - windowSize
-  let start = Math.max(0, Math.min(maxStart, prevStart))
-  const topThreshold = start + margin
-  const bottomThreshold = start + windowSize - 1 - margin
-  if (selectedRowIndex < topThreshold) {
-    start = Math.max(0, selectedRowIndex - margin)
-  } else if (selectedRowIndex > bottomThreshold) {
-    start = Math.min(maxStart, selectedRowIndex - windowSize + 1 + margin)
-  }
-  return start
-}
-
-export function ThemePickerModal({ currentThemeId, filter, selectedIndex }: ThemePickerModalProps) {
+export function ThemePickerModal({
+  currentThemeId,
+  cursorPos,
+  filter,
+  selectedIndex,
+}: ThemePickerModalProps) {
   const theme = useTheme()
-  const dimensions = useTerminalDimensions()
+  const transparent = useTransparent()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
 
   useLayoutEffect(() => {
@@ -54,78 +34,58 @@ export function ThemePickerModal({ currentThemeId, filter, selectedIndex }: Them
   }, [filtered.length])
 
   const effectiveIndex = clampSelection(selectedIndex, filtered.length)
-  const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
-  const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
 
-  const prevStartRef = useRef(0)
-  const prevFilterRef = useRef<string | null>(filter)
-  if (prevFilterRef.current !== filter) {
-    prevFilterRef.current = filter
-    prevStartRef.current = 0
-  }
-  const start = computeWindowStart(
-    prevStartRef.current,
-    effectiveIndex,
-    filtered.length,
-    listHeight
-  )
-  prevStartRef.current = start
-  const visible = filtered.slice(start, start + listHeight)
+  const items: PickerItem[] = filtered.flatMap((id, rowIndex) => {
+    const entry = THEMES[id]
+    if (!entry) return []
+    const active = rowIndex === effectiveIndex
+    const isCurrent = id === currentThemeId
+    return [
+      {
+        key: id,
+        onClick: () => {
+          dispatchGlobal({ type: 'close-modal' })
+          runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
+        },
+        title: (
+          <text
+            fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+          >
+            {entry.name}
+          </text>
+        ),
+        trailing: isCurrent ? (
+          <text fg={theme.colors['textLink.foreground']}>current</text>
+        ) : undefined,
+      },
+    ]
+  })
 
   return (
-    <ModalShell
+    <Picker
       title="Select theme"
-      keybindsModeId="modal.theme-picker"
+      keybindsModeId="modal.theme-picker.filtering"
       width={uiTokens.modalWidth.md}
-      listGap={0}
+      filter={filter}
+      cursorPos={cursorPos}
       footer={
         <box flexDirection="column" gap={0}>
           <text fg={theme.colors['editor.lineHighlightBackground']}>
-            {filtered.length === 0
-              ? ''
-              : ` ${effectiveIndex + 1} / ${filtered.length}${filter ? '' : ' — type / to filter'}`}
+            {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
+          </text>
+          <text fg={theme.colors['descriptionForeground']}>
+            {` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}
           </text>
-          <ModalFilterBar filter={filter} />
         </box>
       }
-    >
-      {filtered.length === 0 ? (
+      items={items}
+      selectedIndex={effectiveIndex}
+      emptyState={
         <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching themes.' : 'No themes available.'}
         </text>
-      ) : (
-        <box height={listHeight} flexDirection="column" overflow="hidden">
-          {visible.map((id, i) => {
-            const rowIndex = start + i
-            const entry = THEMES[id]
-            if (!entry) return null
-            const active = rowIndex === effectiveIndex
-            const isCurrent = id === currentThemeId
-            return (
-              <ListItem
-                key={id}
-                active={active}
-                title={
-                  <text
-                    fg={
-                      active
-                        ? theme.colors['editor.foreground']
-                        : theme.colors['descriptionForeground']
-                    }
-                  >
-                    {entry.name}
-                  </text>
-                }
-                trailing={
-                  isCurrent ? (
-                    <text fg={theme.colors['textLink.foreground']}>current</text>
-                  ) : undefined
-                }
-              />
-            )
-          })}
-        </box>
-      )}
-    </ModalShell>
+      }
+      onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
+    />
   )
 }