@brimveyn/aimux 1.5.4 → 1.6.1

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

@@ -8,9 +8,10 @@ import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 
 export function SessionBar() {
+  const theme = useTheme()
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -108,7 +109,7 @@ export function SessionBar() {
       flexDirection="row"
       paddingLeft={1}
       paddingRight={1}
-      backgroundColor={theme.panelMuted}
+      backgroundColor={theme.colors['sideBarSectionHeader.background']}
     >
       {visibleSessions.map((session) => {
         const displayIndex = baselineOrder.indexOf(session.id) + 1
@@ -165,12 +166,18 @@ function SessionChip({
   onRef,
   session,
 }: SessionChipProps) {
+  const theme = useTheme()
   const showSpinner = busy && !active
   const spinner = useBusySpinner(showSpinner)
   const indicator = showSpinner ? spinner : '●'
-  const indicatorColor = active || showSpinner ? theme.accent : theme.success
-  const labelColor = active ? theme.text : theme.textMuted
-  const bgColor = dragging || active ? theme.panelHighlight : undefined
+  const indicatorColor =
+    active || showSpinner
+      ? theme.colors['textLink.foreground']
+      : theme.colors['gitDecoration.addedResourceForeground']
+  const labelColor = active
+    ? theme.colors['editor.foreground']
+    : theme.colors['descriptionForeground']
+  const bgColor = dragging || active ? theme.colors['list.activeSelectionBackground'] : undefined
 
   return (
     <box
@@ -200,7 +207,7 @@ function SessionChip({
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>
-      <text fg={theme.dim} selectable={false}>
+      <text fg={theme.colors['editor.lineHighlightBackground']} selectable={false}>
         {' '}
       </text>
     </box>

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

@@ -2,7 +2,8 @@ import type { SessionRecord } from '../../state/types'
 
 import { filterSessions } from '../../state/selectors'
 import { abbreviatePath } from '../path-format'
-import { theme } from '../theme'
+import { orderSessionsForDisplay } from '../session-ordering'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalFilterBar } from './modal-filter-bar'
@@ -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,10 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const filtered = filterSessions(sessions, filter)
+  const theme = useTheme()
+  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 +61,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 +95,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

@@ -3,7 +3,7 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
-import { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -20,6 +20,7 @@ const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
 
 const SidebarTop = memo(function SidebarTop() {
+  const theme = useTheme()
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
@@ -31,19 +32,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 +59,17 @@ function renderGroupGutter(
 ) {
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={theme.accentAlt} bg={isActive ? theme.panelHighlight : undefined}>
+      <text
+        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
+        bg={isActive ? getCurrentTheme().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={getCurrentTheme().colors['terminal.ansiMagenta']}
+        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
+      >
         {isGroupEnd ? GUTTER_END : GUTTER_PAD}
       </text>
     </box>
@@ -72,6 +81,7 @@ interface TabsBodyProps {
 }
 
 const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
+  const theme = useTheme()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const focusMode = useAppStore((s) => s.focusMode)
@@ -101,7 +111,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) => {
@@ -141,6 +151,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
 })
 
 export function Sidebar({ onTabActivate }: SidebarProps) {
+  const theme = useTheme()
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
@@ -157,7 +168,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 +184,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

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -16,6 +16,7 @@ export function SnippetEditorModal({
   snippetContent,
   snippetName,
 }: SnippetEditorModalProps) {
+  const theme = useTheme()
   const nameActive = activeField === 'name'
   const contentActive = activeField === 'content'
 
@@ -26,12 +27,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

@@ -1,7 +1,7 @@
 import type { SnippetRecord } from '../../state/types'
 
 import { filterSnippets } from '../../state/selectors'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalFilterBar } from './modal-filter-bar'
@@ -22,6 +22,7 @@ function truncateContent(content: string): string {
 }
 
 export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
+  const theme = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
   return (
@@ -32,7 +33,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 +44,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

@@ -11,7 +11,7 @@ import {
   type PaneRect,
   type SplitDirection,
 } from '../../state/layout-tree'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER
@@ -58,6 +58,7 @@ export function SplitLayout({
   onTerminalScrollEvent,
   tabs,
 }: SplitLayoutProps) {
+  const theme = useTheme()
   if (node.type === 'leaf') {
     const tab = tabs.find((t) => t.id === node.tabId)
     const isActive = node.tabId === activeTabId
@@ -134,7 +135,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

@@ -4,21 +4,22 @@ 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 { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
+  const t = getCurrentTheme()
   switch (focusMode) {
     case 'terminal-input':
-      return theme.accent
+      return t.colors['textLink.foreground']
     case 'modal':
-      return theme.warning
+      return t.colors['editorWarning.foreground']
     case 'command-edit':
-      return theme.warning
+      return t.colors['editorWarning.foreground']
     case 'git':
-      return theme.success
+      return t.colors['gitDecoration.addedResourceForeground']
     case 'navigation':
     default:
-      return theme.accentAlt
+      return t.colors['terminal.ansiMagenta']
   }
 }
 
@@ -39,6 +40,7 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 }
 
 export function StatusBar() {
+  const theme = useTheme()
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
@@ -52,16 +54,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

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

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

@@ -1,7 +1,7 @@
 import type { TabSession } from '../../state/types'
 
 import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 
 interface TabItemProps {
   id?: string
@@ -15,15 +15,15 @@ interface TabItemProps {
 function getStatusColor(status: TabSession['status']): string {
   switch (status) {
     case 'running':
-      return theme.success
+      return getCurrentTheme().colors['gitDecoration.addedResourceForeground']
     case 'disconnected':
-      return theme.warning
+      return getCurrentTheme().colors['editorWarning.foreground']
     case 'error':
-      return theme.danger
+      return getCurrentTheme().colors['editorError.foreground']
     case 'exited':
-      return theme.warning
+      return getCurrentTheme().colors['editorWarning.foreground']
     default:
-      return theme.textMuted
+      return getCurrentTheme().colors['descriptionForeground']
   }
 }
 
@@ -37,32 +37,38 @@ 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
+      ? getCurrentTheme().colors['textLink.foreground']
+      : getCurrentTheme().colors['terminal.ansiMagenta']
   }
 
-  return inLayout ? theme.textMuted : theme.dim
+  return inLayout
+    ? getCurrentTheme().colors['descriptionForeground']
+    : getCurrentTheme().colors['editor.lineHighlightBackground']
 }
 
 function BusyIndicator() {
+  const theme = useTheme()
   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 }) {
+  const theme = useTheme()
   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,13 +76,14 @@ 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>
 }
 
 export function TabItem({ active, focused, id, inLayout, isFocusedInput, tab }: TabItemProps) {
+  const theme = useTheme()
   const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
@@ -89,16 +96,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>