@brimveyn/aimux 1.6.0 → 1.6.1

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.colors['sideBar.background']
+      return getCurrentTheme().colors['sideBar.background']
     case 'selected':
-      return theme.colors['list.activeSelectionBackground']
+      return getCurrentTheme().colors['list.activeSelectionBackground']
     case 'input':
-      return theme.colors['editor.background']
+      return getCurrentTheme().colors['editor.background']
     case 'inputActive':
-      return theme.colors['list.activeSelectionBackground']
+      return getCurrentTheme().colors['list.activeSelectionBackground']
     case 'muted':
     default:
-      return theme.colors['sideBarSectionHeader.background']
+      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.colors['gitDecoration.addedResourceForeground']
+      return getCurrentTheme().colors['gitDecoration.addedResourceForeground']
     case 'disconnected':
-      return theme.colors['editorWarning.foreground']
+      return getCurrentTheme().colors['editorWarning.foreground']
     case 'error':
-      return theme.colors['editorError.foreground']
+      return getCurrentTheme().colors['editorError.foreground']
     case 'exited':
-      return theme.colors['editorWarning.foreground']
+      return getCurrentTheme().colors['editorWarning.foreground']
     default:
-      return theme.colors['descriptionForeground']
+      return getCurrentTheme().colors['descriptionForeground']
   }
 }
 
@@ -37,20 +37,24 @@ function getIndicator(active: boolean, focused: boolean, inLayout: boolean): str
 
 function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean): string {
   if (active) {
-    return focused ? theme.colors['textLink.foreground'] : theme.colors['terminal.ansiMagenta']
+    return focused
+      ? getCurrentTheme().colors['textLink.foreground']
+      : getCurrentTheme().colors['terminal.ansiMagenta']
   }
 
   return inLayout
-    ? theme.colors['descriptionForeground']
-    : theme.colors['editor.lineHighlightBackground']
+    ? getCurrentTheme().colors['descriptionForeground']
+    : getCurrentTheme().colors['editor.lineHighlightBackground']
 }
 
 function BusyIndicator() {
+  const theme = useTheme()
   const frame = useBusySpinner()
   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.colors['editorError.foreground']}>✗ error</text>
   }
@@ -79,6 +83,7 @@ function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocused
 }
 
 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)

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.colors['focusBorder']
+    return getCurrentTheme().colors['focusBorder']
   }
 
   if (isActive) {
-    return theme.colors['terminal.ansiMagenta']
+    return getCurrentTheme().colors['terminal.ansiMagenta']
   }
 
-  return theme.colors['editor.lineHighlightBackground']
+  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.colors['editor.foreground']} bg={span.bg}>
+    <span key={key} fg={span.fg ?? getCurrentTheme().colors['editor.foreground']} bg={span.bg}>
       {node}
     </span>
   )
@@ -87,6 +87,7 @@ const TerminalViewport = memo(function TerminalViewport({
   buffer,
   viewport,
 }: TerminalViewportProps) {
+  const theme = useTheme()
   if (viewport && viewport.lines.length > 0) {
     const lines = viewport.lines
     return (
@@ -123,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

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

@@ -3,7 +3,7 @@ import { useLayoutEffect, useMemo, useRef } from 'react'
 
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { filterThemeIds } from '../filter-themes'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
@@ -45,6 +45,7 @@ function computeWindowStart(
 }
 
 export function ThemePickerModal({ currentThemeId, filter, selectedIndex }: ThemePickerModalProps) {
+  const theme = useTheme()
   const dimensions = useTerminalDimensions()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
 

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"

package/src/ui/filter-themes.ts

@@ -4,7 +4,12 @@ export function filterThemeIds(filter: string | null): ThemeId[] {
   if (!filter) return THEME_IDS
   const needle = filter.toLowerCase()
   return THEME_IDS.filter((id) => {
-    const name = THEMES[id]?.name.toLowerCase() ?? ''
-    return id.toLowerCase().includes(needle) || name.includes(needle)
+    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/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') {
@@ -215,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)
@@ -342,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)))

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

@@ -32,10 +32,17 @@ 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, { 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,
@@ -77,12 +84,15 @@ export function getStatusBarModel(
         right: modalMode ? hintForMode(config, modalMode) : '',
       }
     }
-    case 'git':
+    case 'git': {
+      const headOffset = state.gitMode.headOffset
+      const offsetTag = headOffset > 0 ? `  HEAD~${headOffset}` : ''
       return {
         help: helpHintForMode(config, 'git-mode'),
-        left: `${sessionIcon}  ${sessionLabel}`,
-        right: hintForMode(config, 'git-mode'),
+        left: `${sessionIcon}  ${sessionLabel}${offsetTag}`,
+        right: hintForGitMode(config, headOffset),
       }
+    }
     case 'command-edit': {
       const commandEditMode = deriveCommandEditModeId(state.modal.type)
       return {

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,30 +1,5 @@
-import { type Theme, 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.
 
-const DEFAULT = THEMES['aimux']
-if (!DEFAULT) throw new Error('default theme missing')
-
-// Mutable theme singleton. Components access `theme.colors['editor.foreground']`
-// directly. On `applyTheme(id)` the colors map is replaced in place so live
-// imports keep pointing at the current palette.
-export const theme: Theme = {
-  bg: DEFAULT.bg,
-  colors: { ...DEFAULT.colors },
-  displayName: DEFAULT.displayName,
-  fg: DEFAULT.fg,
-  name: DEFAULT.name,
-  settings: DEFAULT.settings,
-  type: DEFAULT.type,
-}
-
-export function applyTheme(id: ThemeId): void {
-  const entry = THEMES[id]
-  if (!entry) return
-  for (const key of Object.keys(theme.colors)) delete theme.colors[key]
-  Object.assign(theme.colors, entry.colors)
-  theme.name = entry.name
-  theme.displayName = entry.displayName
-  theme.type = entry.type
-  theme.fg = entry.fg
-  theme.bg = entry.bg
-  theme.settings = entry.settings
-}
+export { applyTheme, getCurrentTheme, useTheme } from './theme-store'

package/src/ui/themes.ts

@@ -1,18 +1,7 @@
-import type { BundledTheme } from 'shiki'
-
-import {
-  AIMUX_COLOR_KEYS,
-  type AimuxColorKey,
-  type NamedTheme,
-  type NamedThemeDefinition,
-  type Theme,
-  type ThemeColorMap,
-  type ThemeSettings,
-  type ThemeTokenRule,
-} from '@brimveyn/aimux-config'
-
-import { HOUSE_THEME_IDS, HOUSE_THEMES } from './house-themes'
-import { GENERATED_THEME_IDS, GENERATED_THEMES } from './themes.generated'
+// Thin runtime re-export. Theme data, types, normalization, and registration
+// all live in `@brimveyn/aimux-config` so the dependency-free config package is
+// the single source of truth. The mutable theme singleton + `applyTheme` stay
+// in `./theme.ts` since they're UI-layer concerns.
 
 export type {
   AimuxColorKey,
@@ -20,54 +9,17 @@ export type {
   NamedThemeDefinition,
   Theme,
   ThemeColorMap,
+  ThemeId,
   ThemeSettings,
   ThemeTokenRule,
-}
-export { AIMUX_COLOR_KEYS }
-
-export type ThemeId = BundledTheme | (string & {})
-
-export const THEMES: Record<string, Theme> = { ...GENERATED_THEMES, ...HOUSE_THEMES }
-export const THEME_IDS: ThemeId[] = [...GENERATED_THEME_IDS, ...HOUSE_THEME_IDS]
-
-const DEFAULT_THEME_ID: ThemeId = 'aimux'
-
-/**
- * Merge user-declared themes into the registry. Themes declared via
- * `themes.full(...)` arrive as complete `NamedTheme` objects; themes declared
- * via `themes.define(...)` arrive as `NamedThemeDefinition` (partial overrides
- * over a base) and are expanded here.
- */
-export function registerUserThemes(
-  defs: Record<string, NamedTheme | NamedThemeDefinition> | undefined
-): void {
-  if (!defs) return
-  const fallback = THEMES[DEFAULT_THEME_ID]
-  if (!fallback) return
-  for (const [id, def] of Object.entries(defs)) {
-    THEMES[id] = isFullTheme(def) ? def : expandDefinition(id, def, fallback)
-    if (!THEME_IDS.includes(id)) THEME_IDS.push(id)
-  }
-}
-
-function isFullTheme(def: NamedTheme | NamedThemeDefinition): def is NamedTheme {
-  return 'settings' in def && Array.isArray((def as Theme).settings)
-}
-
-function expandDefinition(id: string, def: NamedThemeDefinition, fallback: Theme): Theme {
-  const base = def.base ? (THEMES[def.base] ?? fallback) : fallback
-  const colors: ThemeColorMap = { ...base.colors }
-  for (const [k, v] of Object.entries(def.colors ?? {})) {
-    if (typeof v === 'string') colors[k] = v
-  }
-  return {
-    ...base,
-    colors,
-    displayName: def.name,
-    name: id,
-  }
-}
+} from '@brimveyn/aimux-config'
 
-export function isKnownThemeId(id: string): boolean {
-  return id in THEMES
-}
+export {
+  AIMUX_COLOR_KEYS,
+  isKnownThemeId,
+  migrateThemeId,
+  normalizeTheme,
+  registerUserThemes,
+  THEME_IDS,
+  THEMES,
+} from '@brimveyn/aimux-config'