@brimveyn/aimux 1.6.1 → 1.7.0

package/src/ui/root.tsx

@@ -24,7 +24,7 @@ import { StatusBar } from './components/status-bar'
 import { TerminalPane } from './components/terminal-pane'
 import { ThemePickerModal } from './components/theme-picker-modal'
 import { UpdateAvailableModal } from './components/update-available-modal'
-import { useTheme } from './theme'
+import { useBg } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
   if (modal.type !== 'create-session') {
@@ -82,7 +82,10 @@ function renderModal(
         <NewTabModal
           selectedIndex={modal.selectedIndex}
           customCommands={options.customCommands}
-          editBuffer={modal.editBuffer}
+          filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
+          editingCommand={modal.type === 'new-tab' ? modal.editingCommand : null}
+          editBuffer={modal.editBuffer ?? ''}
         />
       )
     case 'session-picker':
@@ -93,6 +96,7 @@ function renderModal(
           currentSessionId={options.currentSessionId}
           currentTabCount={options.currentTabCount}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'session-name':
@@ -121,6 +125,7 @@ function renderModal(
           snippets={options.snippets}
           selectedIndex={modal.selectedIndex}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'snippet-editor':
@@ -138,6 +143,7 @@ function renderModal(
           selectedIndex={modal.selectedIndex}
           currentThemeId={options.themeId}
           filter={modal.editBuffer}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'update-available':
@@ -154,6 +160,7 @@ function renderModal(
           filter={modal.editBuffer}
           selectedIndex={modal.selectedIndex}
           scope={modal.scope}
+          cursorPos={modal.cursorPos}
         />
       )
     case 'git-commit': {
@@ -215,7 +222,7 @@ export function RootView({
   terminalRows,
   themeId,
 }: RootViewProps) {
-  const theme = useTheme()
+  const editorBg = useBg('editor.background')
   const tabs = useAppStore((s) => s.tabs)
   const activeTabId = useAppStore((s) => s.activeTabId)
   const layoutTrees = useAppStore((s) => s.layoutTrees)
@@ -241,12 +248,7 @@ export function RootView({
   const inGitMode = focusMode === 'git' || modal.type === 'git-commit'
   if (inGitMode) {
     return (
-      <box
-        flexDirection="column"
-        width="100%"
-        height="100%"
-        backgroundColor={theme.colors['editor.background']}
-      >
+      <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
         <GitView themeId={themeId} />
         <StatusBar />
         <PendingChordOverlay />
@@ -265,12 +267,7 @@ export function RootView({
   }
 
   return (
-    <box
-      flexDirection="column"
-      width="100%"
-      height="100%"
-      backgroundColor={theme.colors['editor.background']}
-    >
+    <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
       {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
@@ -343,18 +340,12 @@ export function RootView({
 }
 
 function GitPaneInPaneMode({ ratio }: { ratio: number }) {
-  const theme = useTheme()
+  const bg = useBg('sideBar.background')
   // Ratio maps to a fixed column count (20..80), mirroring the reservation in
   // use-terminal-resize so the terminal-content area stays in sync.
   const width = Math.max(20, Math.min(80, Math.round(ratio * 80)))
   return (
-    <box
-      flexDirection="column"
-      width={width}
-      flexShrink={0}
-      backgroundColor={theme.colors['sideBar.background']}
-      overflow="hidden"
-    >
+    <box flexDirection="column" width={width} flexShrink={0} backgroundColor={bg} overflow="hidden">
       <GitPaneWidget pollingEnabled />
     </box>
   )

package/src/ui/status-bar-model.ts

@@ -114,17 +114,17 @@ export function getStatusBarModel(
 function deriveModalModeId(modalType: AppState['modal']['type']): ModeId | null {
   switch (modalType) {
     case 'help':
-      return 'modal.help'
+      return 'modal.help.filtering'
     case 'new-tab':
-      return 'modal.new-tab'
+      return 'modal.new-tab.command-edit'
     case 'session-picker':
-      return 'modal.session-picker'
+      return 'modal.session-picker.filtering'
     case 'snippet-picker':
-      return 'modal.snippet-picker'
+      return 'modal.snippet-picker.filtering'
     case 'split-picker':
       return 'modal.split-picker'
     case 'theme-picker':
-      return 'modal.theme-picker'
+      return 'modal.theme-picker.filtering'
     case 'update-available':
       return 'modal.update-available'
     default:

package/src/ui/theme-store.ts

@@ -1,16 +1,17 @@
 import { useStore } from 'zustand'
 import { createStore } from 'zustand/vanilla'
 
-import { type Theme, type ThemeId, THEMES } from './themes'
+import { type Theme, type ThemeColorMap, type ThemeId, THEMES } from './themes'
 
 interface ThemeStore {
   theme: Theme
+  transparent: boolean
 }
 
 const DEFAULT = THEMES['aimux']
 if (!DEFAULT) throw new Error('default theme missing')
 
-const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT }))
+const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent: false }))
 
 /**
  * Subscribe to the active theme. Pass a selector to subscribe to a narrower
@@ -34,3 +35,26 @@ export function applyTheme(id: ThemeId): void {
   if (!entry) return
   themeStore.setState({ theme: entry })
 }
+
+/** Subscribe to the transparent-mode flag. */
+export function useTransparent(): boolean {
+  return useStore(themeStore, (s) => s.transparent)
+}
+
+export function getTransparent(): boolean {
+  return themeStore.getState().transparent
+}
+
+export function setTransparent(value: boolean): void {
+  if (themeStore.getState().transparent === value) return
+  themeStore.setState({ transparent: value })
+}
+
+/**
+ * Resolve a background color through the transparent-mode flag. Returns
+ * `undefined` when transparent mode is on, letting the terminal emulator's
+ * own background show through.
+ */
+export function useBg(key: keyof ThemeColorMap): string | undefined {
+  return useStore(themeStore, (s) => (s.transparent ? undefined : s.theme.colors[key]))
+}

package/src/ui/theme.ts

@@ -2,4 +2,12 @@
 // React components should import `useTheme` from `./theme-store`; non-React
 // callers use `getCurrentTheme()`. `applyTheme` moved to the store module.
 
-export { applyTheme, getCurrentTheme, useTheme } from './theme-store'
+export {
+  applyTheme,
+  getCurrentTheme,
+  getTransparent,
+  setTransparent,
+  useBg,
+  useTheme,
+  useTransparent,
+} from './theme-store'

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

@@ -1,19 +0,0 @@
-import { useTheme } from '../theme'
-import { Surface } from './surface'
-
-interface ModalFilterBarProps {
-  filter: string | null
-}
-
-export function ModalFilterBar({ filter }: ModalFilterBarProps) {
-  const theme = useTheme()
-  if (filter === null) {
-    return null
-  }
-
-  return (
-    <Surface tone="input" paddingLeft={1} paddingRight={1} paddingTop={1} paddingBottom={1}>
-      <text fg={theme.colors['editor.foreground']}>/{filter}_</text>
-    </Surface>
-  )
-}