@brimveyn/aimux 1.8.0 → 1.9.1

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

@@ -0,0 +1,30 @@
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+
+interface SnippetEditorModalProps {
+  activeField: 'name' | 'content'
+  snippetName: string
+  snippetContent: string
+  isEditing: boolean
+}
+
+export function SnippetEditorModal({
+  activeField,
+  isEditing,
+  snippetContent,
+  snippetName,
+}: SnippetEditorModalProps) {
+  const nameActive = activeField === 'name'
+  const contentActive = activeField === 'content'
+
+  return (
+    <Form
+      title={isEditing ? 'Edit snippet' : 'Create snippet'}
+      keybindsModeId="modal.snippet-editor"
+      width={uiTokens.modalWidth.xl}
+    >
+      <TextField active={nameActive} label="Name" value={snippetName} />
+      <TextField active={contentActive} label="Content" value={snippetContent} />
+    </Form>
+  )
+}

package/src/ui/components/{snippet-picker-modal.tsx → modals/snippets/snippet-picker-modal.tsx}

@@ -1,10 +1,10 @@
-import type { SnippetRecord } from '../../state/types'
+import type { SnippetRecord } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterSnippets } from '../../state/selectors'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterSnippets } from '../../../../state/selectors'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface SnippetPickerModalProps {
   snippets: SnippetRecord[]

package/src/ui/components/{new-tab-modal.tsx → modals/tabs/new-tab-modal.tsx}

@@ -1,13 +1,12 @@
-import type { AssistantId } from '../../state/types'
+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 { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { InputField } from './input-field'
-import { ModalShell } from './modal-shell'
-import { Picker, type PickerItem } from './picker'
+import { getAllAssistantOptions, getAssistantOption } from '../../../../pty/command-registry'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterAssistants } from '../../../../state/selectors'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface NewTabModalProps {
   selectedIndex: number
@@ -33,21 +32,19 @@ export function NewTabModal({
       getAllAssistantOptions(customCommands).find((o) => o.id === editingCommand) ??
       getAssistantOption(0)
     return (
-      <ModalShell
+      <Form
         title={`Edit command — ${option.label}`}
         keybindsModeId="modal.new-tab.editing-command"
         width={uiTokens.modalWidth.md}
       >
-        <box flexDirection="column">
-          <text fg={t.muted}>Custom command (blank to reset to default: {option.command})</text>
-          <InputField
-            active
-            value={editBuffer}
-            cursorPos={cursorPos}
-            placeholder={option.command}
-          />
-        </box>
-      </ModalShell>
+        <TextField
+          active
+          description={<>blank to reset to default: {option.command}</>}
+          value={editBuffer}
+          cursorPos={cursorPos}
+          placeholder={option.command}
+        />
+      </Form>
     )
   }
 

package/src/ui/components/{theme-picker-modal.tsx → modals/themes/theme-picker-modal.tsx}

@@ -1,11 +1,11 @@
 import { useLayoutEffect, useMemo } from 'react'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterThemeIds } from '../filter-themes'
-import { useTokens, useTransparent } from '../theme'
-import { type ThemeId, THEMES } from '../themes'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterThemeIds } from '../../../filter-themes'
+import { useTokens, useTransparent } from '../../../theme'
+import { type ThemeId, THEMES } from '../../../themes'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface ThemePickerModalProps {
   currentThemeId: ThemeId

package/src/ui/components/{ai-usage-indicator.tsx → overlays/ai-usage/ai-usage-indicator.tsx}

@@ -1,8 +1,8 @@
 import type { AIUsageTool } from '@brimveyn/aimux-config'
 
-import { useAIUsageStore } from '../../state/ai-usage-store'
-import { toggleAIUsagePopover } from '../ai-usage/controller'
-import { useTokens } from '../theme'
+import { useAIUsageStore } from '../../../../state/ai-usage-store'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useBg, useTokens } from '../../../theme'
 
 const TOOL_ICON: Record<AIUsageTool, string> = {
   claude: 'CC',
@@ -19,7 +19,7 @@ function formatTokens(total: number): string {
   return String(total)
 }
 
-function buildBar(percent: number): { filled: string; empty: string } {
+function buildBar(percent: number): { empty: string; filled: string } {
   let filledCount = 0
   for (let i = 0; i < BAR_SEGMENTS; i++) {
     if (percent > i * (100 / BAR_SEGMENTS)) filledCount++
@@ -48,6 +48,7 @@ function formatResetIn(snap: {
 
 export function AIUsageIndicator() {
   const t = useTokens()
+  const bg = useBg('elevated')
   const enabled = useAIUsageStore((s) => s.enabled)
   const snapshots = useAIUsageStore((s) => s.snapshots)
 
@@ -58,35 +59,49 @@ export function AIUsageIndicator() {
     .map((tool) => ({ snap: snapshots[tool], tool }))
     .filter((entry) => entry.snap !== undefined)
 
+  const openModal = (e: { preventDefault: () => void; stopPropagation: () => void }) => {
+    e.preventDefault()
+    e.stopPropagation()
+    dispatchGlobal({ type: 'open-ai-usage-modal' })
+  }
+
   if (entries.length === 0) {
     return (
-      <box flexDirection="row" gap={1}>
+      <box
+        flexDirection="row"
+        paddingLeft={1}
+        paddingRight={1}
+        backgroundColor={bg}
+        onMouseDown={openModal}
+      >
         <text fg={t.muted}>…</text>
       </box>
     )
   }
 
   return (
-    <box
-      flexDirection="row"
-      gap={2}
-      onMouseDown={(e) => {
-        e.preventDefault()
-        e.stopPropagation()
-        if (e.button !== 0) return
-        toggleAIUsagePopover(e.x, e.y)
-      }}
-    >
+    <box flexDirection="row" gap={1}>
       {entries.map(({ snap, tool }) => {
         if (!snap) return null
         const icon = TOOL_ICON[tool]
-        if (snap.error) {
+
+        if (snap.error && !snap.stale) {
           return (
-            <text key={tool} fg={t.palette.error} selectable={false}>
-              {icon} —
-            </text>
+            <box
+              key={tool}
+              flexDirection="row"
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={bg}
+              onMouseDown={openModal}
+            >
+              <text fg={t.palette.error} selectable={false}>
+                {`${icon} —`}
+              </text>
+            </box>
           )
         }
+
         if (snap.percent !== null) {
           const p = Math.round(snap.percent)
           let color = t.palette.success
@@ -99,9 +114,16 @@ export function AIUsageIndicator() {
           const reset = formatResetIn(snap)
           const pctText = `${String(p).padStart(2, ' ')}%`
           return (
-            <box key={tool} flexDirection="row">
+            <box
+              key={tool}
+              flexDirection="row"
+              paddingLeft={1}
+              paddingRight={1}
+              backgroundColor={bg}
+              onMouseDown={openModal}
+            >
               <text fg={color} selectable={false}>
-                {icon}{' '}
+                {`${icon} `}
               </text>
               <text fg={color} selectable={false}>
                 {filled}
@@ -120,10 +142,20 @@ export function AIUsageIndicator() {
             </box>
           )
         }
+
         return (
-          <text key={tool} fg={t.muted} selectable={false}>
-            {icon} {formatTokens(snap.tokens.total)}
-          </text>
+          <box
+            key={tool}
+            flexDirection="row"
+            paddingLeft={1}
+            paddingRight={1}
+            backgroundColor={bg}
+            onMouseDown={openModal}
+          >
+            <text fg={t.muted} selectable={false}>
+              {`${icon} ${formatTokens(snap.tokens.total)}`}
+            </text>
+          </box>
         )
       })}
     </box>

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

@@ -1,7 +1,7 @@
 import type { BoxRenderable, MouseEvent as OtuiMouseEvent } from '@opentui/core'
 import type { BoxProps } from '@opentui/react'
 
-import { type ContextMenuItem, openContextMenu } from '../context-menu/controller'
+import { type ContextMenuItem, openContextMenu } from '../../../context-menu/controller'
 
 interface ContextMenuBoxProps extends BoxProps {
   rightClickMenu?: ContextMenuItem[]

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 { AIUsagePopover } from './components/ai-usage-popover'
-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) {
@@ -172,6 +172,8 @@ function renderModal(
           cursorPos={modal.cursorPos}
         />
       )
+    case 'ai-usage':
+      return <AIUsageModal />
     case 'git-commit': {
       const titleText =
         modal.activeField === 'title' ? (modal.editBuffer ?? '') : modal.contentBuffer
@@ -275,11 +277,12 @@ 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 />
-        <AIUsagePopover />
         {renderModal(modal, {
           activeAssistant: activeTab?.assistant,
           createSessionFields,

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/ai-usage/controller.ts

@@ -1,35 +0,0 @@
-export interface AIUsagePopoverState {
-  anchorX: number
-  anchorY: number
-}
-
-type Listener = (state: AIUsagePopoverState | null) => void
-
-let current: AIUsagePopoverState | null = null
-const listeners = new Set<Listener>()
-
-export function openAIUsagePopover(anchorX: number, anchorY: number): void {
-  current = { anchorX, anchorY }
-  for (const l of listeners) l(current)
-}
-
-export function closeAIUsagePopover(): void {
-  if (current === null) return
-  current = null
-  for (const l of listeners) l(null)
-}
-
-export function toggleAIUsagePopover(anchorX: number, anchorY: number): void {
-  if (current) {
-    closeAIUsagePopover()
-  } else {
-    openAIUsagePopover(anchorX, anchorY)
-  }
-}
-
-export function subscribeAIUsagePopover(listener: Listener): () => void {
-  listeners.add(listener)
-  return () => {
-    listeners.delete(listener)
-  }
-}