a45b71e1e4
Phase 1: Backend approval tracking - Add PendingApprovalsManager class to track pending approvals - Add approval-request, approval-response, approval-expired WebSocket handlers - Add requestApproval() method to ClaudeCodeService - Add event forwarding for approval requests Phase 2: Frontend approval card component - Create approval-card.js with interactive UI - Create approval-card.css with styled component - Add Approve, Custom Instructions, Reject buttons - Add expandable custom command input Phase 3: Wire up approval flow end-to-end - Add handleApprovalRequest, handleApprovalConfirmed, handleApprovalExpired handlers - Add detectApprovalRequest() to parse AI approval request patterns - Integrate approval card into WebSocket message flow - Route approval responses based on source (server vs AI conversational) This allows the AI agent to request command approval through a clean UI instead of confusing conversational text responses. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
470 lines
23 KiB
HTML
470 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code IDE</title>
|
|
<link rel="stylesheet" href="/claude/css/style.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/ide.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/tag-renderer.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/preview-manager.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/chat-enhanced.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/terminal.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/components/monaco-editor.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/components/enhanced-chat-input.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/components/session-picker.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/components/approval-card.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
|
|
<!-- Monaco Editor (VS Code Editor) - AMD Loader -->
|
|
<script src="https://unpkg.com/monaco-editor@0.45.0/min/vs/loader.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="nav-brand">
|
|
<button class="mobile-menu-toggle" id="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
|
|
<h1>Claude Code IDE</h1>
|
|
</div>
|
|
<div class="nav-menu" id="nav-menu">
|
|
<button class="nav-item active" data-view="dashboard">Dashboard</button>
|
|
<button class="nav-item" data-view="chat">💬 Chat</button>
|
|
<button class="nav-item" data-view="sessions">Sessions</button>
|
|
<button class="nav-item" data-view="projects">Projects</button>
|
|
<button class="nav-item" data-view="files">Files</button>
|
|
<button class="nav-item" data-view="terminal">🖥️ Terminal</button>
|
|
</div>
|
|
<div class="nav-user">
|
|
<button id="logout-btn" class="btn-secondary">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Dashboard View -->
|
|
<div id="dashboard-view" class="view active">
|
|
<div class="dashboard-grid">
|
|
<!-- Stats Cards -->
|
|
<div class="stat-card">
|
|
<h3>Active Sessions</h3>
|
|
<div class="stat-value" id="active-sessions-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Projects</h3>
|
|
<div class="stat-value" id="total-projects-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Historical Sessions</h3>
|
|
<div class="stat-value" id="historical-sessions-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Quick Actions</h3>
|
|
<div class="stat-actions">
|
|
<button class="btn-primary" onclick="createNewSession()">New Session</button>
|
|
<button class="btn-secondary" onclick="createNewProject()">New Project</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Sessions Panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Active Sessions</h2>
|
|
<button class="btn-secondary btn-sm" onclick="refreshSessions()">Refresh</button>
|
|
</div>
|
|
<div class="panel-content" id="active-sessions-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Projects Panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Recent Projects</h2>
|
|
<button class="btn-secondary btn-sm" onclick="showProjects()">View All</button>
|
|
</div>
|
|
<div class="panel-content" id="recent-projects-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sessions View -->
|
|
<div id="sessions-view" class="view">
|
|
<div class="sessions-layout">
|
|
<div class="sessions-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Sessions</h2>
|
|
<button class="btn-primary" onclick="createNewSession()">+ New</button>
|
|
</div>
|
|
<div class="sessions-list" id="sessions-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="sessions-main">
|
|
<div id="session-detail" class="session-detail">
|
|
<div class="placeholder">
|
|
<h2>Select a session</h2>
|
|
<p>Choose a session from the sidebar to view details</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects View -->
|
|
<div id="projects-view" class="view">
|
|
<div class="projects-header">
|
|
<h2>Projects</h2>
|
|
<button class="btn-primary" onclick="createNewProject()">+ New Project</button>
|
|
</div>
|
|
<div class="projects-grid" id="projects-grid">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat View -->
|
|
<div id="chat-view" class="view">
|
|
<div class="chat-layout">
|
|
<div class="chat-sidebar-overlay" id="chat-sidebar-overlay"></div>
|
|
<div class="chat-sidebar" id="chat-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Chat</h2>
|
|
<button class="btn-primary" onclick="startNewChat()">+ New</button>
|
|
</div>
|
|
<div class="chat-history-list" id="chat-history-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-main">
|
|
<div class="chat-header" id="chat-header">
|
|
<button class="chat-sidebar-toggle" id="chat-sidebar-toggle" aria-label="Toggle chat history">☰</button>
|
|
<div class="chat-session-info">
|
|
<h2 id="chat-title">New Chat</h2>
|
|
<span class="chat-session-id" id="current-session-id"></span>
|
|
</div>
|
|
<div class="chat-actions">
|
|
<button class="btn-secondary btn-sm" onclick="clearChat()" title="Clear chat">Clear</button>
|
|
<button class="btn-secondary btn-sm" onclick="showChatSettings()" title="Settings">⚙️</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages" id="chat-messages">
|
|
<div class="chat-welcome">
|
|
<h2>👋 Welcome to Claude Code Chat!</h2>
|
|
<p>Start a conversation with Claude Code. Your session will be saved automatically.</p>
|
|
<div class="chat-tips">
|
|
<h3>Quick Tips:</h3>
|
|
<ul>
|
|
<li>Type your message and press Enter to send</li>
|
|
<li>Shift+Enter for a new line</li>
|
|
<li>Use <code>/help</code> to see available commands</li>
|
|
<li>Attach files from your vault using <code>@filename</code></li>
|
|
</ul>
|
|
</div>
|
|
<div class="chat-connection-info">
|
|
<h3>💡 Pro Tip: Continue from CLI</h3>
|
|
<p>To continue a CLI session in the web interface:</p>
|
|
<ol>
|
|
<li>In your terminal, note the session ID shown by Claude Code</li>
|
|
<li>Click "Attach CLI Session" below</li>
|
|
<li>Enter the session ID to connect</li>
|
|
</ol>
|
|
<button class="btn-secondary" onclick="showAttachCliModal()" style="margin-top: 1rem;">Attach CLI Session</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Chat Mode Buttons -->
|
|
<div class="chat-modes-bar" id="chat-modes-bar">
|
|
<button class="mode-btn active" data-mode="auto" onclick="setChatMode('auto')" title="Chat Mode - AI assisted conversations">
|
|
<span class="mode-icon">💬</span>
|
|
<span class="mode-label">Chat</span>
|
|
</button>
|
|
<button class="mode-btn" data-mode="native" onclick="setChatMode('native')" title="Native Mode - Commands execute directly on your system">
|
|
<span class="mode-icon">⚡</span>
|
|
<span class="mode-label">Native</span>
|
|
</button>
|
|
<button class="mode-btn" data-mode="webcontainer" onclick="setChatMode('webcontainer')" title="Terminal Mode - Persistent terminal session">
|
|
<span class="mode-icon">🖥️</span>
|
|
<span class="mode-label">Terminal</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="chat-input-container" id="chat-input-container">
|
|
<div class="chat-input-wrapper">
|
|
<textarea id="chat-input"
|
|
placeholder="Type your message to Claude Code... (Enter to send, Shift+Enter for new line)"
|
|
rows="1"
|
|
onkeydown="handleChatKeypress(event)"></textarea>
|
|
<div class="chat-input-actions">
|
|
<button class="btn-icon" onclick="attachFile()" title="Attach file">📎</button>
|
|
<button class="btn-primary btn-send" onclick="sendChatMessage()">Send</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-info">
|
|
<span class="token-usage" id="token-usage">0 tokens used</span>
|
|
<span class="char-count" id="char-count">0 characters</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Files View -->
|
|
<div id="files-view" class="view">
|
|
<div class="files-layout">
|
|
<div class="files-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Files</h2>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="file-search" placeholder="Search files...">
|
|
</div>
|
|
<div class="file-tree" id="file-tree">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="files-main">
|
|
<div id="file-editor" class="file-editor">
|
|
<div class="placeholder">
|
|
<h2>Select a file</h2>
|
|
<p>Choose a file from the sidebar to view and edit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal View -->
|
|
<div id="terminal-view" class="view">
|
|
<div class="terminal-layout">
|
|
<div class="terminal-header">
|
|
<h2>🖥️ Terminals</h2>
|
|
<button class="btn-primary" id="btn-new-terminal">+ New Terminal</button>
|
|
</div>
|
|
<div class="terminal-tabs" id="terminal-tabs">
|
|
<!-- Terminal tabs will be added here -->
|
|
</div>
|
|
<div class="terminals-container" id="terminals-container">
|
|
<!-- Terminal instances will be added here -->
|
|
<div class="terminal-placeholder">
|
|
<h3>No terminals open</h3>
|
|
<p>Click "+ New Terminal" to get started</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Debug Panel - Collapsible -->
|
|
<div id="terminal-debug-panel" style="margin: 20px; background: #1a1a1a; border: 1px solid #ff6b6b; border-radius: 8px; font-family: monospace; font-size: 12px; color: #e0e0e0; overflow: hidden; transition: max-height 0.3s ease-in-out;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: 15px; cursor: pointer;" onclick="toggleDebugPanel()" id="debug-panel-header" onmouseover="this.style.background='#2a2a2a'" onmouseout="this.style.background='transparent'">
|
|
<h3 style="margin: 0; color: #ff6b6b;">🐛 Terminal Debug Panel</h3>
|
|
<button id="debug-panel-toggle" style="background: transparent; border: 1px solid #ff6b6b; color: #ff6b6b; font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: all 0.2s ease;" aria-label="Toggle debug panel" onmouseover="this.style.background='#ff6b6b'; this.style.color='#1a1a1a'" onmouseout="this.style.background='transparent'; this.style.color='#ff6b6b'">▼</button>
|
|
</div>
|
|
<div id="terminal-debug-content-wrapper" style="overflow: hidden; transition: max-height 0.3s ease-in-out;">
|
|
<div id="terminal-debug-content" style="max-height: 300px; overflow-y: auto; padding: 0 15px 15px 15px;">
|
|
<div style="color: #888;">Waiting for terminal activity...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="modal-overlay" class="modal-overlay hidden">
|
|
<div id="new-session-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>New Session</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Working Directory</label>
|
|
<input type="text" id="session-working-dir" value="/home/uroma/obsidian-vault">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Project (optional)</label>
|
|
<input type="text" id="session-project" placeholder="e.g., DedicatedNodes">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitNewSession()">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="new-project-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>New Project</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Project Name</label>
|
|
<input type="text" id="project-name" placeholder="My Project">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description</label>
|
|
<textarea id="project-description" rows="3" placeholder="Project description..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Type</label>
|
|
<select id="project-type">
|
|
<option value="general">General</option>
|
|
<option value="web">Web Development</option>
|
|
<option value="mobile">Mobile App</option>
|
|
<option value="infrastructure">Infrastructure</option>
|
|
<option value="research">Research</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitNewProject()">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="attach-cli-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>Attach CLI Session</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="modal-info">
|
|
Enter the session ID from your Claude Code CLI session to continue it in the web interface.
|
|
</p>
|
|
<div class="form-group">
|
|
<label>Session ID</label>
|
|
<input type="text" id="cli-session-id" placeholder="e.g., session-1234567890-abc123">
|
|
<small style="display: block; margin-top: 0.5rem; color: var(--text-secondary);">
|
|
Tip: When you start Claude Code in the terminal, it shows the session ID at the top.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitAttachCliSession()">Attach</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/claude/claude-ide/error-monitor.js"></script>
|
|
<script src="/claude/claude-ide/semantic-validator.js"></script>
|
|
<script src="/claude/claude-ide/components/approval-card.js"></script>
|
|
<script src="/claude/claude-ide/command-tracker.js"></script>
|
|
<script src="/claude/claude-ide/bug-tracker.js"></script>
|
|
<script src="/claude/claude-ide/ide.js"></script>
|
|
<script src="/claude/claude-ide/chat-functions.js"></script>
|
|
<script src="/claude/claude-ide/tag-renderer.js"></script>
|
|
<script src="/claude/claude-ide/preview-manager.js"></script>
|
|
<script src="/claude/claude-ide/chat-enhanced.js"></script>
|
|
<script src="/claude/claude-ide/terminal.js"></script>
|
|
<script src="/claude/claude-ide/components/monaco-editor.js"></script>
|
|
<script src="/claude/claude-ide/components/enhanced-chat-input.js"></script>
|
|
<script src="/claude/claude-ide/components/session-picker.js"></script>
|
|
|
|
<!-- Debug Panel Toggle Script -->
|
|
<script>
|
|
// Debug panel collapse state
|
|
let debugPanelCollapsed = localStorage.getItem('debugPanelCollapsed') === 'true';
|
|
|
|
// Initialize debug panel state on page load
|
|
function initDebugPanel() {
|
|
const panel = document.getElementById('terminal-debug-panel');
|
|
const contentWrapper = document.getElementById('terminal-debug-content-wrapper');
|
|
const toggle = document.getElementById('debug-panel-toggle');
|
|
|
|
if (debugPanelCollapsed) {
|
|
contentWrapper.style.maxHeight = '0px';
|
|
toggle.textContent = '▶';
|
|
toggle.style.transform = 'rotate(-90deg)';
|
|
} else {
|
|
contentWrapper.style.maxHeight = '315px'; // 300px content + 15px padding
|
|
toggle.textContent = '▼';
|
|
toggle.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
// Toggle debug panel collapse/expand
|
|
function toggleDebugPanel() {
|
|
debugPanelCollapsed = !debugPanelCollapsed;
|
|
localStorage.setItem('debugPanelCollapsed', debugPanelCollapsed);
|
|
|
|
const contentWrapper = document.getElementById('terminal-debug-content-wrapper');
|
|
const toggle = document.getElementById('debug-panel-toggle');
|
|
|
|
if (debugPanelCollapsed) {
|
|
contentWrapper.style.maxHeight = '0px';
|
|
toggle.textContent = '▶';
|
|
toggle.style.transform = 'rotate(-90deg)';
|
|
} else {
|
|
contentWrapper.style.maxHeight = '315px'; // 300px content + 15px padding
|
|
toggle.textContent = '▼';
|
|
toggle.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
document.addEventListener('DOMContentLoaded', initDebugPanel);
|
|
</script>
|
|
|
|
<!-- Mobile Menu and Sidebar Toggle Script -->
|
|
<script>
|
|
// Mobile Navigation Menu Toggle
|
|
const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
|
|
const navMenu = document.getElementById('nav-menu');
|
|
|
|
if (mobileMenuToggle) {
|
|
mobileMenuToggle.addEventListener('click', () => {
|
|
navMenu.classList.toggle('active');
|
|
});
|
|
}
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (!e.target.closest('.navbar')) {
|
|
navMenu?.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
// Close menu when clicking a nav item
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.addEventListener('click', () => {
|
|
navMenu?.classList.remove('active');
|
|
});
|
|
});
|
|
|
|
// Chat Sidebar Toggle
|
|
const chatSidebarToggle = document.getElementById('chat-sidebar-toggle');
|
|
const chatSidebar = document.getElementById('chat-sidebar');
|
|
const chatSidebarOverlay = document.getElementById('chat-sidebar-overlay');
|
|
|
|
function toggleChatSidebar() {
|
|
if (!chatSidebar || !chatSidebarOverlay) return;
|
|
chatSidebar.classList.toggle('active');
|
|
chatSidebarOverlay.classList.toggle('active');
|
|
}
|
|
|
|
function closeChatSidebar() {
|
|
if (!chatSidebar || !chatSidebarOverlay) return;
|
|
chatSidebar.classList.remove('active');
|
|
chatSidebarOverlay.classList.remove('active');
|
|
}
|
|
|
|
if (chatSidebarToggle) {
|
|
chatSidebarToggle.addEventListener('click', toggleChatSidebar);
|
|
}
|
|
|
|
if (chatSidebarOverlay) {
|
|
chatSidebarOverlay.addEventListener('click', closeChatSidebar);
|
|
}
|
|
|
|
// Close sidebar when switching to a different view
|
|
const originalSwitchView = window.switchView;
|
|
if (typeof originalSwitchView === 'function') {
|
|
window.switchView = function(viewName) {
|
|
closeChatSidebar();
|
|
return originalSwitchView.call(this, viewName);
|
|
};
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|