@brimveyn/aimux 1.7.1 → 1.7.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/src/ui/components/session-bar.tsx

@@ -10,11 +10,12 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { IDLE_SESSION_STATUS } from '../../state/types'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { useBg, useTheme } from '../theme'
+import { useBg, useTokens } from '../theme'
+import { ContextMenuBox } from './context-menu-box'
 
 export function SessionBar() {
-  const theme = useTheme()
-  const headerBg = useBg('sideBarSectionHeader.background')
+  const t = useTokens()
+  const headerBg = useBg('elevated')
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -22,11 +23,7 @@ export function SessionBar() {
 
   const [draggingId, setDraggingId] = useState<string | null>(null)
   const [dragOrder, setDragOrder] = useState<string[] | null>(null)
-  // Hysteresis: the id of the chip we most recently swapped with. While the
-  // cursor remains over that chip we refuse to swap back (prevents oscillation
-  // when a long chip's new bounds still cover the cursor after a swap).
   const lastSwapWithRef = useRef<string | null>(null)
-  // Live bounds of each chip after render, keyed by session id.
   const chipRefs = useRef(new Map<string, BoxRenderable>())
 
   const ordered = useMemo(() => orderSessionsForDisplay(sessions), [sessions])
@@ -125,6 +122,22 @@ export function SessionBar() {
             onMouseDrag={handleMouseDrag}
             onMouseUp={commitDrop}
             onMouseDragEnd={cancelDrag}
+            rightClickMenu={[
+              [
+                'Rename',
+                () =>
+                  dispatchGlobal({
+                    initialName: session.name,
+                    returnToSessionPicker: false,
+                    sessionTargetId: session.id,
+                    type: 'open-session-name-modal',
+                  }),
+              ],
+              [
+                'Close',
+                () => runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' }),
+              ],
+            ]}
           />
         )
       })}
@@ -133,13 +146,13 @@ export function SessionBar() {
         flexDirection="row"
         paddingLeft={1}
         paddingRight={1}
-        backgroundColor={theme.colors['list.activeSelectionBackground']}
+        backgroundColor={t.selected}
         onMouseDown={(e) => {
           e.stopPropagation()
           dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
         }}
       >
-        <text fg={theme.colors['editor.foreground']} selectable={false}>
+        <text fg={t.palette.ink} selectable={false}>
           + New
         </text>
       </box>
@@ -166,6 +179,7 @@ interface SessionChipProps {
   onMouseDrag: (event: OtuiMouseEvent) => void
   onMouseUp: (event: OtuiMouseEvent) => void
   onMouseDragEnd: (event: OtuiMouseEvent) => void
+  rightClickMenu: Array<[string, () => void]>
 }
 
 function SessionChip({
@@ -177,29 +191,29 @@ function SessionChip({
   onMouseDragEnd,
   onMouseUp,
   onRef,
+  rightClickMenu,
   session,
   status,
 }: SessionChipProps) {
-  const theme = useTheme()
-  const selectionBg = useBg('list.activeSelectionBackground')
+  const t = useTokens()
+  const selectionBg = useBg('selected')
   const showSpinner = status.working
   const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
-  const labelColor = active
-    ? theme.colors['editor.foreground']
-    : theme.colors['descriptionForeground']
+  const labelColor = active ? t.palette.ink : t.muted
   const bgColor = dragging || active ? selectionBg : undefined
-  const idleColor = theme.colors['gitDecoration.addedResourceForeground'] ?? ''
-  const workingColor = theme.colors['textLink.foreground'] ?? ''
-  const waitingColor = theme.colors['editorWarning.foreground'] ?? ''
+  const idleColor = t.palette.success
+  const workingColor = t.palette.primary
+  const waitingColor = t.palette.warning
 
   return (
-    <box
+    <ContextMenuBox
       ref={onRef}
       flexDirection="row"
       paddingLeft={1}
       paddingRight={1}
       backgroundColor={bgColor}
+      rightClickMenu={rightClickMenu}
       onMouseDown={(e) => {
         e.preventDefault()
         onMouseDown(e)
@@ -233,9 +247,9 @@ function SessionChip({
       <text fg={labelColor} selectable={false}>
         [{index}] {session.name}
       </text>
-      <text fg={theme.colors['editor.lineHighlightBackground']} selectable={false}>
+      <text fg={t.hover} selectable={false}>
         {' '}
       </text>
-    </box>
+    </ContextMenuBox>
   )
 }

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

@@ -4,7 +4,7 @@ import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { filterSessions } from '../../state/selectors'
 import { abbreviatePath } from '../path-format'
 import { orderSessionsForDisplay } from '../session-ordering'
-import { useTheme } from '../theme'
+import { useTokens } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { Picker, type PickerItem } from './picker'
 
@@ -31,10 +31,7 @@ function formatSessionLine(
 }
 
 function getEmptyStateMessage(hasFilter: boolean): string {
-  if (hasFilter) {
-    return 'No matching sessions.'
-  }
-
+  if (hasFilter) return 'No matching sessions.'
   return 'No sessions yet. Press Enter or n to create your first session.'
 }
 
@@ -46,7 +43,7 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
-  const theme = useTheme()
+  const t = useTokens()
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)
@@ -60,14 +57,10 @@ export function SessionPickerModal({
       onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
       onDelete: () => runSideEffectGlobal({ type: 'delete-selected-session' }),
       subtitle: session.projectPath ? (
-        <text fg={theme.colors['descriptionForeground']}>
-          {abbreviatePath(session.projectPath)}
-        </text>
+        <text fg={t.muted}>{abbreviatePath(session.projectPath)}</text>
       ) : undefined,
       title: (
-        <text
-          fg={active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']}
-        >
+        <text fg={active ? t.palette.ink : t.muted}>
           {formatSessionLine(session, currentSessionId, currentTabCount, displayIndex)}
         </text>
       ),
@@ -78,13 +71,7 @@ export function SessionPickerModal({
     key: '__create-new__',
     onClick: () => runSideEffectGlobal({ type: 'confirm-selected-session' }),
     title: (
-      <text
-        fg={
-          selectedIndex === filtered.length
-            ? theme.colors['editor.foreground']
-            : theme.colors['descriptionForeground']
-        }
-      >
+      <text fg={selectedIndex === filtered.length ? t.palette.ink : t.muted}>
         Create new session
       </text>
     ),
@@ -104,7 +91,7 @@ export function SessionPickerModal({
       selectedIndex={selectedIndex}
       emptyState={
         filtered.length === 0 ? (
-          <text fg={theme.colors['descriptionForeground']}>{getEmptyStateMessage(hasFilter)}</text>
+          <text fg={t.muted}>{getEmptyStateMessage(hasFilter)}</text>
         ) : undefined
       }
       onHover={(index) => dispatchGlobal({ index, type: 'set-modal-selection-index' })}