@brimveyn/aimux 1.9.3 → 1.9.6

package/src/ui/components/layout/sidebar/tab-item.tsx

@@ -4,7 +4,7 @@ import type { TabSession } from '../../../../state/types'
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
 import { useBusySpinner } from '../../../hooks/use-busy-spinner'
-import { getCurrentTokens, useTokens } from '../../../theme'
+import { getCurrentTheme, useTheme } from '../../../theme'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
 
 interface TabItemProps {
@@ -16,16 +16,16 @@ interface TabItemProps {
 }
 
 function getStatusColor(status: TabSession['status']): string {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   switch (status) {
     case 'running':
-      return t.palette.success
+      return t.success
     case 'disconnected':
-      return t.palette.warning
+      return t.warning
     case 'error':
-      return t.palette.error
+      return t.error
     default:
-      return t.muted
+      return t.textMuted
   }
 }
 
@@ -38,33 +38,33 @@ function getIndicator(active: boolean, focused: boolean, inLayout: boolean): str
 }
 
 function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean): string {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   if (active) {
-    return focused ? t.palette.primary : t.accent
+    return focused ? t.primary : t.text
   }
 
-  return inLayout ? t.muted : t.hover
+  return inLayout ? t.textMuted : t.textMuted
 }
 
 function BusyIndicator() {
-  const t = useTokens()
+  const t = useTheme()
   const frame = useBusySpinner()
-  return <text fg={t.palette.primary}>{frame} working</text>
+  return <text fg={t.primary}>{frame} working</text>
 }
 
 function WaitingIndicator() {
-  const t = useTokens()
-  return <text fg={t.palette.warning}>? waiting</text>
+  const t = useTheme()
+  return <text fg={t.warning}>? waiting</text>
 }
 
 function ActivityIndicator({ tab }: { tab: TabSession }) {
-  const t = useTokens()
+  const t = useTheme()
   if (tab.status === 'error') {
-    return <text fg={t.palette.error}>✗ error</text>
+    return <text fg={t.error}>✗ error</text>
   }
 
   if (tab.status === 'disconnected') {
-    return <text fg={t.palette.warning}>⏸ restore</text>
+    return <text fg={t.warning}>⏸ restore</text>
   }
 
   if (tab.activity === 'working') {
@@ -76,14 +76,14 @@ function ActivityIndicator({ tab }: { tab: TabSession }) {
   }
 
   if (tab.activity === 'idle') {
-    return <text fg={t.palette.success}>● idle</text>
+    return <text fg={t.success}>● idle</text>
   }
 
   return <text fg={getStatusColor(tab.status)}>{tab.status}</text>
 }
 
 export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
-  const t = useTokens()
+  const t = useTheme()
   const label = tab.command.split(' ')[0]
   const isInLayout = inLayout ?? false
   const indicator = getIndicator(active, focused, isInLayout)
@@ -135,7 +135,7 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
       <box flexDirection="row" alignItems="center">
         <text fg={indicatorColor}>{indicator} </text>
         <box flexGrow={1}>
-          <text fg={active ? t.palette.ink : t.muted}>{tab.title}</text>
+          <text fg={active ? t.text : t.textMuted}>{tab.title}</text>
         </box>
         {hovered ? (
           <box
@@ -145,12 +145,12 @@ export function TabItem({ active, focused, id, inLayout, tab }: TabItemProps) {
               runSideEffectGlobal({ tabId: tab.id, type: 'close-tab' })
             }}
           >
-            <text fg={t.muted}>×</text>
+            <text fg={t.textMuted}>×</text>
           </box>
         ) : null}
       </box>
       <box flexDirection="row">
-        <text fg={t.muted}> {label} </text>
+        <text fg={t.textMuted}> {label} </text>
         <ActivityIndicator tab={tab} />
       </box>
     </ContextMenuBox>

package/src/ui/components/layout/split-layout.tsx

@@ -11,7 +11,7 @@ import {
   type PaneRect,
   type SplitDirection,
 } from '../../../state/layout-tree'
-import { useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER
@@ -58,7 +58,7 @@ export function SplitLayout({
   onTerminalScrollEvent,
   tabs,
 }: SplitLayoutProps) {
-  const t = useTokens()
+  const t = useTheme()
   if (node.type === 'leaf') {
     const tab = tabs.find((t) => t.id === node.tabId)
     const isActive = node.tabId === activeTabId

package/src/ui/components/layout/status-bar.tsx

@@ -4,22 +4,22 @@ import { version as APP_VERSION } from '../../../../package.json'
 import { useAppStore } from '../../../state/app-store'
 import { useKeymap } from '../../keymap-context'
 import { getStatusBarModel } from '../../status-bar-model'
-import { getCurrentTokens, useBg, useTokens } from '../../theme'
+import { getCurrentTheme, useTheme } from '../../theme'
 import { AIUsageIndicator } from '../overlays/ai-usage/ai-usage-indicator'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   switch (focusMode) {
     case 'terminal-input':
-      return t.palette.primary
+      return t.primary
     case 'modal':
     case 'command-edit':
-      return t.palette.warning
+      return t.warning
     case 'git':
-      return t.palette.success
+      return t.success
     case 'navigation':
     default:
-      return t.accent
+      return t.text
   }
 }
 
@@ -40,8 +40,8 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 }
 
 export function StatusBar() {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.backgroundPanel
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
   const config = useKeymap()
@@ -60,14 +60,14 @@ export function StatusBar() {
       <box width="100%" flexDirection="row">
         <text fg={getModeColor(state.focusMode)}>[{getModeLabel(state.focusMode)}]</text>
         <text> </text>
-        <text fg={t.palette.ink}>{model.left}</text>
+        <text fg={t.text}>{model.left}</text>
       </box>
       <box width="100%" flexDirection="row" justifyContent="space-between">
-        <text fg={t.muted}>{model.right}</text>
+        <text fg={t.textMuted}>{model.right}</text>
         <box flexDirection="row" gap={2}>
-          {model.help ? <text fg={t.muted}>{model.help}</text> : null}
+          {model.help ? <text fg={t.textMuted}>{model.help}</text> : null}
           <AIUsageIndicator />
-          <text fg={t.hover}>v{APP_VERSION}</text>
+          <text fg={t.textMuted}>v{APP_VERSION}</text>
         </box>
       </box>
     </box>

package/src/ui/components/layout/terminal-pane.tsx

@@ -8,7 +8,7 @@ import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/
 import { logInputDebug } from '../../../debug/input-log'
 import { dispatchGlobal, runSideEffectGlobal } from '../../../state/dispatch-ref'
 import { type ContextMenuItem, openContextMenu } from '../../context-menu/controller'
-import { getCurrentTokens, useBg, useTokens } from '../../theme'
+import { getCurrentTheme, useTheme } from '../../theme'
 import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
 interface TerminalPaneProps {
@@ -47,17 +47,9 @@ function getTitle(
   return `${tab.title} · ${tab.status}`
 }
 
-function getBorderColor(isActive: boolean, focusMode: TerminalPaneProps['focusMode']): string {
-  const t = getCurrentTokens()
-  if (isActive && focusMode === 'terminal-input') {
-    return t.palette.primary
-  }
-
-  if (isActive) {
-    return t.accent
-  }
-
-  return t.hover
+function getBorderColor(isActive: boolean, _focusMode: TerminalPaneProps['focusMode']): string {
+  const t = getCurrentTheme()
+  return isActive ? t.borderActive : t.border
 }
 
 function renderSpan(span: TerminalSpan, key: string): ReactNode {
@@ -76,7 +68,7 @@ function renderSpan(span: TerminalSpan, key: string): ReactNode {
   }
 
   return (
-    <span key={key} fg={span.fg ?? getCurrentTokens().palette.ink} bg={span.bg}>
+    <span key={key} fg={span.fg ?? getCurrentTheme().text} bg={span.bg}>
       {node}
     </span>
   )
@@ -91,11 +83,11 @@ const TerminalViewport = memo(function TerminalViewport({
   buffer,
   viewport,
 }: TerminalViewportProps) {
-  const t = useTokens()
+  const t = useTheme()
   if (viewport && viewport.lines.length > 0) {
     const lines = viewport.lines
     return (
-      <text fg={t.palette.ink}>
+      <text fg={t.text}>
         {lines.map((line, lineIndex) => (
           <span key={`line-${lineIndex}`}>
             {line.spans.map((span, spanIndex) => renderSpan(span, `s-${spanIndex}`))}
@@ -106,9 +98,7 @@ const TerminalViewport = memo(function TerminalViewport({
     )
   }
 
-  return (
-    <text fg={t.palette.ink}>{buffer.length > 0 ? buffer : 'Waiting for workspace output...'}</text>
-  )
+  return <text fg={t.text}>{buffer.length > 0 ? buffer : 'Waiting for workspace output...'}</text>
 })
 
 export function TerminalPane({
@@ -126,8 +116,8 @@ export function TerminalPane({
   tab,
   tabId,
 }: TerminalPaneProps) {
-  const t = useTokens()
-  const editorBg = useBg('base')
+  const t = useTheme()
+  const editorBg = t.background
   const paneIsActive = isActive ?? true
   const canForwardMouse = focusMode === 'terminal-input' && !!tab && mouseForwardingEnabled
   const canUseLocalScrollback = focusMode === 'terminal-input' && !!tab && localScrollbackEnabled
@@ -232,25 +222,25 @@ export function TerminalPane({
       >
         {!tab ? (
           <box flexGrow={1} justifyContent="center" alignItems="center" flexDirection="column">
-            <text fg={t.hover}>· · ·</text>
-            <text fg={t.muted}> </text>
+            <text fg={t.textMuted}>· · ·</text>
+            <text fg={t.textMuted}> </text>
             <box flexDirection="row">
-              <text fg={t.muted}>Press </text>
-              <text fg={t.palette.primary}>Ctrl+n</text>
-              <text fg={t.muted}> to launch an assistant</text>
+              <text fg={t.textMuted}>Press </text>
+              <text fg={t.primary}>Ctrl+n</text>
+              <text fg={t.textMuted}> to launch an assistant</text>
             </box>
             <box
               flexDirection="row"
               justifyContent="center"
               marginTop={1}
               paddingX={2}
-              backgroundColor={t.selected}
+              backgroundColor={t.backgroundPanel}
               onMouseDown={(event) => {
                 event.stopPropagation()
                 dispatchGlobal({ type: 'open-new-tab-modal' })
               }}
             >
-              <text fg={t.palette.ink}>New assistant</text>
+              <text fg={t.text}>New assistant</text>
             </box>
           </box>
         ) : (
@@ -271,11 +261,9 @@ export function TerminalPane({
         )}
       </ContextMenuBox>
       {tab?.status === 'disconnected' ? (
-        <text fg={t.palette.warning}>
-          Restored snapshot. Press Ctrl+r to restart this workspace.
-        </text>
+        <text fg={t.warning}>Restored snapshot. Press Ctrl+r to restart this workspace.</text>
       ) : null}
-      {tab?.errorMessage ? <text fg={t.palette.error}>{tab.errorMessage}</text> : null}
+      {tab?.errorMessage ? <text fg={t.error}>{tab.errorMessage}</text> : null}
     </box>
   )
 }

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>
         }