@brimveyn/aimux 1.9.0 → 1.9.1

package/src/ui/components/{context-menu-overlay.tsx → overlays/context-menu/context-menu-overlay.tsx}

@@ -1,13 +1,13 @@
 import { useKeyboard } from '@opentui/react'
 import { useEffect, useState } from 'react'
 
-import { useAppStore } from '../../state/app-store'
+import { useAppStore } from '../../../../state/app-store'
 import {
   closeContextMenu,
   type ContextMenuState,
   subscribeContextMenu,
-} from '../context-menu/controller'
-import { useTokens } from '../theme'
+} from '../../../context-menu/controller'
+import { useTokens } from '../../../theme'
 
 export function ContextMenuOverlay() {
   const [menu, setMenu] = useState<ContextMenuState | null>(null)

package/src/ui/components/{pending-chord-overlay.tsx → overlays/pending-chord-overlay.tsx}

@@ -1,9 +1,9 @@
-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 { useTokens } from '../theme'
-import { Surface } from './surface'
+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 { useTokens } from '../../theme'
+import { Surface } from '../primitives/surface'
 
 export function PendingChordOverlay() {
   const t = useTokens()

package/src/ui/components/{bare-input.tsx → primitives/bare-input.tsx}

@@ -1,4 +1,4 @@
-import { useTokens } from '../theme'
+import { useTokens } from '../../theme'
 
 interface BareInputProps {
   value: string
@@ -9,7 +9,7 @@ interface BareInputProps {
 export function BareInput({ cursorPos, placeholder = '', value }: BareInputProps) {
   const t = useTokens()
   const fg = t.palette.ink
-  const bg = t.palette.neutral
+  const bg = t.bg
   const placeholderFg = t.faint
 
   if (!value) {

package/src/ui/components/{input-field.tsx → primitives/input-field.tsx}

@@ -1,4 +1,4 @@
-import { useTokens } from '../theme'
+import { useTokens } from '../../theme'
 import { Surface } from './surface'
 
 interface InputFieldProps {
@@ -32,7 +32,7 @@ export function InputField({ active, cursorPos, placeholder, value }: InputField
     <Surface tone="inputActive" padding={1}>
       <text fg={fg}>
         {before}
-        <span bg={t.palette.ink} fg={t.palette.neutral}>
+        <span bg={t.palette.ink} fg={t.bg}>
           {cursorDisplay}
         </span>
         {trailing}

package/src/ui/components/{list-item.tsx → primitives/list-item.tsx}

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { useTokens } from '../theme'
+import { useTokens } from '../../theme'
 import { Surface } from './surface'
 
 export type ListItemDirection = 'row' | 'column'

package/src/ui/components/{surface.tsx → primitives/surface.tsx}

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react'
 
-import { type SurfaceToken, useBg } from '../theme'
+import { type SurfaceToken, useBg } from '../../theme'
 
 type SurfaceTone = 'muted' | 'elevated' | 'selected' | 'input' | 'inputActive'
 

package/src/ui/root.tsx

@@ -8,28 +8,28 @@ import { useAppStore } from '../state/app-store'
 import { dispatchGlobal } from '../state/dispatch-ref'
 import { getGitPaneWidthFromRatio } from '../state/git-pane-sizing'
 import { getTreeForTab, PANE_BORDER, type SplitDirection } from '../state/layout-tree'
-import { AIUsageModal } from './components/ai-usage-modal'
-import { ContextMenuBox } from './components/context-menu-box'
-import { ContextMenuOverlay } from './components/context-menu-overlay'
-import { CreateSessionModal } from './components/create-session-modal'
-import { GitCommitModal } from './components/git-commit-modal'
-import { buildGitPaneContextMenu } from './components/git-pane-context-menu'
-import { GitPaneWidget } from './components/git-pane-widget'
-import { GitView } from './components/git-view'
-import { HelpModal } from './components/help-modal'
-import { NewTabModal } from './components/new-tab-modal'
-import { PendingChordOverlay } from './components/pending-chord-overlay'
-import { SessionBar } from './components/session-bar'
-import { SessionNameModal } from './components/session-name-modal'
-import { SessionPickerModal } from './components/session-picker-modal'
-import { Sidebar } from './components/sidebar'
-import { SnippetEditorModal } from './components/snippet-editor-modal'
-import { SnippetPickerModal } from './components/snippet-picker-modal'
-import { SplitLayout } from './components/split-layout'
-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 { GitView } from './components/git/git-view'
+import { buildGitPaneContextMenu } from './components/git/pane/git-pane-context-menu'
+import { GitPaneWidget } from './components/git/pane/git-pane-widget'
+import { SessionBar } from './components/layout/session-bar'
+import { Sidebar } from './components/layout/sidebar/sidebar'
+import { SplitLayout } from './components/layout/split-layout'
+import { StatusBar } from './components/layout/status-bar'
+import { TerminalPane } from './components/layout/terminal-pane'
+import { AIUsageModal } from './components/modals/app/ai-usage-modal'
+import { HelpModal } from './components/modals/app/help-modal'
+import { UpdateAvailableModal } from './components/modals/app/update-available-modal'
+import { GitCommitModal } from './components/modals/git/git-commit-modal'
+import { CreateSessionModal } from './components/modals/sessions/create-session-modal'
+import { SessionNameModal } from './components/modals/sessions/session-name-modal'
+import { SessionPickerModal } from './components/modals/sessions/session-picker-modal'
+import { SnippetEditorModal } from './components/modals/snippets/snippet-editor-modal'
+import { SnippetPickerModal } from './components/modals/snippets/snippet-picker-modal'
+import { NewTabModal } from './components/modals/tabs/new-tab-modal'
+import { ThemePickerModal } from './components/modals/themes/theme-picker-modal'
+import { ContextMenuBox } from './components/overlays/context-menu/context-menu-box'
+import { ContextMenuOverlay } from './components/overlays/context-menu/context-menu-overlay'
+import { PendingChordOverlay } from './components/overlays/pending-chord-overlay'
 import { useBg, useTokens } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
@@ -277,7 +277,9 @@ export function RootView({
   if (inGitMode) {
     return (
       <box flexDirection="column" width="100%" height="100%" backgroundColor={editorBg}>
+        {sessionBarPosition === 'top' && <SessionBar forceVisible />}
         <GitView themeId={themeId} />
+        {sessionBarPosition === 'bottom' && <SessionBar forceVisible />}
         <StatusBar />
         <PendingChordOverlay />
         <ContextMenuOverlay />

package/src/ui/theme-store.ts

@@ -5,22 +5,20 @@ import {
   accent,
   type AimuxPalette,
   type AimuxTheme,
-  border,
+  computeSurfaces,
   diffAddBg,
   diffDeleteBg,
-  elevated,
   extendPalette,
-  faint,
-  hover,
-  muted,
-  selected,
   type ThemeId,
+  type ThemeMode,
   THEMES,
 } from './themes'
 
 export interface ThemeTokens {
   /** `accent` with `primary` fallback. */
   accent: string
+  /** App-level background surface (derived from palette.neutral seed via OKLCH). */
+  bg: string
   /** Subtle border between panels. */
   border: string
   /** Background tint for inserted diff lines. */
@@ -40,29 +38,33 @@ export interface ThemeTokens {
   selected: string
 }
 
-function computeTokens(palette: AimuxPalette): ThemeTokens {
+function computeTokens(palette: AimuxPalette, mode: ThemeMode): ThemeTokens {
+  const surfaces = computeSurfaces(palette, mode)
   return {
     accent: accent(palette),
-    border: border(palette),
+    bg: surfaces.bg,
+    border: surfaces.border,
     diffAddBg: diffAddBg(palette),
     diffDeleteBg: diffDeleteBg(palette),
-    elevated: elevated(palette),
-    faint: faint(palette),
-    hover: hover(palette),
-    muted: muted(palette),
+    elevated: surfaces.elevated,
+    faint: surfaces.faint,
+    hover: surfaces.hover,
+    muted: surfaces.muted,
     palette,
-    selected: selected(palette),
+    selected: surfaces.selected,
   }
 }
 
-// Memoize by palette reference so `useStore` selectors return stable objects.
+// Memoize by (palette, mode) so `useStore` selectors return stable objects.
 let cachedPalette: AimuxPalette | null = null
+let cachedMode: ThemeMode | null = null
 let cachedTokens: ThemeTokens | null = null
 
-function deriveTokens(palette: AimuxPalette): ThemeTokens {
-  if (cachedPalette === palette && cachedTokens) return cachedTokens
+function deriveTokens(palette: AimuxPalette, mode: ThemeMode): ThemeTokens {
+  if (cachedPalette === palette && cachedMode === mode && cachedTokens) return cachedTokens
   cachedPalette = palette
-  cachedTokens = computeTokens(palette)
+  cachedMode = mode
+  cachedTokens = computeTokens(palette, mode)
   return cachedTokens
 }
 
@@ -78,12 +80,13 @@ const themeStore = createStore<ThemeStore>(() => ({ theme: DEFAULT, transparent:
 
 /** Subscribe to the active palette plus precomputed derived shades. */
 export function useTokens(): ThemeTokens {
-  return useStore(themeStore, (s) => deriveTokens(s.theme.palette))
+  return useStore(themeStore, (s) => deriveTokens(s.theme.palette, s.theme.mode))
 }
 
 /** Synchronous tokens for non-React callers. */
 export function getCurrentTokens(): ThemeTokens {
-  return deriveTokens(themeStore.getState().theme.palette)
+  const s = themeStore.getState()
+  return deriveTokens(s.theme.palette, s.theme.mode)
 }
 
 /** Synchronous snapshot for non-React callers (reducers, side effects). */
@@ -121,18 +124,19 @@ export function setTransparent(value: boolean): void {
 
 export type SurfaceToken = 'base' | 'elevated' | 'hover' | 'selected' | 'border'
 
-function resolveSurface(palette: AimuxPalette, token: SurfaceToken): string {
+function resolveSurface(palette: AimuxPalette, mode: ThemeMode, token: SurfaceToken): string {
+  const surfaces = computeSurfaces(palette, mode)
   switch (token) {
     case 'base':
-      return palette.neutral
+      return surfaces.bg
     case 'elevated':
-      return elevated(palette)
+      return surfaces.elevated
     case 'hover':
-      return hover(palette)
+      return surfaces.hover
     case 'selected':
-      return selected(palette)
+      return surfaces.selected
     case 'border':
-      return border(palette)
+      return surfaces.border
   }
 }
 
@@ -144,6 +148,6 @@ function resolveSurface(palette: AimuxPalette, token: SurfaceToken): string {
 export function useBg(token: SurfaceToken): string | undefined {
   return useStore(themeStore, (s) => {
     if (s.transparent && token === 'base') return undefined
-    return resolveSurface(s.theme.palette, token)
+    return resolveSurface(s.theme.palette, s.theme.mode, token)
   })
 }

package/src/ui/themes.ts

@@ -13,6 +13,7 @@ export type {
 export {
   accent,
   border,
+  computeSurfaces,
   diffAddBg,
   diffDeleteBg,
   elevated,

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

@@ -1,96 +0,0 @@
-import type { DirectoryResult } from '../../state/types'
-
-import { abbreviatePath } from '../path-format'
-import { getCurrentTokens, useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { InputField } from './input-field'
-import { ListItem } from './list-item'
-import { ModalShell } from './modal-shell'
-
-const VISIBLE_ROWS = 8
-
-function getDirectoryResultIcon(result: DirectoryResult): string {
-  if (result.type === 'worktree') return '\u{e728}'
-  if (result.type === 'workspace') return '\u{f07c}'
-  return '\u{e702}'
-}
-
-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
-}
-
-interface CreateSessionModalProps {
-  activeField: 'directory' | 'name'
-  directoryQuery: string
-  sessionName: string
-  results: DirectoryResult[]
-  selectedIndex: number
-  pendingProjectPath: string | null
-}
-
-export function CreateSessionModal({
-  activeField,
-  directoryQuery,
-  pendingProjectPath,
-  results,
-  selectedIndex,
-  sessionName,
-}: CreateSessionModalProps) {
-  const t = useTokens()
-  const dirActive = activeField === 'directory'
-  const nameActive = activeField === 'name'
-
-  const scrollOffset = Math.max(0, selectedIndex - VISIBLE_ROWS + 1)
-  const visibleResults = results.slice(scrollOffset, scrollOffset + VISIBLE_ROWS)
-
-  return (
-    <ModalShell
-      title="Create workspace"
-      keybindsModeId="modal.create-session"
-      width={uiTokens.modalWidth.xl}
-    >
-      <box flexDirection="column">
-        <text fg={dirActive ? t.palette.ink : t.muted}>Search projects</text>
-        <InputField
-          active={dirActive}
-          placeholder="Type a project name..."
-          value={
-            pendingProjectPath && !dirActive ? abbreviatePath(pendingProjectPath) : directoryQuery
-          }
-        />
-      </box>
-
-      <box flexDirection="column" height={VISIBLE_ROWS}>
-        {results.length === 0 ? (
-          <text fg={t.muted}>
-            {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
-          </text>
-        ) : (
-          visibleResults.map((result, index) => {
-            const active = dirActive && scrollOffset + index === selectedIndex
-            return (
-              <ListItem
-                key={result.path}
-                active={active}
-                leading={
-                  <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>
-                }
-                title={
-                  <text fg={active ? t.palette.ink : t.muted}>{abbreviatePath(result.path)}</text>
-                }
-              />
-            )
-          })
-        )}
-      </box>
-
-      <box flexDirection="column">
-        <text fg={nameActive ? t.palette.ink : t.muted}>Workspace name</text>
-        <InputField active={nameActive} value={sessionName} />
-      </box>
-    </ModalShell>
-  )
-}