@brimveyn/aimux 1.9.5 → 1.9.7

package/src/ui/components/modals/app/ai-usage-modal.tsx

@@ -8,7 +8,7 @@ import type {
 } from '../../../../services/ai-usage/types'
 
 import { useAIUsageStore } from '../../../../state/ai-usage-store'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ModalShell } from '../shared/modal-shell'
 
@@ -56,7 +56,7 @@ function paceStageIsBehind(stage: UsagePaceStage): boolean {
 }
 
 export function AIUsageModal() {
-  const t = useTokens()
+  const t = useTheme()
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
   const tools: AIUsageTool[] = ['claude', 'codex']
@@ -72,7 +72,7 @@ export function AIUsageModal() {
       listGap={1}
     >
       {sections.length === 0 ? (
-        <text fg={t.muted} selectable={false}>
+        <text fg={t.textMuted} selectable={false}>
           no data yet — collecting…
         </text>
       ) : (
@@ -92,20 +92,20 @@ interface ToolSectionProps {
 }
 
 function ToolSection({ snap, tool }: ToolSectionProps) {
-  const t = useTokens()
+  const t = useTheme()
   const isHardError = Boolean(snap.error) && !snap.stale
   const relative = formatRelative(snap.lastUpdated)
 
   let body: ReactNode
   if (isHardError) {
     body = (
-      <text fg={t.palette.error} selectable={false}>
+      <text fg={t.error} selectable={false}>
         {`error: ${snap.error ?? ''}`}
       </text>
     )
   } else if (snap.windows.length === 0) {
     body = (
-      <text fg={t.muted} selectable={false}>
+      <text fg={t.textMuted} selectable={false}>
         no window data
       </text>
     )
@@ -116,16 +116,16 @@ function ToolSection({ snap, tool }: ToolSectionProps) {
   return (
     <box flexDirection="column">
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={t.accent} selectable={false}>
+        <text fg={t.text} selectable={false}>
           {TOOL_TITLE[tool]}
         </text>
         {snap.planTier ? (
-          <text fg={t.muted} selectable={false}>
+          <text fg={t.textMuted} selectable={false}>
             {snap.planTier}
           </text>
         ) : null}
       </box>
-      <text fg={t.muted} selectable={false}>
+      <text fg={t.textMuted} selectable={false}>
         {`Updated ${relative}`}
       </text>
       {body}
@@ -134,14 +134,14 @@ function ToolSection({ snap, tool }: ToolSectionProps) {
 }
 
 function WindowRow({ window }: { window: UsageWindow }) {
-  const t = useTokens()
+  const t = useTheme()
   const percent = window.percent
   const { empty, filled } = buildBar(percent)
 
-  let barColor = t.palette.success
+  let barColor = t.success
   if (percent !== null) {
-    if (percent >= 85) barColor = t.palette.error
-    else if (percent >= 60) barColor = t.palette.warning
+    if (percent >= 85) barColor = t.error
+    else if (percent >= 60) barColor = t.warning
   }
 
   const pctText = percent === null ? '—' : `${Math.round(percent)}% used`
@@ -149,23 +149,23 @@ function WindowRow({ window }: { window: UsageWindow }) {
 
   return (
     <box flexDirection="column" paddingTop={1}>
-      <text fg={t.palette.ink} selectable={false}>
+      <text fg={t.text} selectable={false}>
         {window.label}
       </text>
       <box flexDirection="row">
         <text fg={barColor} selectable={false}>
           {filled}
         </text>
-        <text fg={t.muted} selectable={false}>
+        <text fg={t.textMuted} selectable={false}>
           {empty}
         </text>
       </box>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={t.muted} selectable={false}>
+        <text fg={t.textMuted} selectable={false}>
           {pctText}
         </text>
         {resetText ? (
-          <text fg={t.muted} selectable={false}>
+          <text fg={t.textMuted} selectable={false}>
             {resetText}
           </text>
         ) : null}
@@ -176,10 +176,10 @@ function WindowRow({ window }: { window: UsageWindow }) {
 }
 
 function PaceLine({ pace }: { pace: NonNullable<UsageWindow['pace']> }) {
-  const t = useTokens()
-  let color = t.muted
-  if (paceStageIsBehind(pace.stage)) color = t.palette.warning
-  else if (paceStageIsAhead(pace.stage)) color = t.palette.success
+  const t = useTheme()
+  let color = t.textMuted
+  if (paceStageIsBehind(pace.stage)) color = t.warning
+  else if (paceStageIsAhead(pace.stage)) color = t.success
 
   const suffix = pace.rightText ? ` · ${pace.rightText}` : ''
   return (

package/src/ui/components/modals/app/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 { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -23,7 +23,7 @@ function matchesFilter(needle: string, ...fields: (string | undefined)[]): boole
 }
 
 export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const config = useKeymap()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])
   const scoped = useMemo(
@@ -49,17 +49,16 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
   }, [filtered.length])
 
   const items: PickerItem[] = filtered.map((entry, index) => {
-    const active = index === selectedIndex
     return {
       group: entry.modeLabel,
       key: `${entry.mode}::${entry.keysDisplay}::${entry.description ?? ''}::${index}`,
       title: (
-        <text fg={active ? t.palette.ink : t.muted} wrapMode="none">
+        <text fg={t.textMuted} wrapMode="none">
           {entry.description ?? ''}
         </text>
       ),
       trailing: (
-        <text fg={active ? t.palette.primary : t.accent} wrapMode="none">
+        <text fg={t.textMuted} wrapMode="none">
           {entry.keysDisplay}
         </text>
       ),
@@ -76,7 +75,7 @@ export function HelpModal({ cursorPos, filter, scope, selectedIndex }: HelpModal
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={t.muted}>{filter ? 'No matching bindings.' : 'No bindings registered.'}</text>
+        <text fg={t.textMuted}>{filter ? 'No matching bindings.' : 'No bindings registered.'}</text>
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />

package/src/ui/components/modals/app/update-available-modal.tsx

@@ -1,4 +1,4 @@
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from '../shared/modal-shell'
@@ -19,7 +19,7 @@ export function UpdateAvailableModal({
   latestVersion,
   selectedIndex,
 }: UpdateAvailableModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   return (
     <ModalShell
       title="Update available"
@@ -36,7 +36,7 @@ export function UpdateAvailableModal({
               key={option.label}
               active={active}
               direction="row"
-              title={<text fg={active ? t.palette.ink : t.muted}>{option.label}</text>}
+              title={<text fg={active ? t.text : t.textMuted}>{option.label}</text>}
             />
           )
         })}

package/src/ui/components/modals/git/git-commit-modal.tsx

@@ -5,7 +5,7 @@ import type { ModeId } from '../../../../input/modes/types'
 
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { InputField } from '../../primitives/input-field'
 import { ModalShell } from '../shared/modal-shell'
@@ -49,7 +49,7 @@ function pickShellTitle(stage: 'edit' | 'generating' | 'confirm'): string {
 }
 
 function GeneratingOverlay({ assistant, model }: { assistant?: string; model?: string }) {
-  const t = useTokens()
+  const t = useTheme()
   const frame = useSpinnerFrame(true)
   const providerLabel = [assistant, model].filter(Boolean).join(' · ') || 'configured provider'
   return (
@@ -60,14 +60,14 @@ function GeneratingOverlay({ assistant, model }: { assistant?: string; model?: s
       paddingTop={2}
       paddingBottom={2}
     >
-      <text fg={t.palette.primary}>🪄</text>
+      <text fg={t.primary}>🪄</text>
       <box marginTop={1} flexDirection="row" gap={1}>
-        <text fg={t.palette.primary}>{frame}</text>
-        <text fg={t.palette.ink}>Generating commit message</text>
+        <text fg={t.primary}>{frame}</text>
+        <text fg={t.text}>Generating commit message</text>
       </box>
-      <text fg={t.muted}>via {providerLabel}</text>
+      <text fg={t.textMuted}>via {providerLabel}</text>
       <box marginTop={1}>
-        <text fg={t.muted}>Esc to cancel</text>
+        <text fg={t.textMuted}>Esc to cancel</text>
       </box>
     </box>
   )
@@ -82,7 +82,7 @@ export function GitCommitModal({
   stage,
   title,
 }: GitCommitModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
   const isConfirm = stage === 'confirm'
@@ -125,22 +125,22 @@ export function GitCommitModal({
       {isConfirm ? (
         <box flexDirection="column">
           {stagedCount > 0 ? (
-            <text fg={t.palette.warning}>
+            <text fg={t.warning}>
               Commit will include the <strong>{stagedCount} staged file(s)</strong> only.
             </text>
           ) : (
-            <text fg={t.palette.warning}>
+            <text fg={t.warning}>
               <strong>git add -A</strong> will stage every change before committing.
             </text>
           )}
-          <text fg={t.muted}>Enter to confirm · Esc to cancel · edits below still apply.</text>
+          <text fg={t.textMuted}>Enter to confirm · Esc to cancel · edits below still apply.</text>
         </box>
       ) : null}
 
       {isGenerating ? null : (
         <>
           <box flexDirection="column">
-            <text fg={titleActive ? t.palette.ink : t.muted}>Title</text>
+            <text fg={titleActive ? t.text : t.textMuted}>Title</text>
             <InputField
               active={titleActive}
               cursorPos={titleActive ? cursorPos : undefined}
@@ -149,7 +149,7 @@ export function GitCommitModal({
           </box>
 
           <box flexDirection="column">
-            <text fg={bodyActive ? t.palette.ink : t.muted}>Body (optional)</text>
+            <text fg={bodyActive ? t.text : t.textMuted}>Body (optional)</text>
             <InputField
               active={bodyActive}
               cursorPos={bodyActive ? cursorPos : undefined}
@@ -163,7 +163,7 @@ export function GitCommitModal({
         <box flexDirection="row" gap={1} marginTop={1} alignItems="center">
           <box
             border
-            borderColor={t.palette.primary}
+            borderColor={t.border}
             paddingLeft={1}
             paddingRight={1}
             flexDirection="row"
@@ -175,12 +175,12 @@ export function GitCommitModal({
               onAutoCommitClick()
             }}
           >
-            {showBgSpinner ? <text fg={t.palette.primary}>{bgSpinnerFrame}</text> : null}
-            <text fg={t.palette.primary}>
+            {showBgSpinner ? <text fg={t.primary}>{bgSpinnerFrame}</text> : null}
+            <text fg={t.text}>
               <strong>Auto-commit</strong>
             </text>
           </box>
-          <text fg={t.muted}>C-a · stages all changes (AI-suggests message if empty)</text>
+          <text fg={t.textMuted}>C-a · stages all changes (AI-suggests message if empty)</text>
         </box>
       )}
     </ModalShell>

package/src/ui/components/modals/sessions/create-session-modal.tsx

@@ -1,7 +1,7 @@
 import type { DirectoryResult } from '../../../../state/types'
 
 import { abbreviatePath } from '../../../path-format'
-import { getCurrentTokens, useTokens } from '../../../theme'
+import { getCurrentTheme, useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
 
@@ -14,10 +14,10 @@ function getDirectoryResultIcon(result: DirectoryResult): string {
 }
 
 function getDirectoryResultColor(result: DirectoryResult): string {
-  const t = getCurrentTokens()
-  if (result.type === 'worktree') return t.palette.warning
-  if (result.type === 'workspace') return t.accent
-  return t.palette.primary
+  const t = getCurrentTheme()
+  if (result.type === 'worktree') return t.warning
+  if (result.type === 'workspace') return t.info
+  return t.text
 }
 
 interface CreateSessionModalProps {
@@ -37,7 +37,7 @@ export function CreateSessionModal({
   selectedIndex,
   sessionName,
 }: CreateSessionModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
 
@@ -46,7 +46,7 @@ export function CreateSessionModal({
       key: result.path,
       leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
       title: (active) => (
-        <text fg={active ? t.palette.ink : t.muted}>{abbreviatePath(result.path)}</text>
+        <text fg={active ? t.text : t.textMuted}>{abbreviatePath(result.path)}</text>
       ),
     }
   })
@@ -67,7 +67,7 @@ export function CreateSessionModal({
         selectedIndex={selectedIndex}
         maxVisibleRows={VISIBLE_ROWS}
         emptyState={
-          <text fg={t.muted}>
+          <text fg={t.textMuted}>
             {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
           </text>
         }

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

@@ -4,7 +4,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-
 import { filterSessions } from '../../../../state/selectors'
 import { abbreviatePath } from '../../../path-format'
 import { orderSessionsForDisplay } from '../../../session-ordering'
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -43,7 +43,7 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
@@ -57,10 +57,10 @@ export function SessionPickerModal({
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
       subtitle: session.projectPath ? (
-        <text fg={t.muted}>{abbreviatePath(session.projectPath)}</text>
+        <text fg={t.textMuted}>{abbreviatePath(session.projectPath)}</text>
       ) : undefined,
       title: (
-        <text fg={active ? t.palette.ink : t.muted}>
+        <text fg={active ? t.text : t.textMuted}>
           {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
         </text>
       ),
@@ -71,7 +71,7 @@ export function SessionPickerModal({
     key: '__create-new__',
     onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
     title: (
-      <text fg={selectedIndex === filtered.length ? t.palette.ink : t.muted}>
+      <text fg={selectedIndex === filtered.length ? t.text : t.textMuted}>
         Create new workspace
       </text>
     ),
@@ -91,7 +91,7 @@ export function SessionPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         filtered.length === 0 ? (
-          <text fg={t.muted}>{getEmptyStateMessage(hasFilter)}</text>
+          <text fg={t.textMuted}>{getEmptyStateMessage(hasFilter)}</text>
         ) : undefined
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}

package/src/ui/components/modals/shared/form.tsx

@@ -2,7 +2,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { type ReactNode } from 'react'
 
-import { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { InputField } from '../../primitives/input-field'
 import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from './modal-shell'
@@ -81,11 +81,11 @@ export function Form({
 }
 
 export function FieldLabel({ active = false, children, description }: FieldLabelProps) {
-  const t = useTokens()
+  const t = useTheme()
   return (
     <box flexDirection="column">
-      {children ? <text fg={active ? t.palette.ink : t.muted}>{children}</text> : null}
-      {description ? <text fg={t.muted}>{description}</text> : null}
+      {children ? <text fg={active ? t.text : t.textMuted}>{children}</text> : null}
+      {description ? <text fg={t.textMuted}>{description}</text> : null}
     </box>
   )
 }

package/src/ui/components/modals/shared/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 { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { Surface } from '../../primitives/surface'
 
 const KEYS_COLUMN_WIDTH = 12
@@ -13,7 +13,7 @@ interface ModalKeybindsOverlayProps {
 }
 
 export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProps) {
-  const t = useTokens()
+  const t = useTheme()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
     mergeAlternativesByDescription: true,
@@ -29,9 +29,9 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
         {entries.map((binding) => (
           <box key={binding.description ?? binding.keys} flexDirection="row">
             <box width={KEYS_COLUMN_WIDTH}>
-              <text fg={t.accent}>{binding.keysDisplay}</text>
+              <text fg={t.textMuted}>{binding.keysDisplay}</text>
             </box>
-            <text fg={t.muted}>{binding.description ?? ''}</text>
+            <text fg={t.textMuted}>{binding.description ?? ''}</text>
           </box>
         ))}
       </Surface>

package/src/ui/components/modals/shared/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 { useTokens, useTransparent } from '../../../theme'
+import { useTheme, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {
@@ -57,9 +57,9 @@ export function ModalShell({
   title,
   width,
 }: ModalShellProps) {
-  const t = useTokens()
+  const t = useTheme()
   const transparent = useTransparent()
-  const bg = transparent ? 'transparent' : t.elevated
+  const bg = transparent ? 'transparent' : t.backgroundPanel
   return (
     <box
       position="absolute"
@@ -72,7 +72,7 @@ export function ModalShell({
     >
       <box
         border
-        borderColor={t.palette.primary}
+        borderColor={t.border}
         backgroundColor={bg}
         padding={1}
         width={width}
@@ -80,8 +80,8 @@ export function ModalShell({
       >
         <box width="100%" flexDirection="column" gap={listGap}>
           <box flexDirection="column">
-            <text fg={t.accent}>{title}</text>
-            {subtitle ? <text fg={t.muted}>{subtitle}</text> : null}
+            <text fg={t.text}>{title}</text>
+            {subtitle ? <text fg={t.textMuted}>{subtitle}</text> : null}
           </box>
           {children}
           {footer ? <box>{footer}</box> : null}

package/src/ui/components/modals/shared/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 { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { BareInput } from '../../primitives/bare-input'
 import { ListItem } from '../../primitives/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 t = useTokens()
+  const t = useTheme()
   return (
     <box flexDirection="row" gap={1}>
       {onEdit ? (
@@ -49,7 +49,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onEdit()
           }}
         >
-          <text fg={t.palette.primary}>[edit]</text>
+          <text fg={t.primary}>[edit]</text>
         </box>
       ) : null}
       {onDelete ? (
@@ -59,7 +59,7 @@ function PickerItemCtas({ onDelete, onEdit }: { onEdit?: () => void; onDelete?:
             onDelete()
           }}
         >
-          <text fg={t.palette.error}>[del]</text>
+          <text fg={t.error}>[del]</text>
         </box>
       ) : null}
     </box>
@@ -80,7 +80,7 @@ export function Picker({
   title,
   width,
 }: PickerProps) {
-  const t = useTokens()
+  const t = useTheme()
   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={t.palette.warning} wrapMode="none">
+                  <text fg={t.textMuted} wrapMode="none">
                     {item.group}
                   </text>
                 </box>

package/src/ui/components/modals/snippets/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 { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Picker, type PickerItem } from '../shared/picker'
 
@@ -27,7 +27,7 @@ export function SnippetPickerModal({
   selectedIndex,
   snippets,
 }: SnippetPickerModalProps) {
-  const t = useTokens()
+  const t = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
   const items: PickerItem[] = filtered.map((snippet, index) => {
@@ -40,9 +40,9 @@ export function SnippetPickerModal({
       },
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-snippet' }),
       onEdit: () => runSideEffectGlobal({ type: 'edit-selected-snippet' }),
-      subtitle: <text fg={t.muted}>{truncateContent(snippet.content)}</text>,
+      subtitle: <text fg={t.textMuted}>{truncateContent(snippet.content)}</text>,
       title: (
-        <text fg={active ? t.palette.ink : t.muted}>
+        <text fg={active ? t.text : t.textMuted}>
           <strong>{snippet.name}</strong>
         </text>
       ),
@@ -60,7 +60,7 @@ export function SnippetPickerModal({
       items={items}
       selectedIndex={selectedIndex}
       emptyState={
-        <text fg={t.muted}>
+        <text fg={t.textMuted}>
           {filter ? 'No matching snippets.' : 'No snippets yet. Press n to create one.'}
         </text>
       }

package/src/ui/components/modals/tabs/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 { useTokens } from '../../../theme'
+import { useTheme } from '../../../theme'
 import { uiTokens } from '../../../ui-tokens'
 import { Form, TextField } from '../shared/form'
 import { Picker, type PickerItem } from '../shared/picker'
@@ -25,7 +25,7 @@ export function NewTabModal({
   filter,
   selectedIndex,
 }: NewTabModalProps) {
-  const t = useTokens()
+  const t = useTheme()
 
   if (editingCommand !== null) {
     const option =
@@ -60,11 +60,11 @@ export function NewTabModal({
       onEdit: () => dispatchGlobal({ assistantId: option.id, type: 'open-edit-custom-command' }),
       subtitle: (
         <box flexDirection="column">
-          <text fg={t.muted}>{option.description}</text>
-          {customCmd ? <text fg={t.palette.primary}>{customCmd}</text> : null}
+          <text fg={t.textMuted}>{option.description}</text>
+          {customCmd ? <text fg={t.primary}>{customCmd}</text> : null}
         </box>
       ),
-      title: <text fg={active ? t.palette.ink : t.muted}>{option.label}</text>,
+      title: <text fg={active ? t.text : t.textMuted}>{option.label}</text>,
     }
   })
 
@@ -78,7 +78,7 @@ export function NewTabModal({
       cursorPos={cursorPos}
       items={items}
       selectedIndex={selectedIndex}
-      emptyState={<text fg={t.muted}>No matching assistants.</text>}
+      emptyState={<text fg={t.textMuted}>No matching assistants.</text>}
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}
     />
   )