@brimveyn/aimux 1.7.1 → 1.7.3

package/src/ui/components/diff-renderer/highlight.ts

@@ -1,6 +1,6 @@
 import type { ThemedToken } from 'shiki'
 
-import { ensureShikiLang, ensureShikiTheme, getShikiHighlighter } from '../../shiki'
+import { ensureActiveShikiTheme, ensureShikiLang, getShikiHighlighter } from '../../shiki'
 
 export interface HighlightSpan {
   bold?: boolean
@@ -22,24 +22,20 @@ export function tokenToSpan(token: ThemedToken): HighlightSpan {
   }
 }
 
-export async function tokenizeSide(
-  lines: string[],
-  lang: string,
-  theme: string
-): Promise<ThemedToken[][]> {
+export async function tokenizeSide(lines: string[], lang: string): Promise<ThemedToken[][]> {
   if (lines.length === 0) return []
   const highlighter = await getShikiHighlighter()
-  const [langOk, themeOk] = await Promise.all([
+  const [langOk, themeName] = await Promise.all([
     ensureShikiLang(highlighter, lang),
-    ensureShikiTheme(highlighter, theme),
+    ensureActiveShikiTheme(highlighter),
   ])
-  if (!langOk || !themeOk) return []
+  if (!langOk) return []
   try {
     const result = highlighter.codeToTokens(lines.join(''), {
       // eslint-disable-next-line typescript/no-explicit-any
       lang: lang as any,
       // eslint-disable-next-line typescript/no-explicit-any
-      theme: theme as any,
+      theme: themeName as any,
     })
     return result.tokens
   } catch {

package/src/ui/components/diff-renderer/pierre-diff.tsx

@@ -8,7 +8,7 @@ import type { ThemeId } from '../../themes'
 import { useAppStore } from '../../../state/app-store'
 import { dispatchGlobal } from '../../../state/dispatch-ref'
 import { type FoldState } from '../../../state/types'
-import { useTheme } from '../../theme'
+import { useTokens } from '../../theme'
 import { buildSplitRows, buildUnifiedRows, firstChangeRowOffset, gutterWidth } from './build-rows'
 import { SplitView, type SplitViewHandle } from './split-view'
 import { StackedView, type StackedViewHandle } from './stacked-view'
@@ -45,7 +45,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   { cacheKey, diff, path, themeId, view },
   ref
 ) {
-  const theme = useTheme()
+  const t = useTokens()
   const preparation = useDiffPreparation(cacheKey, diff, path, themeId)
   const file = preparation.file ?? undefined
   const highlights: DiffHighlights = preparation.highlights
@@ -117,7 +117,7 @@ export const PierreDiff = forwardRef<PierreDiffHandle, Props>(function PierreDif
   if (!file) {
     return (
       <box flexGrow={1} padding={1}>
-        <text fg={theme.colors['descriptionForeground']}>
+        <text fg={t.muted}>
           {preparation.preparing ? 'Preparing diff…' : '(could not parse diff)'}
         </text>
       </box>

package/src/ui/components/diff-renderer/prepare-diff.ts

@@ -14,7 +14,6 @@ export interface PreparedDiff {
 
 interface PrepareOptions {
   signal?: AbortSignal
-  themeId: string
   /** Skip Shiki for big files to keep prepare under a few tens of ms. */
   skipHighlightThreshold?: number
 }
@@ -55,11 +54,11 @@ export async function prepareDiff(
 
   await yieldToEventLoop()
   throwIfAborted(opts.signal)
-  const add = await tokenizeSide(file.additionLines, filetype, opts.themeId)
+  const add = await tokenizeSide(file.additionLines, filetype)
   throwIfAborted(opts.signal)
   await yieldToEventLoop()
   throwIfAborted(opts.signal)
-  const del = await tokenizeSide(file.deletionLines, filetype, opts.themeId)
+  const del = await tokenizeSide(file.deletionLines, filetype)
   throwIfAborted(opts.signal)
 
   return { file, filetype, hash, highlights: { add, del } }

package/src/ui/components/diff-renderer/split-view.tsx

@@ -13,14 +13,11 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTheme, useTransparent } from '../../theme'
+import { useBg, useTokens, useTransparent } from '../../theme'
 import { buildSplitRows, gutterWidth, type SplitCell, type SplitRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
-// Cap DOM size for extreme diffs. Rows beyond this are hidden behind a banner;
-// users scroll within the visible window. Shiki highlighting is already skipped
-// upstream in prepare-diff for similarly large diffs.
 const LARGE_ROW_CAP = 5000
 
 export interface SplitViewHandle {
@@ -48,7 +45,7 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
   { contentWidth, file, foldDispatch, folds, highlights },
   ref
 ) {
-  const separatorBg = useBg('editor.background')
+  const separatorBg = useBg('base')
   const leftRef = useRef<ScrollBoxRenderable | null>(null)
   const rightRef = useRef<ScrollBoxRenderable | null>(null)
 
@@ -121,13 +118,11 @@ export const SplitView = forwardRef<SplitViewHandle, Props>(function SplitView(
 })
 
 function TruncationNotice({ hidden }: { hidden: number }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['editorWarning.foreground']}>
-        …diff truncated — {hidden} more rows hidden
-      </text>
+      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
     </box>
   )
 }
@@ -154,14 +149,12 @@ function SideRow({
 }
 
 function HunkHeaderRow({ row }: { row: Extract<SplitRowOrHeader, { type: 'hunk-header' }> }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
-      {row.context ? (
-        <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
-      ) : null}
+      <text fg={t.muted}>{row.spec}</text>
+      {row.context ? <text fg={t.hover}> {row.context}</text> : null}
     </box>
   )
 }
@@ -177,29 +170,29 @@ function HalfRow({
   height: number
   tokens: ThemedToken[][]
 }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const transparent = useTransparent()
   if (cell.type === 'filler') {
     return <box backgroundColor={headerBg} height={height} />
   }
   let bg: string | undefined
   let sign = ' '
-  let signColor = theme.colors['descriptionForeground']
+  let signColor = t.muted
   if (cell.type === 'addition') {
-    bg = theme.colors['diffEditor.insertedLineBackground']
+    bg = t.diffAddBg
     sign = '+'
-    signColor = theme.colors['gitDecoration.addedResourceForeground']
+    signColor = t.palette.success
   } else if (cell.type === 'deletion') {
-    bg = theme.colors['diffEditor.removedLineBackground']
+    bg = t.diffDeleteBg
     sign = '-'
-    signColor = theme.colors['editorError.foreground']
+    signColor = t.palette.error
   }
   const num = String(cell.lineNumber).padStart(gw, ' ')
   const lineTokens = tokens[cell.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={height}>
-      <text fg={theme.colors['descriptionForeground']}>{` ${num} `}</text>
+      <text fg={t.muted}>{` ${num} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={cell.content} tokens={lineTokens} />
     </box>
@@ -207,20 +200,20 @@ function HalfRow({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const theme = useTheme()
+  const t = useTokens()
   if (!tokens || tokens.length === 0) {
-    return <text fg={theme.colors['editor.foreground']}>{content}</text>
+    return <text fg={t.palette.ink}>{content}</text>
   }
   return (
     <text>
-      {tokens.map((t, i) => {
-        const s = tokenToSpan(t)
+      {tokens.map((tok, i) => {
+        const s = tokenToSpan(tok)
         let attributes = 0
         if (s.bold) attributes |= TextAttributes.BOLD
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/diff-renderer/stacked-view.tsx

@@ -13,12 +13,11 @@ import type { DiffHighlights, FoldDispatch } from './pierre-diff'
 
 import { getScrollViewportDelta } from '../../../app-runtime/terminal-mouse-adapter'
 import { scrollGitDiff } from '../../git-view-controls'
-import { useBg, useTheme, useTransparent } from '../../theme'
+import { useBg, useTokens, useTransparent } from '../../theme'
 import { buildUnifiedRows, gutterWidth, type UnifiedRowOrHeader } from './build-rows'
 import { FoldStrip } from './fold-strip'
 import { tokenToSpan } from './highlight'
 
-// Same cap as split-view — keeps the React child count bounded.
 const LARGE_ROW_CAP = 5000
 
 export interface StackedViewHandle {
@@ -89,13 +88,11 @@ export const StackedView = forwardRef<StackedViewHandle, Props>(function Stacked
 })
 
 function TruncationNotice({ hidden }: { hidden: number }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   return (
     <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-      <text fg={theme.colors['editorWarning.foreground']}>
-        …diff truncated — {hidden} more rows hidden
-      </text>
+      <text fg={t.palette.warning}>…diff truncated — {hidden} more rows hidden</text>
     </box>
   )
 }
@@ -111,16 +108,14 @@ function UnifiedRowRender({
   highlights: DiffHighlights
   row: UnifiedRowOrHeader
 }) {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const transparent = useTransparent()
   if (row.type === 'hunk-header') {
     return (
       <box flexDirection="row" backgroundColor={headerBg} paddingLeft={1} paddingRight={1}>
-        <text fg={theme.colors['descriptionForeground']}>{row.spec}</text>
-        {row.context ? (
-          <text fg={theme.colors['editor.lineHighlightBackground']}> {row.context}</text>
-        ) : null}
+        <text fg={t.muted}>{row.spec}</text>
+        {row.context ? <text fg={t.hover}> {row.context}</text> : null}
       </box>
     )
   }
@@ -133,29 +128,21 @@ function UnifiedRowRender({
     const tokens = highlights.add[row.lineIdx]
     return (
       <box flexDirection="row" height={row.height}>
-        <text
-          fg={theme.colors['descriptionForeground']}
-        >{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
-        <text fg={theme.colors['editor.foreground']}> </text>
+        <text fg={t.muted}>{` ${pad(row.delLineNumber)} ${pad(row.addLineNumber)} `}</text>
+        <text fg={t.palette.ink}> </text>
         <LineContent content={row.content} tokens={tokens} />
       </box>
     )
   }
-  const bg =
-    row.type === 'addition'
-      ? theme.colors['diffEditor.insertedLineBackground']
-      : theme.colors['diffEditor.removedLineBackground']
+  const bg = row.type === 'addition' ? t.diffAddBg : t.diffDeleteBg
   const sign = row.type === 'addition' ? '+' : '-'
-  const signColor =
-    row.type === 'addition'
-      ? theme.colors['gitDecoration.addedResourceForeground']
-      : theme.colors['editorError.foreground']
+  const signColor = row.type === 'addition' ? t.palette.success : t.palette.error
   const delNum = row.type === 'deletion' ? row.lineNumber : undefined
   const addNum = row.type === 'addition' ? row.lineNumber : undefined
   const tokens = row.type === 'addition' ? highlights.add[row.lineIdx] : highlights.del[row.lineIdx]
   return (
     <box flexDirection="row" backgroundColor={transparent ? undefined : bg} height={row.height}>
-      <text fg={theme.colors['descriptionForeground']}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
+      <text fg={t.muted}>{` ${pad(delNum)} ${pad(addNum)} `}</text>
       <text fg={signColor}>{`${sign} `}</text>
       <LineContent content={row.content} tokens={tokens} />
     </box>
@@ -163,20 +150,20 @@ function UnifiedRowRender({
 }
 
 function LineContent({ content, tokens }: { content: string; tokens: ThemedToken[] | undefined }) {
-  const theme = useTheme()
+  const t = useTokens()
   if (!tokens || tokens.length === 0) {
-    return <text fg={theme.colors['editor.foreground']}>{content}</text>
+    return <text fg={t.palette.ink}>{content}</text>
   }
   return (
     <text>
-      {tokens.map((t, i) => {
-        const s = tokenToSpan(t)
+      {tokens.map((tok, i) => {
+        const s = tokenToSpan(tok)
         let attributes = 0
         if (s.bold) attributes |= TextAttributes.BOLD
         if (s.italic) attributes |= TextAttributes.ITALIC
         if (s.underline) attributes |= TextAttributes.UNDERLINE
         return (
-          <span key={i} fg={s.fg ?? theme.colors['editor.foreground']} attributes={attributes}>
+          <span key={i} fg={s.fg ?? t.palette.ink} attributes={attributes}>
             {s.text}
           </span>
         )

package/src/ui/components/diff-renderer/use-diff-prefetch.ts

@@ -108,7 +108,6 @@ export function useDiffPrefetch(
       dispatchGlobal({ diff, hash, key: task.key, type: 'git-mode-set-diff' })
       const prep = await prepareDiff(diff.rawDiff, task.file.path, {
         signal: task.controller.signal,
-        themeId,
       })
       if (task.controller.signal.aborted) return
       dispatchGlobal({

package/src/ui/components/diff-renderer/use-diff-preparation.ts

@@ -68,7 +68,7 @@ export function useDiffPreparation(
 
     const controller = new AbortController()
     setPreparing(true)
-    void prepareDiff(diff, path, { signal: controller.signal, themeId })
+    void prepareDiff(diff, path, { signal: controller.signal })
       .then((result) => {
         if (controller.signal.aborted) return
         setLocalFile(result.file)

package/src/ui/components/git-commit-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'
@@ -11,20 +11,14 @@ interface GitCommitModalProps {
 }
 
 export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
 
   return (
     <ModalShell title="Commit" keybindsModeId="modal.git-commit" width={uiTokens.modalWidth.xl}>
       <box flexDirection="column">
-        <text
-          fg={
-            titleActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Title
-        </text>
+        <text fg={titleActive ? t.palette.ink : t.muted}>Title</text>
         <InputField
           active={titleActive}
           cursorPos={titleActive ? cursorPos : undefined}
@@ -33,13 +27,7 @@ export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommi
       </box>
 
       <box flexDirection="column">
-        <text
-          fg={
-            bodyActive ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
-          }
-        >
-          Body (optional)
-        </text>
+        <text fg={bodyActive ? t.palette.ink : t.muted}>Body (optional)</text>
         <InputField
           active={bodyActive}
           cursorPos={bodyActive ? cursorPos : undefined}

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}