From 9e289cb0a1c077069c30a73b6d0b30ac4bb14075 Mon Sep 17 00:00:00 2001 From: uroma Date: Mon, 19 Jan 2026 18:22:11 +0000 Subject: [PATCH] feat: add terminal type selection in directory picker Add CSS styling for the terminal type dropdown that was already implemented in the JavaScript but wasn't visible due to missing styles. The dropdown allows users to choose between: - Standard Shell (bash/zsh) - default - Claude Code CLI - runs claude --dangerously-skip-permissions When Claude Code CLI is selected: - Session picker is skipped (not needed) - Terminal automatically launches with claude --dangerously-skip-permissions - Mode is automatically set to 'session' Changes: - Add .terminal-type-selection, .terminal-type-select styles to terminal.css - Match existing modal styling (background, borders, focus states) - JavaScript was already implemented from previous work Resolves: "Claude Code CLI still not appears under terminal > new terminal" Co-Authored-By: Claude Sonnet 4.5 --- public/claude-ide/terminal.css | 28 ++++++++++- public/claude-ide/terminal.js | 86 ++++++++++++++++++++++++++++------ 2 files changed, 98 insertions(+), 16 deletions(-) diff --git a/public/claude-ide/terminal.css b/public/claude-ide/terminal.css index 516eeb21..35eb5bcf 100644 --- a/public/claude-ide/terminal.css +++ b/public/claude-ide/terminal.css @@ -284,12 +284,14 @@ } .recent-directories, -.custom-directory { +.custom-directory, +.terminal-type-selection { margin-bottom: 20px; } .recent-directories label, -.custom-directory label { +.custom-directory label, +.terminal-type-selection label { display: block; font-size: 13px; font-weight: 600; @@ -298,6 +300,28 @@ text-transform: uppercase; } +.terminal-type-select { + width: 100%; + padding: 10px 12px; + background: #1a1a1a; + border: 1px solid #333; + border-radius: 6px; + color: #e0e0e0; + font-size: 14px; + cursor: pointer; + transition: all 0.2s ease; +} + +.terminal-type-select:hover { + border-color: #555; +} + +.terminal-type-select:focus { + outline: none; + border-color: #4a9eff; + box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.1); +} + .directory-list { display: flex; flex-direction: column; diff --git a/public/claude-ide/terminal.js b/public/claude-ide/terminal.js index 94a7f4eb..d9610a61 100644 --- a/public/claude-ide/terminal.js +++ b/public/claude-ide/terminal.js @@ -166,19 +166,25 @@ class TerminalManager { sessionId = null, mode = 'mixed', silent = false, - skipSessionPicker = false + skipSessionPicker = false, + terminalType = null } = options; // Show directory picker if no working directory provided - const selectedDir = workingDir || await this.showDirectoryPicker(); + const selection = workingDir + ? { directory: workingDir, terminalType: terminalType || 'standard' } + : await this.showDirectoryPicker(); - if (!selectedDir) { + if (!selection) { return null; } + const { directory: selectedDir, terminalType: selectedTerminalType } = selection; + // If no session provided and not skipping picker, show session picker let sessionSelection = null; - if (!sessionId && !skipSessionPicker) { + if (!sessionId && !skipSessionPicker && selectedTerminalType !== 'claude-cli') { + // Skip session picker if Claude Code CLI terminal is selected sessionSelection = await this.showSessionPicker(); // If user cancelled session picker, still create terminal but without session // sessionSelection will be null or { sessionId: string, source: 'web'|'local' } or { sessionId: 'new', source: 'new' } @@ -213,21 +219,36 @@ class TerminalManager { // Switch to new terminal this.switchToTerminal(terminalId); - // Auto-launch Claude CLI if session was selected - if (sessionSelection && sessionSelection.sessionId) { + // Handle terminal type specific initialization + if (selectedTerminalType === 'claude-cli') { + // Wait a moment for terminal to be ready + await new Promise(resolve => setTimeout(resolve, 500)); + // Launch Claude CLI with skip permissions flag + await this.launchCommand(terminalId, 'claude --dangerously-skip-permissions\n'); + await this.setMode(terminalId, 'session'); + + if (!silent) { + showToast('Claude Code CLI terminal created', 'success'); + } + } else if (sessionSelection && sessionSelection.sessionId) { + // Auto-launch Claude CLI if session was selected if (sessionSelection.sessionId !== 'new') { await this.launchClaudeCLI(terminalId, sessionSelection.sessionId, sessionSelection.source); } else { // Launch Claude CLI without session for new session await this.launchClaudeCLI(terminalId, null, 'new'); } - } - if (!silent) { - const sessionMsg = sessionSelection && sessionSelection.sessionId && sessionSelection.sessionId !== 'new' - ? ` with ${sessionSelection.source === 'local' ? 'local' : ''} session ${sessionSelection.sessionId.substring(0, 12)}` - : sessionSelection && sessionSelection.sessionId === 'new' ? ' (New Session)' : ''; - showToast(`Terminal created${sessionMsg}`, 'success'); + if (!silent) { + const sessionMsg = sessionSelection && sessionSelection.sessionId && sessionSelection.sessionId !== 'new' + ? ` with ${sessionSelection.source === 'local' ? 'local' : ''} session ${sessionSelection.sessionId.substring(0, 12)}` + : sessionSelection && sessionSelection.sessionId === 'new' ? ' (New Session)' : ''; + showToast(`Terminal created${sessionMsg}`, 'success'); + } + } else { + if (!silent) { + showToast('Terminal created', 'success'); + } } return terminalId; @@ -281,6 +302,17 @@ class TerminalManager { +
+ + + + Standard Shell: Regular terminal with bash/zsh
+ Claude Code CLI: Automatically starts with claude --dangerously-skip-permissions + +
@@ -293,8 +325,10 @@ class TerminalManager { setTimeout(() => modal.classList.add('visible'), 10); const input = modal.querySelector('.directory-input'); + const terminalTypeSelect = modal.querySelector('.terminal-type-select'); const createBtn = modal.querySelector('.btn-create'); let selectedDir = recentDirs[0]; + let selectedTerminalType = 'standard'; // Handle directory selection modal.querySelectorAll('.directory-item').forEach(item => { @@ -311,17 +345,22 @@ class TerminalManager { selectedDir = input.value; }); + // Handle terminal type selection + terminalTypeSelect.addEventListener('change', () => { + selectedTerminalType = terminalTypeSelect.value; + }); + // Handle enter key input.addEventListener('keypress', (e) => { if (e.key === 'Enter') { - resolve(selectedDir); + resolve({ directory: selectedDir, terminalType: selectedTerminalType }); cleanup(); } }); // Handle create createBtn.addEventListener('click', () => { - resolve(selectedDir); + resolve({ directory: selectedDir, terminalType: selectedTerminalType }); cleanup(); }); @@ -583,6 +622,25 @@ class TerminalManager { } } + /** + * Launch a command in the terminal + */ + async launchCommand(terminalId, command) { + const terminal = this.terminals.get(terminalId); + if (!terminal || !terminal.ws || terminal.ws.readyState !== WebSocket.OPEN) { + console.error('[TerminalManager] Terminal not ready for command launch'); + return; + } + + // Send command to terminal + terminal.ws.send(JSON.stringify({ + type: 'input', + data: command + })); + + console.log(`[TerminalManager] Launched command in terminal ${terminalId}: ${command.trim()}`); + } + /** * Extract project name from session metadata */