@brimveyn/aimux 1.3.0 → 1.4.0

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

@@ -1,6 +1,7 @@
 import type { SnippetRecord } from '../../state/types'
 
 import { filterSnippets } from '../../state/selectors'
+import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ListItem } from './list-item'
@@ -23,11 +24,12 @@ function truncateContent(content: string): string {
 
 export function SnippetPickerModal({ filter, selectedIndex, snippets }: SnippetPickerModalProps) {
   const filtered = filterSnippets(snippets, filter)
+  const help = useModalHelp('modal.snippet-picker')
 
   return (
     <ModalShell
       title="Snippets"
-      help="j/k move, Enter send, n new, e edit, d delete, / filter, Esc cancel."
+      help={help}
       width={uiTokens.modalWidth.xl}
       footer={<ModalFilterBar filter={filter} />}
     >

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

@@ -1,6 +1,8 @@
 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 { theme } from '../theme'
 
@@ -43,7 +45,8 @@ function getModeLabel(focusMode: AppState['focusMode']): string {
 export function StatusBar() {
   const state = useAppStore((s) => s)
   const activeTab = state.tabs.find((tab) => tab.id === state.activeTabId)
-  const model = getStatusBarModel(state, activeTab)
+  const config = useKeymap()
+  const model = getStatusBarModel(state, activeTab, config)
 
   return (
     <box
@@ -60,8 +63,9 @@ export function StatusBar() {
         <text> </text>
         <text fg={theme.text}>{model.left}</text>
       </box>
-      <box width="100%">
+      <box width="100%" flexDirection="row" justifyContent="space-between">
         <text fg={theme.textMuted}>{model.right}</text>
+        <text fg={theme.dim}>v{APP_VERSION}</text>
       </box>
     </box>
   )

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

@@ -1,7 +1,6 @@
-import { useEffect, useState } from 'react'
-
 import type { TabSession } from '../../state/types'
 
+import { useBusySpinner } from '../hooks/use-busy-spinner'
 import { theme } from '../theme'
 
 interface TabItemProps {
@@ -28,9 +27,6 @@ function getStatusColor(status: TabSession['status']): string {
   }
 }
 
-const BUSY_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
-const BUSY_FRAME_INTERVAL_MS = 80
-
 function getIndicator(active: boolean, focused: boolean, inLayout: boolean): string {
   if (active) {
     return focused ? '›' : '•'
@@ -48,16 +44,8 @@ function getIndicatorColor(active: boolean, focused: boolean, inLayout: boolean)
 }
 
 function BusyIndicator() {
-  const [frame, setFrame] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setFrame((prev) => (prev + 1) % BUSY_FRAMES.length)
-    }, BUSY_FRAME_INTERVAL_MS)
-    return () => clearInterval(interval)
-  }, [])
-
-  return <text fg={theme.accent}>{BUSY_FRAMES[frame]} busy</text>
+  const frame = useBusySpinner()
+  return <text fg={theme.accent}>{frame} busy</text>
 }
 
 function ActivityIndicator({ isFocusedInput, tab }: { tab: TabSession; isFocusedInput: boolean }) {

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

@@ -1,3 +1,4 @@
+import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { THEME_IDS, type ThemeId, THEMES } from '../themes'
 import { uiTokens } from '../ui-tokens'
@@ -10,13 +11,9 @@ interface ThemePickerModalProps {
 }
 
 export function ThemePickerModal({ currentThemeId, selectedIndex }: ThemePickerModalProps) {
+  const help = useModalHelp('modal.theme-picker')
   return (
-    <ModalShell
-      title="Select theme"
-      help="j/k move, Enter confirm, Esc cancel."
-      width={uiTokens.modalWidth.md}
-      listGap={0}
-    >
+    <ModalShell title="Select theme" help={help} width={uiTokens.modalWidth.md} listGap={0}>
       {THEME_IDS.map((id, index) => {
         const entry = THEMES[id]
         const active = index === selectedIndex

package/src/ui/components/update-available-modal.tsx

@@ -0,0 +1,42 @@
+import { useModalHelp } from '../keymap-context'
+import { theme } from '../theme'
+import { uiTokens } from '../ui-tokens'
+import { ListItem } from './list-item'
+import { ModalShell } from './modal-shell'
+
+interface UpdateAvailableModalProps {
+  currentVersion: string
+  latestVersion: string
+  selectedIndex: number
+}
+
+const OPTIONS: { label: string }[] = [
+  { label: 'Yes, update now' },
+  { label: 'No, skip this version' },
+]
+
+export function UpdateAvailableModal({
+  currentVersion,
+  latestVersion,
+  selectedIndex,
+}: UpdateAvailableModalProps) {
+  const modalHelp = useModalHelp('modal.update-available')
+  const help = `${currentVersion} → ${latestVersion}  ${modalHelp}`
+  return (
+    <ModalShell title="Update available" help={help} width={uiTokens.modalWidth.md} listGap={1}>
+      <box flexDirection="row" gap={1} marginTop={1}>
+        {OPTIONS.map((option, index) => {
+          const active = index === selectedIndex
+          return (
+            <ListItem
+              key={option.label}
+              active={active}
+              direction="row"
+              title={<text fg={active ? theme.text : theme.textMuted}>{option.label}</text>}
+            />
+          )
+        })}
+      </box>
+    </ModalShell>
+  )
+}

package/src/ui/hooks/use-busy-spinner.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+export const BUSY_FRAMES = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏']
+export const BUSY_FRAME_INTERVAL_MS = 80
+
+export function useBusySpinner(enabled = true): string {
+  const [frame, setFrame] = useState(0)
+
+  useEffect(() => {
+    if (!enabled) return
+    const interval = setInterval(() => {
+      setFrame((prev) => (prev + 1) % BUSY_FRAMES.length)
+    }, BUSY_FRAME_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [enabled])
+
+  return BUSY_FRAMES[frame] ?? BUSY_FRAMES[0] ?? ''
+}

package/src/ui/keymap-context.ts

@@ -0,0 +1,39 @@
+import {
+  getDefaultKeymapConfig,
+  type ModeId,
+  type ResolvedKeymapConfig,
+} from '@brimveyn/aimux-config'
+import { createContext, useContext, useMemo } from 'react'
+
+import { describeBindings } from '../input/keymap/describe-bindings'
+
+const FALLBACK_CONFIG = getDefaultKeymapConfig()
+
+export const KeymapContext = createContext<ResolvedKeymapConfig>(FALLBACK_CONFIG)
+
+export function useKeymap(): ResolvedKeymapConfig {
+  return useContext(KeymapContext)
+}
+
+const HELP_JOINER = '  ·  '
+const MAX_HELP_ENTRIES = 5
+
+/** Build a single-line help string for a mode (used in modal headers and status bar). */
+export function buildHintText(
+  config: ResolvedKeymapConfig,
+  modeId: ModeId,
+  limit: number = MAX_HELP_ENTRIES
+): string {
+  const bindings = describeBindings(config, modeId, {
+    dedupeByDescription: true,
+    withDescriptionOnly: true,
+  })
+  if (bindings.length === 0) return ''
+  const trimmed = bindings.slice(0, limit)
+  return trimmed.map((b) => `${b.keysDisplay} ${b.description ?? ''}`.trim()).join(HELP_JOINER)
+}
+
+export function useModalHelp(modeId: ModeId, limit?: number): string {
+  const config = useKeymap()
+  return useMemo(() => buildHintText(config, modeId, limit), [config, modeId, limit])
+}

package/src/ui/root.tsx

@@ -11,6 +11,8 @@ import { GitCommitModal } from './components/git-commit-modal'
 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'
@@ -20,6 +22,7 @@ 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 { theme } from './theme'
 
 function getCreateSessionFields(modal: ModalState) {
@@ -132,6 +135,14 @@ function renderModal(
       return (
         <ThemePickerModal selectedIndex={modal.selectedIndex} currentThemeId={options.themeId} />
       )
+    case 'update-available':
+      return (
+        <UpdateAvailableModal
+          selectedIndex={modal.selectedIndex}
+          currentVersion={modal.currentVersion}
+          latestVersion={modal.latestVersion}
+        />
+      )
     case 'help':
       return <HelpModal />
     case 'git-commit': {
@@ -203,6 +214,7 @@ export function RootView({
   const customCommands = useAppStore((s) => s.customCommands)
   const sessions = useAppStore((s) => s.sessions)
   const currentSessionId = useAppStore((s) => s.currentSessionId)
+  const sessionBarPosition = useAppStore((s) => s.sessionBar.position)
 
   const activeTab = tabs.find((tab) => tab.id === activeTabId)
   const activeTree = activeTabId ? getTreeForTab(layoutTrees, tabGroupMap, activeTabId) : null
@@ -216,6 +228,7 @@ export function RootView({
       <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
         <GitView />
         <StatusBar />
+        <PendingChordOverlay />
         {renderModal(modal, {
           createSessionFields,
           currentSessionId,
@@ -232,6 +245,7 @@ export function RootView({
 
   return (
     <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
+      {sessionBarPosition === 'top' && <SessionBar />}
       <box flexDirection="row" gap={0} padding={0} flexGrow={1}>
         <Sidebar onTabActivate={onPaneActivate} />
         {activeTree && activeTree.type === 'split' ? (
@@ -279,7 +293,9 @@ export function RootView({
           />
         )}
       </box>
+      {sessionBarPosition === 'bottom' && <SessionBar />}
       <StatusBar />
+      <PendingChordOverlay />
       {renderModal(modal, {
         createSessionFields,
         currentSessionId,

package/src/ui/session-ordering.ts

@@ -0,0 +1,34 @@
+import type { SessionRecord } from '../state/types'
+
+/**
+ * Return sessions in user-facing display order: persisted `order` ascending,
+ * with any missing `order` falling back to `createdAt` ascending.
+ */
+export function orderSessionsForDisplay(sessions: SessionRecord[]): SessionRecord[] {
+  return sessions.slice().sort((a, b) => {
+    const ao = a.order ?? Number.MAX_SAFE_INTEGER
+    const bo = b.order ?? Number.MAX_SAFE_INTEGER
+    if (ao !== bo) return ao - bo
+    return a.createdAt.localeCompare(b.createdAt)
+  })
+}
+
+/**
+ * Move `moveId` to the slot currently held by `intoPositionOfId`, shifting the
+ * displaced id in the opposite direction. Pure; returns a new array. Returns
+ * the input unchanged if either id is missing or both refer to the same slot.
+ */
+export function moveIdToIdPosition(
+  ids: string[],
+  moveId: string,
+  intoPositionOfId: string
+): string[] {
+  if (moveId === intoPositionOfId) return ids
+  const from = ids.indexOf(moveId)
+  const to = ids.indexOf(intoPositionOfId)
+  if (from < 0 || to < 0) return ids
+  const next = ids.slice()
+  next.splice(from, 1)
+  next.splice(to, 0, moveId)
+  return next
+}

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

@@ -1,5 +1,8 @@
+import type { ModeId, ResolvedKeymapConfig } from '@brimveyn/aimux-config'
+
 import type { AppState, TabSession } from '../state/types'
 
+import { buildHintText } from './keymap-context'
 import { abbreviatePath } from './path-format'
 
 export interface StatusBarModel {
@@ -8,6 +11,7 @@ export interface StatusBarModel {
 }
 
 const MAX_TAB_LABEL_LENGTH = 24
+const HINT_LIMIT = 6
 
 function truncateLabel(label: string): string {
   if (label.length <= MAX_TAB_LABEL_LENGTH) {
@@ -25,39 +29,15 @@ function getActiveTabLabel(tab?: TabSession): string {
   return `${truncateLabel(tab.title)} (${tab.status})`
 }
 
-function getNavigationHint(activeTab?: TabSession): string {
-  if (!activeTab) {
-    return 'Ctrl+g sessions  Ctrl+n new  Ctrl+b toggle  Ctrl+h/l resize  ? help'
-  }
-
-  if (activeTab.status === 'disconnected') {
-    return 'Ctrl+r restart restored tab  Ctrl+w close  i focus'
-  }
-
-  return 'Ctrl+g sessions  j/k move  Shift+J/K reorder  Ctrl+r restart  Ctrl+w close  i focus  ? help'
-}
-
-function getInputHint(activeTab?: TabSession): string {
-  if (!activeTab) {
-    return 'Ctrl+n new  no active tab to focus'
-  }
-
-  if (activeTab.status === 'disconnected') {
-    return 'Ctrl+z unfocus  Ctrl+w layout  Ctrl+r restart'
-  }
-
-  return 'Ctrl+z unfocus  Ctrl+w layout  typing goes to active tab'
+function hintForMode(config: ResolvedKeymapConfig, modeId: ModeId): string {
+  return buildHintText(config, modeId, HINT_LIMIT)
 }
 
-function getGitHint(modalType: AppState['modal']['type']): string {
-  if (modalType === 'git-commit') {
-    return 'Tab switch field  Enter newline  Ctrl+Enter commit  Esc cancel'
-  }
-
-  return 'j/k file  Ctrl+d/u page  a stage  d unstage/delete  c commit  p push  Esc exit'
-}
-
-export function getStatusBarModel(state: AppState, activeTab?: TabSession): StatusBarModel {
+export function getStatusBarModel(
+  state: AppState,
+  activeTab: TabSession | undefined,
+  config: ResolvedKeymapConfig
+): StatusBarModel {
   const currentSession = state.currentSessionId
     ? state.sessions.find((session) => session.id === state.currentSessionId)
     : undefined
@@ -73,33 +53,81 @@ export function getStatusBarModel(state: AppState, activeTab?: TabSession): Stat
     case 'terminal-input':
       return {
         left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
-        right: getInputHint(activeTab),
+        right: hintForMode(config, 'terminal-input'),
       }
-    case 'modal':
+    case 'modal': {
+      const modalMode = deriveModalModeId(state.modal.type)
       return {
         left: `${sessionIcon}  ${sessionLabel}`,
-        right: 'j/k move  Enter confirm  n/r/d actions  Esc cancel',
+        right: modalMode ? hintForMode(config, modalMode) : '',
       }
+    }
     case 'layout':
       return {
         left: `${getActiveTabLabel(activeTab)}  ${sessionIcon}  ${sessionLabel}`,
-        right: 'h/j/k/l focus  |/- split  H/L resize  q close  Esc cancel',
+        right: hintForMode(config, 'layout'),
       }
     case 'git':
       return {
         left: `${sessionIcon}  ${sessionLabel}`,
-        right: getGitHint(state.modal.type),
+        right: hintForMode(config, 'git-mode'),
       }
-    case 'command-edit':
+    case 'command-edit': {
+      const commandEditMode = deriveCommandEditModeId(state.modal.type)
       return {
         left: `${sessionIcon}  ${sessionLabel}`,
-        right: state.modal.type === 'git-commit' ? getGitHint('git-commit') : 'Esc cancel',
+        right: commandEditMode ? hintForMode(config, commandEditMode) : '',
       }
+    }
     case 'navigation':
     default:
       return {
         left: `${sessionIcon}  ${sessionLabel}  ${getActiveTabLabel(activeTab)}`,
-        right: getNavigationHint(activeTab),
+        right: hintForMode(config, 'navigation'),
       }
   }
 }
+
+function deriveModalModeId(modalType: AppState['modal']['type']): ModeId | null {
+  switch (modalType) {
+    case 'help':
+      return 'modal.help'
+    case 'new-tab':
+      return 'modal.new-tab'
+    case 'session-picker':
+      return 'modal.session-picker'
+    case 'snippet-picker':
+      return 'modal.snippet-picker'
+    case 'split-picker':
+      return 'modal.split-picker'
+    case 'theme-picker':
+      return 'modal.theme-picker'
+    case 'update-available':
+      return 'modal.update-available'
+    default:
+      return null
+  }
+}
+
+function deriveCommandEditModeId(modalType: AppState['modal']['type']): ModeId | null {
+  switch (modalType) {
+    case 'create-session':
+      return 'modal.create-session'
+    case 'git-commit':
+      return 'modal.git-commit'
+    case 'new-tab':
+      return 'modal.new-tab.command-edit'
+    case 'rename-tab':
+      return 'modal.rename-tab'
+    case 'session-name':
+      return 'modal.session-name'
+    case 'session-picker':
+      return 'modal.session-picker.filtering'
+    case 'snippet-editor':
+      return 'modal.snippet-editor'
+    case 'snippet-picker':
+      return 'modal.snippet-picker.filtering'
+    default:
+      return null
+  }
+}

package/src/update/version-check.ts

@@ -0,0 +1,67 @@
+import { logDebug } from '../debug/input-log'
+
+const NPM_REGISTRY_BASE = 'https://registry.npmjs.org'
+
+export async function getCurrentPackageVersion(): Promise<string> {
+  const { version } = await import('../../package.json')
+  return version
+}
+
+export async function fetchLatestNpmVersion(packageName: string): Promise<string | null> {
+  const debugOverride = process.env.AIMUX_DEBUG_UPDATE_LATEST
+  if (debugOverride) {
+    return debugOverride
+  }
+
+  try {
+    const url = `${NPM_REGISTRY_BASE}/${encodeURIComponent(packageName).replace('%40', '@')}/latest`
+    const controller = new AbortController()
+    const timer = setTimeout(() => controller.abort(), 5_000)
+    const res = await fetch(url, { signal: controller.signal })
+    clearTimeout(timer)
+    if (!res.ok) {
+      logDebug('update.fetchLatest.nonOk', { packageName, status: res.status })
+      return null
+    }
+    const data = (await res.json()) as { version?: unknown }
+    if (typeof data.version !== 'string' || data.version.length === 0) {
+      return null
+    }
+    return data.version
+  } catch (error) {
+    logDebug('update.fetchLatest.error', {
+      error: error instanceof Error ? error.message : String(error),
+      packageName,
+    })
+    return null
+  }
+}
+
+function parseSemver(version: string): number[] | null {
+  const trimmed = version.trim().replace(/^v/, '')
+  const core = trimmed.split(/[-+]/)[0] ?? ''
+  const parts = core.split('.')
+  if (parts.length === 0) return null
+  const numeric: number[] = []
+  for (const part of parts) {
+    const n = Number.parseInt(part, 10)
+    if (!Number.isFinite(n) || n < 0) return null
+    numeric.push(n)
+  }
+  return numeric
+}
+
+export function isNewerVersion(latest: string, current: string): boolean {
+  const a = parseSemver(latest)
+  const b = parseSemver(current)
+  if (!a || !b) return false
+
+  const len = Math.max(a.length, b.length)
+  for (let i = 0; i < len; i++) {
+    const av = a[i] ?? 0
+    const bv = b[i] ?? 0
+    if (av > bv) return true
+    if (av < bv) return false
+  }
+  return false
+}