@brimveyn/aimux 1.9.5 → 1.9.7

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

@@ -10,7 +10,7 @@ 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, useTokens } from '../../theme'
+import { useTheme } from '../../theme'
 import { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
 interface SessionBarProps {
@@ -18,8 +18,8 @@ interface SessionBarProps {
 }
 
 export function SessionBar({ forceVisible = false }: SessionBarProps) {
-  const t = useTokens()
-  const headerBg = useBg('elevated')
+  const t = useTheme()
+  const headerBg = t.backgroundPanel
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -151,13 +151,13 @@ export function SessionBar({ forceVisible = false }: SessionBarProps) {
         flexDirection="row"
         paddingLeft={1}
         paddingRight={1}
-        backgroundColor={t.selected}
+        backgroundColor={t.backgroundElement}
         onMouseDown={(e) => {
           e.stopPropagation()
           dispatchGlobal({ returnToSessionPicker: false, type: 'open-create-session-modal' })
         }}
       >
-        <text fg={t.palette.ink} selectable={false}>
+        <text fg={t.text} selectable={false}>
           + New
         </text>
       </box>
@@ -200,16 +200,16 @@ function SessionChip({
   session,
   status,
 }: SessionChipProps) {
-  const t = useTokens()
-  const selectionBg = useBg('selected')
+  const t = useTheme()
+  const selectionBg = t.backgroundElement
   const showSpinner = status.working
   const showWaiting = status.waiting
   const spinner = useBusySpinner(showSpinner)
-  const labelColor = active ? t.palette.ink : t.muted
+  const labelColor = active ? t.text : t.textMuted
   const bgColor = dragging || active ? selectionBg : undefined
-  const idleColor = t.palette.success
-  const workingColor = t.palette.primary
-  const waitingColor = t.palette.warning
+  const idleColor = t.success
+  const workingColor = t.primary
+  const waitingColor = t.warning
   const [hovered, setHovered] = useState(false)
 
   return (
@@ -264,12 +264,12 @@ function SessionChip({
             runSideEffectGlobal({ sessionId: session.id, type: 'delete-session' })
           }}
         >
-          <text fg={t.muted} selectable={false}>
+          <text fg={t.textMuted} selectable={false}>
             ×
           </text>
         </box>
       ) : (
-        <text fg={t.hover} selectable={false}>
+        <text fg={t.textMuted} selectable={false}>
           {' '}
         </text>
       )}

package/src/ui/components/layout/sidebar/sidebar.tsx

@@ -7,7 +7,7 @@ import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../../../state/app-store'
 import { dispatchGlobal } from '../../../../state/dispatch-ref'
-import { getCurrentTokens, type ThemeTokens, useBg, useTokens } from '../../../theme'
+import { getCurrentTheme, type ResolvedTuiTheme, useTheme } from '../../../theme'
 import { buildGitPaneContextMenu } from '../../git/pane/git-pane-context-menu'
 import { GitPaneWidget } from '../../git/pane/git-pane-widget'
 import { ContextMenuBox } from '../../overlays/context-menu/context-menu-box'
@@ -37,19 +37,19 @@ const RESIZE_HANDLE = '│'
 function getRowBackground({
   alternate,
   isActive,
-  tokens,
+  t,
 }: {
   isActive: boolean
   alternate: boolean
-  tokens: ThemeTokens
+  t: ResolvedTuiTheme
 }): string | undefined {
-  if (isActive) return tokens.selected
-  if (alternate) return tokens.hover
-  return undefined
+  if (isActive) return t.backgroundElement
+  if (alternate) return t.backgroundPanel
+  return t.backgroundPanel
 }
 
 const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: number }) {
-  const tokens = useTokens()
+  const t = useTheme()
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
   const currentSession = currentSessionId
@@ -60,22 +60,20 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
 
   return (
     <box flexDirection="column" flexShrink={0} gap={0}>
-      <text fg={tokens.palette.primary}>
+      <text fg={t.text}>
         <strong>aimux</strong>
       </text>
-      <text fg={tokens.accent}>
-        {currentSession ? currentSession.name : 'No workspace selected'}
-      </text>
+      <text fg={t.text}>{currentSession ? currentSession.name : 'No workspace selected'}</text>
       {branch ? (
         <box flexDirection="row">
-          <text fg={tokens.palette.primary}>{'\u{e702}'} </text>
-          <text fg={tokens.muted}>{branch}</text>
+          <text fg={t.text}>{'\u{e702}'} </text>
+          <text fg={t.text}>{branch}</text>
         </box>
       ) : null}
       <box
         flexDirection="row"
         paddingY={1}
-        backgroundColor={tokens.selected}
+        backgroundColor={t.backgroundPanel}
         justifyContent="center"
         marginTop={1}
         onMouseDown={(e) => {
@@ -83,22 +81,22 @@ const SidebarTop = memo(function SidebarTop({ contentWidth }: { contentWidth: nu
           dispatchGlobal({ type: 'open-new-tab-modal' })
         }}
       >
-        <text fg={tokens.palette.ink}>+ New assistant</text>
+        <text fg={t.text}>+ New assistant</text>
       </box>
-      <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+      <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
     </box>
   )
 })
 
 function renderGroupGutter(isGroupStart: boolean, isGroupMiddle: boolean, isGroupEnd: boolean) {
-  const t = getCurrentTokens()
+  const t = getCurrentTheme()
   return (
     <box flexDirection="column" width={1} overflow="hidden">
-      <text fg={t.accent}>
+      <text fg={t.border}>
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
-      <text fg={t.accent}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
+      <text fg={t.border}>{isGroupEnd ? GUTTER_END : GUTTER_PAD}</text>
     </box>
   )
 }
@@ -108,7 +106,7 @@ interface TabsBodyProps {
 }
 
 const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
-  const tokens = useTokens()
+  const t = useTheme()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const focusMode = useAppStore((s) => s.focusMode)
@@ -138,7 +136,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
     >
       {tabs.length === 0 ? (
         <box paddingTop={1}>
-          <text fg={tokens.muted}>No tabs yet. Press Ctrl+n.</text>
+          <text fg={t.textMuted}>No tabs yet. Press Ctrl+n.</text>
         </box>
       ) : (
         tabs.map((tab, index) => {
@@ -154,7 +152,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
           return (
             <box
               key={tab.id}
-              backgroundColor={getRowBackground({ alternate, isActive, tokens })}
+              backgroundColor={getRowBackground({ alternate, isActive, t })}
               flexDirection="row"
               onMouseDown={(event) => {
                 event.stopPropagation()
@@ -186,8 +184,8 @@ export function Sidebar({
   onSidebarResizeStart,
   onTabActivate,
 }: SidebarProps) {
-  const tokens = useTokens()
-  const sidebarBg = useBg('elevated')
+  const t = useTheme()
+  const sidebarBg = t.background
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)
@@ -215,7 +213,7 @@ export function Sidebar({
   const tabsGrow = gitEmbedded ? Math.max(1, Math.round((1 - gitPane.embeddedRatio) * 100)) : 1
   const gitGrow = gitEmbedded ? Math.max(1, Math.round(gitPane.embeddedRatio * 100)) : 0
 
-  const separator = <text fg={tokens.hover}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
+  const separator = <text fg={t.textMuted}>{'·'.repeat(Math.max(0, contentWidth - 2))}</text>
   const gitBody = gitEmbedded ? (
     <ContextMenuBox
       flexDirection="column"
@@ -232,7 +230,7 @@ export function Sidebar({
     <box
       minHeight={1}
       flexShrink={0}
-      backgroundColor={tokens.border}
+      backgroundColor={t.border}
       onMouseDown={(event) => {
         const body = bodyRef.current
         if (!body) return
@@ -245,7 +243,7 @@ export function Sidebar({
         })
       }}
     >
-      <text fg={tokens.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
+      <text fg={t.border}>{RESIZE_HANDLE.repeat(Math.max(1, contentWidth))}</text>
     </box>
   ) : null
 
@@ -315,7 +313,7 @@ export function Sidebar({
           height="100%"
           width={1}
           flexShrink={0}
-          backgroundColor={tokens.border}
+          backgroundColor={t.border}
           onMouseDown={(event) => {
             event.preventDefault()
             event.stopPropagation()

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