d8dfun/claude-code-chat
1
0
Fork 0
mirror of https://github.com/andrepimenta/claude-code-chat.git synced 2025-12-14 13:19:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Nice always allow ui

Browse Source
This commit is contained in:
andrepimenta
2025-07-08 22:51:52 +01:00
parent 63acf5e7f9
commit ddf83cf760
2 changed files with 42 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/ui-styles.ts
View File

@@ -113,44 +113,7 @@ const styles = `
color: var(--vscode-descriptionForeground); color: var(--vscode-descriptionForeground);
} }
.permission-command {
margin: 8px 0;
padding: 8px;
background-color: var(--vscode-editor-background);
border: 1px solid var(--vscode-panel-border);
border-radius: 4px;
font-family: var(--vscode-editor-font-family);
font-size: 12px;
}
.permission-command code {
color: var(--vscode-editor-foreground);
}
.permission-options {
margin: 12px 0;
padding: 8px 0;
border-top: 1px solid var(--vscode-panel-border);
}
.permission-checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 12px;
}
.permission-checkbox input[type="checkbox"] {
margin: 0;
cursor: pointer;
}
.checkbox-label {
color: var(--vscode-foreground);
cursor: pointer;
line-height: 1.3;
}
.permission-tool { .permission-tool {
font-family: var(--vscode-editor-font-family); font-family: var(--vscode-editor-font-family);
@@ -167,6 +130,7 @@ const styles = `
display: flex; display: flex;
gap: 8px; gap: 8px;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: wrap;
} }
.permission-buttons .btn { .permission-buttons .btn {
@@ -175,6 +139,10 @@ const styles = `
min-width: 70px; min-width: 70px;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
border-radius: 4px;
border: 1px solid;
cursor: pointer;
transition: all 0.2s ease;
} }
.permission-buttons .btn.allow { .permission-buttons .btn.allow {
@@ -198,6 +166,31 @@ const styles = `
border-color: var(--vscode-focusBorder); border-color: var(--vscode-focusBorder);
} }
.permission-buttons .btn.always-allow {
background-color: rgba(0, 122, 204, 0.1);
color: var(--vscode-charts-blue);
border-color: rgba(0, 122, 204, 0.3);
font-weight: 500;
min-width: auto;
padding: 6px 14px;
}
.permission-buttons .btn.always-allow:hover {
background-color: rgba(0, 122, 204, 0.2);
border-color: rgba(0, 122, 204, 0.5);
transform: translateY(-1px);
}
.permission-buttons .btn.always-allow code {
background-color: rgba(0, 0, 0, 0.2);
padding: 2px 4px;
border-radius: 3px;
font-family: var(--vscode-editor-font-family);
font-size: 11px;
color: var(--vscode-editor-foreground);
margin-left: 4px;
}
.permission-decision { .permission-decision {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;

30
src/ui.ts
View File

@@ -1973,9 +1973,15 @@ const html = `<!DOCTYPE html>
const toolName = data.tool || 'Unknown Tool'; const toolName = data.tool || 'Unknown Tool';
// Create command display for Bash tool // Create always allow button text with command styling for Bash
const commandDisplay = toolName === 'Bash' && data.input?.command ? let alwaysAllowText = \`Always allow \${toolName}\`;
\`<div class="permission-command"><code>\${data.input.command}</code></div>\` : ''; let alwaysAllowTooltip = '';
if (toolName === 'Bash' && data.input?.command) {
const command = data.input.command;
const truncatedCommand = command.length > 30 ? command.substring(0, 30) + '...' : command;
alwaysAllowText = \`Always allow <code>\${truncatedCommand}</code>\`;
alwaysAllowTooltip = command.length > 30 ? \`title="\${command}"\` : '';
}
messageDiv.innerHTML = \` messageDiv.innerHTML = \`
<div class="permission-header"> <div class="permission-header">
@@ -1984,16 +1990,10 @@ const html = `<!DOCTYPE html>
</div> </div>
<div class="permission-content"> <div class="permission-content">
<p>Allow <strong>\${toolName}</strong> to execute the tool call above?</p> <p>Allow <strong>\${toolName}</strong> to execute the tool call above?</p>
\${commandDisplay}
<div class="permission-options">
<label class="permission-checkbox">
<input type="checkbox" id="always-allow-\${data.id}" class="always-allow-checkbox">
<span class="checkbox-label">Always allow \${toolName === 'Bash' ? 'this command' : 'this tool'} in this workspace</span>
</label>
</div>
<div class="permission-buttons"> <div class="permission-buttons">
<button class="btn allow" onclick="respondToPermission('\${data.id}', true)">Allow</button> <button class="btn allow" onclick="respondToPermission('\${data.id}', true)">Allow</button>
<button class="btn deny" onclick="respondToPermission('\${data.id}', false)">Deny</button> <button class="btn deny" onclick="respondToPermission('\${data.id}', false)">Deny</button>
<button class="btn always-allow" onclick="respondToPermission('\${data.id}', true, true)" \${alwaysAllowTooltip}>\${alwaysAllowText}</button>
</div> </div>
</div> </div>
\`; \`;
@@ -2002,11 +2002,7 @@ const html = `<!DOCTYPE html>
messagesDiv.scrollTop = messagesDiv.scrollHeight; messagesDiv.scrollTop = messagesDiv.scrollHeight;
} }
function respondToPermission(id, approved) { function respondToPermission(id, approved, alwaysAllow = false) {
// Check if always-allow is checked
const alwaysAllowCheckbox = document.getElementById(\`always-allow-\${id}\`);
const alwaysAllow = alwaysAllowCheckbox?.checked || false;
// Send response back to extension // Send response back to extension
vscode.postMessage({ vscode.postMessage({
type: 'permissionResponse', type: 'permissionResponse',
@@ -2020,7 +2016,6 @@ const html = `<!DOCTYPE html>
if (permissionMsg) { if (permissionMsg) {
const buttons = permissionMsg.querySelector('.permission-buttons'); const buttons = permissionMsg.querySelector('.permission-buttons');
const permissionContent = permissionMsg.querySelector('.permission-content'); const permissionContent = permissionMsg.querySelector('.permission-content');
const options = permissionMsg.querySelector('.permission-options');
let decision = approved ? 'You allowed this' : 'You denied this'; let decision = approved ? 'You allowed this' : 'You denied this';
if (alwaysAllow && approved) { if (alwaysAllow && approved) {
@@ -2030,9 +2025,8 @@ const html = `<!DOCTYPE html>
const emoji = approved ? '✅' : '❌'; const emoji = approved ? '✅' : '❌';
const decisionClass = approved ? 'allowed' : 'denied'; const decisionClass = approved ? 'allowed' : 'denied';
// Hide buttons and options // Hide buttons
buttons.style.display = 'none'; buttons.style.display = 'none';
options.style.display = 'none';
// Add decision div to permission-content // Add decision div to permission-content
const decisionDiv = document.createElement('div'); const decisionDiv = document.createElement('div');