@brimveyn/aimux 1.5.4 → 1.6.1

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 { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 
 interface TerminalPaneProps {
   tab?: TabSession
@@ -46,14 +46,14 @@ function getTitle(
 
 function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
   if (isActive && focusMode === 'terminal-input') {
-    return theme.borderActive
+    return getCurrentTheme().colors['focusBorder']
   }
 
   if (isActive) {
-    return theme.accentAlt
+    return getCurrentTheme().colors['terminal.ansiMagenta']
   }
 
-  return theme.dim
+  return getCurrentTheme().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 ?? getCurrentTheme().colors['editor.foreground']} bg={span.bg}>
       {node}
     </span>
   )
@@ -87,10 +87,11 @@ const TerminalViewport = memo(function TerminalViewport({
   buffer,
   viewport,
 }: TerminalViewportProps) {
+  const theme = useTheme()
   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 +102,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({
@@ -119,6 +124,7 @@ export function TerminalPane({
   tab,
   tabId,
 }: TerminalPaneProps) {
+  const theme = useTheme()
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
@@ -179,19 +185,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 +215,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,131 @@
-import { theme } from '../theme'
-import { THEME_IDS, type ThemeId, THEMES } from '../themes'
+import { useTerminalDimensions } from '@opentui/react'
+import { useLayoutEffect, useMemo, useRef } from 'react'
+
+import { dispatchGlobal } from '../../state/dispatch-ref'
+import { filterThemeIds } from '../filter-themes'
+import { useTheme } 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'
 
 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 theme = useTheme()
+  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

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalShell } from './modal-shell'
@@ -19,6 +19,7 @@ export function UpdateAvailableModal({
   latestVersion,
   selectedIndex,
 }: UpdateAvailableModalProps) {
+  const theme = useTheme()
   return (
     <ModalShell
       title="Update available"
@@ -35,7 +36,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>
+              }
             />
           )
         })}

package/src/ui/filter-themes.ts

@@ -0,0 +1,15 @@
+import { THEME_IDS, type ThemeId, THEMES } from './themes'
+
+export function filterThemeIds(filter: string | null): ThemeId[] {
+  if (!filter) return THEME_IDS
+  const needle = filter.toLowerCase()
+  return THEME_IDS.filter((id) => {
+    const entry = THEMES[id]
+    if (!entry) return false
+    return (
+      id.toLowerCase().includes(needle) ||
+      entry.displayName.toLowerCase().includes(needle) ||
+      entry.name.toLowerCase().includes(needle)
+    )
+  })
+}

package/src/ui/keymap-context.ts

@@ -18,17 +18,25 @@ export function useKeymap(): ResolvedKeymapConfig {
 const HELP_JOINER = '  ·  '
 const MAX_HELP_ENTRIES = 5
 
+interface BuildHintOptions {
+  excludeDescriptions?: readonly string[]
+}
+
 /** Build a single-line help string for a mode (used in modal headers and status bar). */
 export function buildHintText(
   config: ResolvedKeymapConfig,
   modeId: ModeId,
-  limit: number = MAX_HELP_ENTRIES
+  limit: number = MAX_HELP_ENTRIES,
+  options: BuildHintOptions = {}
 ): string {
   const bindings = describeBindings(config, modeId, {
     dedupeByDescription: true,
     withDescriptionOnly: true,
   })
   if (bindings.length === 0) return ''
-  const trimmed = bindings.slice(0, limit)
+  const excluded = new Set(options.excludeDescriptions ?? [])
+  const kept =
+    excluded.size > 0 ? bindings.filter((b) => !excluded.has(b.description ?? '')) : bindings
+  const trimmed = kept.slice(0, limit)
   return trimmed.map((b) => `${b.keysDisplay} ${b.description ?? ''}`.trim()).join(HELP_JOINER)
 }

package/src/ui/root.tsx

@@ -24,7 +24,7 @@ import { StatusBar } from './components/status-bar'
 import { TerminalPane } from './components/terminal-pane'
 import { ThemePickerModal } from './components/theme-picker-modal'
 import { UpdateAvailableModal } from './components/update-available-modal'
-import { theme } from './theme'
+import { useTheme } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -134,7 +134,11 @@ function renderModal(
       )
     case 'theme-picker':
       return (
-        <ThemePickerModal selectedIndex={modal.selectedIndex} currentThemeId={options.themeId} />
+        <ThemePickerModal
+          selectedIndex={modal.selectedIndex}
+          currentThemeId={options.themeId}
+          filter={modal.editBuffer}
+        />
       )
     case 'update-available':
       return (
@@ -145,7 +149,13 @@ function renderModal(
         />
       )
     case 'help':
-      return <HelpModal filter={modal.editBuffer} selectedIndex={modal.selectedIndex} />
+      return (
+        <HelpModal
+          filter={modal.editBuffer}
+          selectedIndex={modal.selectedIndex}
+          scope={modal.scope}
+        />
+      )
     case 'git-commit': {
       const titleText =
         modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer
@@ -205,6 +215,7 @@ export function RootView({
   terminalRows,
   themeId,
 }: RootViewProps) {
+  const theme = useTheme()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const layoutTrees = useAppStore((s) => s.layoutTrees)
@@ -230,8 +241,13 @@ export function RootView({
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
   if (inGitMode) {
     return (
-      <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
-        <GitView />
+      <box
+        flexDirection="column"
+        width="100%"
+        height="100%"
+        backgroundColor={theme.colors['editor.background']}
+      >
+        <GitView themeId={themeId} />
         <StatusBar />
         <PendingChordOverlay />
         {renderModal(modal, {
@@ -249,7 +265,12 @@ export function RootView({
   }
 
   return (
-    <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+    <box
+      flexDirection="column"
+      width="100%"
+      height="100%"
+      backgroundColor={theme.colors['editor.background']}
+    >
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
@@ -322,6 +343,7 @@ export function RootView({
 }
 
 function GitPaneInPaneMode({ ratio }: { ratio: number }) {
+  const theme = useTheme()
   // Ratio maps to a fixed column count (20..80), mirroring the reservation in
   // use-terminal-resize so the terminal-content area stays in sync.
   const width = Math.max(20, Math.min(80, Math.round(ratio * 80)))
@@ -330,7 +352,7 @@ function GitPaneInPaneMode({ ratio }: { ratio: number }) {
       flexDirection="column"
       width={width}
       flexShrink={0}
-      backgroundColor={theme.panel}
+      backgroundColor={theme.colors['sideBar.background']}
       overflow="hidden"
     >
       <GitPaneWidget pollingEnabled />

package/src/ui/shiki.ts

@@ -0,0 +1,49 @@
+import { type BundledLanguage, type BundledTheme, createHighlighter, type Highlighter } from 'shiki'
+
+import { THEMES } from './themes'
+
+// Shiki's highlighter is created with at least one real shiki-bundled theme so
+// its worker can warm up. House and user themes load on demand.
+const WARM_THEME: BundledTheme = 'catppuccin-mocha'
+
+let highlighterPromise: Promise<Highlighter> | null = null
+
+export async function getShikiHighlighter(): Promise<Highlighter> {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({ langs: [], themes: [WARM_THEME] })
+  }
+  return highlighterPromise
+}
+
+const loadedLangs = new Set<string>()
+
+export async function ensureShikiLang(h: Highlighter, lang: string): Promise<boolean> {
+  if (loadedLangs.has(lang)) return true
+  try {
+    await h.loadLanguage(lang as BundledLanguage)
+    loadedLangs.add(lang)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const loadedThemes = new Set<string>([WARM_THEME])
+
+/**
+ * Load the theme keyed by `id` into the shiki highlighter. The same object
+ * powers the UI palette and the code highlighter — no synthesis, no mapping.
+ */
+export async function ensureShikiTheme(h: Highlighter, id: string): Promise<boolean> {
+  if (loadedThemes.has(id)) return true
+  const entry = THEMES[id]
+  if (!entry) return false
+  try {
+    // eslint-disable-next-line typescript/no-explicit-any
+    await h.loadTheme(entry as any)
+    loadedThemes.add(id)
+    return true
+  } catch {
+    return false
+  }
+}

package/src/ui/status-bar-model.ts

@@ -2,16 +2,19 @@ import type { ModeId, ResolvedKeymapConfig } from '@brimveyn/aimux-config'
 
 import type { AppState, TabSession } from '../state/types'
 
+import { describeBindings } from '../input/keymap/describe-bindings'
 import { buildHintText } from './keymap-context'
 import { abbreviatePath } from './path-format'
 
 export interface StatusBarModel {
   left: string
   right: string
+  help: string
 }
 
 const MAX_TAB_LABEL_LENGTH = 24
 const HINT_LIMIT = 6
+const HELP_DESCRIPTION = 'Help'
 
 function truncateLabel(label: string): string {
   if (label.length <= MAX_TAB_LABEL_LENGTH) {
@@ -29,8 +32,25 @@ function getActiveTabLabel(tab?: TabSession): string {
   return `${truncateLabel(tab.title)} (${tab.status})`
 }
 
+const STAGING_DESCRIPTIONS = ['Stage', 'Unstage/delete', 'Commit', 'Push']
+
 function hintForMode(config: ResolvedKeymapConfig, modeId: ModeId): string {
-  return buildHintText(config, modeId, HINT_LIMIT)
+  return buildHintText(config, modeId, HINT_LIMIT, { excludeDescriptions: [HELP_DESCRIPTION] })
+}
+
+function hintForGitMode(config: ResolvedKeymapConfig, headOffset: number): string {
+  const exclude = headOffset > 0 ? [HELP_DESCRIPTION, ...STAGING_DESCRIPTIONS] : [HELP_DESCRIPTION]
+  return buildHintText(config, 'git-mode', HINT_LIMIT, { excludeDescriptions: exclude })
+}
+
+function helpHintForMode(config: ResolvedKeymapConfig, modeId: ModeId): string {
+  const bindings = describeBindings(config, modeId, {
+    dedupeByDescription: true,
+    withDescriptionOnly: true,
+  })
+  const helpBinding = bindings.find((b) => b.description === HELP_DESCRIPTION)
+  if (!helpBinding) return ''
+  return `${helpBinding.keysDisplay} ${helpBinding.description ?? ''}`.trim()
 }
 
 export function getStatusBarModel(
@@ -52,24 +72,31 @@ export function getStatusBarModel(
   switch (state.focusMode) {
     case 'terminal-input':
       return {
+        help: '',
         left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
         right: hintForMode(config, 'terminal-input'),
       }
     case 'modal': {
       const modalMode = deriveModalModeId(state.modal.type)
       return {
+        help: '',
         left: `${sessionIcon}  ${sessionLabel}`,
         right: modalMode ? hintForMode(config, modalMode) : '',
       }
     }
-    case 'git':
+    case 'git': {
+      const headOffset = state.gitMode.headOffset
+      const offsetTag = headOffset > 0 ? `  HEAD~${headOffset}` : ''
       return {
-        left: `${sessionIcon}  ${sessionLabel}`,
-        right: hintForMode(config, 'git-mode'),
+        help: helpHintForMode(config, 'git-mode'),
+        left: `${sessionIcon}  ${sessionLabel}${offsetTag}`,
+        right: hintForGitMode(config, headOffset),
       }
+    }
     case 'command-edit': {
       const commandEditMode = deriveCommandEditModeId(state.modal.type)
       return {
+        help: '',
         left: `${sessionIcon}  ${sessionLabel}`,
         right: commandEditMode ? hintForMode(config, commandEditMode) : '',
       }
@@ -77,6 +104,7 @@ export function getStatusBarModel(
     case 'navigation':
     default:
       return {
+        help: helpHintForMode(config, 'navigation'),
         left: `${sessionIcon}  ${sessionLabel}  ${getActiveTabLabel(activeTab)}`,
         right: hintForMode(config, 'navigation'),
       }

package/src/ui/theme-store.ts

@@ -0,0 +1,36 @@
+import { useStore } from 'zustand'
+import { createStore } from 'zustand/vanilla'
+
+import { type Theme, type ThemeId, THEMES } from './themes'
+
+interface ThemeStore {
+  theme: Theme
+}
+
+const DEFAULT = THEMES['aimux']
+if (!DEFAULT) throw new Error('default theme missing')
+
+const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT }))
+
+/**
+ * Subscribe to the active theme. Pass a selector to subscribe to a narrower
+ * slice (`useTheme(t => t.colors['editor.foreground'])`) or call with no
+ * arguments to get the whole theme.
+ */
+export function useTheme(): Theme
+export function useTheme<T>(selector: (theme: Theme) => T): T
+export function useTheme<T>(selector?: (theme: Theme) => T): T | Theme {
+  return useStore(themeStore, (s) => (selector ? selector(s.theme) : s.theme))
+}
+
+/** Synchronous snapshot for non-React callers (reducers, side effects). */
+export function getCurrentTheme(): Theme {
+  return themeStore.getState().theme
+}
+
+/** Swap the active theme. Triggers re-renders on every `useTheme` subscriber. */
+export function applyTheme(id: ThemeId): void {
+  const entry = THEMES[id]
+  if (!entry) return
+  themeStore.setState({ theme: entry })
+}

package/src/ui/theme.ts

@@ -1,18 +1,5 @@
-import { type ThemeColors, type ThemeId, THEMES } from './themes'
+// Back-compat shim: the theme singleton has been replaced with a Zustand store.
+// React components should import `useTheme` from `./theme-store`; non-React
+// callers use `getCurrentTheme()`. `applyTheme` moved to the store module.
 
-export const theme: ThemeColors = { ...THEMES.aimux.colors }
-
-type ThemeListener = () => void
-const themeListeners = new Set<ThemeListener>()
-
-export function onThemeChange(listener: ThemeListener): () => void {
-  themeListeners.add(listener)
-  return () => themeListeners.delete(listener)
-}
-
-export function applyTheme(id: ThemeId): void {
-  const entry = THEMES[id]
-  if (!entry) return
-  Object.assign(theme, entry.colors)
-  for (const listener of themeListeners) listener()
-}
+export { applyTheme, getCurrentTheme, useTheme } from './theme-store'