@brimveyn/aimux 1.5.0 → 1.6.0

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

@@ -2,6 +2,7 @@ import type { SessionRecord } from '../../state/types'
 
 import { filterSessions } from '../../state/selectors'
 import { abbreviatePath } from '../path-format'
+import { orderSessionsForDisplay } from '../session-ordering'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
@@ -19,13 +20,14 @@ interface SessionPickerModalProps {
 function formatSessionLine(
   session: SessionRecord,
   currentSessionId: string | null,
-  currentTabCount: number
+  currentTabCount: number,
+  displayIndex: number
 ): string {
   const tabCount =
     session.id === currentSessionId
       ? currentTabCount
       : (session.workspaceSnapshot?.tabs.length ?? 0)
-  return `${session.name} (${tabCount} tab${tabCount === 1 ? '' : 's'})`
+  return `[${displayIndex}] ${session.name} (${tabCount} tab${tabCount === 1 ? '' : 's'})`
 }
 
 function getEmptyStateMessage(hasFilter: boolean): string {
@@ -43,7 +45,9 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const filtered = filterSessions(sessions, filter)
+  const ordered = orderSessionsForDisplay(sessions)
+  const baselineOrder = ordered.map((s) => s.id)
+  const filtered = filterSessions(ordered, filter)
   const hasFilter = !!filter
   const showFilteredEmptyState = filtered.length === 0 && sessions.length > 0
   const showInitialEmptyState = filtered.length === 0 && sessions.length === 0
@@ -56,25 +60,32 @@ export function SessionPickerModal({
       footer={<ModalFilterBar filter={filter} />}
     >
       {showFilteredEmptyState ? (
-        <text fg={theme.textMuted}>{getEmptyStateMessage(hasFilter)}</text>
+        <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(hasFilter)}</text>
       ) : null}
       {showInitialEmptyState ? (
-        <text fg={theme.textMuted}>{getEmptyStateMessage(false)}</text>
+        <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(false)}</text>
       ) : null}
       {filtered.map((session, index) => {
         const active = index === selectedIndex
+        const displayIndex = baselineOrder.indexOf(session.id) + 1
         return (
           <ListItem
             key={session.id}
             active={active}
             title={
-              <text fg={active ? theme.text : theme.textMuted}>
-                {formatSessionLine(session, currentSessionId, currentTabCount)}
+              <text
+                fg={
+                  active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+                }
+              >
+                {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
               </text>
             }
             subtitle={
               session.projectPath ? (
-                <text fg={theme.textMuted}>{abbreviatePath(session.projectPath)}</text>
+                <text fg={theme.colors['descriptionForeground']}>
+                  {abbreviatePath(session.projectPath)}
+                </text>
               ) : undefined
             }
           />
@@ -83,7 +94,13 @@ export function SessionPickerModal({
       <ListItem
         active={selectedIndex === filtered.length}
         title={
-          <text fg={selectedIndex === filtered.length ? theme.text : theme.textMuted}>
+          <text
+            fg={
+              selectedIndex === filtered.length
+                ? theme.colors['editor.foreground']
+                : theme.colors['descriptionForeground']
+            }
+          >
             Create new session
           </text>
         }

package/src/ui/components/sidebar.tsx

@@ -31,19 +31,21 @@ const SidebarTop = memo(function SidebarTop() {
 
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={theme.accent}>
+      <text fg={theme.colors['textLink.foreground']}>
         <strong>aimux</strong>
       </text>
-      <text fg={theme.accentAlt}>
+      <text fg={theme.colors['terminal.ansiMagenta']}>
         {currentSession ? currentSession.name : 'No session selected'}
       </text>
       {branch ? (
         <box flexDirection="row">
-          <text fg={theme.accent}>{'\u{e702}'} </text>
-          <text fg={theme.textMuted}>{branch}</text>
+          <text fg={theme.colors['textLink.foreground']}>{'\u{e702}'} </text>
+          <text fg={theme.colors['descriptionForeground']}>{branch}</text>
         </box>
       ) : null}
-      <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+      <text fg={theme.colors['editor.lineHighlightBackground']}>
+        {'·'.repeat(Math.max(0, sidebarWidth - 2))}
+      </text>
     </box>
   )
 })
@@ -56,11 +58,17 @@ function renderGroupGutter(
 ) {
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={theme.accentAlt} bg={isActive ? theme.panelHighlight : undefined}>
+      <text
+        fg={theme.colors['terminal.ansiMagenta']}
+        bg={isActive ? theme.colors['list.activeSelectionBackground'] : undefined}
+      >
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text fg={theme.accentAlt} bg={isActive ? theme.panelHighlight : undefined}>
+      <text
+        fg={theme.colors['terminal.ansiMagenta']}
+        bg={isActive ? theme.colors['list.activeSelectionBackground'] : undefined}
+      >
         {isGroupEnd ? GUTTER_END : GUTTER_PAD}
       </text>
     </box>
@@ -101,7 +109,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
-          <text fg={theme.textMuted}>No tabs yet. Press Ctrl+n.</text>
+          <text fg={theme.colors['descriptionForeground']}>No tabs yet. Press Ctrl+n.</text>
         </box>
       ) : (
         tabs.map((tab, index) => {
@@ -157,7 +165,11 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
   const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.ratio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.ratio * 100)) : 0
 
-  const separator = <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+  const separator = (
+    <text fg={theme.colors['editor.lineHighlightBackground']}>
+      {'·'.repeat(Math.max(0, sidebarWidth - 2))}
+    </text>
+  )
   const gitBody = gitEmbedded ? (
     <box flexDirection="column" flexGrow={gitGrow} flexShrink={1} flexBasis={0} overflow="hidden">
       <GitPaneWidget pollingEnabled={gitPane.visible} />
@@ -169,7 +181,7 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
       width={sidebarWidth}
       padding={0}
       flexDirection="column"
-      backgroundColor={theme.panel}
+      backgroundColor={theme.colors['sideBar.background']}
       gap={0}
     >
       <SidebarTop />

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

@@ -26,12 +26,26 @@ export function SnippetEditorModal({
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">
-        <text fg={nameActive ? theme.text : theme.textMuted}>Name</text>
+        <text
+          fg={
+            nameActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+          }
+        >
+          Name
+        </text>
         <InputField active={nameActive} value={snippetName} />
       </box>
 
       <box flexDirection="column">
-        <text fg={contentActive ? theme.text : theme.textMuted}>Content</text>
+        <text
+          fg={
+            contentActive
+              ? theme.colors['editor.foreground']
+              : theme.colors['descriptionForeground']
+          }
+        >
+          Content
+        </text>
         <InputField active={contentActive} value={snippetContent} />
       </box>
     </ModalShell>

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

@@ -32,7 +32,7 @@ export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetP
       footer={<ModalFilterBar filter={filter} />}
     >
       {filtered.length === 0 ? (
-        <text fg={theme.textMuted}>
+        <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
       ) : null}
@@ -43,11 +43,19 @@ export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetP
             key={snippet.id}
             active={active}
             title={
-              <text fg={active ? theme.text : theme.textMuted}>
+              <text
+                fg={
+                  active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+                }
+              >
                 <strong>{snippet.name}</strong>
               </text>
             }
-            subtitle={<text fg={theme.textMuted}>{truncateContent(snippet.content)}</text>}
+            subtitle={
+              <text fg={theme.colors['descriptionForeground']}>
+                {truncateContent(snippet.content)}
+              </text>
+            }
           />
         )
       })}

package/src/ui/components/split-layout.tsx

@@ -134,7 +134,7 @@ export function SplitLayout({
       <box
         minWidth={node.direction === 'vertical' ? 1 : undefined}
         minHeight={node.direction === 'horizontal' ? 1 : undefined}
-        backgroundColor={theme.border}
+        backgroundColor={theme.colors['editorGroup.border']}
         onMouseDown={(e: OtuiMouseEvent) => {
           e.preventDefault()
           if (!onSeparatorDragStart) return

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

@@ -9,16 +9,16 @@ import { theme } from '../theme'
 function getModeColor(focusMode: AppState['focusMode']): string {
   switch (focusMode) {
     case 'terminal-input':
-      return theme.accent
+      return theme.colors['textLink.foreground']
     case 'modal':
-      return theme.warning
+      return theme.colors['editorWarning.foreground']
     case 'command-edit':
-      return theme.warning
+      return theme.colors['editorWarning.foreground']
     case 'git':
-      return theme.success
+      return theme.colors['gitDecoration.addedResourceForeground']
     case 'navigation':
     default:
-      return theme.accentAlt
+      return theme.colors['terminal.ansiMagenta']
   }
 }
 
@@ -52,16 +52,19 @@ export function StatusBar() {
       paddingTop={0}
       paddingBottom={0}
       flexDirection="column"
-      backgroundColor={theme.panelMuted}
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
     >
       <box width="100%" flexDirection="row">
         <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>
         <text> </text>
-        <text fg={theme.text}>{model.left}</text>
+        <text fg={theme.colors['editor.foreground']}>{model.left}</text>
       </box>
       <box width="100%" flexDirection="row" justifyContent="space-between">
-        <text fg={theme.textMuted}>{model.right}</text>
-        <text fg={theme.dim}>v{APP_VERSION}</text>
+        <text fg={theme.colors['descriptionForeground']}>{model.right}</text>
+        <box flexDirection="row" gap={2}>
+          {model.help ? <text fg={theme.colors['descriptionForeground']}>{model.help}</text> : null}
+          <text fg={theme.colors['editor.lineHighlightBackground']}>v{APP_VERSION}</text>
+        </box>
       </box>
     </box>
   )

package/src/ui/components/surface.tsx

@@ -7,16 +7,16 @@ type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 function getSurfaceColor(tone: SurfaceTone): string {
   switch (tone) {
     case 'elevated':
-      return theme.panel
+      return theme.colors['sideBar.background']
     case 'selected':
-      return theme.panelHighlight
+      return theme.colors['list.activeSelectionBackground']
     case 'input':
-      return theme.background
+      return theme.colors['editor.background']
     case 'inputActive':
-      return theme.panelHighlight
+      return theme.colors['list.activeSelectionBackground']
     case 'muted':
     default:
-      return theme.panelMuted
+      return theme.colors['sideBarSectionHeader.background']
   }
 }
 

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

@@ -15,15 +15,15 @@ interface TabItemProps {
 function getStatusColor(status: TabSession['status']): string {
   switch (status) {
     case 'running':
-      return theme.success
+      return theme.colors['gitDecoration.addedResourceForeground']
     case 'disconnected':
-      return theme.warning
+      return theme.colors['editorWarning.foreground']
     case 'error':
-      return theme.danger
+      return theme.colors['editorError.foreground']
     case 'exited':
-      return theme.warning
+      return theme.colors['editorWarning.foreground']
     default:
-      return theme.textMuted
+      return theme.colors['descriptionForeground']
   }
 }
 
@@ -37,32 +37,34 @@ function getIndicator(active: boolean, focused: boolean, inLayout: boolean): str
 
 function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean): string {
   if (active) {
-    return focused ? theme.accent : theme.accentAlt
+    return focused ? theme.colors['textLink.foreground'] : theme.colors['terminal.ansiMagenta']
   }
 
-  return inLayout ? theme.textMuted : theme.dim
+  return inLayout
+    ? theme.colors['descriptionForeground']
+    : theme.colors['editor.lineHighlightBackground']
 }
 
 function BusyIndicator() {
   const frame = useBusySpinner()
-  return <text fg={theme.accent}>{frame} busy</text>
+  return <text fg={theme.colors['textLink.foreground']}>{frame} busy</text>
 }
 
 function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {
   if (tab.status === 'error') {
-    return <text fg={theme.danger}>✗ error</text>
+    return <text fg={theme.colors['editorError.foreground']}>✗ error</text>
   }
 
   if (tab.status === 'disconnected') {
-    return <text fg={theme.warning}>⏸ restore</text>
+    return <text fg={theme.colors['editorWarning.foreground']}>⏸ restore</text>
   }
 
   if (tab.status === 'exited') {
-    return <text fg={theme.warning}>⏹ exited</text>
+    return <text fg={theme.colors['editorWarning.foreground']}>⏹ exited</text>
   }
 
   if (isFocusedInput) {
-    return <text fg={theme.borderActive}>▸ focused</text>
+    return <text fg={theme.colors['focusBorder']}>▸ focused</text>
   }
 
   if (tab.activity === 'busy') {
@@ -70,7 +72,7 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
   }
 
   if (tab.activity === 'idle') {
-    return <text fg={theme.success}>● idle</text>
+    return <text fg={theme.colors['gitDecoration.addedResourceForeground']}>● idle</text>
   }
 
   return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
@@ -89,16 +91,20 @@ export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }:
       paddingRight={1}
       paddingTop={0}
       paddingBottom={0}
-      backgroundColor={active ? theme.panelHighlight : undefined}
+      backgroundColor={active ? theme.colors['list.activeSelectionBackground'] : undefined}
       flexDirection="column"
       gap={0}
     >
       <box flexDirection="row">
         <text fg={indicatorColor}>{indicator} </text>
-        <text fg={active ? theme.text : theme.textMuted}>{tab.title}</text>
+        <text
+          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
+        >
+          {tab.title}
+        </text>
       </box>
       <box flexDirection="row">
-        <text fg={theme.textMuted}> {label} </text>
+        <text fg={theme.colors['descriptionForeground']}> {label} </text>
         <ActivityIndicator tab={tab} isFocusedInput={isFocusedInput} />
       </box>
     </box>

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

@@ -46,14 +46,14 @@ function getTitle(
 
 function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
   if (isActive && focusMode === 'terminal-input') {
-    return theme.borderActive
+    return theme.colors['focusBorder']
   }
 
   if (isActive) {
-    return theme.accentAlt
+    return theme.colors['terminal.ansiMagenta']
   }
 
-  return theme.dim
+  return theme.colors['editor.lineHighlightBackground']
 }
 
 function renderSpan(span: TerminalSpan, key: string): ReactNode {
@@ -72,7 +72,7 @@ function renderSpan(span: TerminalSpan, key: string): ReactNode {
   }
 
   return (
-    <span key={key} fg={span.fg ?? theme.text} bg={span.bg}>
+    <span key={key} fg={span.fg ?? theme.colors['editor.foreground']} bg={span.bg}>
       {node}
     </span>
   )
@@ -90,7 +90,7 @@ const TerminalViewport = memo(function TerminalViewport({
   if (viewport && viewport.lines.length > 0) {
     const lines = viewport.lines
     return (
-      <text fg={theme.text}>
+      <text fg={theme.colors['editor.foreground']}>
         {lines.map((line, lineIndex) => (
           <span key={`line-${lineIndex}`}>
             {line.spans.map((span, spanIndex) => renderSpan(span, `s-${spanIndex}`))}
@@ -101,7 +101,11 @@ const TerminalViewport = memo(function TerminalViewport({
     )
   }
 
-  return <text fg={theme.text}>{buffer.length > 0 ? buffer : 'Waiting for session output...'}</text>
+  return (
+    <text fg={theme.colors['editor.foreground']}>
+      {buffer.length > 0 ? buffer : 'Waiting for session output...'}
+    </text>
+  )
 })
 
 export function TerminalPane({
@@ -179,19 +183,19 @@ export function TerminalPane({
         padding={0}
         flexDirection="column"
         flexGrow={1}
-        backgroundColor={theme.background}
+        backgroundColor={theme.colors['editor.background']}
         onMouseDrag={forwardMouseEvent}
         onMouseScroll={forwardScrollEvent}
         onMouseUp={forwardMouseEvent}
       >
         {!tab ? (
           <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column">
-            <text fg={theme.dim}>· · ·</text>
-            <text fg={theme.textMuted}> </text>
+            <text fg={theme.colors['editor.lineHighlightBackground']}>· · ·</text>
+            <text fg={theme.colors['descriptionForeground']}> </text>
             <box flexDirection="row">
-              <text fg={theme.textMuted}>Press </text>
-              <text fg={theme.accent}>Ctrl+n</text>
-              <text fg={theme.textMuted}> to launch an assistant</text>
+              <text fg={theme.colors['descriptionForeground']}>Press </text>
+              <text fg={theme.colors['textLink.foreground']}>Ctrl+n</text>
+              <text fg={theme.colors['descriptionForeground']}> to launch an assistant</text>
             </box>
           </box>
         ) : (
@@ -209,12 +213,18 @@ export function TerminalPane({
         )}
       </box>
       {tab?.status === 'exited' && tab.exitCode !== undefined ? (
-        <text fg={theme.warning}>Process exited with code {tab.exitCode}</text>
+        <text fg={theme.colors['editorWarning.foreground']}>
+          Process exited with code {tab.exitCode}
+        </text>
       ) : null}
       {tab?.status === 'disconnected' ? (
-        <text fg={theme.warning}>Restored snapshot. Press Ctrl+r to restart this session.</text>
+        <text fg={theme.colors['editorWarning.foreground']}>
+          Restored snapshot. Press Ctrl+r to restart this session.
+        </text>
+      ) : null}
+      {tab?.errorMessage ? (
+        <text fg={theme.colors['editorError.foreground']}>{tab.errorMessage}</text>
       ) : null}
-      {tab?.errorMessage ? <text fg={theme.danger}>{tab.errorMessage}</text> : null}
     </box>
   )
 }

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

@@ -1,35 +1,130 @@
+import { useTerminalDimensions } from '@opentui/react'
+import { useLayoutEffect, useMemo, useRef } from 'react'
+
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { filterThemeIds } from '../filter-themes'
 import { theme } from '../theme'
-import { THEME_IDS, type ThemeId, THEMES } from '../themes'
+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'
 
 interface ThemePickerModalProps {
-  selectedIndex: number
   currentThemeId: ThemeId
+  filter: string | null
+  selectedIndex: number
 }
 
-export function ThemePickerModal({ currentThemeId, selectedIndex }: ThemePickerModalProps) {
+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) {
+  const dimensions = useTerminalDimensions()
+  const filtered = useMemo(() => filterThemeIds(filter), [filter])
+
+  useLayoutEffect(() => {
+    dispatchGlobal({ count: filtered.length, type: 'set-theme-entry-count' })
+  }, [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)
+
   return (
     <ModalShell
       title="Select theme"
       keybindsModeId="modal.theme-picker"
       width={uiTokens.modalWidth.md}
       listGap={0}
+      footer={
+        <box flexDirection="column" gap={0}>
+          <text fg={theme.colors['editor.lineHighlightBackground']}>
+            {filtered.length === 0
+              ? ''
+              : ` ${effectiveIndex + 1} / ${filtered.length}${filter ? '' : ' — type / to filter'}`}
+          </text>
+          <ModalFilterBar filter={filter} />
+        </box>
+      }
     >
-      {THEME_IDS.map((id, index) => {
-        const entry = THEMES[id]
-        const active = index === selectedIndex
-        const isCurrent = id === currentThemeId
-        return (
-          <ListItem
-            key={id}
-            active={active}
-            title={<text fg={active ? theme.text : theme.textMuted}>{entry.name}</text>}
-            trailing={isCurrent ? <text fg={theme.accent}>current</text> : undefined}
-          />
-        )
-      })}
+      {filtered.length === 0 ? (
+        <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>
   )
 }

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

@@ -35,7 +35,17 @@ export function UpdateAvailableModal({
               key={option.label}
               active={active}
               direction="row"
-              title={<text fg={active ? theme.text : theme.textMuted}>{option.label}</text>}
+              title={
+                <text
+                  fg={
+                    active
+                      ? theme.colors['editor.foreground']
+                      : theme.colors['descriptionForeground']
+                  }
+                >
+                  {option.label}
+                </text>
+              }
             />
           )
         })}