18 Commits

Author SHA1 Message Date
andrepimenta
683148c4cf Add install modal for users without Claude Code CLI
Shows a clean modal when Claude Code is not installed, with one-click
installation that auto-detects platform (npm if node>=18, otherwise
curl/PowerShell). Runs silently in background with progress indicator.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 10:58:44 +00:00
andrepimenta
e18fa5e261 Improve terminal and UI experience
- Open all terminals in editor area (first column) instead of panel
- Update login message to mention Claude plan (Pro/Max) and API key
- Hide "Claude Code Chat" title when window is very small (<350px)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 00:41:53 +00:00
andrepimenta
63299008d0 Add subscription detection and usage badge to status bar
- Detect user subscription type (Pro/Max) via CLI initialize request
- Cache subscription type in globalState for persistence
- Show clickable usage badge with chart icon in status bar
- Plan users: show "Max Plan" badge, opens live usage view
- API users: show cost badge, opens recent usage history
- Badge opens terminal in editor with ccusage command

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 00:29:08 +00:00
andrepimenta
14ac46018f Run /compact command in chat instead of spawning terminal
The /compact command now executes through the chat interface using
the existing Claude process, providing a seamless user experience
instead of opening a separate terminal window.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 18:12:46 +00:00
andrepimenta
a156881a08 Migrate permission system from MCP file-based to stdio-based
Replace MCP permission server with stdio-based permission flow that
communicates directly with Claude CLI via stdin/stdout. This simplifies
the architecture and fixes permission expiration issues.

Key changes:
- Use --permission-prompt-tool stdio and --input-format stream-json
- Handle control_request messages for permission prompts
- Send control_response via stdin to approve/deny
- Check local permissions for auto-approval of pre-approved tools
- Only expire pending permissions when VS Code restarts, not panel close

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 18:07:45 +00:00
andrepimenta
0764bf8202 Improve process termination and update diff icon colors
- Add AbortController for clean process management
- Add _killProcessGroup() with platform-specific handling (Unix/Windows/WSL)
- Add _killClaudeProcess() with proper SIGTERM→wait→SIGKILL flow
- Update spawn options with detached and signal support
- Handle WSL specially with pkill inside the distro
- Update Open Diff button icon to pastel colors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 16:33:27 +00:00
andrepimenta
82899ebb40 Handle conversation compacting with status messages and token reset
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 00:22:47 +00:00
andrepimenta
abf81a1176 Add morphing orange dot processing indicator
🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-02 00:07:08 +00:00
andrepimenta
da46d5e3d9 Optimize diff storage and improve Open Diff button behavior
- Stop storing full file contents in conversation history to reduce memory
- Compute and store only startLine/startLines for accurate line numbers on reload
- Open Diff button now only shows on last pending edit request
- Button uses stored diff data directly instead of re-reading file
- Hide button when edit result arrives (edit no longer pending)
- Show simple completion messages for Edit/MultiEdit/Write results
- Use virtual document scheme (claude-diff:) for read-only diff viewer
- Simplify tool result handling for Read/TodoWrite

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 23:19:04 +00:00
andrepimenta
d20d8667f3 Show full diff in Edit, MultiEdit, and Write tool use messages
Instead of showing simple previews like "Editing X lines" or "Writing X lines",
now displays the actual diff with added/removed lines during the tool request phase.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 16:29:58 +00:00
andrepimenta
6c37394015 Add Open Diff button to open VS Code's native side-by-side diff editor
- Add _openDiffEditor method using vscode.diff command
- Store temp files in extension's storageUri instead of workspace
- Clean up temp files when diff editor is closed
- Force side-by-side mode when opening diff
- Add Open Diff button with red/green icon in summary row

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 16:20:11 +00:00
andrepimenta
2b1ad70f6b Add truncation with expand button to diff display
Show first 6 lines of diff by default with a "Show X more lines"
button to expand and view the full diff when there are more lines.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:42:19 +00:00
andrepimenta
bf527bb922 Strip tool_use_error tags from error messages
Remove XML-like <tool_use_error> tags from error content before
displaying to users, showing only the clean error message text.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:39:00 +00:00
andrepimenta
df8188380d Fix auto-scroll for diff tool results
Replace incorrect scrollToBottom() calls with scrollToBottomIfNeeded()
to restore auto-scrolling functionality when new Edit, MultiEdit, and
Write tool results are displayed.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:26:16 +00:00
andrepimenta
79a0b6b4b2 Fix diff line alignment by removing ::before pseudo-elements
Remove ::before pseudo-elements from added/removed diff lines that were
causing inconsistent margins and misaligned text. Lines now align properly
with consistent spacing across context, added, and removed lines.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:23:04 +00:00
andrepimenta
dd47efec04 Implement unified diff visualization for Edit, MultiEdit, and Write tools
- Add LCS-based diff algorithm with intelligent line matching
- Show proper line numbers from actual file positions
- Display color-coded additions (green), removals (red), and context lines
- Include summary statistics (+X lines added, -Y lines removed)
- Simplify tool use previews, show detailed diffs in tool results
- Parse tool result content to extract line numbers
- Update styling with monospace font and VS Code git colors

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 15:09:20 +00:00
andrepimenta
d891070d9e Modify icon and name 2025-10-14 17:23:49 +01:00
andrepimenta
1be89d43a4 Added more built-in commands 2025-10-01 23:20:26 +01:00
10 changed files with 1982 additions and 536 deletions

View File

@@ -11,4 +11,6 @@ vsc-extension-quickstart.md
**/.vscode-test.*
backup
.claude
claude-code-chat-permissions-mcp/**
claude-code-chat-permissions-mcp/**
node_modules
mcp-permissions.js

View File

@@ -4,6 +4,23 @@ All notable changes to the "claude-code-chat" extension will be documented in th
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
## [1.0.7] - 2025-10-01
### 🚀 Features Added
- **Slash Commands Update**: Added 4 new slash commands to the commands modal
- `/add-dir` - Add additional working directories
- `/agents` - Manage custom AI subagents for specialized tasks
- `/rewind` - Rewind the conversation and/or code
- `/usage` - Show plan usage limits and rate limit status (subscription plans only)
### 📚 Documentation Updates
- Updated slash commands count from 19+ to 23+ built-in commands
- Enhanced command descriptions for better clarity:
- `/config` - Now specifies "Open the Settings interface (Config tab)"
- `/cost` - Added note about cost tracking guide for subscription-specific details
- `/status` - Expanded description to mention version, model, account, and connectivity
- `/terminal-setup` - Added clarification about iTerm2 and VSCode only support
## [1.0.6] - 2025-08-26
### 🐛 Bug Fixes

View File

@@ -103,7 +103,7 @@ Ditch the command line and experience Claude Code like never before. This extens
### ⚡ **Slash Commands Integration**
- **Slash Commands Modal** - Type "/" to access all Claude Code commands instantly
- **19+ Built-in Commands** - /cost, /status, /config, /help, /memory, /review, and more
- **23+ Built-in Commands** - /agents, /cost, /config, /memory, /review, and more
- **Custom Command Support** - Execute any Claude Code command with session context
- **Session-Aware Execution** - All commands run with current conversation context
- **Terminal Integration** - Commands open directly in VS Code terminal with WSL support

BIN
icon-bubble.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 469 KiB

BIN
icon.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 689 KiB

After

Width:  |  Height:  |  Size: 689 KiB

View File

@@ -1,8 +1,8 @@
{
"name": "claude-code-chat",
"displayName": "Claude Code Chat",
"displayName": "Chat for Claude Code",
"description": "Beautiful Claude Code Chat Interface for VS Code",
"version": "1.0.6",
"version": "1.0.7",
"publisher": "AndrePimenta",
"author": "Andre Pimenta",
"repository": {
@@ -56,7 +56,7 @@
"command": "claude-code-chat.openChat",
"title": "Open Claude Code Chat",
"category": "Claude Code Chat",
"icon": "icon.png"
"icon": "icon-bubble.png"
}
],
"keybindings": [
@@ -133,7 +133,7 @@
"type": "webview",
"name": "Claude Code Chat",
"when": "true",
"icon": "icon.png",
"icon": "icon-bubble.png",
"contextualTitle": "Claude Code Chat"
}
]
@@ -143,7 +143,7 @@
{
"id": "claude-code-chat",
"title": "Claude Code Chat",
"icon": "icon.png"
"icon": "icon-bubble.png"
}
]
},

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -28,6 +28,12 @@ const styles = `
letter-spacing: -0.3px;
}
@media (max-width: 385px) {
.header h2 {
display: none;
}
}
.controls {
display: flex;
gap: 6px;
@@ -302,6 +308,12 @@ const styles = `
border: 1px solid rgba(231, 76, 60, 0.3);
}
.permission-decision.expired {
background-color: rgba(128, 128, 128, 0.15);
color: var(--vscode-descriptionForeground);
border: 1px solid rgba(128, 128, 128, 0.3);
}
.permission-decided {
opacity: 0.7;
pointer-events: none;
@@ -321,6 +333,11 @@ const styles = `
background-color: var(--vscode-inputValidation-errorBackground);
}
.permission-decided.expired {
border-color: var(--vscode-panel-border);
background-color: rgba(128, 128, 128, 0.05);
}
/* Permissions Management */
.permissions-list {
max-height: 300px;
@@ -1076,34 +1093,25 @@ const styles = `
.diff-line {
padding: 2px 12px;
white-space: pre-wrap;
word-break: break-word;
white-space: pre;
font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
font-size: 12px;
line-height: 1.5;
}
.diff-line.context {
color: var(--vscode-editor-foreground);
opacity: 0.8;
}
.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);
color: var(--vscode-gitDecoration-deletedResourceForeground, rgba(244, 67, 54, 0.9));
}
.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;
color: var(--vscode-gitDecoration-addedResourceForeground, rgba(76, 175, 80, 0.9));
}
.diff-expand-container {
@@ -1159,7 +1167,39 @@ const styles = `
margin: 12px 0;
}
.diff-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 8px;
padding: 6px 12px;
border-top: 1px solid var(--vscode-panel-border);
background-color: var(--vscode-editor-background);
}
.diff-summary {
color: var(--vscode-descriptionForeground);
font-size: 11px;
font-weight: 500;
}
.diff-preview {
padding: 4px 12px;
color: var(--vscode-descriptionForeground);
font-size: 12px;
font-style: italic;
opacity: 0.9;
}
/* File path display styles */
.diff-file-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.diff-file-path {
padding: 8px 12px;
border: 1px solid var(--vscode-panel-border);
@@ -1167,6 +1207,7 @@ const styles = `
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
flex: 1;
}
.diff-file-path:hover {
@@ -1178,6 +1219,35 @@ const styles = `
transform: translateY(1px);
}
.diff-open-btn {
display: inline-flex;
align-items: center;
gap: 5px;
background: transparent;
border: 1px solid var(--vscode-button-secondaryBorder, var(--vscode-panel-border));
color: var(--vscode-foreground);
padding: 4px 10px;
border-radius: 3px;
font-size: 11px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.diff-open-btn svg {
flex-shrink: 0;
}
.diff-open-btn:hover {
background: var(--vscode-button-secondaryHoverBackground, rgba(255, 255, 255, 0.1));
border-color: var(--vscode-focusBorder);
opacity: 1;
}
.diff-open-btn:active {
transform: translateY(1px);
}
.file-path-short,
.file-path-truncated {
font-family: var(--vscode-editor-font-family);
@@ -2368,6 +2438,34 @@ const styles = `
flex: 1;
}
.status-text .usage-badge {
display: inline-flex;
align-items: center;
gap: 4px;
color: inherit;
text-decoration: none;
background: rgba(255, 255, 255, 0.08);
padding: 2px 8px 2px 8px;
border-radius: 10px;
cursor: pointer;
transition: background 0.15s, transform 0.1s;
}
.status-text .usage-badge:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.status-text .usage-badge:active {
transform: translateY(0);
}
.status-text .usage-icon {
width: 12px;
height: 12px;
flex-shrink: 0;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
@@ -2874,6 +2972,272 @@ const styles = `
overflow: hidden;
text-overflow: ellipsis;
}
/* Processing indicator - morphing orange dot */
.processing-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px 0;
margin-top: 8px;
}
.processing-indicator .morph-dot {
width: 8px;
height: 8px;
background: linear-gradient(135deg, #ff9500 0%, #ff6b00 100%);
box-shadow: 0 0 8px rgba(255, 149, 0, 0.5);
animation: morphShape 3s ease-in-out infinite;
}
@keyframes morphShape {
0%, 100% {
border-radius: 50%;
transform: scale(1) rotate(0deg);
}
15% {
border-radius: 50%;
transform: scale(1.3) rotate(0deg);
}
25% {
border-radius: 20%;
transform: scale(1) rotate(45deg);
}
40% {
border-radius: 20%;
transform: scale(1.2) rotate(90deg);
}
50% {
border-radius: 50% 50% 50% 0%;
transform: scale(1) rotate(135deg);
}
65% {
border-radius: 0%;
transform: scale(1.3) rotate(180deg);
}
75% {
border-radius: 50% 0% 50% 0%;
transform: scale(1) rotate(270deg);
}
85% {
border-radius: 30%;
transform: scale(1.2) rotate(315deg);
}
}
/* Install Modal Styles */
.install-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.install-modal-backdrop {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(2px);
}
.install-modal-content {
position: relative;
background: var(--vscode-editor-background);
border: 1px solid var(--vscode-widget-border, var(--vscode-panel-border));
border-radius: 12px;
width: 320px;
padding: 32px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
animation: installFadeIn 0.2s ease-out;
}
@keyframes installFadeIn {
from { opacity: 0; transform: scale(0.95) translateY(-8px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.install-close-btn {
position: absolute;
top: 16px;
right: 16px;
width: 28px;
height: 28px;
background: none;
border: none;
color: var(--vscode-descriptionForeground);
cursor: pointer;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.6;
transition: all 0.15s;
}
.install-close-btn:hover {
background: var(--vscode-toolbar-hoverBackground);
opacity: 1;
}
.install-body {
text-align: center;
}
.install-main {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.install-icon-wrapper {
width: 64px;
height: 64px;
border-radius: 16px;
background: var(--vscode-button-background);
display: flex;
align-items: center;
justify-content: center;
}
.install-icon {
color: var(--vscode-button-foreground);
}
.install-text {
display: flex;
flex-direction: column;
gap: 6px;
}
.install-title {
margin: 0;
font-size: 18px;
font-weight: 600;
color: var(--vscode-foreground);
}
.install-desc {
margin: 0;
font-size: 13px;
color: var(--vscode-descriptionForeground);
line-height: 1.4;
}
.install-btn {
width: 100%;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
background: var(--vscode-button-background);
color: var(--vscode-button-foreground);
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s;
}
.install-btn:hover {
background: var(--vscode-button-hoverBackground);
transform: translateY(-1px);
}
.install-btn:active {
transform: translateY(0);
}
.install-link {
font-size: 13px;
color: var(--vscode-textLink-foreground);
text-decoration: none;
opacity: 0.9;
}
.install-link:hover {
text-decoration: underline;
opacity: 1;
}
.install-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 20px 0;
}
.install-spinner {
width: 32px;
height: 32px;
border: 2.5px solid var(--vscode-widget-border, var(--vscode-panel-border));
border-top-color: var(--vscode-button-background);
border-radius: 50%;
animation: installSpin 0.8s linear infinite;
}
@keyframes installSpin {
to { transform: rotate(360deg); }
}
.install-progress-text {
margin: 0;
font-size: 14px;
font-weight: 500;
color: var(--vscode-foreground);
}
.install-progress-hint {
margin: 0;
font-size: 12px;
color: var(--vscode-descriptionForeground);
}
.install-success {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 20px 0;
}
.install-success-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(78, 201, 176, 0.15);
display: flex;
align-items: center;
justify-content: center;
}
.install-check {
width: 28px;
height: 28px;
color: var(--vscode-testing-iconPassed, #4ec9b0);
}
.install-success-text {
margin: 0;
font-size: 16px;
font-weight: 600;
color: var(--vscode-foreground);
}
.install-success-hint {
margin: 0;
font-size: 13px;
color: var(--vscode-descriptionForeground);
}
</style>`
export default styles

View File

@@ -399,6 +399,57 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
</div>
</div>
<!-- Install Claude Code modal -->
<div id="installModal" class="install-modal" style="display: none;">
<div class="install-modal-backdrop" onclick="hideInstallModal()"></div>
<div class="install-modal-content">
<button class="install-close-btn" onclick="hideInstallModal()">
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
</button>
<div class="install-body" id="installBody">
<div class="install-main" id="installMain">
<div class="install-icon-wrapper">
<svg class="install-icon" width="40" height="40" viewBox="0 0 24 24" fill="none">
<path d="M21 15V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 3V15M12 15L7 10M12 15L17 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="install-text">
<h2 class="install-title">Install Claude Code</h2>
<p class="install-desc">The CLI is required to use this extension</p>
</div>
<button class="install-btn" id="installMainBtn" onclick="startInstallation()">
Install Now
</button>
<a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank" class="install-link">
View documentation
</a>
</div>
<div class="install-progress" id="installProgress" style="display: none;">
<div class="install-spinner"></div>
<p class="install-progress-text">Installing Claude Code...</p>
<p class="install-progress-hint">This may take a minute</p>
</div>
<div class="install-success" id="installSuccess" style="display: none;">
<div class="install-success-icon">
<svg class="install-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<p class="install-success-text">Installation Complete</p>
<p class="install-success-hint">Send a message to get started</p>
</div>
</div>
</div>
</div>
<!-- Thinking intensity modal -->
<div id="thinkingIntensityModal" class="tools-modal" style="display: none;">
<div class="tools-modal-content" style="width: 450px;">
@@ -545,6 +596,20 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
<p>These commands require the Claude CLI and will open in VS Code terminal. Return here after completion.</p>
</div>
<div class="slash-commands-list" id="nativeCommandsList">
<div class="slash-command-item" onclick="executeSlashCommand('add-dir')">
<div class="slash-command-icon">📁</div>
<div class="slash-command-content">
<div class="slash-command-title">/add-dir</div>
<div class="slash-command-description">Add additional working directories</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('agents')">
<div class="slash-command-icon">🤖</div>
<div class="slash-command-content">
<div class="slash-command-title">/agents</div>
<div class="slash-command-description">Manage custom AI subagents for specialized tasks</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('bug')">
<div class="slash-command-icon">🐛</div>
<div class="slash-command-content">
@@ -570,14 +635,14 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
<div class="slash-command-icon">⚙️</div>
<div class="slash-command-content">
<div class="slash-command-title">/config</div>
<div class="slash-command-description">View/modify configuration</div>
<div class="slash-command-description">Open the Settings interface (Config tab)</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('cost')">
<div class="slash-command-icon">💰</div>
<div class="slash-command-content">
<div class="slash-command-title">/cost</div>
<div class="slash-command-description">Show token usage statistics</div>
<div class="slash-command-description">Show token usage statistics (see cost tracking guide for subscription-specific details)</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('doctor')">
@@ -657,18 +722,32 @@ const getHtml = (isTelemetryEnabled: boolean) => `<!DOCTYPE html>
<div class="slash-command-description">Request code review</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('rewind')">
<div class="slash-command-icon">⏪</div>
<div class="slash-command-content">
<div class="slash-command-title">/rewind</div>
<div class="slash-command-description">Rewind the conversation and/or code</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('status')">
<div class="slash-command-icon">📊</div>
<div class="slash-command-content">
<div class="slash-command-title">/status</div>
<div class="slash-command-description">View account and system statuses</div>
<div class="slash-command-description">Open the Settings interface (Status tab) showing version, model, account, and connectivity</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('terminal-setup')">
<div class="slash-command-icon">⌨️</div>
<div class="slash-command-content">
<div class="slash-command-title">/terminal-setup</div>
<div class="slash-command-description">Install Shift+Enter key binding for newlines</div>
<div class="slash-command-description">Install Shift+Enter key binding for newlines (iTerm2 and VSCode only)</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('usage')">
<div class="slash-command-icon">📈</div>
<div class="slash-command-content">
<div class="slash-command-title">/usage</div>
<div class="slash-command-description">Show plan usage limits and rate limit status (subscription plans only)</div>
</div>
</div>
<div class="slash-command-item" onclick="executeSlashCommand('vim')">