Add command palette with 19 commands and improved keyboard navigation

Implement VSCode-style command palette (Cmd+Shift+P) with comprehensive command organization:
- 19 commands organized into 5 categories: Instance, Session, Agent & Model, Input & Focus, System
- Category-based grouping with proper visual hierarchy
- Keyboard shortcuts displayed for all applicable commands
- Search/filter by command name, description, keywords, or category

Add keyboard shortcuts:
- Cmd+Shift+A: Open agent selector
- Cmd+Shift+M: Open model selector (existing)
- Instance/Session navigation shortcuts (Cmd+[/], Cmd+Shift+[/])

Fix keyboard navigation:
- Model selector now highlights options with arrow keys using data-[highlighted] attribute
- Agent selector properly opens via keyboard shortcut
- Global keyboard handler skips Combobox/Select components to allow native navigation

Improve discoverability:
- Prominent centered Command Palette hint in connection status bar
- Keyboard shortcut hints next to agent and model selectors

Complete task 020-command-palette
This commit is contained in:
Shantur Rathore
2025-10-23 22:32:49 +01:00
parent b06b8104a5
commit 54569b166d
9 changed files with 566 additions and 322 deletions

View File

@@ -102,11 +102,16 @@ export default function AgentSelector(props: AgentSelectorProps) {
</Select.Content>
</Select.Portal>
</Select>
<Show when={availableAgents().length > 1}>
<div class="flex items-center gap-1">
<Show when={availableAgents().length > 1}>
<span class="text-xs text-gray-400">
<Kbd>Tab</Kbd>
</span>
</Show>
<span class="text-xs text-gray-400">
<Kbd>Tab</Kbd>
<Kbd shortcut="cmd+shift+a" />
</span>
</Show>
</div>
</div>
)
}