core-agent-ide/codex-cli/src/components/help-overlay.tsx
Tomas Cupr 295079cf33
feat: add command history persistence (#152)
This PR adds a command history persistence feature to Codex CLI that:

1. **Stores command history**: Commands are saved to
`~/.codex/history.json` and persist between CLI sessions.
2. **Navigates history**: Users can use the up/down arrow keys to
navigate through command history, similar to a traditional shell.
3. **Filters sensitive data**: Built-in regex patterns prevent commands
containing API keys, passwords, or tokens from being saved.
4. **Configurable**: Added configuration options for history size,
enabling/disabling history, and custom regex patterns for sensitive
content.
5. **New command**: Added `/clearhistory` command to clear command
history.

  ## Code Changes

- Added `src/utils/storage/command-history.ts` with functions for
history management
  - Extended config system to support history settings
  - Updated terminal input components to use persistent history
  - Added help text for the new `/clearhistory` command
  - Added CLAUDE.md file for guidance when working with the codebase

  ## Testing

  - All tests are passing
- Core functionality works with both input components (standard and
multiline)
- History navigation behaves correctly at line boundaries with the
multiline editor
2025-04-17 12:41:54 -07:00

93 lines
2.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { Box, Text, useInput } from "ink";
import React from "react";
/**
* An overlay that lists the available slashcommands and their description.
* The overlay is purely informational and can be dismissed with the Escape
* key. Keeping the implementation extremely small avoids adding any new
* dependencies or complex state handling.
*/
export default function HelpOverlay({
onExit,
}: {
onExit: () => void;
}): JSX.Element {
useInput((input, key) => {
if (key.escape || input === "q") {
onExit();
}
});
return (
<Box
flexDirection="column"
borderStyle="round"
borderColor="gray"
width={80}
>
<Box paddingX={1}>
<Text bold>Available commands</Text>
</Box>
<Box flexDirection="column" paddingX={1} paddingTop={1}>
<Text bold dimColor>
Slashcommands
</Text>
<Text>
<Text color="cyan">/help</Text> show this help overlay
</Text>
<Text>
<Text color="cyan">/model</Text> switch the LLM model insession
</Text>
<Text>
<Text color="cyan">/approval</Text> switch autoapproval mode
</Text>
<Text>
<Text color="cyan">/history</Text> show command &amp; file history
for this session
</Text>
<Text>
<Text color="cyan">/clear</Text> clear screen &amp; context
</Text>
<Text>
<Text color="cyan">/clearhistory</Text> clear command history
</Text>
<Box marginTop={1}>
<Text bold dimColor>
Keyboard shortcuts
</Text>
</Box>
<Text>
<Text color="yellow">Enter</Text> send message
</Text>
<Text>
<Text color="yellow">Ctrl+J</Text> insert newline
</Text>
{/* Re-enable once we re-enable new input */}
{/*
<Text>
<Text color="yellow">Ctrl+X</Text>/<Text color="yellow">Ctrl+E</Text>
&nbsp; open external editor ($EDITOR)
</Text>
*/}
<Text>
<Text color="yellow">Up/Down</Text> scroll prompt history
</Text>
<Text>
<Text color="yellow">
Esc<Text dimColor>(2)</Text>
</Text>{" "}
interrupt current action
</Text>
<Text>
<Text color="yellow">Ctrl+C</Text> quit Codex
</Text>
</Box>
<Box paddingX={1}>
<Text dimColor>esc or q to close</Text>
</Box>
</Box>
);
}