@brimveyn/aimux 1.8.0 → 1.9.1

package/src/ui/components/{use-sidebar-branch.ts → layout/sidebar/use-sidebar-branch.ts}

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-import { getCurrentBranch } from '../git-branch'
+import { getCurrentBranch } from '../../../git-branch'
 
 const BRANCH_POLL_INTERVAL_MS = 5_000
 

package/src/ui/components/{split-layout.tsx → layout/split-layout.tsx}

@@ -1,17 +1,17 @@
 import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
-import type { TerminalContentOrigin } from '../../input/raw-input-handler'
-import type { FocusMode, TabSession } from '../../state/types'
+import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
+import type { FocusMode, TabSession } from '../../../state/types'
 
-import { logInputDebug } from '../../debug/input-log'
+import { logInputDebug } from '../../../debug/input-log'
 import {
   computePaneRects,
   type LayoutNode,
   PANE_BORDER,
   type PaneRect,
   type SplitDirection,
-} from '../../state/layout-tree'
-import { useTokens } from '../theme'
+} from '../../../state/layout-tree'
+import { useTokens } from '../../theme'
 import { TerminalPane } from './terminal-pane'
 
 const PANE_CHROME = PANE_BORDER

package/src/ui/components/{status-bar.tsx → layout/status-bar.tsx}

@@ -1,11 +1,11 @@
-import type { AppState } from '../../state/types'
+import type { AppState } from '../../../state/types'
 
-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 { AIUsageIndicator } from './ai-usage-indicator'
+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 { AIUsageIndicator } from '../overlays/ai-usage/ai-usage-indicator'
 
 function getModeColor(focusMode: AppState['focusMode']): string {
   const t = getCurrentTokens()

package/src/ui/components/{terminal-pane.tsx → layout/terminal-pane.tsx}

@@ -2,19 +2,19 @@ import type { MouseEvent as OtuiMouseEvent } from '@opentui/core'
 
 import { memo, type ReactNode } from 'react'
 
-import type { TerminalContentOrigin } from '../../input/raw-input-handler'
-import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../state/types'
+import type { TerminalContentOrigin } from '../../../input/raw-input-handler'
+import type { TabSession, TerminalSnapshot, TerminalSpan } from '../../../state/types'
 
-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 { ContextMenuBox } from './context-menu-box'
+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 { ContextMenuBox } from '../overlays/context-menu/context-menu-box'
 
 interface TerminalPaneProps {
   tab?: TabSession
   tabId?: string
-  focusMode: import('../../state/types').FocusMode
+  focusMode: import('../../../state/types').FocusMode
   isActive?: boolean
   contentOrigin: TerminalContentOrigin
   mouseForwardingEnabled: boolean

package/src/ui/components/modals/app/ai-usage-modal.tsx

@@ -0,0 +1,190 @@
+import type { AIUsageTool } from '@brimveyn/aimux-config'
+import type { ReactNode } from 'react'
+
+import type {
+  UsagePaceStage,
+  UsageSnapshot,
+  UsageWindow,
+} from '../../../../services/ai-usage/types'
+
+import { useAIUsageStore } from '../../../../state/ai-usage-store'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ModalShell } from '../shared/modal-shell'
+
+const TOOL_TITLE: Record<AIUsageTool, string> = {
+  claude: 'Claude',
+  codex: 'Codex',
+}
+
+const BAR_SEGMENTS = 32
+const BAR_FILLED_CHAR = '\u{2501}'
+const BAR_EMPTY_CHAR = '\u{2500}'
+
+function buildBar(percent: number | null): { empty: string; filled: string } {
+  const p = percent ?? 0
+  let filledCount = 0
+  for (let i = 0; i < BAR_SEGMENTS; i++) {
+    if (p > i * (100 / BAR_SEGMENTS)) filledCount++
+  }
+  return {
+    empty: BAR_EMPTY_CHAR.repeat(BAR_SEGMENTS - filledCount),
+    filled: BAR_FILLED_CHAR.repeat(filledCount),
+  }
+}
+
+function formatRelative(iso: string, now: number = Date.now()): string {
+  const diffMs = now - new Date(iso).getTime()
+  if (!Number.isFinite(diffMs) || diffMs < 0) return 'just now'
+  const s = Math.floor(diffMs / 1000)
+  if (s < 10) return 'just now'
+  if (s < 60) return `${s}s ago`
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h ago`
+  const d = Math.floor(h / 24)
+  return `${d}d ago`
+}
+
+function paceStageIsAhead(stage: UsagePaceStage): boolean {
+  return stage === 'ahead' || stage === 'farAhead' || stage === 'slightlyAhead'
+}
+
+function paceStageIsBehind(stage: UsagePaceStage): boolean {
+  return stage === 'behind' || stage === 'farBehind' || stage === 'slightlyBehind'
+}
+
+export function AIUsageModal() {
+  const t = useTokens()
+  const snapshots = useAIUsageStore((s) => s.snapshots)
+
+  const tools: AIUsageTool[] = ['claude', 'codex']
+  const sections = tools
+    .map((tool) => ({ snap: snapshots[tool], tool }))
+    .filter((s): s is { snap: UsageSnapshot; tool: AIUsageTool } => s.snap !== undefined)
+
+  return (
+    <ModalShell
+      title="AI usage"
+      keybindsModeId="modal.ai-usage"
+      width={uiTokens.modalWidth.md}
+      listGap={1}
+    >
+      {sections.length === 0 ? (
+        <text fg={t.muted} selectable={false}>
+          no data yet — collecting…
+        </text>
+      ) : (
+        <box flexDirection="column" gap={1}>
+          {sections.map(({ snap, tool }) => (
+            <ToolSection key={tool} snap={snap} tool={tool} />
+          ))}
+        </box>
+      )}
+    </ModalShell>
+  )
+}
+
+interface ToolSectionProps {
+  snap: UsageSnapshot
+  tool: AIUsageTool
+}
+
+function ToolSection({ snap, tool }: ToolSectionProps) {
+  const t = useTokens()
+  const isHardError = Boolean(snap.error) && !snap.stale
+  const relative = formatRelative(snap.lastUpdated)
+
+  let body: ReactNode
+  if (isHardError) {
+    body = (
+      <text fg={t.palette.error} selectable={false}>
+        {`error: ${snap.error ?? ''}`}
+      </text>
+    )
+  } else if (snap.windows.length === 0) {
+    body = (
+      <text fg={t.muted} selectable={false}>
+        no window data
+      </text>
+    )
+  } else {
+    body = snap.windows.map((window) => <WindowRow key={window.kind} window={window} />)
+  }
+
+  return (
+    <box flexDirection="column">
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={t.accent} selectable={false}>
+          {TOOL_TITLE[tool]}
+        </text>
+        {snap.planTier ? (
+          <text fg={t.muted} selectable={false}>
+            {snap.planTier}
+          </text>
+        ) : null}
+      </box>
+      <text fg={t.muted} selectable={false}>
+        {`Updated ${relative}`}
+      </text>
+      {body}
+    </box>
+  )
+}
+
+function WindowRow({ window }: { window: UsageWindow }) {
+  const t = useTokens()
+  const percent = window.percent
+  const { empty, filled } = buildBar(percent)
+
+  let barColor = t.palette.success
+  if (percent !== null) {
+    if (percent >= 85) barColor = t.palette.error
+    else if (percent >= 60) barColor = t.palette.warning
+  }
+
+  const pctText = percent === null ? '—' : `${Math.round(percent)}% used`
+  const resetText = window.timeRemaining ? `Resets in ${window.timeRemaining}` : null
+
+  return (
+    <box flexDirection="column" paddingTop={1}>
+      <text fg={t.palette.ink} selectable={false}>
+        {window.label}
+      </text>
+      <box flexDirection="row">
+        <text fg={barColor} selectable={false}>
+          {filled}
+        </text>
+        <text fg={t.muted} selectable={false}>
+          {empty}
+        </text>
+      </box>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={t.muted} selectable={false}>
+          {pctText}
+        </text>
+        {resetText ? (
+          <text fg={t.muted} selectable={false}>
+            {resetText}
+          </text>
+        ) : null}
+      </box>
+      {window.pace ? <PaceLine pace={window.pace} /> : null}
+    </box>
+  )
+}
+
+function PaceLine({ pace }: { pace: NonNullable<UsageWindow['pace']> }) {
+  const t = useTokens()
+  let color = t.muted
+  if (paceStageIsBehind(pace.stage)) color = t.palette.warning
+  else if (paceStageIsAhead(pace.stage)) color = t.palette.success
+
+  const suffix = pace.rightText ? ` · ${pace.rightText}` : ''
+  return (
+    <text fg={color} selectable={false}>
+      {`Pace: ${pace.label}${suffix}`}
+    </text>
+  )
+}

package/src/ui/components/{help-modal.tsx → modals/app/help-modal.tsx}

@@ -2,12 +2,12 @@ import type { ModeId } from '@brimveyn/aimux-config'
 
 import { useLayoutEffect, useMemo } from 'react'
 
-import { collectHelpEntries, HELP_MODE_LABELS } from '../../input/keymap/help-entries'
-import { dispatchGlobal } from '../../state/dispatch-ref'
-import { useKeymap } from '../keymap-context'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { collectHelpEntries, HELP_MODE_LABELS } from '../../../../input/keymap/help-entries'
+import { dispatchGlobal } from '../../../../state/dispatch-ref'
+import { useKeymap } from '../../../keymap-context'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface HelpModalProps {
   filter: string | null

package/src/ui/components/{update-available-modal.tsx → modals/app/update-available-modal.tsx}

@@ -1,7 +1,7 @@
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { ListItem } from './list-item'
-import { ModalShell } from './modal-shell'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from '../shared/modal-shell'
 
 interface UpdateAvailableModalProps {
   currentVersion: string

package/src/ui/components/{git-commit-modal.tsx → modals/git/git-commit-modal.tsx}

@@ -1,14 +1,14 @@
 import { isAutoCommitEnabled } from '@brimveyn/aimux-config'
 import { useEffect, useState } from 'react'
 
-import type { ModeId } from '../../input/modes/types'
-
-import { useAppStore } from '../../state/app-store'
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { InputField } from './input-field'
-import { ModalShell } from './modal-shell'
+import type { ModeId } from '../../../../input/modes/types'
+
+import { useAppStore } from '../../../../state/app-store'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { InputField } from '../../primitives/input-field'
+import { ModalShell } from '../shared/modal-shell'
 
 interface GitCommitModalProps {
   activeField: 'title' | 'body'

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

@@ -0,0 +1,79 @@
+import type { DirectoryResult } from '../../../../state/types'
+
+import { abbreviatePath } from '../../../path-format'
+import { getCurrentTokens, useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { AutoComplete, Form, type FormOptionItem, TextField } from '../shared/form'
+
+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 items: FormOptionItem[] = results.map((result) => {
+    return {
+      key: result.path,
+      leading: <text fg={getDirectoryResultColor(result)}>{getDirectoryResultIcon(result)}</text>,
+      title: (active) => (
+        <text fg={active ? t.palette.ink : t.muted}>{abbreviatePath(result.path)}</text>
+      ),
+    }
+  })
+
+  return (
+    <Form
+      title="Create workspace"
+      keybindsModeId="modal.create-session"
+      width={uiTokens.modalWidth.xl}
+    >
+      <AutoComplete
+        active={dirActive}
+        label="Search projects"
+        placeholder="Type a project name..."
+        value={directoryQuery}
+        displayValue={pendingProjectPath ? abbreviatePath(pendingProjectPath) : directoryQuery}
+        items={items}
+        selectedIndex={selectedIndex}
+        maxVisibleRows={VISIBLE_ROWS}
+        emptyState={
+          <text fg={t.muted}>
+            {directoryQuery.length > 0 ? 'No matches' : 'Type a project name to search...'}
+          </text>
+        }
+      />
+
+      <TextField active={nameActive} label="Workspace name" value={sessionName} />
+    </Form>
+  )
+}

package/src/ui/components/modals/sessions/session-name-modal.tsx

@@ -0,0 +1,10 @@
+import { uiTokens } from '../../../ui-tokens'
+import { Form, TextField } from '../shared/form'
+
+export function SessionNameModal({ title, value }: { title: string; value: string }) {
+  return (
+    <Form title={title} keybindsModeId="modal.session-name" width={uiTokens.modalWidth.md}>
+      <TextField active value={value} />
+    </Form>
+  )
+}

package/src/ui/components/{session-picker-modal.tsx → modals/sessions/session-picker-modal.tsx}

@@ -1,12 +1,12 @@
-import type { SessionRecord } from '../../state/types'
+import type { SessionRecord } from '../../../../state/types'
 
-import { dispatchGlobal, runSideEffectGlobal } from '../../state/dispatch-ref'
-import { filterSessions } from '../../state/selectors'
-import { abbreviatePath } from '../path-format'
-import { orderSessionsForDisplay } from '../session-ordering'
-import { useTokens } from '../theme'
-import { uiTokens } from '../ui-tokens'
-import { Picker, type PickerItem } from './picker'
+import { dispatchGlobal, runSideEffectGlobal } from '../../../../state/dispatch-ref'
+import { filterSessions } from '../../../../state/selectors'
+import { abbreviatePath } from '../../../path-format'
+import { orderSessionsForDisplay } from '../../../session-ordering'
+import { useTokens } from '../../../theme'
+import { uiTokens } from '../../../ui-tokens'
+import { Picker, type PickerItem } from '../shared/picker'
 
 interface SessionPickerModalProps {
   sessions: SessionRecord[]

package/src/ui/components/modals/shared/form.tsx

@@ -0,0 +1,164 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
+import { type ReactNode } from 'react'
+
+import { useTokens } from '../../../theme'
+import { InputField } from '../../primitives/input-field'
+import { ListItem } from '../../primitives/list-item'
+import { ModalShell } from './modal-shell'
+
+interface FormProps {
+  children: ReactNode
+  footer?: ReactNode
+  keybindsModeId?: ModeId
+  listGap?: number
+  subtitle?: string
+  title: string
+  width: number | `${number}%`
+}
+
+interface FieldLabelProps {
+  active?: boolean
+  children?: ReactNode
+  description?: ReactNode
+}
+
+interface TextFieldProps {
+  active: boolean
+  cursorPos?: number
+  description?: ReactNode
+  label?: ReactNode
+  placeholder?: string
+  value: string
+}
+
+type FormOptionContent = ReactNode | ((active: boolean) => ReactNode)
+
+export interface FormOptionItem {
+  key: string
+  leading?: FormOptionContent
+  subtitle?: FormOptionContent
+  title: FormOptionContent
+  trailing?: FormOptionContent
+  onClick?: () => void
+}
+
+interface AutoCompleteProps {
+  active: boolean
+  cursorPos?: number
+  displayValue?: string
+  emptyState?: ReactNode
+  items: FormOptionItem[]
+  label: ReactNode
+  maxVisibleRows?: number
+  onHover?: (index: number) => void
+  placeholder?: string
+  selectedIndex: number
+  value: string
+}
+
+export function Form({
+  children,
+  footer,
+  keybindsModeId,
+  listGap,
+  subtitle,
+  title,
+  width,
+}: FormProps) {
+  return (
+    <ModalShell
+      title={title}
+      subtitle={subtitle}
+      width={width}
+      keybindsModeId={keybindsModeId}
+      listGap={listGap}
+      footer={footer}
+    >
+      {children}
+    </ModalShell>
+  )
+}
+
+export function FieldLabel({ active = false, children, description }: FieldLabelProps) {
+  const t = useTokens()
+  return (
+    <box flexDirection="column">
+      {children ? <text fg={active ? t.palette.ink : t.muted}>{children}</text> : null}
+      {description ? <text fg={t.muted}>{description}</text> : null}
+    </box>
+  )
+}
+
+export function TextField({
+  active,
+  cursorPos,
+  description,
+  label,
+  placeholder,
+  value,
+}: TextFieldProps) {
+  return (
+    <box flexDirection="column">
+      {label || description ? (
+        <FieldLabel active={active} description={description}>
+          {label}
+        </FieldLabel>
+      ) : null}
+      <InputField active={active} value={value} cursorPos={cursorPos} placeholder={placeholder} />
+    </box>
+  )
+}
+
+function resolveItemContent(content: FormOptionContent | undefined, active: boolean): ReactNode {
+  return typeof content === 'function' ? content(active) : content
+}
+
+export function AutoComplete({
+  active,
+  cursorPos,
+  displayValue,
+  emptyState,
+  items,
+  label,
+  maxVisibleRows = 8,
+  onHover,
+  placeholder,
+  selectedIndex,
+  value,
+}: AutoCompleteProps) {
+  const scrollOffset = Math.max(0, selectedIndex - maxVisibleRows + 1)
+  const visibleItems = items.slice(scrollOffset, scrollOffset + maxVisibleRows)
+
+  return (
+    <box flexDirection="column" gap={1}>
+      <TextField
+        active={active}
+        label={label}
+        value={active ? value : (displayValue ?? value)}
+        cursorPos={cursorPos}
+        placeholder={placeholder}
+      />
+      <box flexDirection="column" height={maxVisibleRows}>
+        {items.length === 0
+          ? (emptyState ?? null)
+          : visibleItems.map((item, index) => {
+              const optionIndex = scrollOffset + index
+              const optionActive = active && optionIndex === selectedIndex
+              return (
+                <ListItem
+                  key={item.key}
+                  active={optionActive}
+                  leading={resolveItemContent(item.leading, optionActive)}
+                  title={resolveItemContent(item.title, optionActive)}
+                  subtitle={resolveItemContent(item.subtitle, optionActive)}
+                  trailing={resolveItemContent(item.trailing, optionActive)}
+                  onHover={onHover ? () => onHover(optionIndex) : undefined}
+                  onClick={item.onClick}
+                />
+              )
+            })}
+      </box>
+    </box>
+  )
+}

package/src/ui/components/{modal-keybinds-overlay.tsx → modals/shared/modal-keybinds-overlay.tsx}

@@ -1,9 +1,9 @@
 import type { ModeId } from '@brimveyn/aimux-config'
 
-import { describeBindings } from '../../input/keymap/describe-bindings'
-import { useKeymap } from '../keymap-context'
-import { useTokens } from '../theme'
-import { Surface } from './surface'
+import { describeBindings } from '../../../../input/keymap/describe-bindings'
+import { useKeymap } from '../../../keymap-context'
+import { useTokens } from '../../../theme'
+import { Surface } from '../../primitives/surface'
 
 const KEYS_COLUMN_WIDTH = 12
 
@@ -16,7 +16,7 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
   const t = useTokens()
   const config = useKeymap()
   const bindings = describeBindings(config, modeId, {
-    dedupeByDescription: true,
+    mergeAlternativesByDescription: true,
     withDescriptionOnly: true,
   })
 
@@ -24,10 +24,10 @@ export function ModalKeybindsOverlay({ limit, modeId }: ModalKeybindsOverlayProp
   const entries = typeof limit === 'number' ? bindings.slice(0, limit) : bindings
 
   return (
-    <box position="absolute" bottom={3} right={5}>
+    <box position="absolute" bottom={0} right={0}>
       <Surface tone="elevated" paddingLeft={2} paddingRight={2} paddingTop={1} paddingBottom={1}>
         {entries.map((binding) => (
-          <box key={`${binding.keys}-${binding.description}`} flexDirection="row">
+          <box key={binding.description ?? binding.keys} flexDirection="row">
             <box width={KEYS_COLUMN_WIDTH}>
               <text fg={t.accent}>{binding.keysDisplay}</text>
             </box>

package/src/ui/components/{modal-shell.tsx → modals/shared/modal-shell.tsx}

@@ -3,7 +3,7 @@ import type { ModeId } from '@brimveyn/aimux-config'
 import { type BoxRenderable, type OptimizedBuffer, RGBA } from '@opentui/core'
 import { type ReactNode } from 'react'
 
-import { useTokens, useTransparent } from '../theme'
+import { useTokens, useTransparent } from '../../../theme'
 import { ModalKeybindsOverlay } from './modal-keybinds-overlay'
 
 interface ModalShellProps {

package/src/ui/components/{picker.tsx → modals/shared/picker.tsx}

@@ -4,9 +4,9 @@ import type { ScrollBoxRenderable } from '@opentui/core'
 import { useTerminalDimensions } from '@opentui/react'
 import { type ReactNode, useLayoutEffect, useRef } from 'react'
 
-import { useTokens } from '../theme'
-import { BareInput } from './bare-input'
-import { ListItem } from './list-item'
+import { useTokens } from '../../../theme'
+import { BareInput } from '../../primitives/bare-input'
+import { ListItem } from '../../primitives/list-item'
 import { ModalShell } from './modal-shell'
 
 export interface PickerItem {