@brimveyn/aimux 1.7.0 → 1.7.2

package/src/ui/components/git-panel.tsx

@@ -13,7 +13,7 @@ import type {
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
-import { getCurrentTheme, getTransparent, useTheme, useTransparent } from '../theme'
+import { getCurrentTokens, getTransparent, useTokens, useTransparent } from '../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -44,19 +44,19 @@ const BASE_SECTION_ORDER: GitFileSection[] = ['staged', 'unstaged', 'untracked']
 const HISTORICAL_SECTION_ORDER: GitFileSection[] = ['historical', 'untracked']
 
 function statusColor(status: GitFileEntry['status']): string {
-  const t = getCurrentTheme()
+  const t = getCurrentTokens()
   switch (status) {
     case '?':
     case 'A':
-      return t.colors['gitDecoration.addedResourceForeground']
+      return t.palette.success
     case 'C':
     case 'R':
-      return t.colors['textLink.foreground']
+      return t.palette.primary
     case 'D':
     case 'U':
-      return t.colors['editorError.foreground']
+      return t.palette.error
     case 'M':
-      return t.colors['editorWarning.foreground']
+      return t.palette.warning
   }
 }
 
@@ -94,6 +94,7 @@ function renderFileLabel(
   pathConfig: GitPanePathConfig,
   fileListMode: GitFileListMode
 ): ReactNode {
+  const t = getCurrentTokens()
   const transform = pathConfig.enabled ? pathConfig.pathFn : undefined
   const displayPath = transform ? transform(file.path) : file.path
   const { basename, prefix } = splitPath(displayPath)
@@ -102,10 +103,8 @@ function renderFileLabel(
   if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
-        {showDir ? (
-          <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span>
-        ) : null}
+        <span fg={t.palette.ink}>{basename}</span>
+        {showDir ? <span fg={t.muted}> {dir}</span> : null}
       </text>
     )
   }
@@ -114,13 +113,11 @@ function renderFileLabel(
   const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={getCurrentTheme().colors['descriptionForeground']}>{renamed.basename}</span>
-      {showDir && renamedDir ? (
-        <span fg={getCurrentTheme().colors['descriptionForeground']}> {renamedDir}</span>
-      ) : null}
-      <span fg={getCurrentTheme().colors['descriptionForeground']}> → </span>
-      <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
-      {showDir ? <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span> : null}
+      <span fg={t.muted}>{renamed.basename}</span>
+      {showDir && renamedDir ? <span fg={t.muted}> {renamedDir}</span> : null}
+      <span fg={t.muted}> → </span>
+      <span fg={t.palette.ink}>{basename}</span>
+      {showDir ? <span fg={t.muted}> {dir}</span> : null}
     </text>
   )
 }
@@ -134,35 +131,28 @@ function renderDiffCount(
   hasNumstat: boolean
 ): ReactNode {
   if (!diffCountConfig.enabled) return null
+  const t = getCurrentTokens()
   if (!hasNumstat) {
     return (
-      <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg} flexShrink={0}>
+      <text fg={t.muted} bg={bg} flexShrink={0}>
         —
       </text>
     )
   }
   return (
     <box flexDirection="row" flexShrink={0}>
-      <text
-        fg={getCurrentTheme().colors['gitDecoration.addedResourceForeground']}
-        bg={bg}
-      >{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={getCurrentTheme().colors['editor.lineHighlightBackground']} bg={bg}>
+      <text fg={t.palette.success} bg={bg}>{`+${padRight(file.added, addedW)}`}</text>
+      <text fg={t.hover} bg={bg}>
         {' '}
       </text>
-      <text
-        fg={getCurrentTheme().colors['editorError.foreground']}
-        bg={bg}
-      >{`−${padRight(file.removed, removedW)}`}</text>
+      <text fg={t.palette.error} bg={bg}>{`−${padRight(file.removed, removedW)}`}</text>
     </box>
   )
 }
 
 function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const bg =
-    isSelected && !getTransparent()
-      ? getCurrentTheme().colors['list.activeSelectionBackground']
-      : undefined
+  const t = getCurrentTokens()
+  const bg = isSelected && !getTransparent() ? t.selected : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -173,13 +163,13 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
         <box flexDirection="row" gap={1} onMouseDown={onToggle}>
-          <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg}>
+          <text fg={t.muted} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg}>
+          <text fg={t.palette.primary} bg={bg}>
             {row.isCollapsed ? '\uf07b' : '\uf07c'}
           </text>
-          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg} wrapMode="none">
+          <text fg={t.palette.primary} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -199,10 +189,7 @@ function renderFileRow(
 ): ReactNode {
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg =
-    isSelected && !getTransparent()
-      ? getCurrentTheme().colors['list.activeSelectionBackground']
-      : undefined
+  const bg = isSelected && !getTransparent() ? getCurrentTokens().selected : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -236,6 +223,7 @@ function renderTreeSection(
   marginTop: number
 ): ReactNode {
   if (files.length === 0) return null
+  const t = getCurrentTokens()
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
   const toggleListMode = (): void => {
     dispatchGlobal({ type: 'git-mode-toggle-file-list-mode' })
@@ -244,32 +232,16 @@ function renderTreeSection(
   return (
     <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
+        <text fg={t.accent}>
           <strong>
             {title} ({files.length})
           </strong>
         </text>
         {showListModeToggle ? (
           <box flexDirection="row" gap={1} onMouseDown={toggleListMode}>
-            <text
-              fg={
-                fileListMode === 'tree'
-                  ? getCurrentTheme().colors['textLink.foreground']
-                  : getCurrentTheme().colors['descriptionForeground']
-              }
-            >
-              tree
-            </text>
-            <text fg={getCurrentTheme().colors['descriptionForeground']}>|</text>
-            <text
-              fg={
-                fileListMode === 'flat'
-                  ? getCurrentTheme().colors['textLink.foreground']
-                  : getCurrentTheme().colors['descriptionForeground']
-              }
-            >
-              flat
-            </text>
+            <text fg={fileListMode === 'tree' ? t.palette.primary : t.muted}>tree</text>
+            <text fg={t.muted}>|</text>
+            <text fg={fileListMode === 'flat' ? t.palette.primary : t.muted}>flat</text>
           </box>
         ) : null}
       </box>
@@ -309,26 +281,18 @@ function computeStatusPlaceholder(
   gitPanel: GitPanelState,
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
+  const t = getCurrentTokens()
   if (!hasProjectPath) {
-    return {
-      label: 'No active session',
-      labelColor: getCurrentTheme().colors['descriptionForeground'],
-    }
+    return { label: 'No active session', labelColor: t.muted }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return {
-      label: 'Not a git repository',
-      labelColor: getCurrentTheme().colors['descriptionForeground'],
-    }
+    return { label: 'Not a git repository', labelColor: t.muted }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: getCurrentTheme().colors['editorError.foreground'] }
+    return { label: 'Git error', labelColor: t.palette.error }
   }
   if (gitPanel.files.length === 0) {
-    return {
-      label: 'Working tree clean',
-      labelColor: getCurrentTheme().colors['descriptionForeground'],
-    }
+    return { label: 'Working tree clean', labelColor: t.muted }
   }
   return null
 }
@@ -347,7 +311,7 @@ export const GitPanel = memo(function GitPanel({
   projectPath,
   selectedEntryKey,
 }: GitPanelProps) {
-  const theme = useTheme()
+  const t = useTokens()
   useTransparent()
   const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
@@ -382,7 +346,7 @@ export const GitPanel = memo(function GitPanel({
   return (
     <box flexDirection="column" flexGrow={1} gap={0}>
       {hasRemoteTracking ? (
-        <text fg={theme.colors['descriptionForeground']}>
+        <text fg={t.muted}>
           ↑{gitPanel.ahead} ↓{gitPanel.behind}
         </text>
       ) : null}

package/src/ui/components/git-view.tsx

@@ -11,7 +11,7 @@ import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { getSelectedGitFile, gitFileKey } from '../../state/git-tree'
 import { setGitDiffScroller } from '../git-view-controls'
-import { useBg, useTheme } from '../theme'
+import { useBg, useTokens } from '../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
 import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
@@ -47,25 +47,25 @@ const DiffStage = memo(function DiffStage({
   themeId,
   view,
 }: DiffStageProps) {
-  const theme = useTheme()
+  const t = useTokens()
   if (loading && !diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['descriptionForeground']}>Loading diff…</text>
+        <text fg={t.muted}>Loading diff…</text>
       </box>
     )
   }
   if (!diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['descriptionForeground']}>Select a file.</text>
+        <text fg={t.muted}>Select a file.</text>
       </box>
     )
   }
   if (diff.errorMessage) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['editorError.foreground']}>{diff.errorMessage}</text>
+        <text fg={t.palette.error}>{diff.errorMessage}</text>
       </box>
     )
   }
@@ -74,7 +74,7 @@ const DiffStage = memo(function DiffStage({
   if (placeholder) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['descriptionForeground']}>{placeholder}</text>
+        <text fg={t.muted}>{placeholder}</text>
       </box>
     )
   }
@@ -83,7 +83,7 @@ const DiffStage = memo(function DiffStage({
     <box flexDirection="column" flexGrow={1} overflow="hidden">
       {diff.oldPath ? (
         <box paddingLeft={1} paddingRight={1}>
-          <text fg={theme.colors['descriptionForeground']}>
+          <text fg={t.muted}>
             renamed: {diff.oldPath} → {diff.path}
           </text>
         </box>
@@ -105,8 +105,8 @@ interface GitViewProps {
 }
 
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
-  const theme = useTheme()
-  const sidebarBg = useBg('sideBar.background')
+  const t = useTokens()
+  const sidebarBg = useBg('elevated')
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -193,13 +193,13 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
   let footerNode: React.ReactNode = null
   if (pendingHint) {
     footerNode = (
-      <text fg={theme.colors['editorWarning.foreground']}>
+      <text fg={t.palette.warning}>
         <strong>{pendingHint}</strong>
       </text>
     )
   } else if (actionMessage) {
     footerNode = actionMessage.split('\n').map((line, idx) => (
-      <text key={idx} fg={theme.colors['textLink.foreground']}>
+      <text key={idx} fg={t.palette.primary}>
         {line}
       </text>
     ))
@@ -215,26 +215,24 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
           padding={0}
           gap={0}
         >
-          <text fg={theme.colors['textLink.foreground']}>
+          <text fg={t.palette.primary}>
             <strong>aimux · git</strong>
           </text>
           {gitPanel.branch ? (
             <box flexDirection="row">
-              <text fg={theme.colors['textLink.foreground']}>{'\u{e702}'} </text>
-              <text fg={theme.colors['descriptionForeground']}>{gitPanel.branch}</text>
+              <text fg={t.palette.primary}>{'\u{e702}'} </text>
+              <text fg={t.muted}>{gitPanel.branch}</text>
             </box>
           ) : null}
           {gitMode.headOffset > 0 ? (
             <box flexDirection="row" gap={1}>
-              <text fg={theme.colors['editorWarning.foreground']}>
+              <text fg={t.palette.warning}>
                 <strong>HEAD~{gitMode.headOffset}</strong>
               </text>
-              <text fg={theme.colors['descriptionForeground']}>[ newer · ] older</text>
+              <text fg={t.muted}>[ newer · ] older</text>
             </box>
           ) : null}
-          <text fg={theme.colors['editor.lineHighlightBackground']}>
-            {'·'.repeat(Math.max(0, fileBarWidth - 2))}
-          </text>
+          <text fg={t.hover}>{'·'.repeat(Math.max(0, fileBarWidth - 2))}</text>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
             compact={gitPane.treeCompaction}

package/src/ui/components/help-modal.tsx

@@ -5,7 +5,7 @@ import { useLayoutEffect, useMemo } from 'react'
 import { collectHelpEntries, HELP_MODE_LABELS } from '../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { useKeymap } from '../keymap-context'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { Picker, type PickerItem } from './picker'
 
@@ -23,7 +23,7 @@ function matchesFilter(needle: string, ...fields: (string | undefined)[]): boole
 }
 
 export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const config = useKeymap()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
   const scoped = useMemo(
@@ -54,18 +54,12 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
       group: entry.modeLabel,
       key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
       title: (
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-          wrapMode="none"
-        >
+        <text fg={active ? t.palette.ink : t.muted} wrapMode="none">
           {entry.description ?? ''}
         </text>
       ),
       trailing: (
-        <text
-          fg={active ? theme.colors['textLink.foreground'] : theme.colors['terminal.ansiMagenta']}
-          wrapMode="none"
-        >
+        <text fg={active ? t.palette.primary : t.accent} wrapMode="none">
           {entry.keysDisplay}
         </text>
       ),
@@ -82,9 +76,7 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={theme.colors['descriptionForeground']}>
-          {filter ? 'No matching bindings.' : 'No bindings registered.'}
-        </text>
+        <text fg={t.muted}>{filter ? 'No matching bindings.' : 'No bindings registered.'}</text>
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />

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

@@ -1,4 +1,4 @@
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { Surface } from './surface'
 
 interface InputFieldProps {
@@ -9,15 +9,13 @@ interface InputFieldProps {
 }
 
 export function InputField({ active, cursorPos, placeholder, value }: InputFieldProps) {
-  const theme = useTheme()
-  const fg = active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
+  const t = useTokens()
+  const fg = active ? t.palette.ink : t.muted
   if (!active) {
     const showPlaceholder = !value && !!placeholder
     return (
       <Surface tone="input" padding={1}>
-        <text fg={showPlaceholder ? theme.colors['editorLineNumber.foreground'] : fg}>
-          {showPlaceholder ? placeholder : value}
-        </text>
+        <text fg={showPlaceholder ? t.faint : fg}>{showPlaceholder ? placeholder : value}</text>
       </Surface>
     )
   }
@@ -34,7 +32,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
     <Surface tone="inputActive" padding={1}>
       <text fg={fg}>
         {before}
-        <span bg={theme.colors['editor.foreground']} fg={theme.colors['editor.background']}>
+        <span bg={t.palette.ink} fg={t.palette.neutral}>
           {cursorDisplay}
         </span>
         {trailing}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
@@ -28,7 +28,7 @@ export function ListItem({
   title,
   trailing,
 }: ListItemProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const isRow = direction === 'row'
   return (
     <box id={id} onMouseOver={onHover} onMouseDown={onClick}>
@@ -41,15 +41,7 @@ export function ListItem({
           <box flexDirection="row">
             {isRow ? null : (
               <>
-                <text
-                  fg={
-                    active
-                      ? theme.colors['textLink.foreground']
-                      : theme.colors['editor.lineHighlightBackground']
-                  }
-                >
-                  {active ? '›' : '·'}
-                </text>
+                <text fg={active ? t.palette.primary : t.hover}>{active ? '›' : '·'}</text>
                 <text> </text>
               </>
             )}

package/src/ui/components/modal-keybinds-overlay.tsx

@@ -2,7 +2,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { describeBindings } from '../../input/keymap/describe-bindings'
 import { useKeymap } from '../keymap-context'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { Surface } from './surface'
 
 const KEYS_COLUMN_WIDTH = 12
@@ -13,7 +13,7 @@ interface ModalKeybindsOverlayProps {
 }
 
 export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
     dedupeByDescription: true,
@@ -29,9 +29,9 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
         {entries.map((binding) => (
           <box key={`${binding.keys}-${binding.description}`} flexDirection="row">
             <box width={KEYS_COLUMN_WIDTH}>
-              <text fg={theme.colors['terminal.ansiMagenta']}>{binding.keysDisplay}</text>
+              <text fg={t.accent}>{binding.keysDisplay}</text>
             </box>
-            <text fg={theme.colors['descriptionForeground']}>{binding.description ?? ''}</text>
+            <text fg={t.muted}>{binding.description ?? ''}</text>
           </box>
         ))}
       </Surface>

package/src/ui/components/modal-shell.tsx

@@ -3,7 +3,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
 import { type ReactNode } from 'react'
 
-import { useTheme, useTransparent } from '../theme'
+import { useTokens, useTransparent } from '../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {
@@ -32,16 +32,11 @@ const TRANSPARENT_RGBA = RGBA.fromValues(0, 0, 0, 0)
 //
 // `setCell` (→ `bufferSetCell` → zig `buffer.set`) bypasses both: it writes
 // the cell unconditionally, no alpha check, no blending, no char preservation.
-// That overwrites each chrome char with a space while keeping the cell bg
-// transparent, so the terminal emulator's own (blurred) window bg still shows
-// through. Children (modal content) then render on top as normal.
 function fillModalInteriorWithSpaces(this: BoxRenderable, buffer: OptimizedBuffer): void {
   const x0 = this.screenX
   const y0 = this.screenY
   const w = this.width
   const h = this.height
-  // Inset by 1 on each side so we don't erase the border that renderSelf just
-  // drew. The modal always has a single-cell border.
   const startX = x0 + 1
   const startY = y0 + 1
   const endX = x0 + w - 1
@@ -62,9 +57,9 @@ export function ModalShell({
   title,
   width,
 }: ModalShellProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const transparent = useTransparent()
-  const bg = transparent ? 'transparent' : theme.colors['sideBar.background']
+  const bg = transparent ? 'transparent' : t.elevated
   return (
     <box
       position="absolute"
@@ -77,7 +72,7 @@ export function ModalShell({
     >
       <box
         border
-        borderColor={theme.colors['focusBorder']}
+        borderColor={t.palette.primary}
         backgroundColor={bg}
         padding={1}
         width={width}
@@ -85,8 +80,8 @@ export function ModalShell({
       >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
-            <text fg={theme.colors['terminal.ansiMagenta']}>{title}</text>
-            {subtitle ? <text fg={theme.colors['descriptionForeground']}>{subtitle}</text> : null}
+            <text fg={t.accent}>{title}</text>
+            {subtitle ? <text fg={t.muted}>{subtitle}</text> : null}
           </box>
           {children}
           {footer ? <box>{footer}</box> : null}

package/src/ui/components/new-tab-modal.tsx

@@ -3,7 +3,7 @@ import type { AssistantId } from '../../state/types'
 import { getAllAssistantOptions, getAssistantOption } from '../../pty/command-registry'
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterAssistants } from '../../state/selectors'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -26,7 +26,7 @@ export function NewTabModal({
   filter,
   selectedIndex,
 }: NewTabModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
 
   if (editingCommand !== null) {
     const option =
@@ -39,9 +39,7 @@ export function NewTabModal({
         width={uiTokens.modalWidth.md}
       >
         <box flexDirection="column">
-          <text fg={theme.colors['descriptionForeground']}>
-            Custom command (blank to reset to default: {option.command})
-          </text>
+          <text fg={t.muted}>Custom command (blank to reset to default: {option.command})</text>
           <InputField
             active
             value={editBuffer}
@@ -65,17 +63,11 @@ export function NewTabModal({
       onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
       subtitle: (
         <box flexDirection="column">
-          <text fg={theme.colors['descriptionForeground']}>{option.description}</text>
-          {customCmd ? <text fg={theme.colors['textLink.foreground']}>{customCmd}</text> : null}
+          <text fg={t.muted}>{option.description}</text>
+          {customCmd ? <text fg={t.palette.primary}>{customCmd}</text> : null}
         </box>
       ),
-      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>,
     }
   })
 
@@ -89,7 +81,7 @@ export function NewTabModal({
       cursorPos={cursorPos}
       items={items}
       selectedIndex={selectedIndex}
-      emptyState={<text fg={theme.colors['descriptionForeground']}>No matching assistants.</text>}
+      emptyState={<text fg={t.muted}>No matching assistants.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )

package/src/ui/components/pending-chord-overlay.tsx

@@ -2,11 +2,11 @@ import { parseKeyNotation } from '../../input/keymap/key-chord'
 import { formatChord } from '../../input/keymap/key-format'
 import { useAppStore } from '../../state/app-store'
 import { useKeymap } from '../keymap-context'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { Surface } from './surface'
 
 export function PendingChordOverlay() {
-  const theme = useTheme()
+  const t = useTokens()
   const pendingChords = useAppStore((s) => s.pendingChords)
   const modalOpen = useAppStore((s) => s.modal.type !== null)
   const config = useKeymap()
@@ -20,9 +20,9 @@ export function PendingChordOverlay() {
     <box position="absolute" bottom={modalOpen ? 10 : 2} right={1}>
       <Surface tone="elevated" paddingLeft={1} paddingRight={1}>
         <box flexDirection="row">
-          <text fg={theme.colors['descriptionForeground']}>pending: </text>
-          <text fg={theme.colors['textLink.foreground']}>{display}</text>
-          <text fg={theme.colors['descriptionForeground']}> …</text>
+          <text fg={t.muted}>pending: </text>
+          <text fg={t.palette.primary}>{display}</text>
+          <text fg={t.muted}> …</text>
         </box>
       </Surface>
     </box>