@brimveyn/aimux 1.19.0 → 1.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "description": "A terminal multiplexer for AI CLIs. Run Claude, Codex, OpenCode side-by-side with tabbed navigation, split panes, and persistent sessions.",
   "keywords": [
     "ai",

package/src/ui/components/layout/sidebar/workspace-list.tsx

@@ -15,7 +15,7 @@ import { formatDivergence } from '../../../../state/session-worktrees'
 import { IDLE_SESSION_STATUS } from '../../../../state/types'
 import { useBusySpinner } from '../../../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../../../session-ordering'
-import { useTheme } from '../../../theme'
+import { useBaseTheme, useTheme } from '../../../theme'
 import { FlashLabelBadge } from '../../flash/flash-label-badge'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 import { useSidebarAutoScroll } from './use-sidebar-auto-scroll'
@@ -298,14 +298,17 @@ const WorkspaceRow = memo(function WorkspaceRow({
   status,
 }: WorkspaceRowProps) {
   const t = useTheme()
+  // Selection highlight must stay opaque in transparent mode — otherwise the
+  // cursor row visually disappears against the see-through chrome.
+  const base = useBaseTheme()
   const showSpinner = status.working
   const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
   let bgColor: string | undefined
   if (dragging || isActiveItem) {
-    bgColor = t.backgroundElement
+    bgColor = base.backgroundElement
   } else if (inCurrentGroup) {
-    bgColor = t.backgroundPanel
+    bgColor = base.backgroundPanel
   }
   const workingColor = t.primary
   const waitingColor = t.warning

package/src/ui/components/layout/sidebar/worktree-row.tsx

@@ -7,7 +7,7 @@ import type { SessionRecord, WorktreeRecord } from '../../../../state/types'
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { formatDivergence } from '../../../../state/session-worktrees'
-import { useTheme } from '../../../theme'
+import { useBaseTheme, useTheme } from '../../../theme'
 import { FlashLabelBadge } from '../../flash/flash-label-badge'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 
@@ -33,6 +33,8 @@ export const WorktreeRow = memo(function WorktreeRow({
   worktree,
 }: WorktreeRowProps) {
   const t = useTheme()
+  // Selection highlight must stay opaque in transparent mode.
+  const base = useBaseTheme()
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const isCurrentSession = session.id === currentSessionId
   const divergence = useAppStore((s) => s.worktreeDivergence[worktree.id])
@@ -102,9 +104,9 @@ export const WorktreeRow = memo(function WorktreeRow({
 
   let bgColor: string | undefined
   if (isActiveItem) {
-    bgColor = t.backgroundElement
+    bgColor = base.backgroundElement
   } else if (inCurrentGroup) {
-    bgColor = t.backgroundPanel
+    bgColor = base.backgroundPanel
   }
 
   const connector = isLast ? '└─' : '├─'

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

@@ -11,7 +11,7 @@ import { useAIUsageStore } from '../../../state/ai-usage-store'
 import { useAppStore } from '../../../state/app-store'
 import { useKeymap } from '../../keymap-context'
 import { getStatusBarModel, type IdentitySegment } from '../../status-bar-model'
-import { useTheme } from '../../theme'
+import { useBaseTheme, useTheme } from '../../theme'
 import { AIUsageIndicator } from '../overlays/ai-usage/ai-usage-indicator'
 
 // Powerline-style separator glyph pairs.
@@ -110,6 +110,10 @@ function Separator({ bg, fg, glyph }: { bg: string; fg: string; glyph: string })
 
 export function StatusBar() {
   const t = useTheme()
+  // Badge foregrounds (mode label, version) sit on colored tiles and would
+  // render invisible with a transparent chrome color — always use the base
+  // (opaque) background token for contrast against those tiles.
+  const base = useBaseTheme()
   const state = useAppStore((s) => s)
   const config = useKeymap()
   const model = getStatusBarModel(state, config)
@@ -139,7 +143,7 @@ export function StatusBar() {
       <box height={1} flexShrink={0} flexDirection="row" overflow="hidden">
         {/* A: mode */}
         <box backgroundColor={modeColor} paddingLeft={1} paddingRight={1}>
-          <text fg={t.background} selectable={false}>
+          <text fg={base.background} selectable={false}>
             {getModeBadge(state.focusMode)}
           </text>
         </box>
@@ -186,7 +190,7 @@ export function StatusBar() {
 
         {/* Y: version */}
         <box backgroundColor={tileY} paddingLeft={1} paddingRight={1} flexShrink={0}>
-          <text fg={t.background} selectable={false}>
+          <text fg={base.background} selectable={false}>
             v{APP_VERSION}
           </text>
         </box>

package/src/ui/theme-store.ts

@@ -26,8 +26,7 @@ const themeStore = createStore<ThemeStore>(() => ({
 let cachedId: ThemeId | null = null
 let cachedMode: ThemeMode | null = null
 let cachedBase: ResolvedTuiTheme | null = null
-let cachedTransparent: boolean | null = null
-let cachedFinal: ResolvedTuiTheme | null = null
+let cachedOverlay: ResolvedTuiTheme | null = null
 
 // Chrome surface tokens: when transparent mode is on we replace these with
 // 'transparent' so opentui's BoxRenderable skips its fill (alpha=0 early-returns
@@ -41,27 +40,27 @@ const CHROME_BG_TOKENS = [
   'backgroundMenu',
 ] as const
 
+// Both the opaque base and the transparent overlay are cached side-by-side
+// (both keyed by id+mode). A single-slot cache would thrash when useTheme() and
+// useBaseTheme() are both mounted with different transparent values — each call
+// would invalidate the other's cache, hand React a fresh object reference every
+// render, and drive an infinite update loop.
 function derive(id: ThemeId, mode: ThemeMode, transparent: boolean): ResolvedTuiTheme {
-  if (cachedFinal && cachedId === id && cachedMode === mode && cachedTransparent === transparent)
-    return cachedFinal
-
   if (!cachedBase || cachedId !== id || cachedMode !== mode) {
     const json = TUI_THEMES[id] ?? TUI_THEMES.aimux
     if (!json) throw new Error(`No theme JSON for ${id}`)
     cachedBase = resolveTuiTheme(json, mode)
+    cachedOverlay = null
+    cachedId = id
+    cachedMode = mode
   }
-  cachedId = id
-  cachedMode = mode
-  cachedTransparent = transparent
-
-  if (transparent) {
+  if (!transparent) return cachedBase
+  if (!cachedOverlay) {
     const overlay: ResolvedTuiTheme = { ...cachedBase }
     for (const key of CHROME_BG_TOKENS) overlay[key] = 'transparent'
-    cachedFinal = overlay
-  } else {
-    cachedFinal = cachedBase
+    cachedOverlay = overlay
   }
-  return cachedFinal
+  return cachedOverlay
 }
 
 /** Subscribe to the resolved TUI theme for the active id+mode (+transparent overlay). */
@@ -69,6 +68,16 @@ export function useTheme(): ResolvedTuiTheme {
   return useStore(themeStore, (s) => derive(s.id, s.mode, s.transparent))
 }
 
+/**
+ * Resolved TUI theme WITHOUT the transparent chrome overlay. Use for the rare
+ * chrome sites that must stay opaque even in transparent mode — e.g. the
+ * sidebar selection highlight (would otherwise vanish) and the status-bar
+ * badge foregrounds (would otherwise render as transparent-on-color).
+ */
+export function useBaseTheme(): ResolvedTuiTheme {
+  return useStore(themeStore, (s) => derive(s.id, s.mode, false))
+}
+
 /** Synchronous snapshot of the resolved theme for non-React callers. */
 export function getCurrentTheme(): ResolvedTuiTheme {
   const s = themeStore.getState()

package/src/ui/theme.ts

@@ -12,6 +12,7 @@ export {
   setMode,
   setTransparent,
   subscribeThemeChanges,
+  useBaseTheme,
   useMode,
   useTheme,
   useTransparent,