@comma-agents/tuiComponents
CommandPalette
Full command palette modal with searchable command list and sub-page navigation stack.
CommandPalette
A modal command palette with a search input and scrollable command list. Supports two kinds of commands: action commands (fire a callback) and page commands (push a sub-page into the palette). Opens with Ctrl+P.
import { CommandPalette } from "@comma-agents/tui";
<CommandPalette
isVisible={isOpen}
onClose={close}
onExitApp={exit}
commands={customCommands}
/>CommandPaletteProps
| Prop | Type | Default | Description |
|---|---|---|---|
isVisible | boolean | -- | Whether the palette is visible |
id | string | -- | Stable Ink focus ID |
onClose | () => void | -- | Dismiss callback |
onExitApp | () => void | -- | Exit app callback (passed to exit command) |
commands | readonly Command[] | Built-in commands | Custom command list |
Command
| Field | Type | Description |
|---|---|---|
id | string | Unique command identifier |
label | string | Display name |
description | string | One-line description |
keywords | readonly string[]? | Extra fuzzy-match keywords |
page | React.ComponentType? | Sub-page component (page command) |
action | CommandAction? | Direct callback (action command) |
A command must have either action or page. Action commands fire immediately and close the palette. Page commands push a sub-component into the navigation stack.
Built-in Commands
| Command | Type | Description |
|---|---|---|
help | Page | Keyboard shortcut reference |
list-providers | Page | Available model providers |
session-picker | Page | Browse and load persisted runs |
settings | Page | User configuration |
Navigation
- Type to filter -- fuzzy-matches against label, description, and keywords
- Up/Down arrows -- move selection
- Enter -- activate selected command
- Esc -- pop sub-page back to home; close palette at home
The palette is typically rendered inside a <Modal> for backdrop dimming.