@brimveyn/aimux 1.6.0 → 1.6.2

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

@@ -13,7 +13,7 @@ import type {
 
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { buildGitTreeRows, type GitTreeFileRow, type GitTreeFolderRow } from '../../state/git-tree'
-import { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 
 interface GitPanelProps {
   collapsedFolders?: Record<string, true>
@@ -23,22 +23,41 @@ interface GitPanelProps {
   selectedEntryKey?: string | null
   pathConfig?: GitPanePathConfig
   diffCountConfig?: GitPaneDiffCountConfig
+  headOffset?: number
+  compact?: boolean
 }
 
-const SECTION_ORDER: { key: GitFileSection; title: string }[] = [
-  { key: 'staged', title: 'Staged Changes' },
-  { key: 'unstaged', title: 'Changes' },
-  { key: 'untracked', title: 'Untracked' },
-]
+function sectionTitle(section: GitFileSection, headOffset: number): string {
+  switch (section) {
+    case 'historical':
+      return `HEAD~${headOffset}`
+    case 'staged':
+      return 'Staged Changes'
+    case 'unstaged':
+      return 'Changes'
+    case 'untracked':
+      return 'Untracked'
+  }
+}
+
+const BASE_SECTION_ORDER: GitFileSection[] = ['staged', 'unstaged', 'untracked']
+const HISTORICAL_SECTION_ORDER: GitFileSection[] = ['historical', 'untracked']
 
-const STATUS_COLORS: Record<GitFileEntry['status'], string> = {
-  '?': theme.colors['gitDecoration.addedResourceForeground'],
-  'A': theme.colors['gitDecoration.addedResourceForeground'],
-  'C': theme.colors['textLink.foreground'],
-  'D': theme.colors['editorError.foreground'],
-  'M': theme.colors['editorWarning.foreground'],
-  'R': theme.colors['textLink.foreground'],
-  'U': theme.colors['editorError.foreground'],
+function statusColor(status: GitFileEntry['status']): string {
+  const t = getCurrentTheme()
+  switch (status) {
+    case '?':
+    case 'A':
+      return t.colors['gitDecoration.addedResourceForeground']
+    case 'C':
+    case 'R':
+      return t.colors['textLink.foreground']
+    case 'D':
+    case 'U':
+      return t.colors['editorError.foreground']
+    case 'M':
+      return t.colors['editorWarning.foreground']
+  }
 }
 
 function displayStatus(file: GitFileEntry): string {
@@ -83,8 +102,10 @@ function renderFileLabel(
   if (!file.renamedFrom) {
     return (
       <text wrapMode="none">
-        <span fg={theme.colors['editor.foreground']}>{basename}</span>
-        {showDir ? <span fg={theme.colors['descriptionForeground']}> {dir}</span> : null}
+        <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
+        {showDir ? (
+          <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span>
+        ) : null}
       </text>
     )
   }
@@ -93,13 +114,13 @@ function renderFileLabel(
   const renamedDir = stripTrailingSlash(renamed.prefix)
   return (
     <text wrapMode="none">
-      <span fg={theme.colors['descriptionForeground']}>{renamed.basename}</span>
+      <span fg={getCurrentTheme().colors['descriptionForeground']}>{renamed.basename}</span>
       {showDir && renamedDir ? (
-        <span fg={theme.colors['descriptionForeground']}> {renamedDir}</span>
+        <span fg={getCurrentTheme().colors['descriptionForeground']}> {renamedDir}</span>
       ) : null}
-      <span fg={theme.colors['descriptionForeground']}> → </span>
-      <span fg={theme.colors['editor.foreground']}>{basename}</span>
-      {showDir ? <span fg={theme.colors['descriptionForeground']}> {dir}</span> : null}
+      <span fg={getCurrentTheme().colors['descriptionForeground']}> → </span>
+      <span fg={getCurrentTheme().colors['editor.foreground']}>{basename}</span>
+      {showDir ? <span fg={getCurrentTheme().colors['descriptionForeground']}> {dir}</span> : null}
     </text>
   )
 }
@@ -115,7 +136,7 @@ function renderDiffCount(
   if (!diffCountConfig.enabled) return null
   if (!hasNumstat) {
     return (
-      <text fg={theme.colors['descriptionForeground']} bg={bg} flexShrink={0}>
+      <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg} flexShrink={0}>
         —
       </text>
     )
@@ -123,14 +144,14 @@ function renderDiffCount(
   return (
     <box flexDirection="row" flexShrink={0}>
       <text
-        fg={theme.colors['gitDecoration.addedResourceForeground']}
+        fg={getCurrentTheme().colors['gitDecoration.addedResourceForeground']}
         bg={bg}
       >{`+${padRight(file.added, addedW)}`}</text>
-      <text fg={theme.colors['editor.lineHighlightBackground']} bg={bg}>
+      <text fg={getCurrentTheme().colors['editor.lineHighlightBackground']} bg={bg}>
         {' '}
       </text>
       <text
-        fg={theme.colors['editorError.foreground']}
+        fg={getCurrentTheme().colors['editorError.foreground']}
         bg={bg}
       >{`−${padRight(file.removed, removedW)}`}</text>
     </box>
@@ -138,7 +159,7 @@ function renderDiffCount(
 }
 
 function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode {
-  const bg = isSelected ? theme.colors['list.activeSelectionBackground'] : undefined
+  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
@@ -149,10 +170,13 @@ function renderFolderRow(row: GitTreeFolderRow, isSelected: boolean): ReactNode
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box flexGrow={1} overflow="hidden" paddingLeft={row.depth * 2}>
         <box flexDirection="row" gap={1} onMouseDown={onToggle}>
-          <text fg={theme.colors['descriptionForeground']} bg={bg}>
+          <text fg={getCurrentTheme().colors['descriptionForeground']} bg={bg}>
             {row.isCollapsed ? '▸' : '▾'}
           </text>
-          <text fg={theme.colors['terminal.ansiMagenta']} bg={bg} wrapMode="none">
+          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg}>
+            {row.isCollapsed ? '\uf07b' : '\uf07c'}
+          </text>
+          <text fg={getCurrentTheme().colors['textLink.foreground']} bg={bg} wrapMode="none">
             {row.name}
           </text>
         </box>
@@ -172,14 +196,14 @@ function renderFileRow(
 ): ReactNode {
   const file = row.file
   const hasNumstat = file.added !== null || file.removed !== null
-  const bg = isSelected ? theme.colors['list.activeSelectionBackground'] : undefined
+  const bg = isSelected ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined
   const onSelect = (): void => {
     dispatchGlobal({ key: row.key, type: 'git-mode-select-entry-by-key' })
   }
   return (
     <box key={row.key} flexDirection="row" gap={1} backgroundColor={bg} onMouseDown={onSelect}>
       <box width={2} flexShrink={0} justifyContent="center">
-        <text fg={STATUS_COLORS[file.status]} bg={bg}>
+        <text fg={statusColor(file.status)} bg={bg}>
           <strong>{displayStatus(file)}</strong>
         </text>
       </box>
@@ -202,7 +226,8 @@ function renderTreeSection(
   selectedEntryKey: string | null | undefined,
   showListModeToggle: boolean,
   pathConfig: GitPanePathConfig,
-  diffCountConfig: GitPaneDiffCountConfig
+  diffCountConfig: GitPaneDiffCountConfig,
+  marginTop: number
 ): ReactNode {
   if (files.length === 0) return null
   const nextFileListMode = fileListMode === 'tree' ? 'flat' : 'tree'
@@ -211,9 +236,9 @@ function renderTreeSection(
     runSideEffectGlobal({ mode: nextFileListMode, type: 'persist-git-file-list-mode' })
   }
   return (
-    <box key={section} flexDirection="column">
+    <box key={section} flexDirection="column" marginTop={marginTop}>
       <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.colors['terminal.ansiMagenta']}>
+        <text fg={getCurrentTheme().colors['terminal.ansiMagenta']}>
           <strong>
             {title} ({files.length})
           </strong>
@@ -223,18 +248,18 @@ function renderTreeSection(
             <text
               fg={
                 fileListMode === 'tree'
-                  ? theme.colors['textLink.foreground']
-                  : theme.colors['descriptionForeground']
+                  ? getCurrentTheme().colors['textLink.foreground']
+                  : getCurrentTheme().colors['descriptionForeground']
               }
             >
               tree
             </text>
-            <text fg={theme.colors['descriptionForeground']}>|</text>
+            <text fg={getCurrentTheme().colors['descriptionForeground']}>|</text>
             <text
               fg={
                 fileListMode === 'flat'
-                  ? theme.colors['textLink.foreground']
-                  : theme.colors['descriptionForeground']
+                  ? getCurrentTheme().colors['textLink.foreground']
+                  : getCurrentTheme().colors['descriptionForeground']
               }
             >
               flat
@@ -279,16 +304,25 @@ function computeStatusPlaceholder(
   hasProjectPath: boolean
 ): StatusPlaceholder | null {
   if (!hasProjectPath) {
-    return { label: 'No active session', labelColor: theme.colors['descriptionForeground'] }
+    return {
+      label: 'No active session',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   if (gitPanel.error === 'not-a-repo') {
-    return { label: 'Not a git repository', labelColor: theme.colors['descriptionForeground'] }
+    return {
+      label: 'Not a git repository',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   if (gitPanel.error === 'unknown') {
-    return { label: 'Git error', labelColor: theme.colors['editorError.foreground'] }
+    return { label: 'Git error', labelColor: getCurrentTheme().colors['editorError.foreground'] }
   }
   if (gitPanel.files.length === 0) {
-    return { label: 'Working tree clean', labelColor: theme.colors['descriptionForeground'] }
+    return {
+      label: 'Working tree clean',
+      labelColor: getCurrentTheme().colors['descriptionForeground'],
+    }
   }
   return null
 }
@@ -298,17 +332,21 @@ const DEFAULT_DIFF_COUNT_CONFIG: GitPaneDiffCountConfig = { enabled: true }
 
 export const GitPanel = memo(function GitPanel({
   collapsedFolders = {},
+  compact = false,
   diffCountConfig = DEFAULT_DIFF_COUNT_CONFIG,
   fileListMode = 'tree',
   gitPanel,
+  headOffset = 0,
   pathConfig = DEFAULT_PATH_CONFIG,
   projectPath,
   selectedEntryKey,
 }: GitPanelProps) {
+  const theme = useTheme()
+  const sectionOrder = headOffset > 0 ? HISTORICAL_SECTION_ORDER : BASE_SECTION_ORDER
   const scrollRef = useRef<ScrollBoxRenderable | null>(null)
   const tree = useMemo(
-    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode),
-    [collapsedFolders, fileListMode, gitPanel.files]
+    () => buildGitTreeRows(gitPanel.files, collapsedFolders, fileListMode, compact),
+    [collapsedFolders, compact, fileListMode, gitPanel.files]
   )
   const { added: addedW, removed: removedW } = useMemo(
     () => maxDigitWidth(gitPanel.files),
@@ -350,20 +388,24 @@ export const GitPanel = memo(function GitPanel({
           viewportCulling
           contentOptions={{ flexDirection: 'column', gap: 0 }}
         >
-          {SECTION_ORDER.map((s) => {
-            const section = tree.sections.find((entry) => entry.section === s.key)
+          {sectionOrder.map((key, idx) => {
+            const section = tree.sections.find((entry) => entry.section === key)
+            const priorHasFiles = sectionOrder
+              .slice(0, idx)
+              .some((k) => (tree.sections.find((e) => e.section === k)?.files.length ?? 0) > 0)
             return renderTreeSection(
-              s.key,
-              s.title,
+              key,
+              sectionTitle(key, headOffset),
               section?.files ?? [],
               section?.rows ?? [],
               addedW,
               removedW,
               fileListMode,
               selectedEntryKey,
-              s.key === toggleSection,
+              key === toggleSection,
               pathConfig,
-              diffCountConfig
+              diffCountConfig,
+              priorHasFiles ? 1 : 0
             )
           })}
         </scrollbox>

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

@@ -4,14 +4,16 @@ import { memo, useEffect, useRef } from 'react'
 import type { DiffData, GitDiffView } from '../../state/types'
 import type { ThemeId } from '../themes'
 
+import { diffHash } from '../../git/diff-hash'
 import { fetchDiff } from '../../git/git-diff'
 import { useGitPanelPolling } from '../../git/git-poller'
 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 { theme } from '../theme'
+import { useTheme } from '../theme'
 import { PierreDiff, type PierreDiffHandle } from './diff-renderer'
+import { useDiffPrefetch } from './diff-renderer/use-diff-prefetch'
 import { GitPanel } from './git-panel'
 
 interface DiffStageProps {
@@ -45,6 +47,7 @@ const DiffStage = memo(function DiffStage({
   themeId,
   view,
 }: DiffStageProps) {
+  const theme = useTheme()
   if (loading && !diff) {
     return (
       <box flexGrow={1} padding={1}>
@@ -102,6 +105,7 @@ interface GitViewProps {
 }
 
 export const GitView = memo(function GitView({ themeId }: GitViewProps) {
+  const theme = useTheme()
   const dimensions = useTerminalDimensions()
   const gitPane = useAppStore((s) => s.gitPane)
   const gitPanel = useAppStore((s) => s.gitPanel)
@@ -116,12 +120,13 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     : undefined
   const projectPath = currentSession?.projectPath
 
-  useGitPanelPolling({ enabled: focusMode === 'git', projectPath })
+  useGitPanelPolling({ enabled: focusMode === 'git', headOffset: gitMode.headOffset, projectPath })
 
   const fileBarWidth = Math.max(20, Math.floor(dimensions.width * gitPane.diffModeRatio))
 
   const selectedFile = getSelectedGitFile(gitPanel.files, {
     collapsedFolders: gitMode.collapsedFolders,
+    compact: gitPane.treeCompaction,
     fileListMode: gitPane.fileListMode,
     selectedEntryKey: gitMode.selectedEntryKey,
   })
@@ -145,18 +150,32 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
     return () => setGitDiffScroller(null)
   }, [])
 
+  useDiffPrefetch(gitMode.selectedEntryKey, gitPane.prefetchRadius, {
+    enabled: focusMode === 'git',
+    headOffset: gitMode.headOffset,
+    projectPath,
+    themeId,
+  })
+
   useEffect(() => {
     if (focusMode !== 'git') return
     if (!selectedFile || !projectPath) return
     if (!selectedDiffKey) return
     if (diff || loading) return
     dispatchGlobal({ key: selectedDiffKey, loading: true, type: 'git-mode-set-loading' })
-    void fetchDiff(projectPath, selectedFile)
-      .then((d) => dispatchGlobal({ diff: d, key: selectedDiffKey, type: 'git-mode-set-diff' }))
+    void fetchDiff(projectPath, selectedFile, gitMode.headOffset)
+      .then((d) =>
+        dispatchGlobal({
+          diff: d,
+          hash: diffHash(d.rawDiff),
+          key: selectedDiffKey,
+          type: 'git-mode-set-diff',
+        })
+      )
       .catch(() =>
         dispatchGlobal({ key: selectedDiffKey, loading: false, type: 'git-mode-set-loading' })
       )
-  }, [focusMode, projectPath, selectedFile, selectedDiffKey, diff, loading])
+  }, [focusMode, projectPath, selectedFile, selectedDiffKey, diff, loading, gitMode.headOffset])
 
   const pendingPath = gitMode.pendingDeletePath
   const pendingIsUntracked =
@@ -204,13 +223,23 @@ export const GitView = memo(function GitView({ themeId }: GitViewProps) {
               <text fg={theme.colors['descriptionForeground']}>{gitPanel.branch}</text>
             </box>
           ) : null}
+          {gitMode.headOffset > 0 ? (
+            <box flexDirection="row" gap={1}>
+              <text fg={theme.colors['editorWarning.foreground']}>
+                <strong>HEAD~{gitMode.headOffset}</strong>
+              </text>
+              <text fg={theme.colors['descriptionForeground']}>[ newer · ] older</text>
+            </box>
+          ) : null}
           <text fg={theme.colors['editor.lineHighlightBackground']}>
             {'·'.repeat(Math.max(0, fileBarWidth - 2))}
           </text>
           <GitPanel
             collapsedFolders={gitMode.collapsedFolders}
+            compact={gitPane.treeCompaction}
             fileListMode={gitPane.fileListMode}
             gitPanel={gitPanel}
+            headOffset={gitMode.headOffset}
             projectPath={projectPath}
             selectedEntryKey={gitMode.selectedEntryKey}
           />

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

@@ -10,7 +10,7 @@ import {
 } from '../../input/keymap/help-entries'
 import { dispatchGlobal } from '../../state/dispatch-ref'
 import { useKeymap } from '../keymap-context'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ModalFilterBar } from './modal-filter-bar'
 import { ModalShell } from './modal-shell'
@@ -86,6 +86,7 @@ function computeWindowStart(
 }
 
 export function HelpModal({ filter, scope, selectedIndex }: HelpModalProps) {
+  const theme = useTheme()
   const config = useKeymap()
   const dimensions = useTerminalDimensions()
   const allEntries = useMemo(() => collectHelpEntries(config), [config])

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

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 interface InputFieldProps {
@@ -8,6 +8,7 @@ interface InputFieldProps {
 }
 
 export function InputField({ active, cursorPos, value }: InputFieldProps) {
+  const theme = useTheme()
   const fg = active ? theme.colors['editor.foreground'] : theme.colors['descriptionForeground']
   if (!active) {
     return (

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'
@@ -22,6 +22,7 @@ export function ListItem({
   title,
   trailing,
 }: ListItemProps) {
+  const theme = useTheme()
   const isRow = direction === 'row'
   return (
     <Surface

package/src/ui/components/modal-filter-bar.tsx

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 interface ModalFilterBarProps {
@@ -6,6 +6,7 @@ interface ModalFilterBarProps {
 }
 
 export function ModalFilterBar({ filter }: ModalFilterBarProps) {
+  const theme = useTheme()
   if (filter === null) {
     return null
   }

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 { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 const KEYS_COLUMN_WIDTH = 12
@@ -13,6 +13,7 @@ interface ModalKeybindsOverlayProps {
 }
 
 export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProps) {
+  const theme = useTheme()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
     dedupeByDescription: true,

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

@@ -1,7 +1,7 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 import type { ReactNode } from 'react'
 
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 import { Surface } from './surface'
 
@@ -24,6 +24,7 @@ export function ModalShell({
   title,
   width,
 }: ModalShellProps) {
+  const theme = useTheme()
   return (
     <box
       position="absolute"

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

@@ -1,5 +1,5 @@
 import { getAllAssistantOptions } from '../../pty/command-registry'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ListItem } from './list-item'
@@ -12,6 +12,7 @@ interface NewTabModalProps {
 }
 
 export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTabModalProps) {
+  const theme = useTheme()
   const options = getAllAssistantOptions(customCommands)
   const selectedOption = options[selectedIndex]
   const isEditing = editBuffer !== null

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

@@ -2,10 +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 { theme } from '../theme'
+import { useTheme } from '../theme'
 import { Surface } from './surface'
 
 export function PendingChordOverlay() {
+  const theme = useTheme()
   const pendingChords = useAppStore((s) => s.pendingChords)
   const modalOpen = useAppStore((s) => s.modal.type !== null)
   const config = useKeymap()

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

@@ -8,9 +8,10 @@ import { useAppStore } from '../../state/app-store'
 import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
 import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { moveIdToIdPosition, orderSessionsForDisplay } from '../session-ordering'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 
 export function SessionBar() {
+  const theme = useTheme()
   const sessions = useAppStore((s) => s.sessions)
   const currentId = useAppStore((s) => s.currentSessionId)
   const bar = useAppStore((s) => s.sessionBar)
@@ -165,6 +166,7 @@ function SessionChip({
   onRef,
   session,
 }: SessionChipProps) {
+  const theme = useTheme()
   const showSpinner = busy && !active
   const spinner = useBusySpinner(showSpinner)
   const indicator = showSpinner ? spinner : '●'

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

@@ -3,7 +3,7 @@ import type { SessionRecord } from '../../state/types'
 import { filterSessions } from '../../state/selectors'
 import { abbreviatePath } from '../path-format'
 import { orderSessionsForDisplay } from '../session-ordering'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalFilterBar } from './modal-filter-bar'
@@ -45,6 +45,7 @@ export function SessionPickerModal({
   selectedIndex,
   sessions,
 }: SessionPickerModalProps) {
+  const theme = useTheme()
   const ordered = orderSessionsForDisplay(sessions)
   const baselineOrder = ordered.map((s) => s.id)
   const filtered = filterSessions(ordered, filter)

package/src/ui/components/sidebar.tsx

@@ -3,7 +3,7 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { memo, useMemo, useRef } from 'react'
 
 import { useAppStore } from '../../state/app-store'
-import { theme } from '../theme'
+import { getCurrentTheme, useTheme } from '../theme'
 import { GitPaneWidget } from './git-pane-widget'
 import { buildTabGroupInfo } from './sidebar-group-metadata'
 import { TabItem } from './tab-item'
@@ -20,6 +20,7 @@ const GUTTER_END = '╰'
 const GUTTER_PAD = '│'
 
 const SidebarTop = memo(function SidebarTop() {
+  const theme = useTheme()
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
   const sessions = useAppStore((s) => s.sessions)
@@ -59,15 +60,15 @@ function renderGroupGutter(
   return (
     <box flexDirection="column" width={1} overflow="hidden">
       <text
-        fg={theme.colors['terminal.ansiMagenta']}
-        bg={isActive ? theme.colors['list.activeSelectionBackground'] : undefined}
+        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
+        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
       >
         {/* oxlint-disable-next-line no-nested-ternary */}
         {isGroupStart ? GUTTER_START : isGroupMiddle ? GUTTER_MIDDLE : GUTTER_PAD}
       </text>
       <text
-        fg={theme.colors['terminal.ansiMagenta']}
-        bg={isActive ? theme.colors['list.activeSelectionBackground'] : undefined}
+        fg={getCurrentTheme().colors['terminal.ansiMagenta']}
+        bg={isActive ? getCurrentTheme().colors['list.activeSelectionBackground'] : undefined}
       >
         {isGroupEnd ? GUTTER_END : GUTTER_PAD}
       </text>
@@ -80,6 +81,7 @@ interface TabsBodyProps {
 }
 
 const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
+  const theme = useTheme()
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const focusMode = useAppStore((s) => s.focusMode)
@@ -149,6 +151,7 @@ const TabsBody = memo(function TabsBody({ onTabActivate }: TabsBodyProps) {
 })
 
 export function Sidebar({ onTabActivate }: SidebarProps) {
+  const theme = useTheme()
   const sidebarVisible = useAppStore((s) => s.sidebar.visible)
   const sidebarWidth = useAppStore((s) => s.sidebar.width)
   const gitPane = useAppStore((s) => s.gitPane)

package/src/ui/components/snippet-editor-modal.tsx

@@ -1,4 +1,4 @@
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
@@ -16,6 +16,7 @@ export function SnippetEditorModal({
   snippetContent,
   snippetName,
 }: SnippetEditorModalProps) {
+  const theme = useTheme()
   const nameActive = activeField === 'name'
   const contentActive = activeField === 'content'
 

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

@@ -1,7 +1,7 @@
 import type { SnippetRecord } from '../../state/types'
 
 import { filterSnippets } from '../../state/selectors'
-import { theme } from '../theme'
+import { useTheme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
 import { ModalFilterBar } from './modal-filter-bar'
@@ -22,6 +22,7 @@ function truncateContent(content: string): string {
 }
 
 export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
+  const theme = useTheme()
   const filtered = filterSnippets(snippets, filter)
 
   return (