diff --git a/src/ui-styles.ts b/src/ui-styles.ts index aa3b8f5..e9f7aba 100644 --- a/src/ui-styles.ts +++ b/src/ui-styles.ts @@ -1051,6 +1051,7 @@ const styles = ` color: var(--vscode-foreground); } + /* Slash commands modal */ .slash-commands-info { padding: 12px 16px; @@ -1114,6 +1115,46 @@ const styles = ` opacity: 0.8; } + /* Custom command input */ + .custom-command-item { + cursor: default; + } + + .custom-command-input-container { + display: flex; + align-items: center; + gap: 2px; + margin-top: 4px; + } + + .command-prefix { + font-size: 12px; + color: var(--vscode-foreground); + font-weight: 500; + } + + .custom-command-input { + background-color: var(--vscode-input-background); + border: 1px solid var(--vscode-input-border); + color: var(--vscode-input-foreground); + padding: 2px 6px; + border-radius: 3px; + font-size: 11px; + outline: none; + min-width: 120px; + font-family: var(--vscode-editor-font-family); + } + + .custom-command-input:focus { + border-color: var(--vscode-focusBorder); + box-shadow: 0 0 0 1px var(--vscode-focusBorder); + } + + .custom-command-input::placeholder { + color: var(--vscode-input-placeholderForeground); + opacity: 0.7; + } + .status { padding: 8px 12px; background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%); diff --git a/src/ui.ts b/src/ui.ts index d97cd54..7013d3b 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -250,7 +250,7 @@ const html = ` -

MCP Configuration

+

MCP Configuration (coming soon)

Model Context Protocol (MCP) allows Claude Code to connect to external systems and services for enhanced capabilities like databases, APIs, and tools. @@ -262,6 +262,19 @@ const html = `

+ +

Custom Slash Commands (coming soon)

+
+

+ Add your own custom slash commands that will appear in the commands modal. Define shortcuts for frequently used terminal commands. +

+
+
+
+ + +
+
@@ -458,6 +471,23 @@ const html = `
Enter vim mode for alternating insert and command modes
+
+
⚡
+
+
Custom Command
+
+
+ / + +
+
+
+
@@ -1036,6 +1066,18 @@ const html = ` addMessage('user', \`Executing /\${command} command in terminal. Check the terminal output and return when ready.\`, 'assistant'); } + function handleCustomCommandKeydown(event) { + if (event.key === 'Enter') { + event.preventDefault(); + const customCommand = event.target.value.trim(); + if (customCommand) { + executeSlashCommand(customCommand); + // Clear the input for next use + event.target.value = ''; + } + } + } + function openModelTerminal() { vscode.postMessage({ type: 'openModelTerminal'