@brimveyn/aimux 1.7.0 → 1.7.2

package/src/ui/components/tab-item.tsx

@@ -4,7 +4,8 @@ import type { TabSession } from '../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
-import { getCurrentTheme, useTheme } from '../theme'
+import { getCurrentTokens, useTokens } from '../theme'
+import { ContextMenuBox } from './context-menu-box'
 
 interface TabItemProps {
   id?: string
@@ -15,15 +16,16 @@ interface TabItemProps {
 }
 
 function getStatusColor(status: TabSession['status']): string {
+  const t = getCurrentTokens()
   switch (status) {
     case 'running':
-      return getCurrentTheme().colors['gitDecoration.addedResourceForeground']
+      return t.palette.success
     case 'disconnected':
-      return getCurrentTheme().colors['editorWarning.foreground']
+      return t.palette.warning
     case 'error':
-      return getCurrentTheme().colors['editorError.foreground']
+      return t.palette.error
     default:
-      return getCurrentTheme().colors['descriptionForeground']
+      return t.muted
   }
 }
 
@@ -36,36 +38,33 @@ function getIndicator(active: boolean, focused: boolean, inLayout: boolean): str
 }
 
 function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean): string {
+  const t = getCurrentTokens()
   if (active) {
-    return focused
-      ? getCurrentTheme().colors['textLink.foreground']
-      : getCurrentTheme().colors['terminal.ansiMagenta']
+    return focused ? t.palette.primary : t.accent
   }
 
-  return inLayout
-    ? getCurrentTheme().colors['descriptionForeground']
-    : getCurrentTheme().colors['editor.lineHighlightBackground']
+  return inLayout ? t.muted : t.hover
 }
 
 function BusyIndicator() {
-  const theme = useTheme()
+  const t = useTokens()
   const frame = useBusySpinner()
-  return <text fg={theme.colors['textLink.foreground']}>{frame} working</text>
+  return <text fg={t.palette.primary}>{frame} working</text>
 }
 
 function WaitingIndicator() {
-  const theme = useTheme()
-  return <text fg={theme.colors['editorWarning.foreground']}>? waiting</text>
+  const t = useTokens()
+  return <text fg={t.palette.warning}>? waiting</text>
 }
 
 function ActivityIndicator({ tab }: { tab: TabSession }) {
-  const theme = useTheme()
+  const t = useTokens()
   if (tab.status === 'error') {
-    return <text fg={theme.colors['editorError.foreground']}>✗ error</text>
+    return <text fg={t.palette.error}>✗ error</text>
   }
 
   if (tab.status === 'disconnected') {
-    return <text fg={theme.colors['editorWarning.foreground']}>⏸ restore</text>
+    return <text fg={t.palette.warning}>⏸ restore</text>
   }
 
   if (tab.activity === 'working') {
@@ -77,14 +76,14 @@ function ActivityIndicator({ tab }: { tab: TabSession }) {
   }
 
   if (tab.activity === 'idle') {
-    return <text fg={theme.colors['gitDecoration.addedResourceForeground']}>● idle</text>
+    return <text fg={t.palette.success}>● idle</text>
   }
 
   return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
 }
 
 export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
@@ -92,7 +91,7 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
   const [hovered, setHovered] = useState(false)
 
   return (
-    <box
+    <ContextMenuBox
       id={id}
       paddingLeft={1}
       paddingRight={1}
@@ -100,17 +99,43 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
       paddingBottom={0}
       flexDirection="column"
       gap={0}
+      rightClickMenu={[
+        [
+          'Rename',
+          () => {
+            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+            dispatchGlobal({ type: 'open-rename-tab-modal' })
+          },
+        ],
+        [
+          'Close',
+          () => {
+            dispatchGlobal({ tabId: tab.id, type: 'close-tab' })
+            runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
+          },
+        ],
+        [
+          'Move up',
+          () => {
+            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+            dispatchGlobal({ delta: -1, type: 'reorder-active-tab' })
+          },
+        ],
+        [
+          'Move down',
+          () => {
+            dispatchGlobal({ tabId: tab.id, type: 'set-active-tab' })
+            dispatchGlobal({ delta: 1, type: 'reorder-active-tab' })
+          },
+        ],
+      ]}
       onMouseOver={() => setHovered(true)}
       onMouseOut={() => setHovered(false)}
     >
       <box flexDirection="row" alignItems="center">
         <text fg={indicatorColor}>{indicator} </text>
         <box flexGrow={1}>
-          <text
-            fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-          >
-            {tab.title}
-          </text>
+          <text fg={active ? t.palette.ink : t.muted}>{tab.title}</text>
         </box>
         {hovered ? (
           <box
@@ -120,14 +145,14 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
               runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
             }}
           >
-            <text fg={theme.colors['descriptionForeground']}>×</text>
+            <text fg={t.muted}>×</text>
           </box>
         ) : null}
       </box>
       <box flexDirection="row">
-        <text fg={theme.colors['descriptionForeground']}> {label} </text>
+        <text fg={t.muted}> {label} </text>
         <ActivityIndicator tab={tab} />
       </box>
-    </box>
+    </ContextMenuBox>
   )
 }

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
 }