@brimveyn/aimux 1.7.1 → 1.7.2

package/src/ui/components/sidebar.tsx

@@ -1,11 +1,10 @@
-import type { Theme } from '@brimveyn/aimux-config'
-
 import { type ScrollBoxRenderable } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal } from '../../state/dispatch-ref'
-import { getCurrentTheme, useBg, useTheme } from '../theme'
+import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../theme'
+import { ContextMenuBox } from './context-menu-box'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -24,19 +23,19 @@ const GUTTER_PAD = '│'
 function getRowBackground({
   alternate,
   isActive,
-  theme,
+  tokens,
 }: {
   isActive: boolean
   alternate: boolean
-  theme: Theme
+  tokens: ThemeTokens
 }): string | undefined {
-  if (isActive) return theme.colors['list.activeSelectionBackground']
-  if (alternate) return theme.colors['editor.lineHighlightBackground']
+  if (isActive) return tokens.selected
+  if (alternate) return tokens.hover
   return undefined
 }
 
 const SidebarTop = memo(function SidebarTop() {
-  const theme = useTheme()
+  const tokens = useTokens()
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
@@ -48,22 +47,20 @@ const SidebarTop = memo(function SidebarTop() {
 
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={theme.colors['textLink.foreground']}>
+      <text fg={tokens.palette.primary}>
         <strong>aimux</strong>
       </text>
-      <text fg={theme.colors['terminal.ansiMagenta']}>
-        {currentSession ? currentSession.name : 'No session selected'}
-      </text>
+      <text fg={tokens.accent}>{currentSession ? currentSession.name : 'No session selected'}</text>
       {branch ? (
         <box flexDirection="row">
-          <text fg={theme.colors['textLink.foreground']}>{'\u{e702}'} </text>
-          <text fg={theme.colors['descriptionForeground']}>{branch}</text>
+          <text fg={tokens.palette.primary}>{'\u{e702}'} </text>
+          <text fg={tokens.muted}>{branch}</text>
         </box>
       ) : null}
       <box
         flexDirection="row"
         paddingY={1}
-        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        backgroundColor={tokens.selected}
         justifyContent="center"
         marginTop={1}
         onMouseDown={(e) => {
@@ -71,25 +68,22 @@ const SidebarTop = memo(function SidebarTop() {
           dispatchGlobal({ type: 'open-new-tab-modal' })
         }}
       >
-        <text fg={theme.colors['editor.foreground']}>+ New assistant</text>
+        <text fg={tokens.palette.ink}>+ New assistant</text>
       </box>
-      <text fg={theme.colors['editor.lineHighlightBackground']}>
-        {'·'.repeat(Math.max(0, sidebarWidth - 2))}
-      </text>
+      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
     </box>
   )
 })
 
 function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
+  const t = getCurrentTokens()
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
+      <text fg={t.accent}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
-        {isGroupEnd ? GUTTER_END : GUTTER_PAD}
-      </text>
+      <text fg={t.accent}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
     </box>
   )
 }
@@ -99,7 +93,7 @@ interface TabsBodyProps {
 }
 
 const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
-  const theme = useTheme()
+  const tokens = useTokens()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const focusMode = useAppStore((s) => s.focusMode)
@@ -129,7 +123,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
-          <text fg={theme.colors['descriptionForeground']}>No tabs yet. Press Ctrl+n.</text>
+          <text fg={tokens.muted}>No tabs yet. Press Ctrl+n.</text>
         </box>
       ) : (
         tabs.map((tab, index) => {
@@ -145,7 +139,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
           return (
             <box
               key={tab.id}
-              backgroundColor={getRowBackground({ alternate, isActive, theme })}
+              backgroundColor={getRowBackground({ alternate, isActive, tokens })}
               flexDirection="row"
               onMouseDown={(event) => {
                 event.stopPropagation()
@@ -171,8 +165,8 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
 })
 
 export function Sidebar({ onTabActivate }: SidebarProps) {
-  const theme = useTheme()
-  const sidebarBg = useBg('sideBar.background')
+  const tokens = useTokens()
+  const sidebarBg = useBg('elevated')
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
@@ -190,11 +184,7 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
   const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.ratio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.ratio * 100)) : 0
 
-  const separator = (
-    <text fg={theme.colors['editor.lineHighlightBackground']}>
-      {'·'.repeat(Math.max(0, sidebarWidth - 2))}
-    </text>
-  )
+  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
   const gitBody = gitEmbedded ? (
     <box flexDirection="column" flexGrow={gitGrow} flexShrink={1} flexBasis={0} overflow="hidden">
       <GitPaneWidget pollingEnabled={gitPane.visible} />
@@ -202,12 +192,23 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
   ) : null
 
   return (
-    <box
+    <ContextMenuBox
       width={sidebarWidth}
       padding={0}
       flexDirection="column"
       backgroundColor={sidebarBg}
       gap={0}
+      rightClickMenu={[
+        ['Hide sidebar', () => dispatchGlobal({ type: 'toggle-sidebar' })],
+        ['Toggle git pane', () => dispatchGlobal({ type: 'toggle-git-pane' })],
+        [
+          'Toggle diff mode',
+          () => {
+            dispatchGlobal({ type: 'enter-git-mode' })
+            dispatchGlobal({ type: 'git-mode-toggle-diff-view' })
+          },
+        ],
+      ]}
       onMouseDown={() => {
         if (focusMode === 'terminal-input') {
           dispatchGlobal({ focusMode: 'navigation', type: 'set-focus-mode' })
@@ -236,6 +237,6 @@ export function Sidebar({ onTabActivate }: SidebarProps) {
           {gitBody}
         </>
       ) : null}
-    </box>
+    </ContextMenuBox>
   )
 }

package/src/ui/components/snippet-editor-modal.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -16,7 +16,7 @@ export function SnippetEditorModal({
   snippetContent,
   snippetName,
 }: SnippetEditorModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const nameActive = activeField === 'name'
   const contentActive = activeField === 'content'
 
@@ -27,26 +27,12 @@ export function SnippetEditorModal({
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">
-        <text
-          fg={
-            nameActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Name
-        </text>
+        <text fg={nameActive ? t.palette.ink : t.muted}>Name</text>
         <InputField active={nameActive} value={snippetName} />
       </box>
 
       <box flexDirection="column">
-        <text
-          fg={
-            contentActive
-              ? theme.colors['editor.foreground']
-              : theme.colors['descriptionForeground']
-          }
-        >
-          Content
-        </text>
+        <text fg={contentActive ? t.palette.ink : t.muted}>Content</text>
         <InputField active={contentActive} value={snippetContent} />
       </box>
     </ModalShell>

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

@@ -2,7 +2,7 @@ import type { SnippetRecord } from '../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterSnippets } from '../../state/selectors'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { Picker, type PickerItem } from './picker'
 
@@ -27,7 +27,7 @@ export function SnippetPickerModal({
   selectedIndex,
   snippets,
 }: SnippetPickerModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const filtered = filterSnippets(snippets, filter)
 
   const items: PickerItem[] = filtered.map((snippet, index) => {
@@ -40,13 +40,9 @@ export function SnippetPickerModal({
       },
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
       onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-      subtitle: (
-        <text fg={theme.colors['descriptionForeground']}>{truncateContent(snippet.content)}</text>
-      ),
+      subtitle: <text fg={t.muted}>{truncateContent(snippet.content)}</text>,
       title: (
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
+        <text fg={active ? t.palette.ink : t.muted}>
           <strong>{snippet.name}</strong>
         </text>
       ),
@@ -64,7 +60,7 @@ export function SnippetPickerModal({
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={theme.colors['descriptionForeground']}>
+        <text fg={t.muted}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
       }

package/src/ui/components/split-layout.tsx

@@ -11,7 +11,7 @@ import {
   type PaneRect,
   type SplitDirection,
 } from '../../state/layout-tree'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER
@@ -58,7 +58,7 @@ export function SplitLayout({
   onTerminalScrollEvent,
   tabs,
 }: SplitLayoutProps) {
-  const theme = useTheme()
+  const t = useTokens()
   if (node.type === 'leaf') {
     const tab = tabs.find((t) => t.id === node.tabId)
     const isActive = node.tabId === activeTabId
@@ -135,7 +135,7 @@ export function SplitLayout({
       <box
         minWidth={node.direction === 'vertical' ? 1 : undefined}
         minHeight={node.direction === 'horizontal' ? 1 : undefined}
-        backgroundColor={theme.colors['editorGroup.border']}
+        backgroundColor={t.border}
         onMouseDown={(e: OtuiMouseEvent) => {
           e.preventDefault()
           if (!onSeparatorDragStart) return

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

@@ -4,22 +4,21 @@ import { version as APP_VERSION } from '../../../package.json'
 import { useAppStore } from '../../state/app-store'
 import { useKeymap } from '../keymap-context'
 import { getStatusBarModel } from '../status-bar-model'
-import { getCurrentTheme, useBg, useTheme } from '../theme'
+import { getCurrentTokens, useBg, useTokens } from '../theme'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
-  const t = getCurrentTheme()
+  const t = getCurrentTokens()
   switch (focusMode) {
     case 'terminal-input':
-      return t.colors['textLink.foreground']
+      return t.palette.primary
     case 'modal':
-      return t.colors['editorWarning.foreground']
     case 'command-edit':
-      return t.colors['editorWarning.foreground']
+      return t.palette.warning
     case 'git':
-      return t.colors['gitDecoration.addedResourceForeground']
+      return t.palette.success
     case 'navigation':
     default:
-      return t.colors['terminal.ansiMagenta']
+      return t.accent
   }
 }
 
@@ -40,8 +39,8 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 }
 
 export function StatusBar() {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
@@ -60,13 +59,13 @@ export function StatusBar() {
       <box width="100%" flexDirection="row">
         <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>
         <text> </text>
-        <text fg={theme.colors['editor.foreground']}>{model.left}</text>
+        <text fg={t.palette.ink}>{model.left}</text>
       </box>
       <box width="100%" flexDirection="row" justifyContent="space-between">
-        <text fg={theme.colors['descriptionForeground']}>{model.right}</text>
+        <text fg={t.muted}>{model.right}</text>
         <box flexDirection="row" gap={2}>
-          {model.help ? <text fg={theme.colors['descriptionForeground']}>{model.help}</text> : null}
-          <text fg={theme.colors['editor.lineHighlightBackground']}>v{APP_VERSION}</text>
+          {model.help ? <text fg={t.muted}>{model.help}</text> : null}
+          <text fg={t.hover}>v{APP_VERSION}</text>
         </box>
       </box>
     </box>

package/src/ui/components/surface.tsx

@@ -1,24 +1,21 @@
 import type { ReactNode } from 'react'
 
-import type { ThemeColorMap } from '../themes'
-
-import { useBg } from '../theme'
+import { type SurfaceToken, useBg } from '../theme'
 
 type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 
-function toneToColorKey(tone: SurfaceTone): keyof ThemeColorMap {
+function toneToToken(tone: SurfaceTone): SurfaceToken {
   switch (tone) {
     case 'elevated':
-      return 'sideBar.background'
+      return 'elevated'
     case 'selected':
-      return 'list.activeSelectionBackground'
-    case 'input':
-      return 'editor.background'
     case 'inputActive':
-      return 'list.activeSelectionBackground'
+      return 'selected'
+    case 'input':
+      return 'base'
     case 'muted':
     default:
-      return 'sideBarSectionHeader.background'
+      return 'elevated'
   }
 }
 
@@ -47,7 +44,7 @@ export function Surface({
   tone = 'muted',
   width,
 }: SurfaceProps) {
-  const bg = useBg(toneToColorKey(tone))
+  const bg = useBg(toneToToken(tone))
   return (
     <box
       backgroundColor={bg}

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>
   )
 }