@brimveyn/aimux 1.7.1 → 1.7.3

package/src/ui/components/terminal-pane.tsx

@@ -6,7 +6,10 @@ import type { TerminalContentOrigin } from '../../input/raw-input-handler'
 import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
 
 import { logInputDebug } from '../../debug/input-log'
-import { getCurrentTheme, useBg, useTheme } from '../theme'
+import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
+import { type ContextMenuItem, openContextMenu } from '../context-menu/controller'
+import { getCurrentTokens, useBg, useTokens } from '../theme'
+import { ContextMenuBox } from './context-menu-box'
 
 interface TerminalPaneProps {
   tab?: TabSession
@@ -45,15 +48,16 @@ function getTitle(
 }
 
 function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
+  const t = getCurrentTokens()
   if (isActive && focusMode === 'terminal-input') {
-    return getCurrentTheme().colors['focusBorder']
+    return t.palette.primary
   }
 
   if (isActive) {
-    return getCurrentTheme().colors['terminal.ansiMagenta']
+    return t.accent
   }
 
-  return getCurrentTheme().colors['editor.lineHighlightBackground']
+  return t.hover
 }
 
 function renderSpan(span: TerminalSpan, key: string): ReactNode {
@@ -72,7 +76,7 @@ function renderSpan(span: TerminalSpan, key: string): ReactNode {
   }
 
   return (
-    <span key={key} fg={span.fg ?? getCurrentTheme().colors['editor.foreground']} bg={span.bg}>
+    <span key={key} fg={span.fg ?? getCurrentTokens().palette.ink} bg={span.bg}>
       {node}
     </span>
   )
@@ -87,11 +91,11 @@ const TerminalViewport = memo(function TerminalViewport({
   buffer,
   viewport,
 }: TerminalViewportProps) {
-  const theme = useTheme()
+  const t = useTokens()
   if (viewport && viewport.lines.length > 0) {
     const lines = viewport.lines
     return (
-      <text fg={theme.colors['editor.foreground']}>
+      <text fg={t.palette.ink}>
         {lines.map((line, lineIndex) => (
           <span key={`line-${lineIndex}`}>
             {line.spans.map((span, spanIndex) => renderSpan(span, `s-${spanIndex}`))}
@@ -103,9 +107,7 @@ const TerminalViewport = memo(function TerminalViewport({
   }
 
   return (
-    <text fg={theme.colors['editor.foreground']}>
-      {buffer.length > 0 ? buffer : 'Waiting for session output...'}
-    </text>
+    <text fg={t.palette.ink}>{buffer.length > 0 ? buffer : 'Waiting for session output...'}</text>
   )
 })
 
@@ -124,12 +126,47 @@ export function TerminalPane({
   tab,
   tabId,
 }: TerminalPaneProps) {
-  const theme = useTheme()
-  const editorBg = useBg('editor.background')
+  const t = useTokens()
+  const editorBg = useBg('base')
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
+  const rightClickMenu: ContextMenuItem[] | undefined = tabId
+    ? [
+        [
+          'Split vertically',
+          () =>
+            runSideEffectGlobal({
+              direction: 'vertical',
+              sourceTabId: tabId,
+              type: 'split-pane',
+            }),
+        ],
+        [
+          'Split horizontally',
+          () =>
+            runSideEffectGlobal({
+              direction: 'horizontal',
+              sourceTabId: tabId,
+              type: 'split-pane',
+            }),
+        ],
+        [
+          'Close pane',
+          () => {
+            dispatchGlobal({ tabId, type: 'close-pane' })
+            runSideEffectGlobal({ tabId, type: 'close-tab' })
+          },
+        ],
+      ]
+    : undefined
   const forwardMouseEvent = (event: OtuiMouseEvent) => {
+    if (event.type === 'down' && event.button === 2 && rightClickMenu) {
+      event.preventDefault()
+      event.stopPropagation()
+      openContextMenu(event.x, event.y, rightClickMenu)
+      return
+    }
     if (event.type === 'down') {
       logInputDebug('pane.mouseDown', {
         button: event.button,
@@ -179,7 +216,7 @@ export function TerminalPane({
   }
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
-      <box
+      <ContextMenuBox
         border
         borderColor={getBorderColor(paneIsActive, focusMode)}
         title={getTitle(tab, paneIsActive, focusMode)}
@@ -187,6 +224,7 @@ export function TerminalPane({
         flexDirection="column"
         flexGrow={1}
         backgroundColor={editorBg}
+        rightClickMenu={rightClickMenu}
         onMouseDown={forwardMouseEvent}
         onMouseDrag={forwardMouseEvent}
         onMouseScroll={forwardScrollEvent}
@@ -194,12 +232,12 @@ export function TerminalPane({
       >
         {!tab ? (
           <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column">
-            <text fg={theme.colors['editor.lineHighlightBackground']}>· · ·</text>
-            <text fg={theme.colors['descriptionForeground']}> </text>
+            <text fg={t.hover}>· · ·</text>
+            <text fg={t.muted}> </text>
             <box flexDirection="row">
-              <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>
+              <text fg={t.muted}>Press </text>
+              <text fg={t.palette.primary}>Ctrl+n</text>
+              <text fg={t.muted}> to launch an assistant</text>
             </box>
           </box>
         ) : (
@@ -218,15 +256,11 @@ export function TerminalPane({
             <TerminalViewport viewport={tab.viewport} buffer={tab.buffer} />
           </box>
         )}
-      </box>
+      </ContextMenuBox>
       {tab?.status === 'disconnected' ? (
-        <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>
+        <text fg={t.palette.warning}>Restored snapshot. Press Ctrl+r to restart this session.</text>
       ) : null}
+      {tab?.errorMessage ? <text fg={t.palette.error}>{tab.errorMessage}</text> : null}
     </box>
   )
 }

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

@@ -2,7 +2,7 @@ import { useLayoutEffect, useMemo } from 'react'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterThemeIds } from '../filter-themes'
-import { useTheme, useTransparent } from '../theme'
+import { useTokens, useTransparent } from '../theme'
 import { type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
 import { Picker, type PickerItem } from './picker'
@@ -25,7 +25,7 @@ export function ThemePickerModal({
   filter,
   selectedIndex,
 }: ThemePickerModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const transparent = useTransparent()
   const filtered = useMemo(() => filterThemeIds(filter), [filter])
 
@@ -47,16 +47,8 @@ export function ThemePickerModal({
           dispatchGlobal({ type: 'close-modal' })
           runSideEffectGlobal({ action: 'confirm', type: 'apply-theme' })
         },
-        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,
+        title: <text fg={active ? t.palette.ink : t.muted}>{entry.displayName}</text>,
+        trailing: isCurrent ? <text fg={t.palette.primary}>current</text> : undefined,
       },
     ]
   })
@@ -70,21 +62,15 @@ export function ThemePickerModal({
       cursorPos={cursorPos}
       footer={
         <box flexDirection="column" gap={0}>
-          <text fg={theme.colors['editor.lineHighlightBackground']}>
+          <text fg={t.hover}>
             {filtered.length === 0 ? '' : ` ${effectiveIndex + 1} / ${filtered.length}`}
           </text>
-          <text fg={theme.colors['descriptionForeground']}>
-            {` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}
-          </text>
+          <text fg={t.muted}>{` transparent: ${transparent ? 'on' : 'off'} (ctrl-t)`}</text>
         </box>
       }
       items={items}
       selectedIndex={effectiveIndex}
-      emptyState={
-        <text fg={theme.colors['descriptionForeground']}>
-          {filter ? 'No matching themes.' : 'No themes available.'}
-        </text>
-      }
+      emptyState={<text fg={t.muted}>No themes available.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )

package/src/ui/components/update-available-modal.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalShell } from './modal-shell'
@@ -19,7 +19,7 @@ export function UpdateAvailableModal({
   latestVersion,
   selectedIndex,
 }: UpdateAvailableModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   return (
     <ModalShell
       title="Update available"
@@ -36,17 +36,7 @@ export function UpdateAvailableModal({
               key={option.label}
               active={active}
               direction="row"
-              title={
-                <text
-                  fg={
-                    active
-                      ? theme.colors['editor.foreground']
-                      : theme.colors['descriptionForeground']
-                  }
-                >
-                  {option.label}
-                </text>
-              }
+              title={<text fg={active ? t.palette.ink : t.muted}>{option.label}</text>}
             />
           )
         })}

package/src/ui/context-menu/controller.ts

@@ -0,0 +1,34 @@
+export type ContextMenuItem = [label: string, onSelect: () => void]
+
+export interface ContextMenuState {
+  anchorX: number
+  anchorY: number
+  items: ContextMenuItem[]
+}
+
+type Listener = (state: ContextMenuState | null) => void
+
+let current: ContextMenuState | null = null
+const listeners = new Set<Listener>()
+
+export function openContextMenu(anchorX: number, anchorY: number, items: ContextMenuItem[]): void {
+  if (items.length === 0) {
+    closeContextMenu()
+    return
+  }
+  current = { anchorX, anchorY, items }
+  for (const l of listeners) l(current)
+}
+
+export function closeContextMenu(): void {
+  if (current === null) return
+  current = null
+  for (const l of listeners) l(null)
+}
+
+export function subscribeContextMenu(listener: Listener): () => void {
+  listeners.add(listener)
+  return () => {
+    listeners.delete(listener)
+  }
+}

package/src/ui/root.tsx

@@ -6,6 +6,7 @@ import type { ThemeId } from './themes'
 
 import { useAppStore } from '../state/app-store'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
+import { ContextMenuOverlay } from './components/context-menu-overlay'
 import { CreateSessionModal } from './components/create-session-modal'
 import { GitCommitModal } from './components/git-commit-modal'
 import { GitPaneWidget } from './components/git-pane-widget'
@@ -222,7 +223,7 @@ export function RootView({
   terminalRows,
   themeId,
 }: RootViewProps) {
-  const editorBg = useBg('editor.background')
+  const editorBg = useBg('base')
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const layoutTrees = useAppStore((s) => s.layoutTrees)
@@ -252,6 +253,7 @@ export function RootView({
         <GitView themeId={themeId} />
         <StatusBar />
         <PendingChordOverlay />
+        <ContextMenuOverlay />
         {renderModal(modal, {
           createSessionFields,
           currentSessionId,
@@ -325,6 +327,7 @@ export function RootView({
       {sessionBarPosition === 'bottom' && <SessionBar />}
       <StatusBar />
       <PendingChordOverlay />
+      <ContextMenuOverlay />
       {renderModal(modal, {
         createSessionFields,
         currentSessionId,
@@ -340,7 +343,7 @@ export function RootView({
 }
 
 function GitPaneInPaneMode({ ratio }: { ratio: number }) {
-  const bg = useBg('sideBar.background')
+  const bg = useBg('elevated')
   // 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/shiki.ts

@@ -1,16 +1,27 @@
-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'
+import {
+  type BundledLanguage,
+  createHighlighter,
+  type Highlighter,
+  type ThemeRegistrationRaw,
+} from 'shiki'
+
+import { getCurrentTheme } from './theme-store'
+import { paletteToShikiTheme } from './themes'
+
+function buildActiveTheme(): { id: string; raw: ThemeRegistrationRaw } {
+  const theme = getCurrentTheme()
+  const id = `${theme.name}-${theme.mode}`
+  return { id, raw: paletteToShikiTheme({ mode: theme.mode, name: id, palette: theme.palette }) }
+}
 
 let highlighterPromise: Promise<Highlighter> | null = null
+let activeThemeId: string | null = null
 
 export async function getShikiHighlighter(): Promise<Highlighter> {
   if (!highlighterPromise) {
-    highlighterPromise = createHighlighter({ langs: [], themes: [WARM_THEME] })
+    const initial = buildActiveTheme()
+    activeThemeId = initial.id
+    highlighterPromise = createHighlighter({ langs: [], themes: [initial.raw] })
   }
   return highlighterPromise
 }
@@ -28,22 +39,19 @@ export async function ensureShikiLang(h: Highlighter, lang: string): Promise<boo
   }
 }
 
-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.
+ * Make sure the active aimux theme (light or dark, with any palette overrides)
+ * is loaded into the highlighter. Returns the registered theme name so the
+ * caller can pass it to `codeToTokens`.
  */
-export async function ensureShikiTheme(h: Highlighter, id: string): Promise<boolean> {
-  if (loadedThemes.has(id)) return true
-  const entry = THEMES[id]
-  if (!entry) return false
+export async function ensureActiveShikiTheme(h: Highlighter): Promise<string> {
+  const { id, raw } = buildActiveTheme()
+  if (id === activeThemeId) return id
   try {
-    // eslint-disable-next-line typescript/no-explicit-any
-    await h.loadTheme(entry as any)
-    loadedThemes.add(id)
-    return true
+    await h.loadTheme(raw)
+    activeThemeId = id
   } catch {
-    return false
+    // Reloading the theme is best-effort; on failure we keep using the prior id.
   }
+  return activeThemeId ?? id
 }

package/src/ui/theme-store.ts

@@ -1,39 +1,108 @@
 import { useStore } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 
-import { type Theme, type ThemeColorMap, type ThemeId, THEMES } from './themes'
+import {
+  accent,
+  type AimuxPalette,
+  type AimuxTheme,
+  border,
+  diffAddBg,
+  diffDeleteBg,
+  elevated,
+  extendPalette,
+  faint,
+  hover,
+  muted,
+  selected,
+  type ThemeId,
+  THEMES,
+} from './themes'
+
+export interface ThemeTokens {
+  /** `accent` with `primary` fallback. */
+  accent: string
+  /** Subtle border between panels. */
+  border: string
+  /** Background tint for inserted diff lines. */
+  diffAddBg: string
+  /** Background tint for removed diff lines. */
+  diffDeleteBg: string
+  /** Surface a notch above the base background — sidebars, headers. */
+  elevated: string
+  /** Fainter still — line numbers, placeholders, disabled. */
+  faint: string
+  /** Hover/highlight surface (line highlight, list hover). */
+  hover: string
+  /** Half-way between background and ink — labels, captions, paths. */
+  muted: string
+  palette: AimuxPalette
+  /** Selected/active row surface. */
+  selected: string
+}
+
+function computeTokens(palette: AimuxPalette): ThemeTokens {
+  return {
+    accent: accent(palette),
+    border: border(palette),
+    diffAddBg: diffAddBg(palette),
+    diffDeleteBg: diffDeleteBg(palette),
+    elevated: elevated(palette),
+    faint: faint(palette),
+    hover: hover(palette),
+    muted: muted(palette),
+    palette,
+    selected: selected(palette),
+  }
+}
+
+// Memoize by palette reference so `useStore` selectors return stable objects.
+let cachedPalette: AimuxPalette | null = null
+let cachedTokens: ThemeTokens | null = null
+
+function deriveTokens(palette: AimuxPalette): ThemeTokens {
+  if (cachedPalette === palette && cachedTokens) return cachedTokens
+  cachedPalette = palette
+  cachedTokens = computeTokens(palette)
+  return cachedTokens
+}
 
 interface ThemeStore {
-  theme: Theme
+  theme: AimuxTheme
   transparent: boolean
 }
 
-const DEFAULT = THEMES['aimux']
+const DEFAULT = THEMES['aimux-dark']
 if (!DEFAULT) throw new Error('default theme missing')
 
 const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent: false }))
 
-/**
- * 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))
+/** Subscribe to the active palette plus precomputed derived shades. */
+export function useTokens(): ThemeTokens {
+  return useStore(themeStore, (s) => deriveTokens(s.theme.palette))
+}
+
+/** Synchronous tokens for non-React callers. */
+export function getCurrentTokens(): ThemeTokens {
+  return deriveTokens(themeStore.getState().theme.palette)
 }
 
 /** Synchronous snapshot for non-React callers (reducers, side effects). */
-export function getCurrentTheme(): Theme {
+export function getCurrentTheme(): AimuxTheme {
   return themeStore.getState().theme
 }
 
-/** Swap the active theme. Triggers re-renders on every `useTheme` subscriber. */
-export function applyTheme(id: ThemeId): void {
+/** Swap the active theme by id, optionally merging palette overrides. */
+export function applyTheme(id: ThemeId, paletteOverrides?: Partial<AimuxPalette>): void {
   const entry = THEMES[id]
   if (!entry) return
-  themeStore.setState({ theme: entry })
+  const palette = extendPalette(entry.palette, paletteOverrides)
+  const merged: AimuxTheme = {
+    ...entry,
+    bg: palette.neutral,
+    fg: palette.ink,
+    palette,
+  }
+  themeStore.setState({ theme: merged })
 }
 
 /** Subscribe to the transparent-mode flag. */
@@ -50,11 +119,31 @@ export function setTransparent(value: boolean): void {
   themeStore.setState({ transparent: value })
 }
 
+export type SurfaceToken = 'base' | 'elevated' | 'hover' | 'selected' | 'border'
+
+function resolveSurface(palette: AimuxPalette, token: SurfaceToken): string {
+  switch (token) {
+    case 'base':
+      return palette.neutral
+    case 'elevated':
+      return elevated(palette)
+    case 'hover':
+      return hover(palette)
+    case 'selected':
+      return selected(palette)
+    case 'border':
+      return border(palette)
+  }
+}
+
 /**
- * Resolve a background color through the transparent-mode flag. Returns
- * `undefined` when transparent mode is on, letting the terminal emulator's
- * own background show through.
+ * Resolve a surface color through the transparent-mode flag. Returns
+ * `undefined` for the base surface when transparent mode is on, letting the
+ * terminal emulator's own background show through.
  */
-export function useBg(key: keyof ThemeColorMap): string | undefined {
-  return useStore(themeStore, (s) => (s.transparent ? undefined : s.theme.colors[key]))
+export function useBg(token: SurfaceToken): string | undefined {
+  return useStore(themeStore, (s) => {
+    if (s.transparent && token === 'base') return undefined
+    return resolveSurface(s.theme.palette, token)
+  })
 }

package/src/ui/theme.ts

@@ -1,13 +1,16 @@
 // 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.
+// React components use `useTokens` for derived shades; non-React callers use
+// `getCurrentTheme()` / `getCurrentTokens()`.
 
 export {
   applyTheme,
   getCurrentTheme,
+  getCurrentTokens,
   getTransparent,
   setTransparent,
+  type SurfaceToken,
+  type ThemeTokens,
   useBg,
-  useTheme,
+  useTokens,
   useTransparent,
 } from './theme-store'

package/src/ui/themes.ts

@@ -1,25 +1,30 @@
-// 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.
+// Thin runtime re-export. Theme data, types, palette utilities, and the
+// palette-to-Shiki generator all live in `@brimveyn/aimux-config`.
 
 export type {
-  AimuxColorKey,
-  NamedTheme,
-  NamedThemeDefinition,
+  AimuxPalette,
+  AimuxTheme,
+  AimuxThemeConfig,
   Theme,
-  ThemeColorMap,
   ThemeId,
-  ThemeSettings,
-  ThemeTokenRule,
+  ThemeMode,
 } from '@brimveyn/aimux-config'
 
 export {
-  AIMUX_COLOR_KEYS,
+  accent,
+  border,
+  diffAddBg,
+  diffDeleteBg,
+  elevated,
+  extendPalette,
+  faint,
+  hover,
   isKnownThemeId,
   migrateThemeId,
-  normalizeTheme,
-  registerUserThemes,
+  mix,
+  muted,
+  paletteToShikiTheme,
+  selected,
   THEME_IDS,
   THEMES,
 } from '@brimveyn/aimux-config'