@brimveyn/aimux 1.5.4 → 1.6.1

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

@@ -1,51 +1,26 @@
-import type { DiffRenderable } from '@opentui/core'
-
+import { useTerminalDimensions } from '@opentui/react'
 import { memo, useEffect, useRef } from 'react'
 
-import type { DiffData } from '../../state/types'
+import type { DiffData, GitDiffView } from '../../state/types'
+import type { ThemeId } from '../themes'
 
 import { fetchDiff } from '../../git/git-diff'
 import { useGitPanelPolling } from '../../git/git-poller'
 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 { getSyntaxClient, getSyntaxStyle } from '../syntax'
-import { theme } from '../theme'
-import { fileKey, GitPanel } from './git-panel'
-
-interface CodePaneLike {
-  scrollY: number
-  maxScrollY: number
-}
-
-interface DiffRenderableInternals {
-  leftCodeRenderable?: CodePaneLike
-  rightCodeRenderable?: CodePaneLike
-}
-
-function filetypeFromPath(path: string): string | undefined {
-  const dot = path.lastIndexOf('.')
-  if (dot < 0) return undefined
-  const ext = path.slice(dot + 1).toLowerCase()
-  const map: Record<string, string> = {
-    cjs: 'javascript',
-    js: 'javascript',
-    jsx: 'javascript',
-    markdown: 'markdown',
-    md: 'markdown',
-    mdx: 'markdown',
-    mjs: 'javascript',
-    ts: 'typescript',
-    tsx: 'typescript',
-    zig: 'zig',
-  }
-  return map[ext]
-}
+import { useTheme } from '../theme'
+import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
+import { GitPanel } from './git-panel'
 
 interface DiffStageProps {
   diff: DiffData | undefined
+  diffKey: string | null
   loading: boolean
-  diffRef: React.RefObject<DiffRenderable | null>
+  diffRef: React.RefObject<PierreDiffHandle | null>
+  themeId: ThemeId
+  view: GitDiffView
 }
 
 function placeholderText(diff: DiffData): string | null {
@@ -62,25 +37,33 @@ function placeholderText(diff: DiffData): string | null {
   return null
 }
 
-const DiffStage = memo(function DiffStage({ diff, diffRef, loading }: DiffStageProps) {
+const DiffStage = memo(function DiffStage({
+  diff,
+  diffKey,
+  diffRef,
+  loading,
+  themeId,
+  view,
+}: DiffStageProps) {
+  const theme = useTheme()
   if (loading && !diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.textMuted}>Loading diff…</text>
+        <text fg={theme.colors['descriptionForeground']}>Loading diff…</text>
       </box>
     )
   }
   if (!diff) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.textMuted}>Select a file.</text>
+        <text fg={theme.colors['descriptionForeground']}>Select a file.</text>
       </box>
     )
   }
   if (diff.errorMessage) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.danger}>{diff.errorMessage}</text>
+        <text fg={theme.colors['editorError.foreground']}>{diff.errorMessage}</text>
       </box>
     )
   }
@@ -89,74 +72,77 @@ const DiffStage = memo(function DiffStage({ diff, diffRef, loading }: DiffStageP
   if (placeholder) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.textMuted}>{placeholder}</text>
+        <text fg={theme.colors['descriptionForeground']}>{placeholder}</text>
       </box>
     )
   }
 
-  const filetype = filetypeFromPath(diff.path)
-
   return (
     <box flexDirection="column" flexGrow={1} overflow="hidden">
       {diff.oldPath ? (
         <box paddingLeft={1} paddingRight={1}>
-          <text fg={theme.textMuted}>
+          <text fg={theme.colors['descriptionForeground']}>
             renamed: {diff.oldPath} → {diff.path}
           </text>
         </box>
       ) : null}
-      <diff
+      <PierreDiff
+        cacheKey={diffKey ?? diff.path}
         ref={diffRef}
         diff={diff.rawDiff}
-        view="split"
-        syncScroll
-        showLineNumbers
-        wrapMode="none"
-        filetype={filetype}
-        treeSitterClient={filetype ? getSyntaxClient() : undefined}
-        syntaxStyle={filetype ? getSyntaxStyle() : undefined}
-        addedBg={theme.diffAddBg}
-        removedBg={theme.diffRemoveBg}
-        addedSignColor={theme.success}
-        removedSignColor={theme.danger}
-        flexGrow={1}
+        path={diff.path}
+        themeId={themeId}
+        view={view}
       />
     </box>
   )
 })
 
-export const GitView = memo(function GitView() {
-  const sidebarWidth = useAppStore((s) => s.sidebar.width)
+interface GitViewProps {
+  themeId: ThemeId
+}
+
+export const GitView = memo(function GitView({ themeId }: GitViewProps) {
+  const theme = useTheme()
+  const dimensions = useTerminalDimensions()
+  const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
   const gitMode = useAppStore((s) => s.gitMode)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const focusMode = useAppStore((s) => s.focusMode)
-  const diffRef = useRef<DiffRenderable | null>(null)
+  const diffRef = useRef<PierreDiffHandle | null>(null)
 
   const currentSession = currentSessionId
     ? sessions.find((s) => s.id === currentSessionId)
     : undefined
   const projectPath = currentSession?.projectPath
 
-  useGitPanelPolling({ enabled: focusMode === 'git', projectPath })
+  useGitPanelPolling({ enabled: focusMode === 'git', headOffset: gitMode.headOffset, projectPath })
+
+  const fileBarWidth = Math.max(20, Math.floor(dimensions.width * gitPane.diffModeRatio))
 
-  const selectedFile = gitPanel.files[gitMode.selectedFileIndex]
-  const diff = selectedFile ? gitMode.diffs[selectedFile.path] : undefined
-  const loading = selectedFile ? !!gitMode.loading[selectedFile.path] : false
+  const selectedFile = getSelectedGitFile(gitPanel.files, {
+    collapsedFolders: gitMode.collapsedFolders,
+    fileListMode: gitPane.fileListMode,
+    selectedEntryKey: gitMode.selectedEntryKey,
+  })
+  const selectedDiffKey = selectedFile ? gitFileKey(selectedFile) : null
+  const diff = selectedDiffKey ? gitMode.diffs[selectedDiffKey] : undefined
+  const loading = selectedDiffKey ? !!gitMode.loading[selectedDiffKey] : false
 
   useEffect(() => {
     setGitDiffScroller((delta: number) => {
-      const node = diffRef.current as unknown as DiffRenderableInternals | null
+      const node = diffRef.current
       if (!node) return
-      const left = node.leftCodeRenderable
-      const right = node.rightCodeRenderable
-      if (!left || !right) return
-      const cap = Math.max(left.maxScrollY, right.maxScrollY)
-      const base = left.scrollY
+      const left = node.leftScroll
+      const right = node.rightScroll
+      if (!left) return
+      const cap = Math.max(left.scrollHeight - left.viewport.height, 0)
+      const base = left.scrollTop
       const nextScroll = Math.max(0, Math.min(cap, base + delta))
-      left.scrollY = nextScroll
-      right.scrollY = nextScroll
+      left.scrollTop = nextScroll
+      if (right && right !== left) right.scrollTop = nextScroll
     })
     return () => setGitDiffScroller(null)
   }, [])
@@ -164,13 +150,15 @@ export const GitView = memo(function GitView() {
   useEffect(() => {
     if (focusMode !== 'git') return
     if (!selectedFile || !projectPath) return
-    const path = selectedFile.path
+    if (!selectedDiffKey) return
     if (diff || loading) return
-    dispatchGlobal({ loading: true, path, type: 'git-mode-set-loading' })
-    void fetchDiff(projectPath, selectedFile)
-      .then((d) => dispatchGlobal({ diff: d, path, type: 'git-mode-set-diff' }))
-      .catch(() => dispatchGlobal({ loading: false, path, type: 'git-mode-set-loading' }))
-  }, [focusMode, projectPath, selectedFile, diff, loading])
+    dispatchGlobal({ key: selectedDiffKey, loading: true, type: 'git-mode-set-loading' })
+    void fetchDiff(projectPath, selectedFile, gitMode.headOffset)
+      .then((d) => dispatchGlobal({ diff: d, key: selectedDiffKey, type: 'git-mode-set-diff' }))
+      .catch(() =>
+        dispatchGlobal({ key: selectedDiffKey, loading: false, type: 'git-mode-set-loading' })
+      )
+  }, [focusMode, projectPath, selectedFile, selectedDiffKey, diff, loading, gitMode.headOffset])
 
   const pendingPath = gitMode.pendingDeletePath
   const pendingIsUntracked =
@@ -178,7 +166,7 @@ export const GitView = memo(function GitView() {
     selectedFile?.path === pendingPath &&
     selectedFile.section === 'untracked'
   let pendingHint: string | null = null
-  if (pendingPath !== null) {
+  if (pendingPath !== null && selectedFile) {
     pendingHint = pendingIsUntracked
       ? 'press d again to delete file'
       : 'press d again to discard changes'
@@ -187,13 +175,13 @@ export const GitView = memo(function GitView() {
   let footerNode: React.ReactNode = null
   if (pendingHint) {
     footerNode = (
-      <text fg={theme.warning}>
+      <text fg={theme.colors['editorWarning.foreground']}>
         <strong>{pendingHint}</strong>
       </text>
     )
   } else if (actionMessage) {
     footerNode = actionMessage.split('\n').map((line, idx) => (
-      <text key={idx} fg={theme.accent}>
+      <text key={idx} fg={theme.colors['textLink.foreground']}>
         {line}
       </text>
     ))
@@ -203,32 +191,57 @@ export const GitView = memo(function GitView() {
     <box flexDirection="column" flexGrow={1}>
       <box flexDirection="row" flexGrow={1}>
         <box
-          width={sidebarWidth}
+          width={fileBarWidth}
           flexDirection="column"
-          backgroundColor={theme.panel}
+          backgroundColor={theme.colors['sideBar.background']}
           padding={0}
           gap={0}
         >
-          <text fg={theme.accent}>
+          <text fg={theme.colors['textLink.foreground']}>
             <strong>aimux · git</strong>
           </text>
           {gitPanel.branch ? (
             <box flexDirection="row">
-              <text fg={theme.accent}>{'\u{e702}'} </text>
-              <text fg={theme.textMuted}>{gitPanel.branch}</text>
+              <text fg={theme.colors['textLink.foreground']}>{'\u{e702}'} </text>
+              <text fg={theme.colors['descriptionForeground']}>{gitPanel.branch}</text>
+            </box>
+          ) : null}
+          {gitMode.headOffset > 0 ? (
+            <box flexDirection="row" gap={1}>
+              <text fg={theme.colors['editorWarning.foreground']}>
+                <strong>HEAD~{gitMode.headOffset}</strong>
+              </text>
+              <text fg={theme.colors['descriptionForeground']}>[ newer · ] older</text>
             </box>
           ) : null}
-          <text fg={theme.dim}>{'·'.repeat(Math.max(0, sidebarWidth - 2))}</text>
+          <text fg={theme.colors['editor.lineHighlightBackground']}>
+            {'·'.repeat(Math.max(0, fileBarWidth - 2))}
+          </text>
           <GitPanel
+            collapsedFolders={gitMode.collapsedFolders}
+            fileListMode={gitPane.fileListMode}
             gitPanel={gitPanel}
+            headOffset={gitMode.headOffset}
             projectPath={projectPath}
-            selectedFileKey={selectedFile ? fileKey(selectedFile) : null}
+            selectedEntryKey={gitMode.selectedEntryKey}
           />
         </box>
-        <DiffStage diff={diff} diffRef={diffRef} loading={loading} />
+        <DiffStage
+          diff={diff}
+          diffKey={selectedDiffKey}
+          diffRef={diffRef}
+          loading={loading}
+          themeId={themeId}
+          view={gitMode.diffView}
+        />
       </box>
       {footerNode ? (
-        <box paddingLeft={1} paddingRight={1} backgroundColor={theme.panel} flexDirection="column">
+        <box
+          paddingLeft={1}
+          paddingRight={1}
+          backgroundColor={theme.colors['sideBar.background']}
+          flexDirection="column"
+        >
           {footerNode}
         </box>
       ) : null}

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

@@ -1,10 +1,16 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
 import { useTerminalDimensions } from '@opentui/react'
 import { useLayoutEffect, useMemo, useRef } from 'react'
 
-import { collectHelpEntries, type HelpEntry } from '../../input/keymap/help-entries'
+import {
+  collectHelpEntries,
+  HELP_MODE_LABELS,
+  type HelpEntry,
+} from '../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { useKeymap } from '../keymap-context'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ModalFilterBar } from './modal-filter-bar'
 import { ModalShell } from './modal-shell'
@@ -12,6 +18,7 @@ import { ModalShell } from './modal-shell'
 interface HelpModalProps {
   filter: string | null
   selectedIndex: number
+  scope: ModeId | null
 }
 
 function matchesFilter(entry: HelpEntry, needle: string): boolean {
@@ -78,14 +85,24 @@ function computeWindowStart(
   return start
 }
 
-export function HelpModal({ filter, selectedIndex }: HelpModalProps) {
+export function HelpModal({ filter, scope, selectedIndex }: HelpModalProps) {
+  const theme = useTheme()
   const config = useKeymap()
   const dimensions = useTerminalDimensions()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
+  const scoped = useMemo(
+    () => (scope ? allEntries.filter((e) => e.mode === scope) : allEntries),
+    [allEntries, scope]
+  )
   const filtered = useMemo(
-    () => allEntries.filter((e) => matchesFilter(e, filter ?? '')),
-    [allEntries, filter]
+    () => scoped.filter((e) => matchesFilter(e, filter ?? '')),
+    [scoped, filter]
   )
+  const title = useMemo(() => {
+    if (!scope) return 'Keybindings'
+    const label = HELP_MODE_LABELS.find((m) => m.modeId === scope)?.label ?? scope
+    return `${label} — keybindings`
+  }, [scope])
   const rows = useMemo(() => buildRows(filtered), [filtered])
 
   useLayoutEffect(() => {
@@ -113,12 +130,12 @@ export function HelpModal({ filter, selectedIndex }: HelpModalProps) {
 
   return (
     <ModalShell
-      title="Keybindings"
+      title={title}
       keybindsModeId="modal.help"
       width={uiTokens.modalWidth.lg}
       footer={
         <box flexDirection="column" gap={0}>
-          <text fg={theme.dim}>
+          <text fg={theme.colors['editor.lineHighlightBackground']}>
             {filtered.length === 0
               ? ''
               : ` ${effectiveIndex + 1} / ${filtered.length}${filter ? '' : ' — type / to filter'}`}
@@ -128,7 +145,7 @@ export function HelpModal({ filter, selectedIndex }: HelpModalProps) {
       }
     >
       {filtered.length === 0 ? (
-        <text fg={theme.textMuted}>
+        <text fg={theme.colors['descriptionForeground']}>
           {filter ? 'No matching bindings.' : 'No bindings registered.'}
         </text>
       ) : (
@@ -138,14 +155,14 @@ export function HelpModal({ filter, selectedIndex }: HelpModalProps) {
             if (row.kind === 'header') {
               return (
                 <box key={`h-${rowIndex}`} paddingLeft={1} paddingTop={i === 0 ? 0 : 1}>
-                  <text fg={theme.warning} wrapMode="none">
+                  <text fg={theme.colors['editorWarning.foreground']} wrapMode="none">
                     <strong>{row.label}</strong>
                   </text>
                 </box>
               )
             }
             const active = row.entryIndex === effectiveIndex
-            const bg = active ? theme.panelHighlight : undefined
+            const bg = active ? theme.colors['list.activeSelectionBackground'] : undefined
             return (
               <box
                 key={`e-${rowIndex}`}
@@ -155,12 +172,28 @@ export function HelpModal({ filter, selectedIndex }: HelpModalProps) {
                 backgroundColor={bg}
               >
                 <box width={KEYS_COLUMN_WIDTH} flexShrink={0}>
-                  <text fg={active ? theme.accent : theme.accentAlt} bg={bg} wrapMode="none">
+                  <text
+                    fg={
+                      active
+                        ? theme.colors['textLink.foreground']
+                        : theme.colors['terminal.ansiMagenta']
+                    }
+                    bg={bg}
+                    wrapMode="none"
+                  >
                     {row.entry.keysDisplay}
                   </text>
                 </box>
                 <box flexGrow={1} overflow="hidden">
-                  <text fg={active ? theme.text : theme.textMuted} bg={bg} wrapMode="none">
+                  <text
+                    fg={
+                      active
+                        ? theme.colors['editor.foreground']
+                        : theme.colors['descriptionForeground']
+                    }
+                    bg={bg}
+                    wrapMode="none"
+                  >
                     {row.entry.description ?? ''}
                   </text>
                 </box>

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

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 interface InputFieldProps {
@@ -8,7 +8,8 @@ interface InputFieldProps {
 }
 
 export function InputField({ active, cursorPos, value }: InputFieldProps) {
-  const fg = active ? theme.text : theme.textMuted
+  const theme = useTheme()
+  const fg = active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
   if (!active) {
     return (
       <Surface tone="input" padding={1}>
@@ -29,7 +30,7 @@ export function InputField({ active, cursorPos, value }: InputFieldProps) {
     <Surface tone="inputActive" padding={1}>
       <text fg={fg}>
         {before}
-        <span bg={theme.text} fg={theme.background}>
+        <span bg={theme.colors['editor.foreground']} fg={theme.colors['editor.background']}>
           {cursorDisplay}
         </span>
         {trailing}

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
@@ -22,6 +22,7 @@ export function ListItem({
   title,
   trailing,
 }: ListItemProps) {
+  const theme = useTheme()
   const isRow = direction === 'row'
   return (
     <Surface
@@ -33,7 +34,15 @@ export function ListItem({
         <box flexDirection="row">
           {isRow ? null : (
             <>
-              <text fg={active ? theme.accent : theme.dim}>{active ? '›' : '·'}</text>
+              <text
+                fg={
+                  active
+                    ? theme.colors['textLink.foreground']
+                    : theme.colors['editor.lineHighlightBackground']
+                }
+              >
+                {active ? '›' : '·'}
+              </text>
               <text> </text>
             </>
           )}

package/src/ui/components/modal-filter-bar.tsx

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 interface ModalFilterBarProps {
@@ -6,13 +6,14 @@ interface ModalFilterBarProps {
 }
 
 export function ModalFilterBar({ filter }: ModalFilterBarProps) {
+  const theme = useTheme()
   if (filter === null) {
     return null
   }
 
   return (
     <Surface tone="input" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
-      <text fg={theme.text}>/{filter}_</text>
+      <text fg={theme.colors['editor.foreground']}>/{filter}_</text>
     </Surface>
   )
 }

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 { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 const KEYS_COLUMN_WIDTH = 12
@@ -13,6 +13,7 @@ interface ModalKeybindsOverlayProps {
 }
 
 export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProps) {
+  const theme = useTheme()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
     dedupeByDescription: true,
@@ -28,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.accentAlt}>{binding.keysDisplay}</text>
+              <text fg={theme.colors['terminal.ansiMagenta']}>{binding.keysDisplay}</text>
             </box>
-            <text fg={theme.textMuted}>{binding.description ?? ''}</text>
+            <text fg={theme.colors['descriptionForeground']}>{binding.description ?? ''}</text>
           </box>
         ))}
       </Surface>

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

@@ -1,7 +1,7 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 import type { ReactNode } from 'react'
 
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 import { Surface } from './surface'
 
@@ -24,6 +24,7 @@ export function ModalShell({
   title,
   width,
 }: ModalShellProps) {
+  const theme = useTheme()
   return (
     <box
       position="absolute"
@@ -40,14 +41,14 @@ export function ModalShell({
         left={0}
         width="100%"
         height="100%"
-        backgroundColor={theme.overlay}
+        backgroundColor={theme.colors['editorWidget.background']}
         opacity={0.7}
       />
       <Surface tone="elevated" padding={1} gap={1} width={width}>
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
-            <text fg={theme.accentAlt}>{title}</text>
-            {subtitle ? <text fg={theme.textMuted}>{subtitle}</text> : null}
+            <text fg={theme.colors['terminal.ansiMagenta']}>{title}</text>
+            {subtitle ? <text fg={theme.colors['descriptionForeground']}>{subtitle}</text> : null}
           </box>
           {children}
           {footer ? <box>{footer}</box> : null}

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

@@ -1,5 +1,5 @@
 import { getAllAssistantOptions } from '../../pty/command-registry'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ListItem } from './list-item'
@@ -12,6 +12,7 @@ interface NewTabModalProps {
 }
 
 export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTabModalProps) {
+  const theme = useTheme()
   const options = getAllAssistantOptions(customCommands)
   const selectedOption = options[selectedIndex]
   const isEditing = editBuffer !== null
@@ -34,11 +35,23 @@ export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTa
             <ListItem
               key={option.id}
               active={active}
-              title={<text fg={active ? theme.text : theme.textMuted}>{option.label}</text>}
+              title={
+                <text
+                  fg={
+                    active
+                      ? theme.colors['editor.foreground']
+                      : theme.colors['descriptionForeground']
+                  }
+                >
+                  {option.label}
+                </text>
+              }
               subtitle={
                 <box flexDirection="column">
-                  <text fg={theme.textMuted}>{option.description}</text>
-                  {customCmd ? <text fg={theme.accent}>{customCmd}</text> : null}
+                  <text fg={theme.colors['descriptionForeground']}>{option.description}</text>
+                  {customCmd ? (
+                    <text fg={theme.colors['textLink.foreground']}>{customCmd}</text>
+                  ) : null}
                 </box>
               }
             />

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

@@ -2,10 +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 { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 export function PendingChordOverlay() {
+  const theme = useTheme()
   const pendingChords = useAppStore((s) => s.pendingChords)
   const modalOpen = useAppStore((s) => s.modal.type !== null)
   const config = useKeymap()
@@ -19,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.textMuted}>pending: </text>
-          <text fg={theme.accent}>{display}</text>
-          <text fg={theme.textMuted}> …</text>
+          <text fg={theme.colors['descriptionForeground']}>pending: </text>
+          <text fg={theme.colors['textLink.foreground']}>{display}</text>
+          <text fg={theme.colors['descriptionForeground']}> …</text>
         </box>
       </Surface>
     </box>