diff --git a/src/ui-styles.ts b/src/ui-styles.ts index e09f381..82dbb02 100644 --- a/src/ui-styles.ts +++ b/src/ui-styles.ts @@ -451,6 +451,90 @@ const styles = ` opacity: 0.95; } + /* Diff display styles for Edit tool */ + .diff-container { + margin-top: 8px; + border: 1px solid var(--vscode-panel-border); + border-radius: 4px; + overflow: hidden; + } + + .diff-header { + background-color: var(--vscode-panel-background); + padding: 6px 12px; + font-size: 11px; + font-weight: 600; + color: var(--vscode-foreground); + border-bottom: 1px solid var(--vscode-panel-border); + } + + .diff-removed, + .diff-added { + font-family: var(--vscode-editor-font-family); + font-size: 12px; + line-height: 1.4; + } + + .diff-line { + padding: 2px 12px; + white-space: pre-wrap; + word-break: break-word; + } + + .diff-line.removed { + background-color: rgba(244, 67, 54, 0.1); + border-left: 3px solid rgba(244, 67, 54, 0.6); + color: var(--vscode-foreground); + } + + .diff-line.added { + background-color: rgba(76, 175, 80, 0.1); + border-left: 3px solid rgba(76, 175, 80, 0.6); + color: var(--vscode-foreground); + } + + .diff-line.removed::before { + content: ''; + color: rgba(244, 67, 54, 0.8); + font-weight: 600; + margin-right: 8px; + } + + .diff-line.added::before { + content: ''; + color: rgba(76, 175, 80, 0.8); + font-weight: 600; + margin-right: 8px; + } + + .diff-expand-container { + padding: 8px 12px; + text-align: center; + border-top: 1px solid var(--vscode-panel-border); + background-color: var(--vscode-editor-background); + } + + .diff-expand-btn { + background: linear-gradient(135deg, rgba(64, 165, 255, 0.15) 0%, rgba(64, 165, 255, 0.1) 100%); + border: 1px solid rgba(64, 165, 255, 0.3); + color: #40a5ff; + padding: 4px 12px; + border-radius: 4px; + cursor: pointer; + font-size: 11px; + font-weight: 500; + transition: all 0.2s ease; + } + + .diff-expand-btn:hover { + background: linear-gradient(135deg, rgba(64, 165, 255, 0.25) 0%, rgba(64, 165, 255, 0.15) 100%); + border-color: rgba(64, 165, 255, 0.5); + } + + .diff-expand-btn:active { + transform: translateY(1px); + } + .expand-btn { background: linear-gradient(135deg, rgba(64, 165, 255, 0.15) 0%, rgba(64, 165, 255, 0.1) 100%); border: 1px solid rgba(64, 165, 255, 0.3); diff --git a/src/ui.ts b/src/ui.ts index 786974a..bdae887 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -635,7 +635,12 @@ const html = ` contentDiv.innerHTML = todoHtml; } else { // Format raw input with expandable content for long values - contentDiv.innerHTML = formatToolInputUI(data.rawInput); + // Use diff format for Edit tool, regular format for others + if (data.toolName === 'Edit') { + contentDiv.innerHTML = formatEditToolDiff(data.rawInput); + } else { + contentDiv.innerHTML = formatToolInputUI(data.rawInput); + } } inputElement.appendChild(contentDiv); @@ -790,6 +795,95 @@ const html = ` return result; } + function formatEditToolDiff(input) { + if (!input || typeof input !== 'object') { + return formatToolInputUI(input); + } + + // Check if this is an Edit tool (has file_path, old_string, new_string) + if (!input.file_path || !input.old_string || !input.new_string) { + return formatToolInputUI(input); + } + + let result = 'file_path: ' + input.file_path + '\\n\\n'; + + // Create diff view + const oldLines = input.old_string.split('\\n'); + const newLines = input.new_string.split('\\n'); + const allLines = [...oldLines.map(line => ({type: 'removed', content: line})), + ...newLines.map(line => ({type: 'added', content: line}))]; + + const maxLines = 6; + const shouldTruncate = allLines.length > maxLines; + const visibleLines = shouldTruncate ? allLines.slice(0, maxLines) : allLines; + const hiddenLines = shouldTruncate ? allLines.slice(maxLines) : []; + + result += '
'; + result += '
Changes:
'; + + // Create a unique ID for this diff + const diffId = 'diff_' + Math.random().toString(36).substr(2, 9); + + // Show visible lines + result += '
'; + for (const line of visibleLines) { + const prefix = line.type === 'removed' ? '- ' : '+ '; + const cssClass = line.type === 'removed' ? 'removed' : 'added'; + result += '
' + prefix + escapeHtml(line.content) + '
'; + } + result += '
'; + + // Show hidden lines (initially hidden) + if (shouldTruncate) { + result += ''; + + // Add expand button + result += '
'; + result += ''; + result += '
'; + } + + result += '
'; + + // Add other properties if they exist + for (const [key, value] of Object.entries(input)) { + if (key !== 'file_path' && key !== 'old_string' && key !== 'new_string') { + const valueStr = typeof value === 'string' ? value : JSON.stringify(value, null, 2); + result += '\\n' + key + ': ' + valueStr; + } + } + + return result; + } + + function escapeHtml(text) { + const div = document.createElement('div'); + div.textContent = text; + return div.innerHTML; + } + + function toggleDiffExpansion(diffId) { + const hiddenDiv = document.getElementById(diffId + '_hidden'); + const button = document.querySelector('[onclick*="' + diffId + '"]'); + + if (hiddenDiv && button) { + if (hiddenDiv.style.display === 'none') { + hiddenDiv.style.display = 'block'; + button.textContent = 'Show less'; + } else { + hiddenDiv.style.display = 'none'; + const hiddenLines = hiddenDiv.querySelectorAll('.diff-line').length; + button.textContent = 'Show ' + hiddenLines + ' more lines'; + } + } + } + function sendMessage() { const text = messageInput.value.trim(); if (text) {