hermes-agent/ui-tui/src/components/helpHint.tsx
Brooklyn Nicholson 62fe9fd101 style(desktop,tui): fix all lint/type/formatting issues
Bring apps/desktop and ui-tui to a clean state for typecheck, eslint,
and prettier:

- Run prettier across both trees (printWidth/wrap drift; prettier is not
  CI-enforced for these JS projects, so main had accumulated drift).
- Apply eslint --fix for padding-line-between-statements and perfectionist
  import/export sorting.
- Manual fixes for non-auto-fixable rules:
  - remove unused node:net import in electron/main.cjs (uses Electron net)
  - replace inline `typeof import(...)` annotations with top-level
    `import type * as EnvModule` in two ui-tui test files
  - scoped eslint-disable no-control-regex on intentional sentinel/ANSI
    regexes (mathUnicode.ts, text.ts)
  - resolve react-hooks/exhaustive-deps per-case: correct swapped/missing
    deps, collapse redundant session.* members, and justified disables on
    settings mount-only data-load effects to preserve run-once behavior

No behavior changes; test pass/fail counts are unchanged from the main
baseline.
2026-06-26 01:04:33 -05:00

68 lines
2 KiB
TypeScript

import { Box, Text } from '@hermes/ink'
import { HOTKEYS } from '../content/hotkeys.js'
import type { Theme } from '../theme.js'
const COMMON_COMMANDS: [string, string][] = [
['/help', 'full list of commands + hotkeys'],
['/clear', 'start a new session'],
['/resume', 'switch live or resume past sessions'],
['/details', 'control transcript detail level'],
['/copy', 'copy selection or last assistant message'],
['/quit', 'exit hermes']
]
const HOTKEY_PREVIEW = HOTKEYS.slice(0, 8)
export function HelpHint({ t }: { t: Theme }) {
const labelW = Math.max(...COMMON_COMMANDS.map(([k]) => k.length), ...HOTKEY_PREVIEW.map(([k]) => k.length))
const pad = (s: string) => s + ' '.repeat(Math.max(0, labelW - s.length + 2))
return (
<Box alignItems="flex-start" bottom="100%" flexDirection="column" left={0} position="absolute" right={0}>
<Box
alignSelf="flex-start"
borderColor={t.color.primary}
borderStyle="round"
flexDirection="column"
marginBottom={1}
opaque
paddingX={1}
>
<Text>
<Text bold color={t.color.primary}>
? quick help
</Text>
<Text color={t.color.muted}>{' · type /help for the full panel · backspace to dismiss'}</Text>
</Text>
<Box marginTop={1}>
<Text bold color={t.color.accent}>
Common commands
</Text>
</Box>
{COMMON_COMMANDS.map(([k, v]) => (
<Text key={k}>
<Text color={t.color.label}>{pad(k)}</Text>
<Text color={t.color.muted}>{v}</Text>
</Text>
))}
<Box marginTop={1}>
<Text bold color={t.color.accent}>
Hotkeys
</Text>
</Box>
{HOTKEY_PREVIEW.map(([k, v]) => (
<Text key={k}>
<Text color={t.color.label}>{pad(k)}</Text>
<Text color={t.color.muted}>{v}</Text>
</Text>
))}
</Box>
</Box>
)
}