From b5b7f002e9623a1bfa11a0b2490e5d4212fb8372 Mon Sep 17 00:00:00 2001 From: asipB Date: Sat, 15 Nov 2025 05:09:56 +0100 Subject: [PATCH 1/8] new-ui-checkpoint-restore --- .claude/settings.local.json | 10 +- package-lock.json | 4 +- src/extension.ts | 130 +- src/script.ts | 464 ++++-- src/script.ts.backup | 3016 +++++++++++++++++++++++++++++++++++ src/ui-styles.ts | 1641 ++++++++++++++----- src/ui-styles.ts.backup2 | 2966 ++++++++++++++++++++++++++++++++++ src/ui.ts | 114 +- 8 files changed, 7776 insertions(+), 569 deletions(-) create mode 100644 src/script.ts.backup create mode 100644 src/ui-styles.ts.backup2 diff --git a/.claude/settings.local.json b/.claude/settings.local.json index ba69db5..d880eb4 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -5,9 +5,15 @@ "Bash(grep:*)", "Bash(sed:*)", "Bash(rg:*)", - "Bash(npx tsc:*)" + "Bash(npx tsc:*)", + "Bash(cat:*)", + "Bash(/Users/macbookpro/Desktop/Snet/claude-code-chat/src/script.ts)", + "Bash(/Users/macbookpro/Desktop/Snet/claude-code-chat/src/extension.ts)", + "Bash(/Users/macbookpro/Desktop/Snet/claude-code-chat/src/ui.ts)", + "Bash(npx vsce package)", + "Bash(/Users/macbookpro/Desktop/Snet/claude-code-chat/src/ui-styles.ts)" ], "deny": [] }, "enableAllProjectMcpServers": false -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 82a87fc..eed2a3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "claude-code-chat", - "version": "1.0.0", + "version": "1.0.7", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "claude-code-chat", - "version": "1.0.0", + "version": "1.0.7", "license": "SEE LICENSE IN LICENSE", "devDependencies": { "@types/mocha": "^10.0.10", diff --git a/src/extension.ts b/src/extension.ts index 6e11e5b..e45531b 100644 --- a/src/extension.ts +++ b/src/extension.ts @@ -108,6 +108,7 @@ class ClaudeChatProvider { private _currentSessionId: string | undefined; private _backupRepoPath: string | undefined; private _commits: Array<{ id: string, sha: string, message: string, timestamp: string }> = []; + private _preRestoreCommit: { sha: string, message: string } | undefined; private _conversationsPath: string | undefined; private _permissionRequestsPath: string | undefined; private _permissionWatcher: vscode.FileSystemWatcher | undefined; @@ -252,12 +253,18 @@ class ClaudeChatProvider { case 'sendMessage': this._sendMessageToClaude(message.text, message.planMode, message.thinkingMode); return; + case 'branchFromMessage': + this._branchFromMessage(message.messageIndex); + return; case 'newSession': this._newSession(); return; case 'restoreCommit': this._restoreToCommit(message.commitSha); return; + case 'undoRestore': + this._undoRestore(); + return; case 'getConversationList': this._sendConversationList(); return; @@ -720,8 +727,8 @@ class ClaudeChatProvider { if (content.name === 'TodoWrite' && content.input.todos) { toolInput = '\nTodo List Update:'; for (const todo of content.input.todos) { - const status = todo.status === 'completed' ? 'āœ…' : - todo.status === 'in_progress' ? 'šŸ”„' : 'ā³'; + const status = todo.status === 'completed' ? '[Done]' : + todo.status === 'in_progress' ? '[Active]' : '[Pending]'; toolInput += `\n${status} ${todo.content} (priority: ${todo.priority})`; } } else { @@ -919,7 +926,7 @@ class ClaudeChatProvider { // Send message to webview about the config change this._sendAndSaveMessage({ type: 'configChanged', - data: 'āš™ļø WSL configuration changed. Started a new session.' + data: 'WSL configuration changed. Started a new session.' }); } @@ -1086,8 +1093,19 @@ class ClaudeChatProvider { data: 'Restoring files from backup...' }); - // Restore files directly to workspace using git checkout - await exec(`git --git-dir="${this._backupRepoPath}" --work-tree="${workspacePath}" checkout ${commitSha} -- .`); + // Save current state before restoring + await exec(`git --git-dir="${this._backupRepoPath}" --work-tree="${workspacePath}" add -A`); + const { stdout: currentSha } = await exec(`git --git-dir="${this._backupRepoPath}" --work-tree="${workspacePath}" commit --allow-empty -m "Pre-restore snapshot"`); + const shaMatch = currentSha.match(/\[.*?([a-f0-9]+)\]/); + if (shaMatch) { + this._preRestoreCommit = { + sha: shaMatch[1], + message: 'State before restore' + }; + } + + // Restore files directly to workspace using git reset hard + await exec(`git --git-dir="${this._backupRepoPath}" --work-tree="${workspacePath}" reset --hard ${commitSha}`); vscode.window.showInformationMessage(`Restored to commit: ${commit.message}`); @@ -1095,7 +1113,8 @@ class ClaudeChatProvider { type: 'restoreSuccess', data: { message: `Successfully restored to: ${commit.message}`, - commitSha: commitSha + commitSha: commitSha, + canUndo: true } }); @@ -1109,6 +1128,51 @@ class ClaudeChatProvider { } } + private async _undoRestore(): Promise { + try { + if (!this._preRestoreCommit) { + vscode.window.showErrorMessage('No previous state available to restore.'); + return; + } + + const workspaceFolder = vscode.workspace.workspaceFolders?.[0]; + if (!workspaceFolder || !this._backupRepoPath) { + vscode.window.showErrorMessage('No workspace folder or backup repository available.'); + return; + } + + const workspacePath = workspaceFolder.uri.fsPath; + + this._postMessage({ + type: 'restoreProgress', + data: 'Undoing restore...' + }); + + // Restore to the pre-restore state using git reset hard + await exec(`git --git-dir="${this._backupRepoPath}" --work-tree="${workspacePath}" reset --hard ${this._preRestoreCommit.sha}`); + + vscode.window.showInformationMessage('Successfully undone restore operation.'); + + this._sendAndSaveMessage({ + type: 'undoRestoreSuccess', + data: { + message: 'Successfully undone restore operation' + } + }); + + // Clear the pre-restore commit since we've used it + this._preRestoreCommit = undefined; + + } catch (error: any) { + console.error('Failed to undo restore:', error.message); + vscode.window.showErrorMessage(`Failed to undo restore: ${error.message}`); + this._postMessage({ + type: 'restoreError', + data: `Failed to undo restore: ${error.message}` + }); + } + } + private async _initializeConversations(): Promise { try { const workspaceFolder = vscode.workspace.workspaceFolders?.[0]; @@ -1826,6 +1890,36 @@ class ClaudeChatProvider { void this._saveCurrentConversation(); } + private _branchFromMessage(messageIndex: number): void { + // Find the user message at the specified index + // We need to count user messages to find the right one + let userMessageCount = 0; + let targetIndex = -1; + + for (let i = 0; i < this._currentConversation.length; i++) { + if (this._currentConversation[i].messageType === 'userInput') { + if (userMessageCount === messageIndex) { + targetIndex = i; + break; + } + userMessageCount++; + } + } + + if (targetIndex === -1) { + console.error(`Could not find user message at index ${messageIndex}`); + return; + } + + // Truncate conversation to keep only messages up to and including the target user message + this._currentConversation = this._currentConversation.slice(0, targetIndex + 1); + + // Clear the current session ID to start a new branch + this._currentSessionId = undefined; + + console.log(`Branched conversation from message index ${messageIndex}, kept ${this._currentConversation.length} messages`); + } + private async _saveCurrentConversation(): Promise { if (!this._conversationsPath || this._currentConversation.length === 0) { return; } if (!this._currentSessionId) { return; } @@ -2000,7 +2094,7 @@ class ClaudeChatProvider { // Send stop confirmation message directly to UI and save this._sendAndSaveMessage({ type: 'error', - data: 'ā¹ļø Claude code was stopped.' + data: 'Claude code was stopped.' }); console.log('Claude process termination initiated'); @@ -2082,6 +2176,9 @@ class ClaudeChatProvider { // Small delay to ensure messages are cleared before loading new ones setTimeout(() => { const messages = this._currentConversation; + let userMessageIndex = 0; // Track user message index for branching + let maxUserMessageIndex = -1; // Track the highest user message index + for (let i = 0; i < messages.length; i++) { const message = messages[i]; @@ -2093,17 +2190,32 @@ class ClaudeChatProvider { } } - this._postMessage({ + const postMessage: any = { type: message.messageType, data: message.data - }); + }; + + // Add message index for user messages to enable branching if (message.messageType === 'userInput') { + postMessage.messageIndex = userMessageIndex; + maxUserMessageIndex = userMessageIndex; + userMessageIndex++; try { requestStartTime = new Date(message.timestamp).getTime() } catch (e) { console.log(e) } } + + this._postMessage(postMessage); + } + + // Send message to set the messageIndex counter correctly after loading + if (maxUserMessageIndex >= 0) { + this._postMessage({ + type: 'setMessageIndex', + data: { messageIndex: maxUserMessageIndex + 1 } + }); } // Send updated totals diff --git a/src/script.ts b/src/script.ts index 871f6ab..f94f5d7 100644 --- a/src/script.ts +++ b/src/script.ts @@ -15,6 +15,30 @@ const getScript = (isTelemetryEnabled: boolean) => `` + +export default getScript; \ No newline at end of file diff --git a/src/ui-styles.ts b/src/ui-styles.ts index 6340c50..b721cf5 100644 --- a/src/ui-styles.ts +++ b/src/ui-styles.ts @@ -12,20 +12,22 @@ const styles = ` } .header { - padding: 14px 20px; - border-bottom: 1px solid var(--vscode-panel-border); - background-color: var(--vscode-panel-background); + padding: 12px 16px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%); display: flex; justify-content: space-between; align-items: center; + backdrop-filter: blur(10px); } .header h2 { margin: 0; - font-size: 16px; - font-weight: 500; - color: var(--vscode-foreground); - letter-spacing: -0.3px; + font-size: 14px; + font-weight: 600; + color: rgba(255, 255, 255, 0.95); + letter-spacing: -0.2px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .controls { @@ -35,34 +37,42 @@ const styles = ` } .btn { - background-color: var(--vscode-button-background); - color: var(--vscode-button-foreground); - border: 1px solid var(--vscode-panel-border); + background-color: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(255, 255, 255, 0.1); padding: 6px 12px; - border-radius: 4px; + border-radius: 8px; cursor: pointer; font-size: 12px; - font-weight: 400; + font-weight: 500; transition: all 0.2s ease; display: flex; align-items: center; - gap: 5px; + gap: 6px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } .btn:hover { - background-color: var(--vscode-button-background); - border-color: var(--vscode-focusBorder); + background-color: rgba(255, 255, 255, 0.12); + border-color: rgba(255, 255, 255, 0.15); + transform: translateY(-1px); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .btn:active { + transform: translateY(0); } .btn.outlined { background-color: transparent; - color: var(--vscode-foreground); - border-color: var(--vscode-panel-border); + color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.15); } .btn.outlined:hover { - background-color: var(--vscode-list-hoverBackground); - border-color: var(--vscode-focusBorder); + background-color: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.9); } .btn.stop { @@ -70,7 +80,7 @@ const styles = ` color: var(--vscode-descriptionForeground); border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 6px; - border-radius: 3px; + border-radius: 10px; font-size: 12px; font-weight: 400; opacity: 0.7; @@ -85,26 +95,36 @@ const styles = ` /* Permission Request */ .permission-request { - margin: 4px 12px 20px 12px; - background-color: rgba(252, 188, 0, 0.1); - border: 1px solid rgba(252, 188, 0, 0.3); - border-radius: 8px; - padding: 16px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - animation: slideUp 0.3s ease; + margin: 20px 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + animation: none; } .permission-header { display: flex; align-items: center; - gap: 8px; - margin-bottom: 12px; - font-weight: 600; + gap: 10px; + margin-bottom: 10px; + font-weight: 500; + font-size: 13px; color: var(--vscode-foreground); + opacity: 0.8; } .permission-header .icon { font-size: 16px; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .permission-header .icon svg { + width: 16px; + height: 16px; + stroke-width: 2; } .permission-menu { @@ -117,8 +137,8 @@ const styles = ` border: none; color: var(--vscode-descriptionForeground); cursor: pointer; - padding: 4px 8px; - border-radius: 4px; + padding: 4px 10px; + border-radius: 8px; font-size: 16px; font-weight: bold; transition: all 0.2s ease; @@ -136,7 +156,7 @@ const styles = ` right: 0; background-color: var(--vscode-menu-background); border: 1px solid var(--vscode-menu-border); - border-radius: 6px; + border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; min-width: 220px; @@ -147,8 +167,8 @@ const styles = ` .permission-menu-item { display: flex; align-items: flex-start; - gap: 10px; - padding: 12px 16px; + gap: 6px; + padding: 6px 16px; background: none; border: none; width: 100%; @@ -166,6 +186,15 @@ const styles = ` font-size: 16px; margin-top: 1px; flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .permission-menu-item .menu-icon svg { + width: 16px; + height: 16px; + stroke-width: 2; } .permission-menu-item .menu-content { @@ -189,21 +218,24 @@ const styles = ` .permission-content { font-size: 13px; - line-height: 1.4; + line-height: 1.6; color: var(--vscode-descriptionForeground); + opacity: 0.85; + margin-top: 8px; } .permission-tool { font-family: var(--vscode-editor-font-family); - background-color: var(--vscode-editor-background); - border: 1px solid var(--vscode-panel-border); - border-radius: 4px; - padding: 8px 10px; - margin: 8px 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + margin: 4px 0; font-size: 12px; color: var(--vscode-editor-foreground); + opacity: 0.8; } .permission-buttons { @@ -216,14 +248,14 @@ const styles = ` .permission-buttons .btn { font-size: 12px; - padding: 6px 12px; + padding: 4px 10px; min-width: 70px; text-align: center; display: inline-flex; align-items: center; justify-content: center; height: 28px; - border-radius: 4px; + border-radius: 8px; border: 1px solid; cursor: pointer; transition: all 0.2s ease; @@ -271,7 +303,7 @@ const styles = ` .permission-buttons .btn.always-allow code { background-color: rgba(0, 0, 0, 0.2); padding: 2px 4px; - border-radius: 3px; + border-radius: 10px; font-family: var(--vscode-editor-font-family); font-size: 11px; color: var(--vscode-editor-foreground); @@ -284,9 +316,9 @@ const styles = ` .permission-decision { font-size: 13px; font-weight: 600; - padding: 8px 12px; + padding: 6px 16px; text-align: center; - border-radius: 4px; + border-radius: 8px; margin-top: 8px; } @@ -326,7 +358,7 @@ const styles = ` max-height: 300px; overflow-y: auto; border: 1px solid var(--vscode-panel-border); - border-radius: 6px; + border-radius: 10px; background-color: var(--vscode-input-background); margin-top: 8px; } @@ -362,7 +394,7 @@ const styles = ` background-color: var(--vscode-badge-background); color: var(--vscode-badge-foreground); padding: 3px 6px; - border-radius: 3px; + border-radius: 10px; font-size: 10px; font-weight: 600; text-transform: uppercase; @@ -383,7 +415,7 @@ const styles = ` .permission-command code { background-color: var(--vscode-textCodeBlock-background); padding: 3px 6px; - border-radius: 3px; + border-radius: 10px; font-family: var(--vscode-editor-font-family); color: var(--vscode-textLink-foreground); font-size: 11px; @@ -408,8 +440,8 @@ const styles = ` background-color: transparent; color: var(--vscode-descriptionForeground); border: none; - padding: 4px 8px; - border-radius: 3px; + padding: 4px 10px; + border-radius: 10px; cursor: pointer; font-size: 10px; transition: all 0.2s ease; @@ -425,7 +457,7 @@ const styles = ` } .permissions-empty { - padding: 16px; + padding: 8px; text-align: center; color: var(--vscode-descriptionForeground); font-style: italic; @@ -433,11 +465,16 @@ const styles = ` } .permissions-empty::before { - content: "šŸ”’"; + content: ""; display: block; - font-size: 16px; - margin-bottom: 8px; + width: 24px; + height: 24px; + margin: 0 auto 8px auto; opacity: 0.5; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: center; + background-size: contain; } /* Add Permission Form */ @@ -449,7 +486,7 @@ const styles = ` background-color: transparent; color: var(--vscode-descriptionForeground); border: 1px solid var(--vscode-panel-border); - border-radius: 3px; + border-radius: 10px; padding: 6px 8px; font-size: 11px; cursor: pointer; @@ -465,9 +502,9 @@ const styles = ` .permissions-add-form { margin-top: 8px; - padding: 12px; + padding: 6px; border: 1px solid var(--vscode-panel-border); - border-radius: 6px; + border-radius: 10px; background-color: var(--vscode-input-background); animation: slideDown 0.2s ease; } @@ -494,8 +531,8 @@ const styles = ` background-color: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-panel-border); - border-radius: 3px; - padding: 4px 8px; + border-radius: 10px; + padding: 4px 10px; font-size: 12px; min-width: 100px; height: 24px; @@ -506,8 +543,8 @@ const styles = ` background-color: var(--vscode-input-background); color: var(--vscode-input-foreground); border: 1px solid var(--vscode-panel-border); - border-radius: 3px; - padding: 4px 8px; + border-radius: 10px; + padding: 4px 10px; font-size: 12px; flex-grow: 1; height: 24px; @@ -522,7 +559,7 @@ const styles = ` background-color: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; - border-radius: 3px; + border-radius: 10px; padding: 4px 12px; font-size: 12px; cursor: pointer; @@ -547,7 +584,7 @@ const styles = ` background-color: transparent; color: var(--vscode-foreground); border: 1px solid var(--vscode-panel-border); - border-radius: 3px; + border-radius: 10px; padding: 4px 12px; font-size: 12px; cursor: pointer; @@ -625,6 +662,15 @@ const styles = ` .wsl-alert-icon { font-size: 22px; flex-shrink: 0; + display: inline-flex; + align-items: center; + justify-content: center; + } + + .wsl-alert-icon svg { + width: 22px; + height: 22px; + stroke-width: 2; } .wsl-alert-text { @@ -641,14 +687,14 @@ const styles = ` .wsl-alert-actions { display: flex; - gap: 10px; + gap: 6px; flex-shrink: 0; } .wsl-alert-actions .btn { padding: 6px 14px; font-size: 12px; - border-radius: 6px; + border-radius: 10px; } .wsl-alert-actions .btn:first-child { @@ -670,168 +716,274 @@ const styles = ` .messages { flex: 1; - padding: 10px; + padding: 12px 16px; overflow-y: auto; font-family: var(--vscode-editor-font-family); font-size: var(--vscode-editor-font-size); - line-height: 1.4; + line-height: 1.5; + max-width: 100%; + margin: 0; + width: 100%; + box-sizing: border-box; + } + + @media (max-width: 768px) { + .messages { + padding: 8px 12px; + } + + .message.user, + .message.claude { + padding: 8px 12px; + } + } + + @media (min-width: 1200px) { + .messages { + max-width: 900px; + margin: 0 auto; + } } .message { - margin-bottom: 10px; - padding: 8px; - border-radius: 4px; + margin-bottom: 16px; + padding: 0; + border-radius: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + line-height: 1.6; + font-size: 14px; + transition: none; + backdrop-filter: none; } .message.user { + background-color: rgba(64, 165, 255, 0.1); border: 1px solid rgba(64, 165, 255, 0.2); border-radius: 8px; - color: var(--vscode-editor-foreground); - font-family: var(--vscode-editor-font-family); - position: relative; - overflow: hidden; - } - - .message.user::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #40a5ff 0%, #0078d4 100%); + padding: 10px 14px; + color: rgba(255, 255, 255, 0.95); + margin-bottom: 20px; + max-width: 100%; + box-sizing: border-box; + word-wrap: break-word; + overflow-wrap: break-word; } .message.claude { - border: 1px solid rgba(46, 204, 113, 0.1); + background-color: rgba(46, 204, 113, 0.08); + border: 1px solid rgba(46, 204, 113, 0.15); border-radius: 8px; - color: var(--vscode-editor-foreground); - position: relative; - overflow: hidden; - } - - .message.claude::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%); + padding: 10px 14px; + color: rgba(255, 255, 255, 0.95); + margin-bottom: 20px; + max-width: 100%; + box-sizing: border-box; + word-wrap: break-word; + overflow-wrap: break-word; } .message.error { - border: 1px solid rgba(231, 76, 60, 0.3); - border-radius: 8px; - color: var(--vscode-editor-foreground); - position: relative; - overflow: hidden; - } - - .message.error::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%); + background-color: transparent; + border: none; + color: rgba(231, 76, 60, 0.9); + padding: 0; + margin-bottom: 12px; } .message.system { - background-color: var(--vscode-panel-background); - color: var(--vscode-descriptionForeground); - font-style: italic; + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.5); + font-size: 12px; + padding: 0; + margin-bottom: 10px; } .message.tool { - border: 1px solid rgba(120, 139, 237, 0.12); - border-radius: 8px; - color: var(--vscode-editor-foreground); - position: relative; - overflow: hidden; + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.7); + padding: 0; + margin-bottom: 12px; } - .message.tool::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #7c8bed 0%, #5d6fe1 100%); - } .message.tool-result { - border: 1px solid rgba(28, 192, 140, 0.2); - border-radius: 8px; - color: var(--vscode-editor-foreground); + background-color: transparent; + border: none; + color: rgba(255, 255, 255, 0.8); font-family: var(--vscode-editor-font-family); white-space: pre-wrap; - position: relative; - overflow: hidden; + padding: 0; + margin-bottom: 12px; + margin-top: 4px; } - .message.tool-result::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #1cc08c 0%, #16a974 100%); + .message.tool-result.success { + color: rgba(46, 204, 113, 0.9); } - .message.thinking { - border: 1px solid rgba(186, 85, 211, 0.2); - border-radius: 8px; - color: var(--vscode-editor-foreground); - font-family: var(--vscode-editor-font-family); - font-style: italic; - opacity: 0.9; - position: relative; + .message.tool-result.success .message-header::before { + background-color: rgba(46, 204, 113, 0.8); + } + + /* Terminal Output Styling - Real Terminal Look */ + .message.terminal-output { + background-color: rgba(0, 0, 0, 0.6); + border: 1px solid rgba(255, 255, 255, 0.15); + border-radius: 6px; + padding: 0; + margin-bottom: 16px; + margin-top: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); overflow: hidden; } - .message.thinking::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 4px; - background: linear-gradient(180deg, #ba55d3 0%, #9932cc 100%); + .message.terminal-output.error { + border-color: rgba(244, 67, 54, 0.4); + box-shadow: 0 4px 12px rgba(244, 67, 54, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); } - .tool-header { - display: flex; - align-items: center; - gap: 8px; - margin-bottom: 12px; - padding-bottom: 8px; + .message.terminal-output .message-header { + background: linear-gradient(180deg, rgba(30, 30, 30, 0.95) 0%, rgba(20, 20, 20, 0.95) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.1); + padding: 8px 12px; + margin: 0; } - .tool-icon { - width: 18px; - height: 18px; - border-radius: 4px; - background: linear-gradient(135deg, #7c8bed 0%, #5d6fe1 100%); - display: flex; - align-items: center; - justify-content: center; - font-size: 10px; - color: white; - font-weight: 600; - flex-shrink: 0; - margin-left: 6px; + .message.terminal-output .message-header::before { + background-color: rgba(33, 150, 243, 0.8); + width: 3px; } - .tool-info { - font-weight: 500; + .message.terminal-output.error .message-header::before { + background-color: rgba(244, 67, 54, 0.8); + } + + .message.terminal-output .message-label { + color: rgba(255, 255, 255, 0.95); + font-weight: 600; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .message.terminal-output .message-icon.terminal { + background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0.1) 100%); + color: rgba(33, 150, 243, 0.9); + } + + .terminal-content { + padding: 12px 14px; + background-color: rgba(0, 0, 0, 0.4); + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', 'Fira Code', monospace; + font-size: 13px; + line-height: 1.6; + color: rgba(255, 255, 255, 0.9); + white-space: pre-wrap; + word-wrap: break-word; + overflow-x: auto; + max-height: 600px; + overflow-y: auto; + margin: 0; + } + + .terminal-output-text { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', 'Fira Code', monospace !important; + color: rgba(255, 255, 255, 0.95) !important; + background: transparent !important; + padding: 0 !important; + margin: 0 !important; + white-space: pre-wrap !important; + word-wrap: break-word !important; + line-height: 1.6 !important; + } + + /* Terminal scrollbar styling */ + .terminal-content::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + .terminal-content::-webkit-scrollbar-track { + background: rgba(0, 0, 0, 0.3); + border-radius: 4px; + } + + .terminal-content::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 4px; + } + + .terminal-content::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.3); + } + + .message.thinking { + border: none; + border-radius: 0; + color: rgba(186, 85, 211, 0.7); + font-family: var(--vscode-editor-font-family); + font-style: italic; + opacity: 0.7; + position: relative; + overflow: visible; + padding: 0; + } + + .message.thinking::before { + display: none; + } + + .tool-header { + display: flex; + align-items: center; + gap: 8px; + margin-bottom: 8px; + padding-bottom: 0; + border-bottom: none; + opacity: 0.8; + font-size: 12px; + position: relative; + font-weight: 500; + } + + .tool-header::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + flex-shrink: 0; + background-color: rgba(46, 204, 113, 0.8); + } + + .tool-icon { + width: 14px; + height: 14px; + border-radius: 3px; + background: transparent; + display: flex; + align-items: center; + justify-content: center; + font-size: 10px; + color: rgba(124, 139, 237, 0.7); + font-weight: 500; + flex-shrink: 0; + margin-left: 0; + opacity: 0.6; + } + + .tool-icon svg { + width: 12px; + height: 12px; + stroke-width: 2; + } + + .tool-info { + font-weight: 500; font-size: 13px; color: var(--vscode-editor-foreground); - opacity: 0.9; + opacity: 0.8; } .message-header { @@ -839,9 +991,94 @@ const styles = ` align-items: center; gap: 8px; margin-bottom: 8px; - padding-bottom: 6px; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); + padding-bottom: 0; + border-bottom: none; position: relative; + opacity: 0.6; + } + + .message.user .message-header { + opacity: 1; + margin-bottom: 8px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + /* Status dot indicator */ + .message-header::before { + content: ''; + width: 10px; + height: 10px; + border-radius: 50%; + flex-shrink: 0; + background-color: rgba(255, 255, 255, 0.4); + } + + .message.user .message-header::before { + background-color: rgba(64, 165, 255, 0.8); + } + + .message.claude .message-header { + opacity: 1; + margin-bottom: 8px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + } + + .message.claude .message-header::before { + background-color: rgba(46, 204, 113, 0.8); + } + + .message.error .message-header::before { + background-color: rgba(231, 76, 60, 0.8); + } + + .message.tool .message-header::before { + background-color: rgba(46, 204, 113, 0.8); + } + + .message.thinking .message-header::before { + background-color: rgba(255, 255, 255, 0.4); + } + + .message-action-buttons { + display: flex; + align-items: center; + gap: 2px; + opacity: 0; + transition: opacity 0.2s ease; + } + + .message:hover .message-action-buttons { + opacity: 0.7; + } + + .restore-btn, + .branch-btn { + background: transparent; + border: none; + color: var(--vscode-descriptionForeground); + cursor: pointer; + padding: 1px; + border-radius: 4px; + transition: all 0.2s ease; + display: flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + } + + .restore-btn svg, + .branch-btn svg { + width: 12px; + height: 12px; + } + + .restore-btn:hover, + .branch-btn:hover { + opacity: 1; + background-color: var(--vscode-list-hoverBackground); } .copy-btn { @@ -850,7 +1087,7 @@ const styles = ` color: var(--vscode-descriptionForeground); cursor: pointer; padding: 2px; - border-radius: 3px; + border-radius: 10px; opacity: 0; transition: opacity 0.2s ease; margin-left: auto; @@ -869,66 +1106,190 @@ const styles = ` } .message-icon { - width: 18px; - height: 18px; - border-radius: 3px; + width: 16px; + height: 16px; + border-radius: 4px; display: flex; align-items: center; justify-content: center; - font-size: 10px; - color: white; - font-weight: 600; flex-shrink: 0; - margin-left: 6px; + margin-left: 0; + position: relative; + opacity: 0.7; + } + + .message.user .message-icon { + opacity: 1; + } + + .message-icon svg { + width: 12px; + height: 12px; + stroke-width: 2; } .message-icon.user { background: linear-gradient(135deg, #40a5ff 0%, #0078d4 100%); + color: white; } .message-icon.claude { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); + color: white; } .message-icon.system { background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%); + color: white; } .message-icon.error { background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); + color: white; + } + + .message-icon.success { + background: linear-gradient(135deg, #1cc08c 0%, #16a974 100%); + color: white; + } + + /* Status Badge Styles */ + .status-badge { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px; + border-radius: 12px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + line-height: 1; + } + + .status-badge svg { + width: 12px; + height: 12px; + stroke-width: 2.5; + flex-shrink: 0; + } + + .status-badge.success { + background: rgba(28, 192, 140, 0.15); + color: #1cc08c; + border: 1px solid rgba(28, 192, 140, 0.3); + } + + .status-badge.error { + background: rgba(231, 76, 60, 0.15); + color: #e74c3c; + border: 1px solid rgba(231, 76, 60, 0.3); + } + + .status-badge.info { + background: rgba(64, 165, 255, 0.15); + color: #40a5ff; + border: 1px solid rgba(64, 165, 255, 0.3); + } + + .status-badge.warning { + background: rgba(255, 149, 0, 0.15); + color: #ff9500; + border: 1px solid rgba(255, 149, 0, 0.3); } .message-label { - font-weight: 500; + font-weight: 600; font-size: 12px; - opacity: 0.8; + opacity: 0.7; text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 0.8px; + } + + .message.user .message-label { + opacity: 0.95; } .message-content { - padding-left: 6px; + padding-left: 0; + margin-top: 2px; + } + + .message.user .message-content { + padding-left: 0; + margin-top: 0; + } + + .message-content p { + margin: 0.5em 0; + } + + .message-content p:first-child { + margin-top: 0; + } + + .message-content p:last-child { + margin-bottom: 0; } /* Code blocks generated by markdown parser only */ .message-content pre.code-block { - background-color: var(--vscode-textCodeBlock-background); - border: 1px solid var(--vscode-panel-border); + background-color: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); + border-left: 3px solid rgba(76, 175, 80, 0.6); border-radius: 4px; - padding: 12px; + padding: 8px 12px; margin: 8px 0; overflow-x: auto; - font-family: var(--vscode-editor-font-family); - font-size: 13px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace; + font-size: 12px; line-height: 1.5; white-space: pre; + color: rgba(255, 255, 255, 0.9); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + } + + /* Code blocks in user messages - use boxes */ + .message.user .message-content pre.code-block { + background-color: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(64, 165, 255, 0.3); + border-left: 3px solid rgba(64, 165, 255, 0.6); + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + } + + /* Code blocks in AI/claude messages - no boxes */ + .message.claude .message-content pre.code-block { + background-color: transparent; + border: none; + border-left: none; + padding: 0; + margin: 4px 0; + box-shadow: none; } .message-content pre.code-block code { background: none; border: none; padding: 0; - color: var(--vscode-editor-foreground); + color: inherit; + font-family: inherit; + } + + /* Terminal/Command display styling */ + .tool-input-content code, + .message-content code:not(.code-block code) { + background-color: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(255, 255, 255, 0.15); + border-left: 3px solid rgba(33, 150, 243, 0.6); + border-radius: 4px; + padding: 6px 10px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace; + font-size: 12px; + color: rgba(255, 255, 255, 0.9); + display: inline-block; + word-break: break-all; + max-width: 100%; + box-sizing: border-box; } .code-line { @@ -938,21 +1299,48 @@ const styles = ` /* Code block container and header */ .code-block-container { - margin: 8px 0; - border: 1px solid var(--vscode-panel-border); - border-radius: 4px; - background-color: var(--vscode-textCodeBlock-background); + margin: 10px 0; + border: none; + border-radius: 0; + background-color: rgba(255, 255, 255, 0.03); overflow: hidden; + padding: 0; } .code-block-header { display: flex; justify-content: space-between; align-items: center; - padding: 4px 6px; - background-color: var(--vscode-editor-background); - border-bottom: 1px solid var(--vscode-panel-border); + padding: 6px 10px; + background-color: transparent; + border-bottom: none; + font-size: 11px; + margin-bottom: 0; + opacity: 0.7; + cursor: pointer; + transition: opacity 0.2s ease; + } + + .code-block-header:hover { + opacity: 1; + } + + .code-block-container.collapsed .code-block { + display: none; + } + + .code-block-container.collapsed .code-block-header::after { + content: 'ā–¶'; + margin-left: 8px; font-size: 10px; + opacity: 0.6; + } + + .code-block-container:not(.collapsed) .code-block-header::after { + content: 'ā–¼'; + margin-left: 8px; + font-size: 10px; + opacity: 0.6; } .code-block-language { @@ -969,7 +1357,7 @@ const styles = ` color: var(--vscode-descriptionForeground); cursor: pointer; padding: 4px; - border-radius: 3px; + border-radius: 10px; display: flex; align-items: center; justify-content: center; @@ -982,28 +1370,74 @@ const styles = ` opacity: 1; } - .code-block-container .code-block { - margin: 0; - border: none; - border-radius: 0; - background: none; + .code-block-container .code-block { + margin: 0; + border: none; + border-radius: 0; + background: none; + padding: 8px 12px; + max-height: 400px; + overflow-y: auto; + max-width: 100%; + box-sizing: border-box; + word-wrap: break-word; + overflow-wrap: break-word; + } + + /* Code block containers in user messages - use boxes */ + .message.user .code-block-container { + background-color: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(64, 165, 255, 0.3); + border-left: 3px solid rgba(64, 165, 255, 0.6); + border-radius: 4px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + } + + /* Code block containers in AI/claude messages - no boxes */ + .message.claude .code-block-container { + background-color: transparent; + border: none; + border-left: none; + border-radius: 0; + box-shadow: none; + } + + /* IN/OUT code block sections */ + .code-block-section { + margin: 4px 0; + } + + .code-block-section-label { + font-size: 10px; + font-weight: 500; + opacity: 0.6; + margin-bottom: 2px; + text-transform: uppercase; + letter-spacing: 0.5px; + } + + .code-block-section-content { + font-family: var(--vscode-editor-font-family); + font-size: 12px; + padding: 4px 0; + opacity: 0.9; } - /* Inline code */ - .message-content code { - background-color: var(--vscode-textCodeBlock-background); - border: 1px solid var(--vscode-panel-border); + /* Inline code - only for short inline snippets */ + .message-content code:not(pre code) { + background-color: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 3px; - padding: 2px 4px; - font-family: var(--vscode-editor-font-family); + padding: 2px 6px; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace; font-size: 0.9em; - color: var(--vscode-editor-foreground); + color: rgba(255, 255, 255, 0.9); } .priority-badge { display: inline-block; padding: 2px 6px; - border-radius: 12px; + border-radius: 8px; font-size: 10px; font-weight: 500; text-transform: uppercase; @@ -1030,41 +1464,117 @@ const styles = ` } .tool-input { - padding: 6px; + padding: 0; font-family: var(--vscode-editor-font-family); - font-size: 12px; - line-height: 1.4; + font-size: 13px; + line-height: 1.5; white-space: pre-line; + margin-top: 8px; + max-width: 100%; + box-sizing: border-box; + } + + .tool-input.collapsed .tool-input-content { + display: none; } .tool-input-label { color: var(--vscode-descriptionForeground); font-size: 11px; font-weight: 500; - margin-bottom: 6px; + margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; + opacity: 0.7; + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + gap: 5px; + } + + .tool-input-label::before { + content: 'ā–¶'; + font-size: 9px; + opacity: 0.6; + transition: transform 0.2s ease; + } + + .tool-input:not(.collapsed) .tool-input-label::before { + content: 'ā–¼'; } .tool-input-content { color: var(--vscode-editor-foreground); - opacity: 0.95; + opacity: 0.85; + margin-left: 0; + max-height: 300px; + overflow-y: auto; + max-width: 100%; + box-sizing: border-box; + word-wrap: break-word; + overflow-wrap: break-word; + } + + /* Better command/terminal display in tool inputs */ + .tool-input-content strong { + color: rgba(255, 255, 255, 0.95); + font-weight: 600; + } + + .tool-input-content .diff-file-path { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace; + font-size: 12px; + padding: 6px 10px; + background-color: rgba(0, 0, 0, 0.3); + border-left: 3px solid rgba(76, 175, 80, 0.6); + border-radius: 4px; + margin: 4px 0; + word-break: break-all; + max-width: 100%; + box-sizing: border-box; } /* Diff display styles for Edit tool */ .diff-container { - border: 1px solid var(--vscode-panel-border); - border-radius: 4px; + border: none; + border-radius: 0; overflow: hidden; + margin-top: 6px; + } + + .diff-container.collapsed > div:not(.diff-header):not(.diff-expand-container) { + display: none; + } + + .diff-container.collapsed .diff-expand-container { + display: block; } .diff-header { - background-color: var(--vscode-panel-background); - padding: 6px 12px; + background-color: transparent; + padding: 4px 0; font-size: 11px; - font-weight: 600; + font-weight: 500; color: var(--vscode-foreground); - border-bottom: 1px solid var(--vscode-panel-border); + border-bottom: none; + opacity: 0.7; + margin-bottom: 0; + cursor: pointer; + user-select: none; + display: flex; + align-items: center; + gap: 5px; + } + + .diff-header::before { + content: 'ā–¶'; + font-size: 9px; + opacity: 0.6; + } + + .diff-container:not(.collapsed) .diff-header::before { + content: 'ā–¼'; } .diff-removed, @@ -1075,21 +1585,26 @@ const styles = ` } .diff-line { - padding: 2px 12px; + padding: 1px 0; white-space: pre-wrap; word-break: break-word; + line-height: 1.5; } .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); + background-color: transparent; + border-left: 3px solid rgba(244, 67, 54, 0.5); + color: rgba(244, 67, 54, 0.85); + padding-left: 10px; + margin: 1px 0; } .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); + background-color: transparent; + border-left: 3px solid rgba(76, 175, 80, 0.5); + color: rgba(76, 175, 80, 0.85); + padding-left: 10px; + margin: 1px 0; } .diff-line.removed::before { @@ -1107,75 +1622,86 @@ const styles = ` } .diff-expand-container { - padding: 8px 12px; - text-align: center; - border-top: 1px solid var(--vscode-panel-border); - background-color: var(--vscode-editor-background); + padding: 4px 0; + text-align: left; + border-top: none; + background-color: transparent; + display: none; + } + + .diff-container.collapsed .diff-expand-container { + display: block; } .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; + background: transparent; + border: none; + color: rgba(64, 165, 255, 0.7); + padding: 0; + border-radius: 0; cursor: pointer; font-size: 11px; - font-weight: 500; - transition: all 0.2s ease; + font-weight: 400; + transition: opacity 0.2s ease; + text-decoration: underline; + opacity: 0.7; } .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); + background: transparent; + border: none; + opacity: 1; } .diff-expand-btn:active { - transform: translateY(1px); + transform: none; } /* MultiEdit specific styles */ .single-edit { - margin-bottom: 12px; + margin-bottom: 6px; } .edit-number { - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.15); + background: transparent; + border: none; color: var(--vscode-descriptionForeground); - padding: 4px 8px; - border-radius: 4px; - font-size: 11px; - font-weight: 600; - margin-top: 6px; + padding: 0; + border-radius: 0; + font-size: 10px; + font-weight: 400; + margin-top: 8px; display: inline-block; - text-transform: uppercase; - letter-spacing: 0.5px; + text-transform: none; + letter-spacing: 0; + opacity: 0.6; } .diff-edit-separator { - height: 1px; - background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); - margin: 12px 0; + height: 0; + background: transparent; + margin: 8px 0; } /* File path display styles */ .diff-file-path { - padding: 8px 12px; - border: 1px solid var(--vscode-panel-border); - border-radius: 4px; - font-size: 12px; + padding: 0; + border: none; + border-radius: 0; + font-size: 11px; cursor: pointer; - transition: all 0.2s ease; + transition: opacity 0.2s ease; + opacity: 0.7; } .diff-file-path:hover { - background-color: var(--vscode-list-hoverBackground); - border-color: var(--vscode-focusBorder); + background-color: transparent; + border: none; + opacity: 1; } .diff-file-path:active { - transform: translateY(1px); + transform: none; } .file-path-short, @@ -1183,85 +1709,88 @@ const styles = ` font-family: var(--vscode-editor-font-family); color: var(--vscode-foreground); font-weight: 500; + background-color: rgba(255, 255, 255, 0.05); + padding: 2px 6px; + border-radius: 3px; + display: inline-block; } .file-path-truncated { display: inline-flex; align-items: center; - gap: 6px; + gap: 4px; cursor: pointer; - transition: all 0.2s ease; - padding: 2px 4px; - border-radius: 3px; + transition: opacity 0.2s ease; + padding: 0; + border-radius: 0; + opacity: 0.7; } .file-path-truncated .file-icon { - font-size: 14px; - opacity: 0.7; + font-size: 11px; + opacity: 0.6; transition: opacity 0.2s ease; } .file-path-truncated:hover { color: var(--vscode-textLink-foreground); - background-color: var(--vscode-list-hoverBackground); + background-color: transparent; + opacity: 1; } .file-path-truncated:hover .file-icon { - opacity: 1; + opacity: 0.8; } .file-path-truncated:active { - transform: translateY(1px); + transform: none; } .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 8px; - border-radius: 4px; + background: transparent; + border: none; + color: rgba(64, 165, 255, 0.7); + padding: 0; + border-radius: 0; cursor: pointer; font-size: 11px; - font-weight: 500; - margin-left: 6px; + font-weight: 400; + margin-left: 4px; display: inline-block; - transition: all 0.2s ease; + transition: opacity 0.2s ease; + text-decoration: underline; + opacity: 0.7; } .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); - transform: translateY(-1px); + background: transparent; + border: none; + opacity: 1; + transform: none; } .expanded-content { - margin-top: 8px; - padding: 12px; - background: rgba(255, 255, 255, 0.03); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 6px; + margin-top: 4px; + padding: 0; + background: transparent; + border: none; + border-radius: 0; position: relative; } .expanded-content::before { - content: ''; - position: absolute; - left: 0; - top: 0; - bottom: 0; - width: 3px; - background: linear-gradient(180deg, #40a5ff 0%, #0078d4 100%); - border-radius: 0 0 0 6px; + display: none; } .expanded-content pre { margin: 0; white-space: pre-wrap; word-wrap: break-word; + opacity: 0.8; } .input-container { - padding: 10px; + padding: 6px; border-top: 1px solid var(--vscode-panel-border); background-color: var(--vscode-panel-background); display: flex; @@ -1271,7 +1800,7 @@ const styles = ` .input-modes { display: flex; - gap: 16px; + gap: 8px; align-items: center; padding-bottom: 5px; font-size: 9.5px; @@ -1332,35 +1861,38 @@ const styles = ` .textarea-container { display: flex; - gap: 10px; + gap: 6px; align-items: flex-end; } .textarea-wrapper { flex: 1; - background-color: var(--vscode-input-background); - border: 1px solid var(--vscode-input-border); + background-color: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; overflow: hidden; + transition: border-color 0.2s ease, background-color 0.2s ease; } .textarea-wrapper:focus-within { - border-color: var(--vscode-focusBorder); + border-color: rgba(255, 255, 255, 0.15); + background-color: rgba(255, 255, 255, 0.05); } .input-field { width: 100%; box-sizing: border-box; background-color: transparent; - color: var(--vscode-input-foreground); + color: rgba(255, 255, 255, 0.9); border: none; - padding: 12px; + padding: 8px 10px; outline: none; - font-family: var(--vscode-editor-font-family); - min-height: 68px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + min-height: 40px; line-height: 1.4; overflow-y: hidden; resize: none; + font-size: 12px; } .input-field:focus { @@ -1369,7 +1901,7 @@ const styles = ` } .input-field::placeholder { - color: var(--vscode-input-placeholderForeground); + color: rgba(255, 255, 255, 0.4); border: none; outline: none; } @@ -1395,7 +1927,7 @@ const styles = ` color: var(--vscode-foreground); border: none; padding: 3px 7px; - border-radius: 4px; + border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 500; @@ -1416,7 +1948,7 @@ const styles = ` color: var(--vscode-foreground); border: none; padding: 3px 7px; - border-radius: 4px; + border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 500; @@ -1438,7 +1970,7 @@ const styles = ` color: var(--vscode-foreground); border: none; padding: 4px 6px; - border-radius: 4px; + border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; @@ -1455,7 +1987,7 @@ const styles = ` color: var(--vscode-foreground); border: none; padding: 4px; - border-radius: 4px; + border-radius: 8px; cursor: pointer; display: flex; align-items: center; @@ -1471,22 +2003,28 @@ const styles = ` } .send-btn { - background-color: var(--vscode-button-background); + background: linear-gradient(135deg, var(--vscode-button-background) 0%, var(--vscode-button-hoverBackground) 100%); color: var(--vscode-button-foreground); border: none; - padding: 3px 7px; - border-radius: 4px; + padding: 6px 14px; + border-radius: 8px; cursor: pointer; - font-size: 11px; - font-weight: 500; + font-size: 12px; + font-weight: 600; transition: all 0.2s ease; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); } .send-btn div { display: flex; align-items: center; justify-content: center; - gap: 2px; + gap: 6px; + } + + .send-btn svg { + width: 14px; + height: 14px; } .send-btn span { @@ -1494,20 +2032,28 @@ const styles = ` } .send-btn:hover { - background-color: var(--vscode-button-hoverBackground); + background: linear-gradient(135deg, var(--vscode-button-hoverBackground) 0%, var(--vscode-button-background) 100%); + transform: translateY(-1px); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } + + .send-btn:active { + transform: translateY(0); } .send-btn:disabled { opacity: 0.5; cursor: not-allowed; + transform: none; + box-shadow: none; } .secondary-button { background-color: var(--vscode-button-secondaryBackground, rgba(128, 128, 128, 0.2)); color: var(--vscode-button-secondaryForeground, var(--vscode-foreground)); - border: 1px solid var(--vscode-panel-border); - padding: 6px 12px; - border-radius: 4px; + border: 1px solid var(--vscode-panel-border); + padding: 4px 10px; + border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 500; @@ -1533,22 +2079,22 @@ const styles = ` font-weight: 500; background-color: rgba(255, 99, 71, 0.08); border: 1px solid rgba(255, 99, 71, 0.2); - padding: 8px 12px; + padding: 6px 16px; margin: 4px 4px; - border-radius: 4px; + border-radius: 8px; animation: slideDown 0.3s ease; } .yolo-suggestion { margin-top: 12px; - padding: 12px; + padding: 6px; background-color: rgba(0, 122, 204, 0.1); border: 1px solid rgba(0, 122, 204, 0.3); - border-radius: 6px; + border-radius: 10px; display: flex; align-items: center; justify-content: space-between; - gap: 12px; + gap: 8px; } .yolo-suggestion-text { @@ -1561,8 +2107,8 @@ const styles = ` background-color: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; - border-radius: 4px; - padding: 6px 12px; + border-radius: 8px; + padding: 4px 10px; font-size: 11px; cursor: pointer; transition: background-color 0.2s ease; @@ -1590,7 +2136,7 @@ const styles = ` .file-picker-content { background-color: var(--vscode-editor-background); border: 1px solid var(--vscode-panel-border); - border-radius: 4px; + border-radius: 8px; width: 400px; max-height: 500px; display: flex; @@ -1599,7 +2145,7 @@ const styles = ` } .file-picker-header { - padding: 12px; + padding: 6px; border-bottom: 1px solid var(--vscode-panel-border); display: flex; flex-direction: column; @@ -1616,7 +2162,7 @@ const styles = ` color: var(--vscode-input-foreground); border: 1px solid var(--vscode-input-border); padding: 6px 8px; - border-radius: 3px; + border-radius: 10px; outline: none; font-size: 13px; } @@ -1634,9 +2180,9 @@ const styles = ` .file-item { display: flex; align-items: center; - padding: 8px 12px; + padding: 6px 16px; cursor: pointer; - border-radius: 3px; + border-radius: 10px; font-size: 13px; gap: 8px; } @@ -1673,7 +2219,7 @@ const styles = ` .file-thumbnail { width: 32px; height: 32px; - border-radius: 4px; + border-radius: 8px; overflow: hidden; background-color: var(--vscode-editor-background); border: 1px solid var(--vscode-panel-border); @@ -1716,7 +2262,7 @@ const styles = ` } .tools-modal-header { - padding: 16px 20px; + padding: 8px 20px; border-bottom: 1px solid var(--vscode-panel-border); display: flex; justify-content: space-between; @@ -1732,7 +2278,7 @@ const styles = ` .tools-modal-header span { font-weight: 600; - font-size: 14px; + font-size: 12px; color: var(--vscode-foreground); } @@ -1746,7 +2292,7 @@ const styles = ` } .tools-beta-warning { - padding: 12px 16px; + padding: 6px 16px; background-color: var(--vscode-notifications-warningBackground); color: var(--vscode-notifications-warningForeground); font-size: 12px; @@ -1754,7 +2300,7 @@ const styles = ` } .tools-list { - padding: 20px; + padding: 6px; max-height: 400px; overflow-y: auto; } @@ -1780,16 +2326,16 @@ const styles = ` } #mcpModal .mcp-add-form { - padding: 12px; + padding: 6px; } .tool-item { display: flex; align-items: flex-start; - gap: 12px; - padding: 16px 0; + gap: 8px; + padding: 8px 0; cursor: pointer; - border-radius: 6px; + border-radius: 10px; transition: background-color 0.2s ease; } @@ -1799,7 +2345,7 @@ const styles = ` .tool-item:hover { background-color: var(--vscode-list-hoverBackground); - padding: 16px 12px; + padding: 8px 12px; margin: 0 -12px; } @@ -1824,7 +2370,7 @@ const styles = ` /* Model selection specific styles */ .model-explanatory-text { - padding: 20px; + padding: 6px; padding-bottom: 0px; font-size: 12px; color: var(--vscode-descriptionForeground); @@ -1979,15 +2525,15 @@ const styles = ` background-color: var(--vscode-button-background); color: var(--vscode-button-foreground); border: 1px solid var(--vscode-panel-border); - padding: 6px 12px; - border-radius: 4px; + padding: 4px 10px; + border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 400; transition: all 0.2s ease; display: inline-flex; align-items: center; - gap: 5px; + gap: 8px; } .confirm-btn:hover { @@ -1997,7 +2543,7 @@ const styles = ` /* Slash commands modal */ .slash-commands-search { - padding: 16px 20px; + padding: 8px 20px; border-bottom: 1px solid var(--vscode-panel-border); position: sticky; top: 0; @@ -2009,7 +2555,7 @@ const styles = ` display: flex; align-items: center; border: 1px solid var(--vscode-input-border); - border-radius: 6px; + border-radius: 10px; background-color: var(--vscode-input-background); transition: all 0.2s ease; position: relative; @@ -2030,13 +2576,13 @@ const styles = ` color: var(--vscode-button-secondaryForeground); font-size: 13px; font-weight: 600; - border-radius: 4px 0 0 4px; + border-radius: 8px 0 0 4px; border-right: 1px solid var(--vscode-input-border); } .slash-commands-search input { flex: 1; - padding: 8px 12px; + padding: 6px 16px; border: none !important; background: transparent; color: var(--vscode-input-foreground); @@ -2059,7 +2605,7 @@ const styles = ` display: flex; align-items: center; border: 1px solid var(--vscode-input-border); - border-radius: 6px; + border-radius: 10px; background-color: var(--vscode-input-background); transition: all 0.2s ease; width: 100%; @@ -2081,7 +2627,7 @@ const styles = ` color: var(--vscode-button-secondaryForeground); font-size: 12px; font-weight: 600; - border-radius: 4px 0 0 4px; + border-radius: 8px 0 0 4px; border-right: 1px solid var(--vscode-input-border); } @@ -2090,21 +2636,21 @@ const styles = ` } .slash-commands-section:last-child { - margin-bottom: 16px; + margin-bottom: 8px; } .slash-commands-section h3 { margin: 16px 20px 12px 20px; - font-size: 14px; + font-size: 12px; font-weight: 600; color: var(--vscode-foreground); } .slash-commands-info { - padding: 12px 20px; + padding: 6px 20px; background-color: rgba(255, 149, 0, 0.1); border: 1px solid rgba(255, 149, 0, 0.2); - border-radius: 4px; + border-radius: 8px; margin: 0 20px 16px 20px; } @@ -2139,14 +2685,14 @@ const styles = ` .add-snippet-form { background-color: var(--vscode-editor-background); border: 1px solid var(--vscode-panel-border); - border-radius: 6px; - padding: 16px; + border-radius: 10px; + padding: 8px; margin: 8px 0; animation: slideDown 0.2s ease; } .add-snippet-form .form-group { - margin-bottom: 12px; + margin-bottom: 6px; } .add-snippet-form label { @@ -2161,7 +2707,7 @@ const styles = ` width: 100%; padding: 6px 8px; border: 1px solid var(--vscode-input-border); - border-radius: 3px; + border-radius: 10px; background-color: var(--vscode-input-background); color: var(--vscode-input-foreground); font-size: 12px; @@ -2231,7 +2777,7 @@ const styles = ` color: var(--vscode-descriptionForeground); cursor: pointer; padding: 4px; - border-radius: 3px; + border-radius: 10px; font-size: 12px; transition: all 0.2s ease; opacity: 0.7; @@ -2252,9 +2798,9 @@ const styles = ` .slash-command-item { display: flex; align-items: center; - gap: 12px; - padding: 10px 14px; - border-radius: 4px; + gap: 8px; + padding: 6px 14px; + border-radius: 8px; cursor: pointer; transition: all 0.15s ease; border: 1px solid transparent; @@ -2271,6 +2817,15 @@ const styles = ` min-width: 20px; text-align: center; opacity: 0.8; + display: flex; + align-items: center; + justify-content: center; + } + + .slash-command-icon svg { + width: 16px; + height: 16px; + stroke-width: 2; } .slash-command-content { @@ -2325,7 +2880,7 @@ const styles = ` } .status { - padding: 8px 12px; + padding: 6px 16px; background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%); color: #e1e1e1; font-size: 12px; @@ -2378,8 +2933,8 @@ const styles = ` margin-left: 16px; background-color: var(--vscode-badge-background); color: var(--vscode-badge-foreground); - padding: 4px 8px; - border-radius: 12px; + padding: 4px 10px; + border-radius: 8px; font-size: 11px; font-weight: 500; display: flex; @@ -2406,7 +2961,7 @@ const styles = ` font-size: 12px; color: var(--vscode-descriptionForeground); padding: 2px 6px; - border-radius: 4px; + border-radius: 8px; background-color: var(--vscode-badge-background); border: 1px solid var(--vscode-panel-border); } @@ -2488,41 +3043,278 @@ const styles = ` line-height: 1.2; } - .restore-container { + /* Todo List Styles - Compact Checklist Design */ + .todo-list-container { + margin: 8px 0; + background-color: transparent; + border: none; + border-radius: 0; + padding: 0; + } + + .todo-list-header { + display: none; + } + + .todo-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 4px; + } + + .todo-item { + display: flex; + align-items: center; + gap: 8px; + padding: 4px 0; + border-radius: 0; + background-color: transparent; + border: none; + transition: none; + line-height: 1.4; + font-size: 12px; + } + + .todo-item:hover { + background-color: transparent; + border-color: transparent; + transform: none; + } + + .todo-item.pending { + border-left: none; + } + + .todo-item.in-progress { + border-left: none; + } + + .todo-item.completed { + border-left: none; + opacity: 0.6; + } + + .todo-checkbox-wrapper { + width: 14px; + height: 14px; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + margin-top: 0; + border-radius: 3px; + transition: none; + } + + .todo-item.pending .todo-checkbox-wrapper { + border: 1.5px solid rgba(255, 255, 255, 0.3); + background-color: transparent; + color: rgba(255, 255, 255, 0.4); + } + + .todo-item.in-progress .todo-checkbox-wrapper { + border: 2px solid rgba(33, 150, 243, 0.5); + background-color: rgba(33, 150, 243, 0.1); + color: rgba(33, 150, 243, 0.9); + animation: pulse-checkbox 2s ease-in-out infinite; + } + + .todo-item.completed .todo-checkbox-wrapper { + border: 2px solid rgba(76, 175, 80, 0.5); + background-color: rgba(76, 175, 80, 0.15); + color: rgba(76, 175, 80, 0.95); + } + + @keyframes pulse-checkbox { + 0%, 100% { + box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4); + } + 50% { + box-shadow: 0 0 0 4px rgba(33, 150, 243, 0); + } + } + + .todo-content-wrapper { + flex: 1; + display: flex; + align-items: center; + gap: 8px; + flex-wrap: wrap; + } + + .todo-content { + flex: 1; + color: rgba(255, 255, 255, 0.85); + font-size: 12px; + line-height: 1.4; + min-width: 0; + } + + .todo-item.completed .todo-content { + text-decoration: line-through; + opacity: 0.5; + color: rgba(255, 255, 255, 0.5); + } + + .todo-item.in-progress .todo-content { + color: rgba(255, 255, 255, 0.85); + } + + .todo-priority { + font-size: 9px; + font-weight: 500; + padding: 2px 6px; + border-radius: 3px; + text-transform: uppercase; + letter-spacing: 0.3px; + flex-shrink: 0; + margin-top: 0; + line-height: 1.2; + } + + .todo-priority.priority-high { + background-color: rgba(244, 67, 54, 0.15); + color: rgba(244, 67, 54, 0.95); + border: 1px solid rgba(244, 67, 54, 0.3); + } + + .todo-priority.priority-medium { + background-color: rgba(255, 193, 7, 0.15); + color: rgba(255, 193, 7, 0.95); + border: 1px solid rgba(255, 193, 7, 0.3); + } + + .todo-priority.priority-low { + background-color: rgba(158, 158, 158, 0.15); + color: rgba(158, 158, 158, 0.95); + border: 1px solid rgba(158, 158, 158, 0.3); + } + + /* Checkpoint Card - Minimalist Apple-inspired Design */ + .checkpoint-card { + background-color: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + padding: 8px 10px; + margin: 8px 0; + transition: background-color 0.2s ease, border-color 0.2s ease; + } + + .checkpoint-card:hover { + background-color: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.12); + } + + .checkpoint-header { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 10px + margin-bottom: 6px; } - .restore-btn { - background-color: var(--vscode-button-background); - color: var(--vscode-button-foreground); + .checkpoint-label { + font-size: 10px; + font-weight: 600; + color: rgba(255, 255, 255, 0.5); + letter-spacing: 0.3px; + text-transform: uppercase; + } + + .checkpoint-sha { + font-size: 10px; + font-family: -apple-system, BlinkMacSystemFont, 'SF Mono', 'Segoe UI Mono', monospace; + color: rgba(255, 255, 255, 0.4); + font-weight: 500; + } + + .checkpoint-info { + margin-bottom: 8px; + } + + .checkpoint-message { + font-size: 12px; + color: rgba(255, 255, 255, 0.9); + font-weight: 400; + line-height: 1.4; + margin-bottom: 4px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + } + + .checkpoint-time { + font-size: 11px; + color: rgba(255, 255, 255, 0.4); + font-weight: 400; + } + + .checkpoint-restore-btn { + background-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.9); border: none; - padding: 4px 10px; - border-radius: 4px; + padding: 5px 12px; + border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 500; + width: 100%; + transition: background-color 0.2s ease; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; } - .restore-btn.dark { - background-color: #2d2d30; - color: #999999; + .checkpoint-restore-btn:hover { + background-color: rgba(255, 255, 255, 0.15); } - .restore-btn:hover { - background-color: var(--vscode-button-hoverBackground); + .checkpoint-restore-btn:active { + background-color: rgba(255, 255, 255, 0.08); } - .restore-btn.dark:hover { - background-color: #3e3e42; + /* Undo Card - Minimalist Design */ + .checkpoint-undo-card { + background-color: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.08); + border-radius: 6px; + padding: 6px 10px; + margin: 8px 0; + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; } - .restore-date { - font-size: 10px; - color: var(--vscode-descriptionForeground); - opacity: 0.8; + .undo-message { + font-size: 11px; + color: rgba(255, 255, 255, 0.6); + flex: 1; + line-height: 1.4; + font-weight: 400; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + } + + .checkpoint-undo-btn { + background-color: transparent; + color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.15); + padding: 4px 10px; + border-radius: 6px; + cursor: pointer; + font-size: 11px; + font-weight: 500; + transition: all 0.2s ease; + white-space: nowrap; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; + } + + .checkpoint-undo-btn:hover { + background-color: rgba(255, 255, 255, 0.08); + border-color: rgba(255, 255, 255, 0.2); + color: rgba(255, 255, 255, 0.9); + } + + .checkpoint-undo-btn:active { + background-color: rgba(255, 255, 255, 0.05); } .conversation-history { @@ -2540,7 +3332,7 @@ const styles = ` display: flex; justify-content: space-between; align-items: center; - padding: 12px 16px; + padding: 6px 16px; border-bottom: 1px solid var(--vscode-widget-border); } @@ -2556,10 +3348,10 @@ const styles = ` } .conversation-item { - padding: 12px; + padding: 6px; margin: 4px 0; border: 1px solid var(--vscode-widget-border); - border-radius: 6px; + border-radius: 10px; cursor: pointer; background-color: var(--vscode-list-inactiveSelectionBackground); } @@ -2587,10 +3379,10 @@ const styles = ` /* Tool loading animation */ .tool-loading { - padding: 16px 12px; + padding: 8px 12px; display: flex; align-items: center; - gap: 12px; + gap: 8px; background-color: var(--vscode-panel-background); border-top: 1px solid var(--vscode-panel-border); } @@ -2631,7 +3423,7 @@ const styles = ` /* Tool completion indicator */ .tool-completion { - padding: 8px 12px; + padding: 6px 16px; display: flex; align-items: center; gap: 6px; @@ -2659,10 +3451,10 @@ const styles = ` display: flex; align-items: center; justify-content: space-between; - padding: 20px 24px; + padding: 6px 24px; border: 1px solid var(--vscode-panel-border); border-radius: 8px; - margin-bottom: 16px; + margin-bottom: 8px; background-color: var(--vscode-editor-background); transition: all 0.2s ease; } @@ -2687,8 +3479,8 @@ const styles = ` display: inline-block; background-color: var(--vscode-badge-background); color: var(--vscode-badge-foreground); - padding: 4px 8px; - border-radius: 4px; + padding: 4px 10px; + border-radius: 8px; font-size: 11px; font-weight: 500; margin-bottom: 8px; @@ -2702,7 +3494,7 @@ const styles = ` } .server-delete-btn { - padding: 8px 16px; + padding: 4px 10px; font-size: 13px; color: var(--vscode-errorForeground); border-color: var(--vscode-errorForeground); @@ -2723,7 +3515,7 @@ const styles = ` } .server-edit-btn { - padding: 8px 16px; + padding: 4px 10px; font-size: 13px; color: var(--vscode-foreground); border-color: var(--vscode-panel-border); @@ -2754,7 +3546,7 @@ const styles = ` } .form-group { - margin-bottom: 20px; + margin-bottom: 10px; box-sizing: border-box; width: 100%; } @@ -2772,9 +3564,9 @@ const styles = ` .form-group textarea { width: 100%; max-width: 100%; - padding: 8px 12px; + padding: 6px 16px; border: 1px solid var(--vscode-input-border); - border-radius: 4px; + border-radius: 8px; background-color: var(--vscode-input-background); color: var(--vscode-input-foreground); font-size: 13px; @@ -2819,7 +3611,7 @@ const styles = ` .mcp-popular-servers h4 { margin: 0 0 16px 0; - font-size: 14px; + font-size: 12px; font-weight: 600; color: var(--vscode-foreground); opacity: 0.9; @@ -2828,17 +3620,17 @@ const styles = ` .popular-servers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 12px; + gap: 8px; } .popular-server-item { display: flex; align-items: center; - gap: 12px; - padding: 12px 16px; + gap: 8px; + padding: 6px 16px; background-color: var(--vscode-editor-background); border: 1px solid var(--vscode-panel-border); - border-radius: 6px; + border-radius: 10px; cursor: pointer; transition: all 0.2s ease; } @@ -2852,6 +3644,15 @@ const styles = ` .popular-server-icon { font-size: 24px; flex-shrink: 0; + display: flex; + align-items: center; + justify-content: center; + } + + .popular-server-icon svg { + width: 24px; + height: 24px; + stroke-width: 2; } .popular-server-info { diff --git a/src/ui-styles.ts.backup2 b/src/ui-styles.ts.backup2 new file mode 100644 index 0000000..6cbd04c --- /dev/null +++ b/src/ui-styles.ts.backup2 @@ -0,0 +1,2966 @@ +const styles = ` +` + +export default styles \ No newline at end of file diff --git a/src/ui.ts b/src/ui.ts index aef4510..e00cd22 100644 --- a/src/ui.ts +++ b/src/ui.ts @@ -9,6 +9,36 @@ const getHtml = (isTelemetryEnabled: boolean) => ` Claude Code Chat ${styles} +
@@ -22,8 +52,8 @@ const getHtml = (isTelemetryEnabled: boolean) => `
- - + +
@@ -44,7 +74,7 @@ const getHtml = (isTelemetryEnabled: boolean) => `