@brimveyn/aimux 1.19.0 → 1.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.19.0",
+  "version": "1.19.2",
   "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/components/modals/shared/modal-keybinds-overlay.tsx

@@ -1,32 +1,12 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
-import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
-
 import { describeBindings } from '../../../../input/keymap/describe-bindings'
 import { useKeymap } from '../../../keymap-context'
 import { useTheme, useTransparent } from '../../../theme'
+import { fillBoxInterior } from '../../../transparent-fill'
 
 const KEYS_COLUMN_WIDTH = 12
 
-const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
-
-// Same trick as modal-shell: when our bg is transparent, BoxRenderable skips
-// its fill so the chrome chars underneath leak through. setCell bypasses alpha
-// blending and char-preservation, so we can wipe every interior cell to
-// (' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA). No border on this overlay, so
-// fill the full bounds (no 1-cell inset).
-function fillBoxInteriorWithSpaces(this: BoxRenderable, buffer: OptimizedBuffer): void {
-  const x0 = this.screenX
-  const y0 = this.screenY
-  const endX = x0 + this.width
-  const endY = y0 + this.height
-  for (let y = y0; y < endY; y++) {
-    for (let x = x0; x < endX; x++) {
-      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
-    }
-  }
-}
-
 interface ModalKeybindsOverlayProps {
   modeId: ModeId
   limit?: number
@@ -52,7 +32,7 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
         paddingRight={2}
         paddingTop={1}
         paddingBottom={1}
-        renderAfter={transparent ? fillBoxInteriorWithSpaces : undefined}
+        renderAfter={transparent ? fillBoxInterior : undefined}
       >
         {entries.map((binding) => (
           <box key={binding.description ?? binding.keys} flexDirection="row">

package/src/ui/components/modals/shared/modal-shell.tsx

@@ -1,9 +1,8 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 import type { ReactNode } from 'react'
 
-import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
-
 import { useTheme, useTransparent } from '../../../theme'
+import { fillBorderedBoxInterior } from '../../../transparent-fill'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {
@@ -16,38 +15,6 @@ interface ModalShellProps {
   width: number | `${number}%`
 }
 
-const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
-
-// opentui's BoxRenderable only paints a fill when `backgroundColor.a > 0`, so
-// a fully transparent modal bg leaks the chrome characters underneath. The
-// `renderAfter` hook runs after the box paints itself but before its children
-// render, so we manually overwrite every interior cell with a blank space.
-//
-// Two gotchas we hit by reading the zig source (packages/core/src/zig/buffer.zig):
-//  1. `setCellWithAlphaBlending` early-returns via `isFullyTransparent` when
-//     both fg and bg alpha are 0 — nothing gets written.
-//  2. Its `blendCells` deliberately preserves the destination char when the
-//     overlay char is `DEFAULT_SPACE_CHAR` (codepoint 32) so that drawing a
-//     space on top of existing text does not erase it.
-//
-// `setCell` (→ `bufferSetCell` → zig `buffer.set`) bypasses both: it writes
-// the cell unconditionally, no alpha check, no blending, no char preservation.
-function fillModalInteriorWithSpaces(this: BoxRenderable, buffer: OptimizedBuffer): void {
-  const x0 = this.screenX
-  const y0 = this.screenY
-  const w = this.width
-  const h = this.height
-  const startX = x0 + 1
-  const startY = y0 + 1
-  const endX = x0 + w - 1
-  const endY = y0 + h - 1
-  for (let y = startY; y < endY; y++) {
-    for (let x = startX; x < endX; x++) {
-      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
-    }
-  }
-}
-
 export function ModalShell({
   children,
   footer,
@@ -76,7 +43,7 @@ export function ModalShell({
         backgroundColor={bg}
         padding={1}
         width={width}
-        renderAfter={transparent ? fillModalInteriorWithSpaces : undefined}
+        renderAfter={transparent ? fillBorderedBoxInterior : undefined}
       >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">

package/src/ui/components/overlays/context-menu/context-menu-overlay.tsx

@@ -9,7 +9,8 @@ import {
   type ContextMenuState,
   subscribeContextMenu,
 } from '../../../context-menu/controller'
-import { useTheme } from '../../../theme'
+import { useTheme, useTransparent } from '../../../theme'
+import { fillBorderedBoxInterior } from '../../../transparent-fill'
 
 const MenuItem = memo(function MenuItem({
   active,
@@ -59,6 +60,7 @@ export function ContextMenuOverlay() {
   const [menu, setMenu] = useState<ContextMenuState | null>(null)
   const [selected, setSelected] = useState(0)
   const t = useTheme()
+  const transparent = useTransparent()
   const terminalCols = useAppStore((s) => s.layout.terminalCols)
   const terminalRows = useAppStore((s) => s.layout.terminalRows)
 
@@ -131,7 +133,8 @@ export function ContextMenuOverlay() {
         flexDirection="column"
         border
         borderColor={t.border}
-        backgroundColor={t.backgroundPanel}
+        backgroundColor={transparent ? 'transparent' : t.backgroundPanel}
+        renderAfter={transparent ? fillBorderedBoxInterior : undefined}
         onMouseDown={handleMenuMouseDown}
       >
         {menu.items.map(([label, onSelect], index) => (

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,

package/src/ui/transparent-fill.ts

@@ -0,0 +1,49 @@
+import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
+
+export const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
+
+// opentui's BoxRenderable only paints a fill when `backgroundColor.a > 0`, so
+// a fully transparent bg leaks the chrome characters underneath. These helpers
+// run from a box's `renderAfter` hook (after the box paints itself, before its
+// children render) and manually overwrite every interior cell with a blank
+// space so the region reads as "emptied" instead of leaking.
+//
+// Two gotchas we hit by reading the zig source (packages/core/src/zig/buffer.zig):
+//  1. `setCellWithAlphaBlending` early-returns via `isFullyTransparent` when
+//     both fg and bg alpha are 0 — nothing gets written.
+//  2. Its `blendCells` deliberately preserves the destination char when the
+//     overlay char is `DEFAULT_SPACE_CHAR` (codepoint 32) so that drawing a
+//     space on top of existing text does not erase it.
+//
+// `setCell` (→ `bufferSetCell` → zig `buffer.set`) bypasses both: it writes
+// the cell unconditionally, no alpha check, no blending, no char preservation.
+
+// Bordered boxes: inset by 1 cell so the painted border is preserved.
+export function fillBorderedBoxInterior(this: BoxRenderable, buffer: OptimizedBuffer): void {
+  const x0 = this.screenX
+  const y0 = this.screenY
+  const w = this.width
+  const h = this.height
+  const startX = x0 + 1
+  const startY = y0 + 1
+  const endX = x0 + w - 1
+  const endY = y0 + h - 1
+  for (let y = startY; y < endY; y++) {
+    for (let x = startX; x < endX; x++) {
+      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
+    }
+  }
+}
+
+// Borderless boxes: fill the full bounds (no inset).
+export function fillBoxInterior(this: BoxRenderable, buffer: OptimizedBuffer): void {
+  const x0 = this.screenX
+  const y0 = this.screenY
+  const endX = x0 + this.width
+  const endY = y0 + this.height
+  for (let y = y0; y < endY; y++) {
+    for (let x = x0; x < endX; x++) {
+      buffer.setCell(x, y, ' ', TRANSPARENT_RGBA, TRANSPARENT_RGBA)
+    }
+  }
+}