salvacybersec/CodeNomad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add command palette with 19 commands and improved keyboard navigation

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

178
tasks/done/020-command-palette.md Normal file
View File

@@ -0,0 +1,178 @@
---
title: Command Palette ✅
description: Implement VSCode-style command palette with Cmd+Shift+P
status: COMPLETED
completed: 2024-10-23
---
# Implement Command Palette ✅
Built a VSCode-style command palette that opens as a centered modal dialog with 19 commands organized into 5 categories.
---
## ✅ Implementation Summary
### Commands Implemented (19 total)
#### **Instance (4 commands)**
1. ✅ **New Instance** (Cmd+N) - Open folder picker to create new instance
2. ✅ **Close Instance** (Cmd+W) - Stop current instance's server
3. ✅ **Next Instance** (Cmd+]) - Cycle to next instance tab
4. ✅ **Previous Instance** (Cmd+[) - Cycle to previous instance tab
#### **Session (7 commands)**
5. ✅ **New Session** (Cmd+Shift+N) - Create a new parent session
6. ✅ **Close Session** (Cmd+Shift+W) - Close current parent session
7. ✅ **Switch to Logs** (Cmd+Shift+L) - Jump to logs view
8. ✅ **Next Session** (Cmd+Shift+]) - Cycle to next session tab
9. ✅ **Previous Session** (Cmd+Shift+[) - Cycle to previous session tab
10. ✅ **Compact Session** - Summarize and compact current session (/compact API)
11. ✅ **Undo Last Message** - Revert the last message (/undo API)
#### **Agent & Model (5 commands)**
12. ✅ **Next Agent** (Tab) - Cycle to next agent
13. ✅ **Previous Agent** (Shift+Tab) - Cycle to previous agent
14. ✅ **Open Model Selector** (Cmd+Shift+M) - Choose a different model
15. ✅ **Open Agent Selector** - Choose a different agent
16. ✅ **Initialize AGENTS.md** - Create or update AGENTS.md file (/init API)
#### **Input & Focus (1 command)**
17. ✅ **Clear Input** (Cmd+K) - Clear the prompt textarea
#### **System (2 commands)**
18. ✅ **Toggle Thinking Blocks** - Show/hide AI thinking process (placeholder)
19. ✅ **Show Help** - Display keyboard shortcuts and help (placeholder)
---
## ✅ Features Implemented
### Visual Design
- ✅ Modal dialog centered on screen with backdrop overlay
- ✅ ~600px wide with auto height and max height
- ✅ Search/filter input at top
- ✅ Scrollable list of commands below
- ✅ Each command shows: name, description, keyboard shortcut (if any)
- ✅ Category headers for command grouping
- ✅ Dark/light mode support
### Behavior
- ✅ Opens on `Cmd+Shift+P`
- ✅ Closes on `Escape` or clicking outside
- ✅ Search input is auto-focused when opened
- ✅ Filter commands as user types (substring search by label, description, keywords, category)
- ✅ Arrow keys navigate through filtered list
- ✅ Enter executes selected command
- ✅ Mouse click on command also executes it
- ✅ Mouse hover updates selection
- ✅ Closes automatically after command execution
### Command Registry
- ✅ Centralized command registry in `lib/commands.ts`
- ✅ Commands organized by category
- ✅ Keywords for better search
- ✅ Keyboard shortcuts displayed
- ✅ All commands connected to existing actions
### Integration
- ✅ Integrated with keyboard registry
- ✅ Connected to instance/session management
- ✅ Connected to SDK client for API calls
- ✅ Connected to UI selectors (agent, model)
- ✅ State management via `stores/command-palette.ts`
---
## 📁 Files Modified
- `src/App.tsx` - Registered all 19 commands with categories
- `src/components/command-palette.tsx` - Added category grouping and display
- `src/lib/commands.ts` - Already existed with command registry
- `src/stores/command-palette.ts` - Already existed with state management
---
## ✅ Acceptance Criteria
- ✅ Palette opens with `Cmd+Shift+P`
- ✅ Search input is auto-focused
- ✅ 19 commands are listed in 5 categories
- ✅ Typing filters commands (case-insensitive substring match)
- ✅ Arrow keys navigate through list
- ✅ Enter executes selected command
- ✅ Click executes command
- ✅ Escape or click outside closes palette
- ✅ Palette closes after command execution
- ✅ Keyboard shortcuts display correctly
- ✅ Commands execute their intended actions:
- ✅ `/init` calls API
- ✅ `/compact` calls API
- ✅ `/undo` calls API
- ✅ New Session/Instance work
- ✅ Model/Agent selectors open
- ✅ Navigation shortcuts work
- ✅ Works in both light and dark mode
- ✅ Smooth open/close animations
---
## 🎯 Key Implementation Details
### Category Ordering
Commands are grouped and displayed in this order:
1. Instance - Managing workspace folders
2. Session - Managing conversation sessions
3. Agent & Model - AI configuration
4. Input & Focus - Input controls
5. System - System-level settings
### Search Functionality
Search filters by:
- Command label
- Command description
- Keywords
- Category name
### Keyboard Shortcuts
All shortcuts are registered in the keyboard registry and displayed in the palette using the `Kbd` component.
---
## 🚀 Future Enhancements
These can be added post-MVP:
- Fuzzy search algorithm (not just substring)
- Command history (recently used commands first)
- Custom user-defined commands
- Command arguments/parameters
- Command aliases
- Search by keyboard shortcut
- Quick switch between sessions/instances via command palette
- Command icons/emoji
- Command grouping within categories
---
## Notes
- Command palette provides VSCode-like discoverability
- All commands leverage existing keyboard shortcuts and actions
- Categories make it easy to find related commands
- Foundation is in place for adding more commands in the future
- Agent and Model selector commands work by programmatically clicking their triggers

217
tasks/todo/020-command-palette.md
View File

@@ -1,217 +0,0 @@
---
title: Command Palette
description: Implement VSCode-style command palette with Cmd+Shift+P
---
# Implement Command Palette
Build a VSCode-style command palette that opens as a centered modal dialog.
---
## Requirements
### Visual Design
- **Trigger**: Keyboard shortcut `Cmd+Shift+P` (Mac) or `Ctrl+Shift+P` (Windows/Linux)
- **Appearance**: Modal dialog centered on screen with backdrop overlay
- **Size**: ~600px wide, auto height with max height
- **Components**:
- Search/filter input at top
- Scrollable list of commands below
- Each command shows: name, description, keyboard shortcut (if any)
### Behavior
- Opens on `Cmd+Shift+P`
- Closes on `Escape` or clicking outside
- Search input is auto-focused when opened
- Filter commands as user types (fuzzy search preferred)
- Arrow keys navigate through filtered list
- Enter executes selected command
- Mouse click on command also executes it
- Closes automatically after command execution
---
## Commands to Include
### Essential Commands (MVP)
1. **Initialize AGENTS.md** (`/init`)
- Description: "Create or update AGENTS.md file"
- Action: Call `client.session.init()`
2. **Compact Session** (`/compact`)
- Description: "Summarize and compact the current session"
- Action: Call `client.session.summarize()`
3. **Undo Last Message** (`/undo`)
- Description: "Revert the last message"
- Action: Call `client.session.revert()`
4. **Toggle Thinking Blocks** (`/thinking`)
- Description: "Show/hide AI thinking process"
- Action: Toggle UI state (placeholder for now)
5. **Show Help** (`/help`)
- Description: "Display keyboard shortcuts and help"
- Action: Open help modal (placeholder for now)
### Navigation Commands (Trigger Existing Shortcuts)
6. **New Session**
- Description: "Create a new session"
- Shortcut: `Cmd+Shift+N`
- Action: Trigger existing `new-session` keyboard shortcut
7. **Open Model Selector**
- Description: "Choose a different model"
- Shortcut: `Cmd+P`
- Action: Focus model selector input
8. **Open Agent Selector**
- Description: "Choose a different agent"
- Action: Click agent selector to open dropdown
---
## Implementation Details
### File Structure
```
src/
components/
command-palette.tsx # Main command palette component
lib/
commands.ts # Command registry and definitions
stores/
command-palette.ts # State for showing/hiding palette
```
### Command Registry Structure
```typescript
interface Command {
id: string
label: string
description: string
keywords?: string[] // For fuzzy search
shortcut?: KeyboardShortcut
action: () => void | Promise<void>
category?: string // Group commands by category
}
```
### Integration Points
1. **Register global keyboard shortcut** in App.tsx:
```typescript
keyboardRegistry.register({
id: "command-palette",
key: "p",
modifiers: { meta: true, shift: true },
handler: () => setShowCommandPalette(true),
})
```
2. **Pass necessary props** to command palette:
- Current instance ID
- Current session ID
- SDK client reference
- Handler functions for UI actions
3. **Execute commands** based on type:
- API calls: Use SDK client
- UI actions: Call selector focus/click
- Shortcuts: Trigger registered keyboard shortcuts
---
## UI Component Details
### Layout
```
┌──────────────────────────────────────────────────────┐
│ Command Palette │
├──────────────────────────────────────────────────────┤
│ 🔍 Type a command or search... │
├──────────────────────────────────────────────────────┤
│ › Initialize AGENTS.md │
│ Create or update AGENTS.md file │
│ │
│ Compact Session │
│ Summarize and compact the current session │
│ │
│ New Session ⌘⇧N │
│ Create a new session │
│ │
│ Open Model Selector ⌘P │
│ Choose a different model │
└──────────────────────────────────────────────────────┘
```
### Styling
- Use Kobalte Dialog for modal foundation
- Dark/light mode support matching app theme
- Highlight selected command with blue background
- Show keyboard shortcuts right-aligned in gray
- Smooth animations for open/close
### Keyboard Navigation
- `Cmd+Shift+P`: Open palette
- `Escape`: Close palette
- `ArrowUp`: Previous command
- `ArrowDown`: Next command
- `Enter`: Execute selected command
- Type to filter
---
## Acceptance Criteria
- [ ] Palette opens with `Cmd+Shift+P`
- [ ] Search input is auto-focused
- [ ] All 8 commands are listed
- [ ] Typing filters commands (case-insensitive substring match)
- [ ] Arrow keys navigate through list
- [ ] Enter executes selected command
- [ ] Click executes command
- [ ] Escape or click outside closes palette
- [ ] Palette closes after command execution
- [ ] Keyboard shortcuts display correctly (⌘⇧N, ⌘P, etc.)
- [ ] Commands execute their intended actions:
- `/init` calls API
- `/compact` calls API
- `/undo` calls API
- New Session creates a session
- Model/Agent selectors open
- [ ] Works in both light and dark mode
- [ ] Smooth open/close animations
---
## Future Enhancements (Post-MVP)
- Fuzzy search algorithm (not just substring)
- Command history (recently used commands first)
- Command categories/grouping
- Custom user-defined commands
- Command arguments/parameters
- Command aliases
- Search by keyboard shortcut
- Quick switch between sessions/instances
---
## Notes
- This replaces the slash command (`/command`) approach
- Command palette is more discoverable and flexible
- Provides a foundation for adding more commands in the future
- Similar to VSCode Cmd+Shift+P, Sublime Text Cmd+Shift+P, etc.