@brimveyn/aimux 1.7.1 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brimveyn/aimux",
-  "version": "1.7.1",
+  "version": "1.7.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",
@@ -57,11 +57,10 @@
     "format": "oxfmt --write .",
     "format:check": "oxfmt --check .",
     "knip": "knip-bun",
-    "bump": "bun run scripts/bump.ts",
-    "generate-themes": "bun run scripts/generate-themes.ts"
+    "bump": "bun run scripts/bump.ts"
   },
   "dependencies": {
-    "@brimveyn/aimux-config": "0.4.4",
+    "@brimveyn/aimux-config": "0.4.5",
     "@opentui/core": "^0.1.90",
     "@opentui/react": "^0.1.90",
     "@xterm/headless": "^6.0.0",

package/src/app-runtime/pty-write.ts

@@ -3,6 +3,10 @@ import type { AppAction, TabSession } from '../state/types'
 
 import { buildPtyPastePayload } from '../input/paste'
 
+export interface PtyWriteOptions {
+  autoBottom?: boolean
+}
+
 function shouldScrollViewportToBottom(tab: TabSession): boolean {
   const viewport = tab.viewport
   return viewport !== undefined && viewport.viewportY < viewport.baseY
@@ -13,9 +17,10 @@ export function writeToTab(
   tabId: string,
   tab: TabSession | undefined,
   input: string,
-  dispatch?: (action: AppAction) => void
+  dispatch?: (action: AppAction) => void,
+  options?: PtyWriteOptions
 ): void {
-  if (tab && shouldScrollViewportToBottom(tab)) {
+  if ((options?.autoBottom ?? true) && tab && shouldScrollViewportToBottom(tab)) {
     backend.scrollViewportToBottom(tabId)
     dispatch?.({ intent: { kind: 'bottom' }, tabId, type: 'set-scroll-intent' })
   }
@@ -31,5 +36,5 @@ export function writePasteToTab(
   dispatch?: (action: AppAction) => void
 ): void {
   const payload = buildPtyPastePayload(text, tab?.terminalModes.bracketedPasteMode ?? false)
-  writeToTab(backend, tabId, tab, payload, dispatch)
+  writeToTab(backend, tabId, tab, payload, dispatch, { autoBottom: true })
 }

package/src/app-runtime/side-effects.ts

@@ -385,6 +385,10 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
       handleSelectedSessionDelete(ctx)
       return
     }
+    case 'delete-session': {
+      handleDeleteSessionEffect(state, backend, dispatch, effect.sessionId)
+      return
+    }
     case 'open-rename-selected-session': {
       openSelectedSessionRename(ctx)
       return
@@ -453,8 +457,12 @@ export function executeSideEffect(effect: SideEffect, ctx: SideEffectContext): v
       return
     }
     case 'split-pane': {
-      const customCommand = state.customCommands.terminal
-      const tab = createTabSession('terminal', customCommand, state.customCommands)
+      const sourceTab = effect.sourceTabId
+        ? state.tabs.find((t) => t.id === effect.sourceTabId)
+        : undefined
+      const assistant = sourceTab?.assistant ?? 'terminal'
+      const customCommand = state.customCommands[assistant]
+      const tab = createTabSession(assistant, customCommand, state.customCommands)
       executeSplitPane(ctx, effect.direction, tab)
       return
     }

package/src/app-runtime/use-renderer-bindings.ts

@@ -60,7 +60,8 @@ export function useRendererBindings({
         activeTabRef.current?.terminalModes.bracketedPasteMode ?? false,
       getFocusMode: () => focusModeRef.current,
       handleTerminalShortcut,
-      writeToPty: (tabId, data) => writeToTab(backend, tabId, activeTabRef.current, data, dispatch),
+      writeToPty: (tabId, data, options) =>
+        writeToTab(backend, tabId, activeTabRef.current, data, dispatch, options),
     })
 
     const handlePasteEvent = (event: { bytes: Uint8Array; defaultPrevented?: boolean }) => {

package/src/app.tsx

@@ -38,7 +38,7 @@ import { appReducer, createInitialState } from './state/store'
 import { KeymapContext } from './ui/keymap-context'
 import { RootView } from './ui/root'
 import { applyTheme, setTransparent } from './ui/theme'
-import { isKnownThemeId, registerUserThemes, type ThemeId } from './ui/themes'
+import { isKnownThemeId, type ThemeId } from './ui/themes'
 import {
   fetchLatestNpmVersion,
   getCurrentPackageVersion,
@@ -66,15 +66,12 @@ export function App({
   const renderer = useRenderer()
   const dimensions = useTerminalDimensions()
   const [themeId, setThemeId] = useState<ThemeId>(() => {
-    registerUserThemes(resolvedConfig.themes)
     const config = loadConfig()
     const persisted = config.themeId && isKnownThemeId(config.themeId) ? config.themeId : undefined
-    const fromConfig =
-      resolvedConfig.theme && isKnownThemeId(resolvedConfig.theme)
-        ? resolvedConfig.theme
-        : undefined
-    const initial = persisted ?? fromConfig ?? 'aimux'
-    applyTheme(initial)
+    const fromConfig: ThemeId =
+      resolvedConfig.theme?.mode === 'light' ? 'aimux-light' : 'aimux-dark'
+    const initial: ThemeId = persisted ?? fromConfig
+    applyTheme(initial, resolvedConfig.theme?.paletteOverrides)
     setTransparent(config.themeTransparent ?? false)
     return initial
   })

package/src/config.ts

@@ -5,19 +5,11 @@ import type { GitFileListMode, SessionBarPosition, WorkspaceSnapshotV1 } from '.
 import { logDebug } from './debug/input-log'
 import { getProfileConfigDir } from './profile-paths'
 import { isWorkspaceSnapshotV1 } from './state/validation'
-import { THEME_IDS, type ThemeId } from './ui/themes'
-
-const LEGACY_THEME_ALIASES: Record<string, ThemeId> = {
-  'everforest': 'everforest-dark',
-  'gruvbox-dark': 'gruvbox-dark-hard',
-  'kanagawa': 'kanagawa-wave',
-  'one-dark': 'one-dark-pro',
-}
+import { migrateThemeId as resolveLegacyThemeId, type ThemeId } from './ui/themes'
 
 function migrateThemeId(value: unknown): ThemeId | undefined {
   if (typeof value !== 'string') return undefined
-  if (THEME_IDS.includes(value as ThemeId)) return value as ThemeId
-  return LEGACY_THEME_ALIASES[value]
+  return resolveLegacyThemeId(value)
 }
 
 export const CONFIG_PATH = `${getProfileConfigDir()}/aimux.json`

package/src/input/modes/bridge.ts

@@ -19,11 +19,11 @@ const COMMAND_EDIT_MODE_IDS: Partial<Record<SupportedModalType, ModeId>> = {
   'session-picker': 'modal.session-picker.filtering',
   'snippet-editor': 'modal.snippet-editor',
   'snippet-picker': 'modal.snippet-picker.filtering',
+  'split-picker': 'modal.split-picker',
   'theme-picker': 'modal.theme-picker.filtering',
 }
 
 const MODAL_MODE_IDS: Partial<Record<SupportedModalType, ModeId>> = {
-  'split-picker': 'modal.split-picker',
   'update-available': 'modal.update-available',
 }
 

package/src/input/modes/types.ts

@@ -40,7 +40,11 @@ export type SideEffect =
   | { type: 'apply-theme'; action: 'confirm' }
   | { type: 'apply-theme'; action: 'preview'; delta: 1 | -1 }
   | { type: 'rename-session'; sessionId: string; name: string }
-  | { type: 'split-pane'; direction: import('../../state/layout-tree').SplitDirection }
+  | {
+      type: 'split-pane'
+      direction: import('../../state/layout-tree').SplitDirection
+      sourceTabId?: string
+    }
   | { type: 'confirm-split' }
   | { type: 'scroll-git-diff'; delta: number }
   | { type: 'persist-git-diff-mode-ratio'; ratio: number }
@@ -54,6 +58,7 @@ export type SideEffect =
   | { type: 'git-push' }
   | { type: 'confirm-update-selection' }
   | { type: 'switch-session-by-index'; index: number }
+  | { type: 'delete-session'; sessionId: string }
   | { type: 'toggle-transparent' }
 
 export interface KeyResult {

package/src/input/raw-input-handler.ts

@@ -1,3 +1,4 @@
+import type { PtyWriteOptions } from '../app-runtime/pty-write'
 import type { FocusMode } from '../state/types'
 
 import { logInputDebug } from '../debug/input-log'
@@ -10,6 +11,8 @@ const KITTY_MOD_SUPER = 8
 const KITTY_MOD_HYPER = 16
 const KITTY_MOD_META = 32
 const KITTY_HOST_MOD_MASK = KITTY_MOD_SUPER | KITTY_MOD_HYPER | KITTY_MOD_META
+const FOCUS_IN_SEQUENCE = `${ESC}[I`
+const FOCUS_OUT_SEQUENCE = `${ESC}[O`
 
 function normalizeControlSequence(sequence: string): string | null {
   const match = KITTY_CTRL_RE.exec(sequence)
@@ -79,7 +82,7 @@ export function createRawInputHandler(deps: {
   getFocusMode: () => FocusMode
   getActiveTabId: () => string | null
   getBracketedPasteModeEnabled: () => boolean
-  writeToPty: (tabId: string, data: string) => void
+  writeToPty: (tabId: string, data: string, options?: PtyWriteOptions) => void
   /**
    * Dispatch a configured terminal-input shortcut.
    * Returns true if the chord was consumed by the keymap, false otherwise.
@@ -88,6 +91,10 @@ export function createRawInputHandler(deps: {
 }): (sequence: string) => boolean {
   let bracketedPasteBuffer: string | null = null
 
+  function isFocusReportSequence(sequence: string): boolean {
+    return sequence === FOCUS_IN_SEQUENCE || sequence === FOCUS_OUT_SEQUENCE
+  }
+
   function flushPaste(tabId: string, payload: string): void {
     logInputDebug('raw.flushPaste', {
       bracketedPasteModeEnabled: deps.getBracketedPasteModeEnabled(),
@@ -95,7 +102,9 @@ export function createRawInputHandler(deps: {
       payloadPreview: payload.slice(0, 120),
       tabId,
     })
-    deps.writeToPty(tabId, buildPtyPastePayload(payload, deps.getBracketedPasteModeEnabled()))
+    deps.writeToPty(tabId, buildPtyPastePayload(payload, deps.getBracketedPasteModeEnabled()), {
+      autoBottom: true,
+    })
   }
 
   function handleTerminalShortcut(sequence: string): boolean {
@@ -162,7 +171,7 @@ export function createRawInputHandler(deps: {
       return true
     }
 
-    deps.writeToPty(tabId, normalized)
+    deps.writeToPty(tabId, normalized, { autoBottom: !isFocusReportSequence(normalized) })
     return true
   }
 

package/src/pty/terminal-snapshot.ts

@@ -113,15 +113,15 @@ function buildLine(
     let bg = getColorHex(current.getBgColor(), bgMode)
 
     if (current.isInverse()) {
-      const resolvedFg = fg ?? getCurrentTheme().colors['editor.foreground']
-      const resolvedBg = bg ?? getCurrentTheme().colors['editor.background']
+      const resolvedFg = fg ?? getCurrentTheme().palette.ink
+      const resolvedBg = bg ?? getCurrentTheme().palette.neutral
       ;[fg, bg] = [resolvedBg, resolvedFg]
     }
 
     const isCursorCell = cursorVisible && cursorColumn === column
     if (isCursorCell) {
-      const resolvedFg = fg ?? getCurrentTheme().colors['editor.foreground']
-      const resolvedBg = bg ?? getCurrentTheme().colors['editor.background']
+      const resolvedFg = fg ?? getCurrentTheme().palette.ink
+      const resolvedBg = bg ?? getCurrentTheme().palette.neutral
       ;[fg, bg] = [resolvedBg, resolvedFg]
     }
 

package/src/state/reducers/modal-state.ts

@@ -74,10 +74,10 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
     case 'open-split-picker':
       return {
         ...state,
-        focusMode: 'modal',
+        focusMode: 'command-edit',
         modal: {
           cursorPos: 0,
-          editBuffer: null,
+          editBuffer: '',
           selectedIndex: 0,
           sessionTargetId: null,
           splitDirection: action.direction,
@@ -104,6 +104,7 @@ export function reduceModalState(state: AppState, action: AppAction): AppState |
         modal: {
           cursorPos: initialName.length,
           editBuffer: initialName,
+          returnToSessionPicker: action.returnToSessionPicker ?? true,
           selectedIndex: 0,
           sessionTargetId: action.sessionTargetId ?? null,
           type: 'session-name',

package/src/state/reducers/session-state.ts

@@ -46,13 +46,6 @@ export function reduceSessionState(state: AppState, action: AppAction): AppState
     case 'rename-session-record':
       return {
         ...state,
-        focusMode: 'modal',
-        modal: {
-          editBuffer: null,
-          selectedIndex: state.modal.selectedIndex,
-          sessionTargetId: null,
-          type: 'session-picker',
-        },
         sessions: state.sessions.map((session) =>
           session.id === action.sessionId
             ? { ...session, name: action.name, updatedAt: new Date().toISOString() }

package/src/state/types.ts

@@ -291,6 +291,7 @@ export interface ModalSessionPicker extends ModalBase {
 
 export interface ModalSessionName extends ModalBase {
   type: 'session-name'
+  returnToSessionPicker: boolean
 }
 
 export interface ModalRenameTab extends ModalBase {
@@ -407,7 +408,12 @@ export type ModalAction =
   | { type: 'open-help-modal'; scope?: ModeId }
   | { type: 'open-split-picker'; direction: import('./layout-tree').SplitDirection }
   | { type: 'open-session-picker' }
-  | { type: 'open-session-name-modal'; sessionTargetId?: string; initialName?: string }
+  | {
+      type: 'open-session-name-modal'
+      sessionTargetId?: string
+      initialName?: string
+      returnToSessionPicker?: boolean
+    }
   | { type: 'close-modal' }
   | { type: 'move-modal-selection'; delta: number }
   | { type: 'update-command-edit'; char: string }

package/src/ui/components/bare-input.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 
 interface BareInputProps {
   value: string
@@ -7,10 +7,10 @@ interface BareInputProps {
 }
 
 export function BareInput({ cursorPos, placeholder = '', value }: BareInputProps) {
-  const theme = useTheme()
-  const fg = theme.colors['editor.foreground']
-  const bg = theme.colors['editor.background']
-  const placeholderFg = theme.colors['editorLineNumber.foreground']
+  const t = useTokens()
+  const fg = t.palette.ink
+  const bg = t.palette.neutral
+  const placeholderFg = t.faint
 
   if (!value) {
     const firstChar = placeholder.charAt(0) || ' '

package/src/ui/components/context-menu-box.tsx

@@ -0,0 +1,21 @@
+import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
+import type { BoxProps } from '@opentui/react'
+
+import { type ContextMenuItem, openContextMenu } from '../context-menu/controller'
+
+interface ContextMenuBoxProps extends BoxProps {
+  rightClickMenu?: ContextMenuItem[]
+}
+
+export function ContextMenuBox({ onMouseDown, rightClickMenu, ...boxProps }: ContextMenuBoxProps) {
+  function handleMouseDown(this: BoxRenderable, event: OtuiMouseEvent): void {
+    if (event.button === 2 && rightClickMenu && rightClickMenu.length > 0) {
+      event.preventDefault()
+      event.stopPropagation()
+      openContextMenu(event.x, event.y, rightClickMenu)
+      return
+    }
+    onMouseDown?.call(this, event)
+  }
+  return <box {...boxProps} onMouseDown={handleMouseDown} />
+}

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

@@ -0,0 +1,114 @@
+import { useKeyboard } from '@opentui/react'
+import { useEffect, useState } from 'react'
+
+import { useAppStore } from '../../state/app-store'
+import {
+  closeContextMenu,
+  type ContextMenuState,
+  subscribeContextMenu,
+} from '../context-menu/controller'
+import { useTokens } from '../theme'
+
+export function ContextMenuOverlay() {
+  const [menu, setMenu] = useState<ContextMenuState | null>(null)
+  const [selected, setSelected] = useState(0)
+  const t = useTokens()
+  const terminalCols = useAppStore((s) => s.layout.terminalCols)
+  const terminalRows = useAppStore((s) => s.layout.terminalRows)
+
+  useEffect(() => {
+    return subscribeContextMenu((state) => {
+      setMenu(state)
+      setSelected(0)
+    })
+  }, [])
+
+  useKeyboard((key) => {
+    if (!menu) return
+    if (key.name === 'escape') {
+      key.preventDefault()
+      closeContextMenu()
+      return
+    }
+    if (key.name === 'up') {
+      key.preventDefault()
+      setSelected((i) => (i - 1 + menu.items.length) % menu.items.length)
+      return
+    }
+    if (key.name === 'down') {
+      key.preventDefault()
+      setSelected((i) => (i + 1) % menu.items.length)
+      return
+    }
+    if (key.name === 'return') {
+      key.preventDefault()
+      const item = menu.items[selected]
+      closeContextMenu()
+      item?.[1]()
+    }
+  })
+
+  if (!menu) return null
+
+  const maxLabel = Math.max(...menu.items.map(([label]) => label.length))
+  const width = maxLabel + 4
+  const height = menu.items.length + 2
+  const left = Math.max(0, Math.min(menu.anchorX, terminalCols - width))
+  const top = Math.max(0, Math.min(menu.anchorY, terminalRows - height))
+
+  return (
+    <box position="absolute" top={0} left={0} width="100%" height="100%">
+      <box
+        position="absolute"
+        top={0}
+        left={0}
+        width="100%"
+        height="100%"
+        onMouseDown={(e) => {
+          e.preventDefault()
+          e.stopPropagation()
+          closeContextMenu()
+        }}
+      />
+      <box
+        position="absolute"
+        top={top}
+        left={left}
+        width={width}
+        flexDirection="column"
+        border
+        borderColor={t.palette.primary}
+        backgroundColor={t.elevated}
+        onMouseDown={(e) => {
+          e.stopPropagation()
+        }}
+      >
+        {menu.items.map(([label, onSelect], index) => {
+          const active = index === selected
+          return (
+            <box
+              key={`${label}-${index}`}
+              width={width - 2}
+              flexShrink={0}
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={active ? t.selected : undefined}
+              onMouseOver={() => setSelected(index)}
+              onMouseDown={(e) => {
+                e.preventDefault()
+                e.stopPropagation()
+                if (e.button !== 0) return
+                closeContextMenu()
+                onSelect()
+              }}
+            >
+              <text fg={active ? t.palette.ink : t.muted} selectable={false}>
+                {label}
+              </text>
+            </box>
+          )
+        })}
+      </box>
+    </box>
+  )
+}

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

@@ -1,7 +1,7 @@
 import type { DirectoryResult } from '../../state/types'
 
 import { abbreviatePath } from '../path-format'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTokens, useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ListItem } from './list-item'
@@ -10,27 +10,16 @@ import { ModalShell } from './modal-shell'
 const VISIBLE_ROWS = 8
 
 function getDirectoryResultIcon(result: DirectoryResult): string {
-  if (result.type === 'worktree') {
-    return '\u{e728}'
-  }
-
-  if (result.type === 'workspace') {
-    return '\u{f07c}'
-  }
-
+  if (result.type === 'worktree') return '\u{e728}'
+  if (result.type === 'workspace') return '\u{f07c}'
   return '\u{e702}'
 }
 
 function getDirectoryResultColor(result: DirectoryResult): string {
-  if (result.type === 'worktree') {
-    return getCurrentTheme().colors['editorWarning.foreground']
-  }
-
-  if (result.type === 'workspace') {
-    return getCurrentTheme().colors['terminal.ansiMagenta']
-  }
-
-  return getCurrentTheme().colors['textLink.foreground']
+  const t = getCurrentTokens()
+  if (result.type === 'worktree') return t.palette.warning
+  if (result.type === 'workspace') return t.accent
+  return t.palette.primary
 }
 
 interface CreateSessionModalProps {
@@ -50,7 +39,7 @@ export function CreateSessionModal({
   selectedIndex,
   sessionName,
 }: CreateSessionModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
@@ -64,11 +53,7 @@ export function CreateSessionModal({
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">
-        <text
-          fg={dirActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
-          Search projects
-        </text>
+        <text fg={dirActive ? t.palette.ink : t.muted}>Search projects</text>
         <InputField
           active={dirActive}
           placeholder="Type a project name..."
@@ -80,7 +65,7 @@ export function CreateSessionModal({
 
       <box flexDirection="column" height={VISIBLE_ROWS}>
         {results.length === 0 ? (
-          <text fg={theme.colors['descriptionForeground']}>
+          <text fg={t.muted}>
             {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
           </text>
         ) : (
@@ -94,15 +79,7 @@ export function CreateSessionModal({
                   <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>
                 }
                 title={
-                  <text
-                    fg={
-                      active
-                        ? theme.colors['editor.foreground']
-                        : theme.colors['descriptionForeground']
-                    }
-                  >
-                    {abbreviatePath(result.path)}
-                  </text>
+                  <text fg={active ? t.palette.ink : t.muted}>{abbreviatePath(result.path)}</text>
                 }
               />
             )
@@ -111,13 +88,7 @@ export function CreateSessionModal({
       </box>
 
       <box flexDirection="column">
-        <text
-          fg={
-            nameActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Session name
-        </text>
+        <text fg={nameActive ? t.palette.ink : t.muted}>Session name</text>
         <InputField active={nameActive} value={sessionName} />
       </box>
     </ModalShell>

package/src/ui/components/diff-renderer/fold-strip.tsx

@@ -1,4 +1,4 @@
-import { useBg, useTheme } from '../../theme'
+import { useBg, useTokens } from '../../theme'
 import { FOLD_STEP, type FoldInfo } from './build-rows'
 import { type FoldDispatch } from './pierre-diff'
 
@@ -8,11 +8,11 @@ interface Props {
 }
 
 function Button({ label, onPress }: { label: string; onPress: () => void }) {
-  const theme = useTheme()
-  const bg = useBg('sideBar.background')
+  const t = useTokens()
+  const bg = useBg('elevated')
   return (
     <box paddingLeft={1} paddingRight={1} backgroundColor={bg} onMouseDown={onPress}>
-      <text fg={theme.colors['textLink.foreground']}>{label}</text>
+      <text fg={t.palette.primary}>{label}</text>
     </box>
   )
 }
@@ -22,8 +22,8 @@ function Spacer() {
 }
 
 export function FoldStrip({ dispatch, fold }: Props) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const { bottomExpanded, foldId, hidden, topExpanded, total } = fold
   const stepUp = Math.min(FOLD_STEP, hidden)
   const stepDown = Math.min(FOLD_STEP, hidden)
@@ -71,7 +71,7 @@ export function FoldStrip({ dispatch, fold }: Props) {
 
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['descriptionForeground']}>{`⋯ ${hidden} hidden `}</text>
+      <text fg={t.muted}>{`⋯ ${hidden} hidden `}</text>
       {controls}
     </box>
   )

package/src/ui/components/diff-renderer/highlight.ts

@@ -1,6 +1,6 @@
 import type { ThemedToken } from 'shiki'
 
-import { ensureShikiLang, ensureShikiTheme, getShikiHighlighter } from '../../shiki'
+import { ensureActiveShikiTheme, ensureShikiLang, getShikiHighlighter } from '../../shiki'
 
 export interface HighlightSpan {
   bold?: boolean
@@ -22,24 +22,20 @@ export function tokenToSpan(token: ThemedToken): HighlightSpan {
   }
 }
 
-export async function tokenizeSide(
-  lines: string[],
-  lang: string,
-  theme: string
-): Promise<ThemedToken[][]> {
+export async function tokenizeSide(lines: string[], lang: string): Promise<ThemedToken[][]> {
   if (lines.length === 0) return []
   const highlighter = await getShikiHighlighter()
-  const [langOk, themeOk] = await Promise.all([
+  const [langOk, themeName] = await Promise.all([
     ensureShikiLang(highlighter, lang),
-    ensureShikiTheme(highlighter, theme),
+    ensureActiveShikiTheme(highlighter),
   ])
-  if (!langOk || !themeOk) return []
+  if (!langOk) return []
   try {
     const result = highlighter.codeToTokens(lines.join(''), {
       // eslint-disable-next-line typescript/no-explicit-any
       lang: lang as any,
       // eslint-disable-next-line typescript/no-explicit-any
-      theme: theme as any,
+      theme: themeName as any,
     })
     return result.tokens
   } catch {