157449a9ad
Restored from origin/main (b4663fb): - .github/ workflows and issue templates - .gitignore (proper exclusions) - .opencode/agent/web_developer.md - AGENTS.md, BUILD.md, PROGRESS.md - dev-docs/ (9 architecture/implementation docs) - docs/screenshots/ (4 UI screenshots) - images/ (CodeNomad icons) - package-lock.json (dependency lockfile) - tasks/ (25+ project task files) Also restored original source files that were modified: - packages/ui/src/App.tsx - packages/ui/src/lib/logger.ts - packages/ui/src/stores/instances.ts - packages/server/src/server/routes/workspaces.ts - packages/server/src/workspaces/manager.ts - packages/server/src/workspaces/runtime.ts - packages/server/package.json Kept new additions: - Install-*.bat/.sh (enhanced installers) - Launch-*.bat/.sh (new launchers) - README.md (SEO optimized with GLM 4.7)
179 lines
5.4 KiB
Markdown
179 lines
5.4 KiB
Markdown
---
|
|
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
|