@brimveyn/aimux 1.2.5 → 1.3.1

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

@@ -1,5 +1,6 @@
 import type { DirectoryResult } from '../../state/types'
 
+import { useModalHelp } from '../keymap-context'
 import { abbreviatePath } from '../path-format'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
@@ -50,13 +51,10 @@ export function CreateSessionModal({
 }: CreateSessionModalProps) {
   const dirActive = activeField === 'directory'
   const nameActive = activeField === 'name'
+  const help = useModalHelp('modal.create-session')
 
   return (
-    <ModalShell
-      title="Create session"
-      help="Tab switch field. Ctrl+n/p nav. Esc cancel."
-      width={uiTokens.modalWidth.xl}
-    >
+    <ModalShell title="Create session" help={help} width={uiTokens.modalWidth.xl}>
       <box flexDirection="column">
         <text fg={dirActive ? theme.text : theme.textMuted}>Search projects</text>
         <InputField

package/src/ui/components/git-commit-modal.tsx

@@ -1,3 +1,4 @@
+import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
@@ -13,13 +14,10 @@ interface GitCommitModalProps {
 export function GitCommitModal({ activeField, body, cursorPos, title }: GitCommitModalProps) {
   const titleActive = activeField === 'title'
   const bodyActive = activeField === 'body'
+  const help = useModalHelp('modal.git-commit')
 
   return (
-    <ModalShell
-      title="Commit"
-      help="Tab switch · ←→ move cursor · Enter newline (body) · Ctrl+Enter commit · Esc cancel"
-      width={uiTokens.modalWidth.xl}
-    >
+    <ModalShell title="Commit" help={help} width={uiTokens.modalWidth.xl}>
       <box flexDirection="column">
         <text fg={titleActive ? theme.text : theme.textMuted}>Title</text>
         <InputField

package/src/ui/components/help-modal.tsx

@@ -1,79 +1,60 @@
+import type { ModeId } from '@brimveyn/aimux-config'
+
+import { describeBindings, groupDescribedBindings } from '../../input/keymap/describe-bindings'
+import { useKeymap, useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { ModalShell } from './modal-shell'
 
-const SECTIONS = [
-  {
-    bindings: [
-      ['j / k', 'Move between tabs'],
-      ['Shift+J / K', 'Reorder tabs'],
-      ['i', 'Focus terminal input'],
-      ['r', 'Rename tab'],
-      ['?', 'Show this help'],
-    ],
-    title: 'Navigation',
-  },
-  {
-    bindings: [
-      ['Ctrl+n', 'New tab'],
-      ['Ctrl+w', 'Close tab'],
-      ['Ctrl+r', 'Restart tab'],
-      ['Ctrl+g', 'Session picker'],
-      ['Ctrl+s', 'Snippet picker'],
-      ['Ctrl+t', 'Theme picker'],
-    ],
-    title: 'Tabs & Sessions',
-  },
-  {
-    bindings: [
-      ['Ctrl+b', 'Toggle sidebar'],
-      ['Ctrl+h / l', 'Resize sidebar'],
-      ['Shift+G', 'Toggle git panel'],
-      ['Ctrl+j / k', 'Resize git panel'],
-    ],
-    title: 'Sidebar',
-  },
-  {
-    bindings: [
-      ['Ctrl+z', 'Back to navigation'],
-      ['Ctrl+w', 'Enter layout mode'],
-      ['Ctrl+b', 'Toggle sidebar'],
-    ],
-    title: 'Terminal Input',
-  },
-  {
-    bindings: [
-      ['|', 'Split vertical'],
-      ['-', 'Split horizontal'],
-      ['h / j / k / l', 'Focus pane'],
-      ['Shift+H/J/K/L', 'Resize pane'],
-      ['q', 'Close pane'],
-      ['Esc', 'Cancel'],
-    ],
-    title: 'Layout Mode (Ctrl+w)',
-  },
-  {
-    bindings: [['Ctrl+c', 'Quit']],
-    title: 'General',
-  },
-] as const
+interface ModeSection {
+  modeId: ModeId
+  title: string
+}
+
+const SECTIONS: ModeSection[] = [
+  { modeId: 'navigation', title: 'Navigation' },
+  { modeId: 'terminal-input', title: 'Terminal input' },
+  { modeId: 'layout', title: 'Layout' },
+  { modeId: 'git-mode', title: 'Git mode' },
+]
+
+const KEYS_COLUMN_WIDTH = 22
 
 export function HelpModal() {
+  const config = useKeymap()
+  const help = useModalHelp('modal.help', 1)
+
   return (
-    <ModalShell title="Keybindings" help="Press Esc to close." width={uiTokens.modalWidth.lg}>
-      {SECTIONS.map((section) => (
-        <box key={section.title} flexDirection="column">
-          <text fg={theme.text}>{section.title}</text>
-          {section.bindings.map(([key, desc]) => (
-            <box key={key} flexDirection="row">
-              <box width={18}>
-                <text fg={theme.accentAlt}> {key}</text>
+    <ModalShell title="Keybindings" help={help} width={uiTokens.modalWidth.lg}>
+      {SECTIONS.map((section) => {
+        const bindings = describeBindings(config, section.modeId, {
+          dedupeByDescription: true,
+          withDescriptionOnly: true,
+        })
+        if (bindings.length === 0) return null
+        const groups = groupDescribedBindings(bindings)
+        return (
+          <box key={section.modeId} flexDirection="column">
+            <text fg={theme.text}>{section.title}</text>
+            {groups.map((group, groupIdx) => (
+              <box
+                key={`${section.modeId}-${group.group ?? 'root'}-${groupIdx}`}
+                flexDirection="column"
+              >
+                {group.group ? <text fg={theme.textMuted}> {group.group}</text> : null}
+                {group.bindings.map((binding) => (
+                  <box key={`${binding.keys}-${binding.description}`} flexDirection="row">
+                    <box width={KEYS_COLUMN_WIDTH}>
+                      <text fg={theme.accentAlt}> {binding.keysDisplay}</text>
+                    </box>
+                    <text fg={theme.textMuted}>{binding.description ?? ''}</text>
+                  </box>
+                ))}
               </box>
-              <text fg={theme.textMuted}>{desc}</text>
-            </box>
-          ))}
-        </box>
-      ))}
+            ))}
+          </box>
+        )
+      })}
     </ModalShell>
   )
 }

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

@@ -3,24 +3,43 @@ import type { ReactNode } from 'react'
 import { theme } from '../theme'
 import { Surface } from './surface'
 
+export type ListItemDirection = 'row' | 'column'
+
 interface ListItemProps {
   active: boolean
+  direction?: ListItemDirection
   leading?: ReactNode
   subtitle?: ReactNode
   title: ReactNode
   trailing?: ReactNode
 }
 
-export function ListItem({ active, leading, subtitle, title, trailing }: ListItemProps) {
+export function ListItem({
+  active,
+  direction = 'column',
+  leading,
+  subtitle,
+  title,
+  trailing,
+}: ListItemProps) {
+  const isRow = direction === 'row'
   return (
-    <Surface tone={active ? 'selected' : 'elevated'} paddingLeft={1} paddingRight={1}>
+    <Surface
+      tone={active ? 'selected' : 'elevated'}
+      paddingLeft={isRow ? 2 : 1}
+      paddingRight={isRow ? 2 : 1}
+    >
       <box flexDirection="column">
         <box flexDirection="row">
-          <text fg={active ? theme.accent : theme.dim}>{active ? '›' : '·'}</text>
-          <text> </text>
+          {isRow ? null : (
+            <>
+              <text fg={active ? theme.accent : theme.dim}>{active ? '›' : '·'}</text>
+              <text> </text>
+            </>
+          )}
           {leading}
           {leading ? <text> </text> : null}
-          <box flexGrow={1}>{title}</box>
+          <box flexGrow={isRow ? 0 : 1}>{title}</box>
           {trailing ? <box>{trailing}</box> : null}
         </box>
         {subtitle ? <box paddingLeft={2}>{subtitle}</box> : null}

package/src/ui/components/new-tab-modal.tsx

@@ -1,4 +1,5 @@
 import { getAllAssistantOptions } from '../../pty/command-registry'
+import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
@@ -14,17 +15,15 @@ interface NewTabModalProps {
 export function NewTabModal({ customCommands, editBuffer, selectedIndex }: NewTabModalProps) {
   const options = getAllAssistantOptions(customCommands)
   const selectedOption = options[selectedIndex]
+  const editingHelp = useModalHelp('modal.new-tab.command-edit')
+  const browsingHelp = useModalHelp('modal.new-tab')
+  const help =
+    editBuffer !== null
+      ? `Editing command for ${selectedOption?.label}. ${editingHelp}`
+      : browsingHelp
 
   return (
-    <ModalShell
-      title="New assistant tab"
-      help={
-        editBuffer !== null
-          ? `Editing command for ${selectedOption?.label}. Enter to confirm, Esc to cancel.`
-          : 'Use j/k or arrows, Enter to confirm, e to edit command, Esc to cancel.'
-      }
-      width={uiTokens.modalWidth.md}
-    >
+    <ModalShell title="New assistant tab" help={help} width={uiTokens.modalWidth.md}>
       {editBuffer !== null ? (
         <InputField active value={editBuffer} />
       ) : (

package/src/ui/components/pending-chord-overlay.tsx

@@ -0,0 +1,28 @@
+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 { theme } from '../theme'
+import { Surface } from './surface'
+
+export function PendingChordOverlay() {
+  const pendingChords = useAppStore((s) => s.pendingChords)
+  const config = useKeymap()
+
+  if (!pendingChords || pendingChords.length === 0) return null
+
+  const leaderChord = parseKeyNotation(config.leader)[0]
+  const display = pendingChords.map((c) => formatChord(c, leaderChord)).join(' ')
+
+  return (
+    <box position="absolute" bottom={2} right={1}>
+      <Surface tone="elevated" paddingLeft={1} paddingRight={1}>
+        <box flexDirection="row">
+          <text fg={theme.textMuted}>pending: </text>
+          <text fg={theme.accent}>{display}</text>
+          <text fg={theme.textMuted}> …</text>
+        </box>
+      </Surface>
+    </box>
+  )
+}

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

@@ -1,14 +1,12 @@
+import { useModalHelp } from '../keymap-context'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
 import { ModalShell } from './modal-shell'
 
 export function SessionNameModal({ title, value }: { title: string; value: string }) {
+  const help = useModalHelp('modal.session-name')
   return (
-    <ModalShell
-      title={title}
-      help="Type a session name. Enter confirm, Esc cancel."
-      width={uiTokens.modalWidth.md}
-    >
+    <ModalShell title={title} help={help} width={uiTokens.modalWidth.md}>
       <InputField active value={value} />
     </ModalShell>
   )

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

@@ -1,6 +1,7 @@
 import type { SessionRecord } from '../../state/types'
 
 import { filterSessions } from '../../state/selectors'
+import { useModalHelp } from '../keymap-context'
 import { abbreviatePath } from '../path-format'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
@@ -47,11 +48,12 @@ export function SessionPickerModal({
   const hasFilter = !!filter
   const showFilteredEmptyState = filtered.length === 0 && sessions.length > 0
   const showInitialEmptyState = filtered.length === 0 && sessions.length === 0
+  const help = useModalHelp('modal.session-picker')
 
   return (
     <ModalShell
       title="Sessions"
-      help="j/k move, Enter resume, n new, r rename, d delete, / filter, Esc cancel."
+      help={help}
       width={uiTokens.modalWidth.lg}
       footer={<ModalFilterBar filter={filter} />}
     >

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

@@ -1,3 +1,4 @@
+import { useModalHelp } from '../keymap-context'
 import { theme } from '../theme'
 import { uiTokens } from '../ui-tokens'
 import { InputField } from './input-field'
@@ -18,11 +19,12 @@ export function SnippetEditorModal({
 }: SnippetEditorModalProps) {
   const nameActive = activeField === 'name'
   const contentActive = activeField === 'content'
+  const help = useModalHelp('modal.snippet-editor')
 
   return (
     <ModalShell
       title={isEditing ? 'Edit snippet' : 'Create snippet'}
-      help="Tab switch field. Enter on content to save. Esc cancel."
+      help={help}
       width={uiTokens.modalWidth.xl}
     >
       <box flexDirection="column">

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/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/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,7 @@ 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 { SessionNameModal } from './components/session-name-modal'
 import { SessionPickerModal } from './components/session-picker-modal'
 import { Sidebar } from './components/sidebar'
@@ -20,6 +21,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 +134,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': {
@@ -216,6 +226,7 @@ export function RootView({
       <box flexDirection="column" width="100%" height="100%" backgroundColor={theme.background}>
         <GitView />
         <StatusBar />
+        <PendingChordOverlay />
         {renderModal(modal, {
           createSessionFields,
           currentSessionId,
@@ -280,6 +291,7 @@ export function RootView({
         )}
       </box>
       <StatusBar />
+      <PendingChordOverlay />
       {renderModal(modal, {
         createSessionFields,
         currentSessionId,