@brimveyn/aimux 1.7.0 → 1.7.2

package/src/ui/components/picker.tsx

@@ -4,7 +4,7 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useLayoutEffect, useRef } from 'react'
 
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { BareInput } from './bare-input'
 import { ListItem } from './list-item'
 import { ModalShell } from './modal-shell'
@@ -39,7 +39,7 @@ const VIEWPORT_HEIGHT_RATIO = 0.6
 const MODAL_CHROME_ROWS = 6
 
 function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?: () => void }) {
-  const theme = useTheme()
+  const t = useTokens()
   return (
     <box flexDirection="row" gap={1}>
       {onEdit ? (
@@ -49,7 +49,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onEdit()
           }}
         >
-          <text fg={theme.colors['textLink.foreground']}>[edit]</text>
+          <text fg={t.palette.primary}>[edit]</text>
         </box>
       ) : null}
       {onDelete ? (
@@ -59,7 +59,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onDelete()
           }}
         >
-          <text fg={theme.colors['editorError.foreground']}>[del]</text>
+          <text fg={t.palette.error}>[del]</text>
         </box>
       ) : null}
     </box>
@@ -80,7 +80,7 @@ export function Picker({
   title,
   width,
 }: PickerProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const dimensions = useTerminalDimensions()
   const maxHeight = Math.max(6, Math.floor(dimensions.height * VIEWPORT_HEIGHT_RATIO))
   const listHeight = Math.max(1, maxHeight - MODAL_CHROME_ROWS)
@@ -140,7 +140,7 @@ export function Picker({
             if (item.group && item.group !== prevGroup) {
               nodes.push(
                 <box key={`group::${item.group}`} paddingLeft={1} paddingTop={index === 0 ? 0 : 1}>
-                  <text fg={theme.colors['editorWarning.foreground']} wrapMode="none">
+                  <text fg={t.palette.warning} wrapMode="none">
                     {item.group}
                   </text>
                 </box>

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

@@ -10,11 +10,12 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { IDLE_SESSION_STATUS } from '../../state/types'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { useBg, useTheme } from '../theme'
+import { useBg, useTokens } from '../theme'
+import { ContextMenuBox } from './context-menu-box'
 
 export function SessionBar() {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -22,11 +23,7 @@ export function SessionBar() {
 
   const [draggingId, setDraggingId] = useState<string | null>(null)
   const [dragOrder, setDragOrder] = useState<string[] | null>(null)
-  // Hysteresis: the id of the chip we most recently swapped with. While the
-  // cursor remains over that chip we refuse to swap back (prevents oscillation
-  // when a long chip's new bounds still cover the cursor after a swap).
   const lastSwapWithRef = useRef<string | null>(null)
-  // Live bounds of each chip after render, keyed by session id.
   const chipRefs = useRef(new Map<string, BoxRenderable>())
 
   const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
@@ -125,6 +122,22 @@ export function SessionBar() {
             onMouseDrag={handleMouseDrag}
             onMouseUp={commitDrop}
             onMouseDragEnd={cancelDrag}
+            rightClickMenu={[
+              [
+                'Rename',
+                () =>
+                  dispatchGlobal({
+                    initialName: session.name,
+                    returnToSessionPicker: false,
+                    sessionTargetId: session.id,
+                    type: 'open-session-name-modal',
+                  }),
+              ],
+              [
+                'Close',
+                () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
+              ],
+            ]}
           />
         )
       })}
@@ -133,13 +146,13 @@ export function SessionBar() {
         flexDirection="row"
         paddingLeft={1}
         paddingRight={1}
-        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        backgroundColor={t.selected}
         onMouseDown={(e) => {
           e.stopPropagation()
           dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
         }}
       >
-        <text fg={theme.colors['editor.foreground']} selectable={false}>
+        <text fg={t.palette.ink} selectable={false}>
           + New
         </text>
       </box>
@@ -166,6 +179,7 @@ interface SessionChipProps {
   onMouseDrag: (event: OtuiMouseEvent) => void
   onMouseUp: (event: OtuiMouseEvent) => void
   onMouseDragEnd: (event: OtuiMouseEvent) => void
+  rightClickMenu: Array<[string, () => void]>
 }
 
 function SessionChip({
@@ -177,29 +191,29 @@ function SessionChip({
   onMouseDragEnd,
   onMouseUp,
   onRef,
+  rightClickMenu,
   session,
   status,
 }: SessionChipProps) {
-  const theme = useTheme()
-  const selectionBg = useBg('list.activeSelectionBackground')
+  const t = useTokens()
+  const selectionBg = useBg('selected')
   const showSpinner = status.working
   const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
-  const labelColor = active
-    ? theme.colors['editor.foreground']
-    : theme.colors['descriptionForeground']
+  const labelColor = active ? t.palette.ink : t.muted
   const bgColor = dragging || active ? selectionBg : undefined
-  const idleColor = theme.colors['gitDecoration.addedResourceForeground'] ?? ''
-  const workingColor = theme.colors['textLink.foreground'] ?? ''
-  const waitingColor = theme.colors['editorWarning.foreground'] ?? ''
+  const idleColor = t.palette.success
+  const workingColor = t.palette.primary
+  const waitingColor = t.palette.warning
 
   return (
-    <box
+    <ContextMenuBox
       ref={onRef}
       flexDirection="row"
       paddingLeft={1}
       paddingRight={1}
       backgroundColor={bgColor}
+      rightClickMenu={rightClickMenu}
       onMouseDown={(e) => {
         e.preventDefault()
         onMouseDown(e)
@@ -233,9 +247,9 @@ function SessionChip({
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>
-      <text fg={theme.colors['editor.lineHighlightBackground']} selectable={false}>
+      <text fg={t.hover} selectable={false}>
         {' '}
       </text>
-    </box>
+    </ContextMenuBox>
   )
 }

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

@@ -4,7 +4,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterSessions } from '../../state/selectors'
 import { abbreviatePath } from '../path-format'
 import { orderSessionsForDisplay } from '../session-ordering'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { Picker, type PickerItem } from './picker'
 
@@ -31,10 +31,7 @@ function formatSessionLine(
 }
 
 function getEmptyStateMessage(hasFilter: boolean): string {
-  if (hasFilter) {
-    return 'No matching sessions.'
-  }
-
+  if (hasFilter) return 'No matching sessions.'
   return 'No sessions yet. Press Enter or n to create your first session.'
 }
 
@@ -46,7 +43,7 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
@@ -60,14 +57,10 @@ export function SessionPickerModal({
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
       subtitle: session.projectPath ? (
-        <text fg={theme.colors['descriptionForeground']}>
-          {abbreviatePath(session.projectPath)}
-        </text>
+        <text fg={t.muted}>{abbreviatePath(session.projectPath)}</text>
       ) : undefined,
       title: (
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
+        <text fg={active ? t.palette.ink : t.muted}>
           {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
         </text>
       ),
@@ -78,13 +71,7 @@ export function SessionPickerModal({
     key: '__create-new__',
     onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
     title: (
-      <text
-        fg={
-          selectedIndex === filtered.length
-            ? theme.colors['editor.foreground']
-            : theme.colors['descriptionForeground']
-        }
-      >
+      <text fg={selectedIndex === filtered.length ? t.palette.ink : t.muted}>
         Create new session
       </text>
     ),
@@ -104,7 +91,7 @@ export function SessionPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         filtered.length === 0 ? (
-          <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(hasFilter)}</text>
+          <text fg={t.muted}>{getEmptyStateMessage(hasFilter)}</text>
         ) : undefined
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}

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}