@brimveyn/aimux 1.3.0 → 1.3.1

package/src/state/reducers/tab-state.ts

@@ -1,5 +1,3 @@
-import type { AppAction, AppState, TabSession } from '../types'
-
 import {
   allLeafIds,
   createGroupId,
@@ -15,6 +13,13 @@ import {
 } from '../layout-tree'
 import { normalizeGroupedTabOrder } from '../session-persistence'
 import { createDefaultTerminalModes } from '../terminal-modes'
+import {
+  type AppAction,
+  type AppState,
+  DEFAULT_SCROLL_INTENT,
+  deriveScrollIntent,
+  type TabSession,
+} from '../types'
 
 const MAX_BUFFER_LENGTH = 50_000
 
@@ -385,6 +390,7 @@ export function reduceTabState(state: AppState, action: AppAction): AppState | n
           buffer: '',
           errorMessage: undefined,
           exitCode: undefined,
+          scrollIntent: DEFAULT_SCROLL_INTENT,
           status: 'starting',
           terminalModes: createDefaultTerminalModes(),
           viewport: undefined,
@@ -404,11 +410,23 @@ export function reduceTabState(state: AppState, action: AppAction): AppState | n
         ...state,
         tabs: updateTab(state.tabs, action.tabId, (tab) => ({
           ...tab,
+          scrollIntent:
+            action.source === 'resize' || action.source === 'switch'
+              ? (tab.scrollIntent ?? DEFAULT_SCROLL_INTENT)
+              : deriveScrollIntent(action.viewport),
           status: tab.status === 'starting' ? 'running' : tab.status,
           terminalModes: action.terminalModes,
           viewport: action.viewport,
         })),
       }
+    case 'set-scroll-intent':
+      return {
+        ...state,
+        tabs: updateTab(state.tabs, action.tabId, (tab) => ({
+          ...tab,
+          scrollIntent: action.intent,
+        })),
+      }
     case 'set-tab-activity':
       return {
         ...state,

package/src/state/session-persistence.ts

@@ -1,5 +1,3 @@
-import type { AppState, TabSession, TabStatus, WorkspaceSnapshotV1 } from './types'
-
 import {
   allLeafIds,
   createGroupId,
@@ -7,6 +5,13 @@ import {
   type LayoutNode,
   pruneLayoutTree,
 } from './layout-tree'
+import {
+  type AppState,
+  DEFAULT_SCROLL_INTENT,
+  type TabSession,
+  type TabStatus,
+  type WorkspaceSnapshotV1,
+} from './types'
 
 export function createEmptyWorkspaceSnapshot(): WorkspaceSnapshotV1 {
   return {
@@ -47,6 +52,7 @@ export function serializeWorkspace(state: AppState): WorkspaceSnapshotV1 {
       errorMessage: tab.errorMessage,
       exitCode: tab.exitCode,
       id: tab.id,
+      scrollIntent: tab.scrollIntent,
       status: tab.status === 'disconnected' ? 'running' : tab.status,
       terminalModes: tab.terminalModes,
       title: tab.title,
@@ -69,6 +75,7 @@ export function restoreTabsFromWorkspace(snapshot: WorkspaceSnapshotV1 | undefin
     errorMessage: tab.errorMessage,
     exitCode: tab.exitCode,
     id: tab.id,
+    scrollIntent: tab.scrollIntent ?? DEFAULT_SCROLL_INTENT,
     status: getDisconnectedStatus(tab.status),
     terminalModes: tab.terminalModes,
     title: tab.title,

package/src/state/types.ts

@@ -26,6 +26,7 @@ export type ModalType =
   | 'help'
   | 'split-picker'
   | 'git-commit'
+  | 'update-available'
   | null
 
 export interface TerminalSpan {
@@ -49,6 +50,16 @@ export interface TerminalSnapshot {
   cursorVisible: boolean
 }
 
+export type ScrollIntent = { kind: 'bottom' } | { absoluteLine: number; kind: 'anchor' }
+
+export const DEFAULT_SCROLL_INTENT: ScrollIntent = { kind: 'bottom' }
+
+export function deriveScrollIntent(viewport: TerminalSnapshot): ScrollIntent {
+  return viewport.viewportY >= viewport.baseY
+    ? { kind: 'bottom' }
+    : { absoluteLine: viewport.viewportY, kind: 'anchor' }
+}
+
 export interface TerminalModeState {
   mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any'
   sendFocusMode: boolean
@@ -66,6 +77,7 @@ export interface PersistedTabSnapshot {
   buffer: string
   viewport?: TerminalSnapshot
   terminalModes: TerminalModeState
+  scrollIntent?: ScrollIntent
   errorMessage?: string
   exitCode?: number
 }
@@ -105,6 +117,7 @@ export interface TabSession {
   buffer: string
   viewport?: TerminalSnapshot
   terminalModes: TerminalModeState
+  scrollIntent?: ScrollIntent
   command: string
   errorMessage?: string
   exitCode?: number
@@ -228,6 +241,12 @@ export interface ModalSnippetEditor extends ModalBase {
   contentBuffer: string
 }
 
+export interface ModalUpdateAvailable extends ModalBase {
+  type: 'update-available'
+  currentVersion: string
+  latestVersion: string
+}
+
 export type DirectoryResultType = 'git-repo' | 'worktree' | 'workspace'
 
 export interface DirectoryResult {
@@ -248,6 +267,7 @@ export type ModalState =
   | ModalCreateSession
   | ModalSnippetEditor
   | ModalGitCommit
+  | ModalUpdateAvailable
 
 export interface LayoutState {
   terminalCols: number
@@ -303,6 +323,7 @@ export type ModalAction =
   | { type: 'open-snippet-editor'; snippetId?: string }
   | { type: 'begin-snippet-filter' }
   | { type: 'open-theme-picker' }
+  | { type: 'open-update-available-modal'; currentVersion: string; latestVersion: string }
 
 // -- Session actions --
 export type SessionAction =
@@ -336,7 +357,9 @@ export type TabAction =
       tabId: string
       viewport: TerminalSnapshot
       terminalModes: TerminalModeState
+      source?: 'resize' | 'scroll' | 'data' | 'switch'
     }
+  | { type: 'set-scroll-intent'; tabId: string; intent: ScrollIntent }
   | { type: 'set-tab-activity'; tabId: string; activity?: TabActivity }
   | { type: 'set-tab-status'; tabId: string; status: TabStatus; exitCode?: number }
   | { type: 'set-tab-error'; tabId: string; message: string }

package/src/state/validation.ts

@@ -55,6 +55,13 @@ function isTerminalSnapshot(value: unknown): value is TerminalSnapshot {
   )
 }
 
+function isScrollIntent(value: unknown): boolean {
+  if (!isObjectRecord(value)) return false
+  if (value.kind === 'bottom') return true
+  if (value.kind === 'anchor') return isFiniteNumber(value.absoluteLine)
+  return false
+}
+
 function isTerminalModeState(value: unknown): value is TerminalModeState {
   return (
     isObjectRecord(value) &&
@@ -125,6 +132,7 @@ export function isWorkspaceSnapshotV1(value: unknown): value is WorkspaceSnapsho
         isString(tab.buffer) &&
         isTerminalModeState(tab.terminalModes) &&
         (tab.viewport === undefined || isTerminalSnapshot(tab.viewport)) &&
+        (tab.scrollIntent === undefined || isScrollIntent(tab.scrollIntent)) &&
         (tab.errorMessage === undefined || isString(tab.errorMessage)) &&
         (tab.exitCode === undefined || isFiniteNumber(tab.exitCode))
     ) &&

package/src/terminal-manager/manager-client.ts

@@ -1,7 +1,12 @@
 import { EventEmitter } from 'node:events'
 import { connect, Socket } from 'node:net'
 
-import type { TerminalModeState, TerminalSnapshot, WorkspaceSnapshotV1 } from '../state/types'
+import type {
+  ScrollIntent,
+  TerminalModeState,
+  TerminalSnapshot,
+  WorkspaceSnapshotV1,
+} from '../state/types'
 
 import { getTerminalManagerSocketPath } from '../daemon/runtime-paths'
 import { logDebug } from '../debug/input-log'
@@ -298,18 +303,29 @@ export class TerminalManagerClient extends EventEmitter<ManagerClientEvents> {
     })
   }
 
-  resize(sessionId: string, cols: number, rows: number): Promise<void> {
+  resize(
+    sessionId: string,
+    cols: number,
+    rows: number,
+    intents?: Record<string, ScrollIntent>
+  ): Promise<void> {
     return this.sendExpectOk({
       id: crypto.randomUUID(),
-      payload: { cols, rows, sessionId },
+      payload: { cols, intents, rows, sessionId },
       type: 'resizeClient',
     })
   }
 
-  resizeTab(sessionId: string, tabId: string, cols: number, rows: number): Promise<void> {
+  resizeTab(
+    sessionId: string,
+    tabId: string,
+    cols: number,
+    rows: number,
+    intent?: ScrollIntent
+  ): Promise<void> {
     return this.sendExpectOk({
       id: crypto.randomUUID(),
-      payload: { cols, rows, sessionId, tabId },
+      payload: { cols, intent, rows, sessionId, tabId },
       type: 'resizeTab',
     })
   }
@@ -330,6 +346,14 @@ export class TerminalManagerClient extends EventEmitter<ManagerClientEvents> {
     })
   }
 
+  reapplyScrollIntent(sessionId: string, tabId: string, intent: ScrollIntent): Promise<void> {
+    return this.sendExpectOk({
+      id: crypto.randomUUID(),
+      payload: { intent, sessionId, tabId },
+      type: 'reapplyScrollIntent',
+    })
+  }
+
   setActiveTab(sessionId: string, tabId: string | null): Promise<void> {
     return this.sendExpectOk({
       id: crypto.randomUUID(),

package/src/terminal-manager/terminal-manager.ts

@@ -166,22 +166,29 @@ export async function runTerminalManager(): Promise<void> {
                 )
                 sendOk(socket, message.id)
                 break
-              case 'resizeClient':
+              case 'resizeClient': {
                 requireNegotiatedVersion(socket, negotiatedVersions)
+                const intentsRecord = message.payload.intents
+                const intentsMap = intentsRecord
+                  ? new Map(Object.entries(intentsRecord))
+                  : undefined
                 sessionManager.resize(
                   message.payload.sessionId,
                   message.payload.cols,
-                  message.payload.rows
+                  message.payload.rows,
+                  intentsMap
                 )
                 sendOk(socket, message.id)
                 break
+              }
               case 'resizeTab':
                 requireNegotiatedVersion(socket, negotiatedVersions)
                 sessionManager.resizeTab(
                   message.payload.sessionId,
                   message.payload.tabId,
                   message.payload.cols,
-                  message.payload.rows
+                  message.payload.rows,
+                  message.payload.intent
                 )
                 sendOk(socket, message.id)
                 break
@@ -199,6 +206,15 @@ export async function runTerminalManager(): Promise<void> {
                 sessionManager.scrollToBottom(message.payload.sessionId, message.payload.tabId)
                 sendOk(socket, message.id)
                 break
+              case 'reapplyScrollIntent':
+                requireNegotiatedVersion(socket, negotiatedVersions)
+                sessionManager.reapplyScrollIntent(
+                  message.payload.sessionId,
+                  message.payload.tabId,
+                  message.payload.intent
+                )
+                sendOk(socket, message.id)
+                break
               case 'setActiveTab':
                 requireNegotiatedVersion(socket, negotiatedVersions)
                 sessionManager.setActiveTab(message.payload.sessionId, message.payload.tabId)

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} />}
     >