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>
1583 lines
55 KiB
JavaScript
1583 lines
55 KiB
JavaScript
// Claude Code IDE JavaScript
|
||
let currentSession = null;
|
||
let currentProjectName = null;
|
||
let ws = null;
|
||
|
||
// Make ws globally accessible for other scripts
|
||
Object.defineProperty(window, 'ws', {
|
||
get: function() { return ws; },
|
||
set: function(value) { ws = value; },
|
||
enumerable: true,
|
||
configurable: true
|
||
});
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
initNavigation();
|
||
connectWebSocket();
|
||
|
||
// Check URL params for session, prompt, project, and view
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const sessionId = urlParams.get('session');
|
||
const prompt = urlParams.get('prompt');
|
||
const project = urlParams.get('project');
|
||
const view = urlParams.get('view');
|
||
|
||
// Parse project parameter if present
|
||
if (project) {
|
||
window.currentProjectDir = decodeURIComponent(project);
|
||
currentProjectName = project.split('/').filter(Boolean).pop() || 'Project';
|
||
console.log('[Init] Project context loaded:', currentProjectName, window.currentProjectDir);
|
||
}
|
||
|
||
if (sessionId || prompt) {
|
||
// Switch to chat view first
|
||
switchView('chat');
|
||
|
||
// Wait for chat to load, then handle session/prompt
|
||
setTimeout(() => {
|
||
if (sessionId) {
|
||
attachToSession(sessionId);
|
||
}
|
||
|
||
if (prompt) {
|
||
setTimeout(() => {
|
||
const input = document.getElementById('chat-input');
|
||
if (input) {
|
||
input.value = decodeURIComponent(prompt);
|
||
sendChatMessage();
|
||
}
|
||
}, 1000);
|
||
}
|
||
}, 500);
|
||
} else if (view) {
|
||
// Switch to the specified view
|
||
switchView(view);
|
||
} else {
|
||
// Default to chat view
|
||
switchView('chat');
|
||
}
|
||
});
|
||
|
||
// Navigation
|
||
function initNavigation() {
|
||
const navItems = document.querySelectorAll('.nav-item');
|
||
navItems.forEach(item => {
|
||
item.addEventListener('click', () => {
|
||
const view = item.dataset.view;
|
||
switchView(view);
|
||
});
|
||
});
|
||
}
|
||
|
||
function switchView(viewName) {
|
||
// Update nav items
|
||
document.querySelectorAll('.nav-item').forEach(item => {
|
||
item.classList.remove('active');
|
||
if (item.dataset.view === viewName) {
|
||
item.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Update views
|
||
document.querySelectorAll('.view').forEach(view => {
|
||
view.classList.remove('active');
|
||
});
|
||
document.getElementById(`${viewName}-view`).classList.add('active');
|
||
|
||
// Load content for the view
|
||
switch(viewName) {
|
||
case 'dashboard':
|
||
loadDashboard();
|
||
break;
|
||
case 'chat':
|
||
loadChatView();
|
||
break;
|
||
case 'sessions':
|
||
loadSessions();
|
||
break;
|
||
case 'projects':
|
||
loadProjects();
|
||
break;
|
||
case 'files':
|
||
loadFiles();
|
||
break;
|
||
case 'terminal':
|
||
loadTerminal();
|
||
break;
|
||
}
|
||
}
|
||
|
||
// WebSocket Connection
|
||
function connectWebSocket() {
|
||
const wsUrl = `wss://${window.location.host}/claude/api/claude/chat`;
|
||
console.log('Connecting to WebSocket:', wsUrl);
|
||
|
||
window.ws = new WebSocket(wsUrl);
|
||
|
||
// Set ready state to connecting
|
||
window.wsReady = false;
|
||
|
||
window.ws.onopen = () => {
|
||
console.log('WebSocket connected, readyState:', window.ws.readyState);
|
||
window.wsReady = true;
|
||
|
||
// Send a test message to verify connection
|
||
try {
|
||
window.ws.send(JSON.stringify({ type: 'ping' }));
|
||
} catch (error) {
|
||
console.error('Error sending ping:', error);
|
||
}
|
||
|
||
// Flush any queued messages
|
||
flushMessageQueue();
|
||
};
|
||
|
||
window.ws.onmessage = (event) => {
|
||
const data = JSON.parse(event.data);
|
||
console.log('WebSocket message received:', data.type);
|
||
handleWebSocketMessage(data);
|
||
};
|
||
|
||
window.ws.onerror = (error) => {
|
||
console.error('WebSocket error:', error);
|
||
console.log('WebSocket error details:', {
|
||
type: error.type,
|
||
target: error.target,
|
||
readyState: window.ws?.readyState
|
||
});
|
||
};
|
||
|
||
window.ws.onclose = (event) => {
|
||
console.log('WebSocket disconnected:', {
|
||
code: event.code,
|
||
reason: event.reason,
|
||
wasClean: event.wasClean
|
||
});
|
||
window.wsReady = false;
|
||
window.ws = null;
|
||
// Attempt to reconnect after 5 seconds
|
||
setTimeout(() => {
|
||
console.log('Attempting to reconnect...');
|
||
connectWebSocket();
|
||
}, 5000);
|
||
};
|
||
}
|
||
|
||
// === WebSocket State Management ===
|
||
// Message queue for messages sent before WebSocket is ready
|
||
window.messageQueue = [];
|
||
window.wsReady = false;
|
||
|
||
/**
|
||
* Queue a message to be sent when WebSocket is ready
|
||
* @param {Object} message - Message to queue
|
||
*/
|
||
function queueMessage(message) {
|
||
window.messageQueue.push({
|
||
message: message,
|
||
timestamp: Date.now()
|
||
});
|
||
|
||
console.log(`[WebSocket] Message queued (${window.messageQueue.length} in queue):`, {
|
||
type: message.type,
|
||
sessionId: message.sessionId
|
||
});
|
||
showQueuedMessageIndicator();
|
||
|
||
// Try to flush immediately
|
||
console.log('[WebSocket] Attempting immediate flush...');
|
||
flushMessageQueue();
|
||
}
|
||
|
||
/**
|
||
* Flush all queued messages to WebSocket
|
||
*/
|
||
function flushMessageQueue() {
|
||
console.log('[WebSocket] flushMessageQueue called:', {
|
||
wsReady: window.wsReady,
|
||
wsExists: !!window.ws,
|
||
wsReadyState: window.ws?.readyState,
|
||
queueLength: window.messageQueue.length
|
||
});
|
||
|
||
if (!window.wsReady || !window.ws) {
|
||
console.log('[WebSocket] Not ready, keeping messages in queue');
|
||
return;
|
||
}
|
||
|
||
if (window.messageQueue.length === 0) {
|
||
console.log('[WebSocket] Queue is empty, nothing to flush');
|
||
return;
|
||
}
|
||
|
||
console.log(`[WebSocket] Flushing ${window.messageQueue.length} queued messages`);
|
||
|
||
// Send all queued messages
|
||
const messagesToSend = [...window.messageQueue];
|
||
window.messageQueue = [];
|
||
|
||
for (const item of messagesToSend) {
|
||
try {
|
||
const payloadStr = JSON.stringify(item.message);
|
||
console.log('[WebSocket] Sending queued message:', {
|
||
type: item.message.type,
|
||
sessionId: item.message.sessionId,
|
||
payloadLength: payloadStr.length
|
||
});
|
||
window.ws.send(payloadStr);
|
||
console.log('[WebSocket] ✓ Sent queued message:', item.message.type);
|
||
} catch (error) {
|
||
console.error('[WebSocket] ✗ Failed to send queued message:', error);
|
||
// Put it back in the queue
|
||
window.messageQueue.push(item);
|
||
}
|
||
}
|
||
|
||
hideQueuedMessageIndicator();
|
||
}
|
||
|
||
/**
|
||
* Show indicator that messages are queued
|
||
*/
|
||
function showQueuedMessageIndicator() {
|
||
let indicator = document.getElementById('queued-message-indicator');
|
||
if (!indicator) {
|
||
indicator = document.createElement('div');
|
||
indicator.id = 'queued-message-indicator';
|
||
indicator.className = 'queued-message-indicator';
|
||
indicator.innerHTML = `
|
||
<span class="indicator-icon">⏳</span>
|
||
<span class="indicator-text">Message queued...</span>
|
||
`;
|
||
|
||
// Add to chat input area
|
||
const chatContainer = document.getElementById('chat-input-container');
|
||
if (chatContainer) {
|
||
chatContainer.appendChild(indicator);
|
||
}
|
||
}
|
||
|
||
indicator.style.display = 'flex';
|
||
}
|
||
|
||
/**
|
||
* Hide queued message indicator
|
||
*/
|
||
function hideQueuedMessageIndicator() {
|
||
const indicator = document.getElementById('queued-message-indicator');
|
||
if (indicator && window.messageQueue.length === 0) {
|
||
indicator.style.display = 'none';
|
||
}
|
||
}
|
||
|
||
function handleWebSocketMessage(data) {
|
||
switch(data.type) {
|
||
case 'connected':
|
||
console.log(data.message);
|
||
break;
|
||
case 'output':
|
||
handleSessionOutput(data);
|
||
break;
|
||
case 'operations-detected':
|
||
handleOperationsDetected(data);
|
||
break;
|
||
case 'operations-executed':
|
||
handleOperationsExecuted(data);
|
||
break;
|
||
case 'operations-error':
|
||
handleOperationsError(data);
|
||
break;
|
||
case 'operation-progress':
|
||
handleOperationProgress(data);
|
||
break;
|
||
case 'approval-request':
|
||
handleApprovalRequest(data);
|
||
break;
|
||
case 'approval-confirmed':
|
||
handleApprovalConfirmed(data);
|
||
break;
|
||
case 'approval-expired':
|
||
handleApprovalExpired(data);
|
||
break;
|
||
case 'error':
|
||
console.error('WebSocket error:', data.error);
|
||
// Show error in chat if attached
|
||
if (typeof appendSystemMessage === 'function') {
|
||
appendSystemMessage('Error: ' + data.error);
|
||
}
|
||
break;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle operations detected event
|
||
*/
|
||
function handleOperationsDetected(data) {
|
||
console.log('Operations detected:', data.operations.length);
|
||
|
||
// Only show if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Store response for execution
|
||
window.currentOperationsResponse = data.response;
|
||
|
||
// Use tag renderer to show operations panel
|
||
if (typeof tagRenderer !== 'undefined') {
|
||
tagRenderer.showOperationsPanel(data.operations, data.response);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle operations executed event
|
||
*/
|
||
function handleOperationsExecuted(data) {
|
||
console.log('Operations executed:', data.results);
|
||
|
||
// Only handle if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Hide progress and show completion
|
||
if (typeof tagRenderer !== 'undefined') {
|
||
tagRenderer.hideProgress();
|
||
tagRenderer.hideOperationsPanel();
|
||
tagRenderer.showCompletion(data.results);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle operations error event
|
||
*/
|
||
function handleOperationsError(data) {
|
||
console.error('Operations error:', data.error);
|
||
|
||
// Only handle if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Show error
|
||
if (typeof tagRenderer !== 'undefined') {
|
||
tagRenderer.hideProgress();
|
||
tagRenderer.showError(data.error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle operation progress event
|
||
*/
|
||
function handleOperationProgress(data) {
|
||
console.log('Operation progress:', data.progress);
|
||
|
||
// Only handle if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Update progress
|
||
if (typeof tagRenderer !== 'undefined') {
|
||
const progress = data.progress;
|
||
let message = '';
|
||
|
||
switch(progress.type) {
|
||
case 'write':
|
||
message = `Creating ${progress.path}...`;
|
||
break;
|
||
case 'rename':
|
||
message = `Renaming ${progress.from} to ${progress.to}...`;
|
||
break;
|
||
case 'delete':
|
||
message = `Deleting ${progress.path}...`;
|
||
break;
|
||
case 'install':
|
||
message = `Installing packages: ${progress.packages.join(', ')}...`;
|
||
break;
|
||
case 'command':
|
||
message = `Executing command: ${progress.command}...`;
|
||
break;
|
||
default:
|
||
message = 'Processing...';
|
||
}
|
||
|
||
tagRenderer.updateProgress(message);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle approval request event
|
||
*/
|
||
function handleApprovalRequest(data) {
|
||
console.log('Approval request received:', data);
|
||
|
||
// Only handle if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Render approval card in chat
|
||
if (typeof ApprovalCard !== 'undefined' && ApprovalCard.render) {
|
||
const card = ApprovalCard.render(data);
|
||
|
||
// Add to chat messages container
|
||
const messagesContainer = document.getElementById('chat-messages');
|
||
if (messagesContainer) {
|
||
messagesContainer.appendChild(card);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
} else {
|
||
console.error('[ApprovalCard] Component not loaded');
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle approval confirmed event
|
||
*/
|
||
function handleApprovalConfirmed(data) {
|
||
console.log('Approval confirmed:', data);
|
||
|
||
// Only handle if we're attached to this session
|
||
if (data.sessionId !== attachedSessionId) return;
|
||
|
||
// Show confirmation message
|
||
const message = data.approved
|
||
? (data.customCommand
|
||
? `✅ Approved with custom command: ${data.customCommand}`
|
||
: '✅ Command approved')
|
||
: '❌ Command rejected';
|
||
|
||
if (typeof appendSystemMessage === 'function') {
|
||
appendSystemMessage(message);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Handle approval expired event
|
||
*/
|
||
function handleApprovalExpired(data) {
|
||
console.log('Approval expired:', data);
|
||
|
||
// Update the approval card to show expired state
|
||
if (typeof ApprovalCard !== 'undefined' && ApprovalCard.handleExpired) {
|
||
ApprovalCard.handleExpired(data.id);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Detect approval request in AI response
|
||
* @param {string} content - AI response content
|
||
* @returns {Object|null} - Approval request data or null
|
||
*/
|
||
function detectApprovalRequest(content) {
|
||
if (!content || typeof content !== 'string') return null;
|
||
|
||
const lower = content.toLowerCase();
|
||
|
||
// Common approval request patterns
|
||
const approvalPatterns = [
|
||
// "Would you like me to proceed with X"
|
||
/would\s+(?:you\s+)?like\s+me\s+to\s+proceed\s+(?:with\s+)?(?:executing\s+)?(?:running\s+)?["']?([a-z0-9._\s\-\/]+)["']?/i,
|
||
/should\s+i\s+(?:run|execute)\s+["']?([a-z0-9._\s\-\/]+)["']?/i,
|
||
/do\s+(?:you\s+)?want\s+me\s+to\s+(?:run|execute)\s+["']?([a-z0-9._\s\-\/]+)["']?/i,
|
||
/shall\s+i\s+(?:run|execute)\s+["']?([a-z0-9._\s\-\/]+)["']?/i,
|
||
// "Proceed with X?"
|
||
/proceed\s+(?:with\s+)?["']?([a-z0-9._\s\-\/]+)["']?\?/i,
|
||
// "Execute X?"
|
||
/execute\s+["']?([a-z0-9._\s\-\/]+)["']?\?/i,
|
||
// "Run X?"
|
||
/run\s+["']?([a-z0-9._\s\-\/]+)["']?\?/i
|
||
];
|
||
|
||
for (const pattern of approvalPatterns) {
|
||
const match = content.match(pattern);
|
||
if (match && match[1]) {
|
||
let command = match[1].trim();
|
||
|
||
// Clean up the command
|
||
command = command.replace(/[?\s\.]+$/, '').trim();
|
||
|
||
// Extract explanation from the content
|
||
let explanation = '';
|
||
const explanationMatch = content.match(/(?:this\s+(?:will|is)\s+(.+?)(?:\.|\n|$))|(?:network\s+operation|file\s+operation|system\s+operation)\s*[:\-]\s*(.+?)(?:\.|\n|$))/i);
|
||
if (explanationMatch) {
|
||
explanation = (explanationMatch[1] || explanationMatch[2] || '').trim();
|
||
}
|
||
|
||
// Generate a reasonable explanation if not found
|
||
if (!explanation) {
|
||
if (command.includes('ping')) {
|
||
explanation = 'Network operation - will send ICMP packets to the target host';
|
||
} else if (command.includes('rm') || command.includes('delete')) {
|
||
explanation = 'File deletion operation - files will be permanently removed';
|
||
} else if (command.includes('curl') || command.includes('wget') || command.includes('http')) {
|
||
explanation = 'Network operation - will make HTTP request(s)';
|
||
} else if (command.includes('ssh') || command.includes('scp')) {
|
||
explanation = 'Remote connection operation - will connect to external host';
|
||
} else {
|
||
explanation = `Execute command: ${command}`;
|
||
}
|
||
}
|
||
|
||
return {
|
||
command,
|
||
explanation,
|
||
originalText: content
|
||
};
|
||
}
|
||
}
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* Escape HTML to prevent XSS
|
||
* @param {string} text - Text to escape
|
||
* @returns {string} - Escaped text
|
||
*/
|
||
function escapeHtml(text) {
|
||
if (!text) return '';
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// Streaming message state for accumulating response chunks
|
||
let streamingMessageElement = null;
|
||
let streamingMessageContent = '';
|
||
let streamingTimeout = null;
|
||
|
||
function handleSessionOutput(data) {
|
||
// Handle output for sessions view
|
||
if (currentSession && data.sessionId === currentSession.id) {
|
||
appendOutput(data.data);
|
||
}
|
||
|
||
// Handle output for chat view
|
||
if (typeof attachedSessionId !== 'undefined' && data.sessionId === attachedSessionId) {
|
||
// Hide streaming indicator on first chunk
|
||
if (typeof hideStreamingIndicator === 'function') {
|
||
hideStreamingIndicator();
|
||
}
|
||
|
||
const content = data.data.content || '';
|
||
|
||
// ============================================================
|
||
// SEMANTIC VALIDATION - Detect confusing UX messages
|
||
// ============================================================
|
||
if (window.semanticValidator && content) {
|
||
const confusingOutput = window.semanticValidator.detectConfusingOutput(content);
|
||
if (confusingOutput) {
|
||
// Report to bug tracker
|
||
window.semanticValidator.reportSemanticError(confusingOutput);
|
||
|
||
// Log for debugging
|
||
console.warn('[SemanticValidator] Confusing UX message detected:', confusingOutput);
|
||
}
|
||
}
|
||
|
||
// ============================================================
|
||
// APPROVAL REQUEST DETECTION - Intercept AI approval requests
|
||
// ============================================================
|
||
// Check if AI is asking for approval
|
||
const approvalRequest = detectApprovalRequest(content);
|
||
if (approvalRequest && window.ApprovalCard) {
|
||
console.log('[ApprovalRequest] Detected:', approvalRequest);
|
||
|
||
// Don't show the raw AI message - show approval card instead
|
||
// But we need to still show the explanation part
|
||
|
||
// Check if we already have a pending approval for this command
|
||
const existingCard = document.querySelector(`[data-pending-command="${escapeHtml(approvalRequest.command)}"]`);
|
||
if (!existingCard) {
|
||
// Generate a unique ID for this approval
|
||
const approvalId = `approval-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
|
||
|
||
// Render approval card
|
||
const card = window.ApprovalCard.render({
|
||
id: approvalId,
|
||
sessionId: data.sessionId,
|
||
command: approvalRequest.command,
|
||
explanation: approvalRequest.explanation || 'AI agent requests approval to execute this command'
|
||
});
|
||
|
||
// Add tracking attribute
|
||
card.dataset.pendingCommand = approvalRequest.command;
|
||
|
||
// Add to chat
|
||
const messagesContainer = document.getElementById('chat-messages');
|
||
if (messagesContainer) {
|
||
messagesContainer.appendChild(card);
|
||
messagesContainer.scrollTop = messagesContainer.scrollHeight;
|
||
}
|
||
|
||
// Store the approval for later response
|
||
window._pendingApprovals = window._pendingApprovals || {};
|
||
window._pendingApprovals[approvalId] = {
|
||
command: approvalRequest.command,
|
||
sessionId: data.sessionId,
|
||
originalMessage: content
|
||
};
|
||
|
||
// Don't add the AI's raw text to the chat
|
||
// Just skip to next iteration
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Accumulate streaming content
|
||
if (streamingMessageElement && streamingMessageElement.isConnected) {
|
||
// Append to existing message
|
||
streamingMessageContent += content;
|
||
const bubble = streamingMessageElement.querySelector('.chat-message-bubble');
|
||
if (bubble && typeof formatMessage === 'function') {
|
||
bubble.innerHTML = formatMessage(streamingMessageContent);
|
||
}
|
||
} else {
|
||
// Start new streaming message
|
||
streamingMessageContent = content;
|
||
if (typeof appendMessage === 'function') {
|
||
appendMessage('assistant', content, true);
|
||
// Get the message element we just created
|
||
streamingMessageElement = document.querySelector('.chat-message.assistant:last-child');
|
||
}
|
||
}
|
||
|
||
// Reset streaming timeout - if no new chunks for 1 second, consider stream complete
|
||
clearTimeout(streamingTimeout);
|
||
streamingTimeout = setTimeout(() => {
|
||
streamingMessageElement = null;
|
||
streamingMessageContent = '';
|
||
if (typeof setGeneratingState === 'function') {
|
||
setGeneratingState(false);
|
||
}
|
||
|
||
// ============================================================
|
||
// COMMAND TRACKER - Complete command execution
|
||
// ============================================================
|
||
if (window.commandTracker && window._pendingCommandId) {
|
||
// Try to extract exit code from the last output
|
||
const exitCode = extractExitCode(streamingMessageContent);
|
||
|
||
// Complete the command tracking
|
||
window.commandTracker.completeCommand(
|
||
window._pendingCommandId,
|
||
exitCode,
|
||
streamingMessageContent
|
||
);
|
||
|
||
// Clear pending command ID
|
||
window._pendingCommandId = null;
|
||
|
||
console.log('[CommandTracker] Command completed via stream timeout');
|
||
}
|
||
}, 1000);
|
||
}
|
||
|
||
/**
|
||
* Extract exit code from command output
|
||
* @param {string} output - Command output
|
||
* @returns {number|null} - Exit code or null
|
||
*/
|
||
function extractExitCode(output) {
|
||
if (!output) return null;
|
||
|
||
// Look for exit code patterns
|
||
const exitCodeMatch = output.match(/exited with code (\d+|undefined|null)/i);
|
||
if (exitCodeMatch) {
|
||
const code = exitCodeMatch[1];
|
||
if (code === 'undefined' || code === 'null') {
|
||
return null; // Undefined/null exit code
|
||
}
|
||
return parseInt(code, 10);
|
||
}
|
||
|
||
// If no explicit exit code found, assume success (0)
|
||
return 0;
|
||
}
|
||
}
|
||
|
||
// Dashboard
|
||
async function loadDashboard() {
|
||
try {
|
||
// Load stats
|
||
const [sessionsRes, projectsRes] = await Promise.all([
|
||
fetch('/claude/api/claude/sessions'),
|
||
fetch('/claude/api/claude/projects')
|
||
]);
|
||
|
||
const sessionsData = await sessionsRes.json();
|
||
const projectsData = await projectsRes.json();
|
||
|
||
// Update stats
|
||
document.getElementById('active-sessions-count').textContent =
|
||
sessionsData.active?.length || 0;
|
||
document.getElementById('historical-sessions-count').textContent =
|
||
sessionsData.historical?.length || 0;
|
||
document.getElementById('total-projects-count').textContent =
|
||
projectsData.projects?.length || 0;
|
||
|
||
// Update active sessions list
|
||
const activeSessionsEl = document.getElementById('active-sessions-list');
|
||
if (sessionsData.active && sessionsData.active.length > 0) {
|
||
activeSessionsEl.innerHTML = sessionsData.active.map(session => `
|
||
<div class="session-item" onclick="viewSession('${session.id}')">
|
||
<div class="session-header">
|
||
<span class="session-id">${session.id.substring(0, 20)}...</span>
|
||
<span class="session-status ${session.status}">${session.status}</span>
|
||
</div>
|
||
<div class="session-meta">
|
||
Working: ${session.workingDir}<br>
|
||
Created: ${new Date(session.createdAt).toLocaleString()}
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
activeSessionsEl.innerHTML = '<p class="placeholder">No active sessions</p>';
|
||
}
|
||
|
||
// Update projects list
|
||
const projectsEl = document.getElementById('recent-projects-list');
|
||
if (projectsData.projects && projectsData.projects.length > 0) {
|
||
projectsEl.innerHTML = projectsData.projects.slice(0, 5).map(project => `
|
||
<div class="project-card" onclick="viewProject('${project.name}')">
|
||
<h3>${project.name}</h3>
|
||
<p class="project-meta">
|
||
Modified: ${new Date(project.modified).toLocaleDateString()}
|
||
</p>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
projectsEl.innerHTML = '<p class="placeholder">No projects yet</p>';
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading dashboard:', error);
|
||
}
|
||
}
|
||
|
||
function refreshSessions() {
|
||
loadDashboard();
|
||
}
|
||
|
||
// Sessions
|
||
async function loadSessions() {
|
||
const sessionsListEl = document.getElementById('sessions-list');
|
||
|
||
try {
|
||
// Get current project from URL
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const projectPath = urlParams.get('project');
|
||
|
||
// Build API URL with project filter
|
||
let apiUrl = '/claude/api/claude/sessions';
|
||
if (projectPath) {
|
||
apiUrl += `?project=${encodeURIComponent(projectPath)}`;
|
||
console.log('[Sessions] Loading sessions for project:', projectPath);
|
||
}
|
||
|
||
// Show loading state
|
||
sessionsListEl.innerHTML = '<div class="loading">Loading sessions...</div>';
|
||
|
||
const res = await fetch(apiUrl);
|
||
|
||
// Handle HTTP errors
|
||
if (!res.ok) {
|
||
if (res.status === 401) {
|
||
sessionsListEl.innerHTML = `
|
||
<div class="error-state">
|
||
<p>⚠️ Session expired</p>
|
||
<button class="btn-primary" onclick="location.reload()">Login Again</button>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||
}
|
||
|
||
const data = await res.json();
|
||
|
||
// Handle API errors
|
||
if (data.error) {
|
||
throw new Error(data.error);
|
||
}
|
||
|
||
const allSessions = [
|
||
...(data.active || []).map(s => ({...s, type: 'active'})),
|
||
...(data.historical || []).map(s => ({...s, type: 'historical'}))
|
||
];
|
||
|
||
// Sort by last activity (newest first)
|
||
allSessions.sort((a, b) => {
|
||
const dateA = new Date(a.lastActivity || a.createdAt || a.created_at);
|
||
const dateB = new Date(b.lastActivity || b.createdAt || b.created_at);
|
||
return dateB - dateA;
|
||
});
|
||
|
||
// Empty state
|
||
if (allSessions.length === 0) {
|
||
const projectName = projectPath ? projectPath.split('/').pop() : 'this project';
|
||
sessionsListEl.innerHTML = `
|
||
<div class="empty-state">
|
||
<div class="empty-icon">📂</div>
|
||
<p>No sessions found for <strong>${escapeHtml(projectName)}</strong></p>
|
||
<button class="btn-primary" onclick="startNewChat()">Create New Session</button>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
// Render session list
|
||
sessionsListEl.innerHTML = allSessions.map(session => {
|
||
const isRunning = session.status === 'running' && session.type === 'active';
|
||
const relativeTime = getRelativeTime(session);
|
||
const messageCount = session.messageCount || session.metadata?.messageCount || 0;
|
||
|
||
return `
|
||
<div class="session-item ${session.type}" onclick="viewSessionDetails('${session.id}')">
|
||
<div class="session-header">
|
||
<div class="session-info">
|
||
<span class="session-id">${session.id.substring(0, 12)}...</span>
|
||
<span class="session-status ${isRunning ? 'running' : 'stopped'}">
|
||
${isRunning ? '🟢 Running' : '⏸️ ' + (session.type === 'historical' ? 'Historical' : 'Stopped')}
|
||
</span>
|
||
</div>
|
||
<div class="session-time">${relativeTime}</div>
|
||
</div>
|
||
<div class="session-meta">
|
||
<div class="session-path">📁 ${escapeHtml(session.workingDir)}</div>
|
||
<div class="session-stats">
|
||
<span>💬 ${messageCount} messages</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
} catch (error) {
|
||
console.error('[loadSessions] Error:', error);
|
||
sessionsListEl.innerHTML = `
|
||
<div class="error-state">
|
||
<div class="error-icon">⚠️</div>
|
||
<p>Failed to load sessions</p>
|
||
<p class="error-message">${escapeHtml(error.message)}</p>
|
||
<button class="btn-secondary" onclick="loadSessions()">Try Again</button>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
function getRelativeTime(session) {
|
||
const date = new Date(session.lastActivity || session.createdAt || session.created_at);
|
||
const now = new Date();
|
||
const diffMins = Math.floor((now - date) / 60000);
|
||
|
||
if (diffMins < 1) return 'Just now';
|
||
if (diffMins < 60) return `${diffMins}m ago`;
|
||
if (diffMins < 1440) return `${Math.floor(diffMins/60)}h ago`;
|
||
return `${Math.floor(diffMins/1440)}d ago`;
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
async function viewSessionDetails(sessionId) {
|
||
const detailEl = document.getElementById('session-detail');
|
||
|
||
try {
|
||
// Show loading state
|
||
detailEl.innerHTML = '<div class="loading">Loading session details...</div>';
|
||
|
||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||
|
||
// Handle 404 - session not found
|
||
if (res.status === 404) {
|
||
detailEl.innerHTML = `
|
||
<div class="error-state">
|
||
<div class="error-icon">🔍</div>
|
||
<h3>Session Not Found</h3>
|
||
<p>The session <code>${escapeHtml(sessionId)}</code> could not be found.</p>
|
||
<button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
|
||
</div>
|
||
`;
|
||
return;
|
||
}
|
||
|
||
if (!res.ok) {
|
||
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||
}
|
||
|
||
const data = await res.json();
|
||
|
||
if (data.error) {
|
||
throw new Error(data.error);
|
||
}
|
||
|
||
if (!data.session) {
|
||
throw new Error('No session data in response');
|
||
}
|
||
|
||
const session = data.session;
|
||
const isRunning = session.status === 'running' && session.pid;
|
||
const messageCount = session.outputBuffer?.length || 0;
|
||
|
||
// Render session detail card
|
||
detailEl.innerHTML = `
|
||
<div class="session-detail-card">
|
||
<div class="session-detail-header">
|
||
<div class="session-title">
|
||
<h2>Session ${session.id.substring(0, 12)}...</h2>
|
||
<span class="session-status-badge ${isRunning ? 'running' : 'stopped'}">
|
||
${isRunning ? '🟢 Running' : '⏸️ Stopped'}
|
||
</span>
|
||
</div>
|
||
<div class="session-detail-actions">
|
||
<button class="btn-primary" onclick="continueSessionInChat('${session.id}')">
|
||
💬 Continue in Chat
|
||
</button>
|
||
<button class="btn-secondary" onclick="duplicateSession('${session.id}')">
|
||
📋 Duplicate
|
||
</button>
|
||
${isRunning ? `
|
||
<button class="btn-danger" onclick="terminateSession('${session.id}')">
|
||
⏹️ Terminate
|
||
</button>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session-detail-meta">
|
||
<div class="meta-row">
|
||
<span class="meta-label">Working Directory:</span>
|
||
<span class="meta-value">${escapeHtml(session.workingDir)}</span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Created:</span>
|
||
<span class="meta-value">${new Date(session.createdAt).toLocaleString()}</span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Last Activity:</span>
|
||
<span class="meta-value">${new Date(session.lastActivity).toLocaleString()}</span>
|
||
</div>
|
||
<div class="meta-row">
|
||
<span class="meta-label">Messages:</span>
|
||
<span class="meta-value">${messageCount}</span>
|
||
</div>
|
||
${session.pid ? `
|
||
<div class="meta-row">
|
||
<span class="meta-label">PID:</span>
|
||
<span class="meta-value">${session.pid}</span>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
|
||
<div class="session-context">
|
||
<h3>Token Usage</h3>
|
||
<div class="context-bar">
|
||
<div class="context-fill" style="width: ${Math.min(100, (session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}%"></div>
|
||
</div>
|
||
<div class="context-stats">
|
||
<span>${(session.context?.totalTokens || 0).toLocaleString()} / ${(session.context?.maxTokens || 200000).toLocaleString()} tokens</span>
|
||
<span>${Math.round((session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}% used</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="session-output-preview">
|
||
<h3>Session Output (${messageCount} entries)</h3>
|
||
<div class="output-scroll-area">
|
||
${session.outputBuffer?.slice(0, 50).map(entry => `
|
||
<div class="output-entry ${entry.type}">
|
||
<div class="output-header">
|
||
<span class="output-type">${entry.type}</span>
|
||
<span class="output-time">${new Date(entry.timestamp).toLocaleTimeString()}</span>
|
||
</div>
|
||
<div class="output-content">${escapeHtml(entry.content.substring(0, 500))}${entry.content.length > 500 ? '...' : ''}</div>
|
||
</div>
|
||
`).join('') || '<p class="no-output">No output yet</p>'}
|
||
${session.outputBuffer?.length > 50 ? `<p class="output-truncated">...and ${session.outputBuffer.length - 50} more entries</p>` : ''}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
currentSession = session;
|
||
|
||
} catch (error) {
|
||
console.error('[viewSessionDetails] Error:', error);
|
||
detailEl.innerHTML = `
|
||
<div class="error-state">
|
||
<div class="error-icon">⚠️</div>
|
||
<h3>Failed to Load Session</h3>
|
||
<p class="error-message">${escapeHtml(error.message)}</p>
|
||
<button class="btn-primary" onclick="loadSessions()">Back to Sessions</button>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
|
||
async function continueSessionInChat(sessionId) {
|
||
console.log('[Sessions] Continuing session in Chat:', sessionId);
|
||
|
||
try {
|
||
showLoadingOverlay('Loading session...');
|
||
|
||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||
if (!res.ok) {
|
||
throw new Error(`HTTP ${res.status}`);
|
||
}
|
||
|
||
const data = await res.json();
|
||
if (!data.session) {
|
||
throw new Error('Session not found');
|
||
}
|
||
|
||
const session = data.session;
|
||
|
||
// Check if session is runnable
|
||
if (session.status === 'terminated' || session.status === 'stopped') {
|
||
hideLoadingOverlay();
|
||
|
||
if (confirm('This session has ended. Do you want to create a new session with the same working directory?')) {
|
||
await duplicateSession(sessionId);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Store pending session and switch views
|
||
window.pendingSessionId = sessionId;
|
||
window.pendingSessionData = session;
|
||
|
||
hideLoadingOverlay();
|
||
switchView('chat');
|
||
|
||
} catch (error) {
|
||
console.error('[continueSessionInChat] Error:', error);
|
||
hideLoadingOverlay();
|
||
showToast('❌ Failed to load session: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function duplicateSession(sessionId) {
|
||
try {
|
||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||
const data = await res.json();
|
||
|
||
if (!data.session) {
|
||
throw new Error('Session not found');
|
||
}
|
||
|
||
const workingDir = data.session.workingDir;
|
||
const projectName = workingDir.split('/').pop();
|
||
|
||
showLoadingOverlay('Duplicating session...');
|
||
|
||
const createRes = await fetch('/claude/api/claude/sessions', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
workingDir,
|
||
metadata: {
|
||
type: 'chat',
|
||
source: 'web-ide',
|
||
project: projectName,
|
||
duplicatedFrom: sessionId
|
||
}
|
||
})
|
||
});
|
||
|
||
if (!createRes.ok) {
|
||
throw new Error(`HTTP ${createRes.status}`);
|
||
}
|
||
|
||
const createData = await createRes.json();
|
||
|
||
hideLoadingOverlay();
|
||
showToast('✅ Session duplicated!', 'success');
|
||
|
||
loadSessions();
|
||
|
||
setTimeout(() => {
|
||
if (confirm('Start chatting in the duplicated session?')) {
|
||
continueSessionInChat(createData.session.id);
|
||
}
|
||
}, 500);
|
||
|
||
} catch (error) {
|
||
console.error('[duplicateSession] Error:', error);
|
||
hideLoadingOverlay();
|
||
showToast('Failed to duplicate session: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
async function terminateSession(sessionId) {
|
||
if (!confirm('Are you sure you want to terminate this session?')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
showLoadingOverlay('Terminating session...');
|
||
|
||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
if (!res.ok) {
|
||
throw new Error(`HTTP ${res.status}`);
|
||
}
|
||
|
||
hideLoadingOverlay();
|
||
showToast('✅ Session terminated', 'success');
|
||
|
||
loadSessions();
|
||
|
||
if (currentSession && currentSession.id === sessionId) {
|
||
document.getElementById('session-detail').innerHTML = `
|
||
<div class="placeholder">
|
||
<h2>Session Terminated</h2>
|
||
<p>Select another session from the sidebar</p>
|
||
</div>
|
||
`;
|
||
currentSession = null;
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('[terminateSession] Error:', error);
|
||
hideLoadingOverlay();
|
||
showToast('Failed to terminate session: ' + error.message, 'error');
|
||
}
|
||
}
|
||
|
||
// Projects
|
||
async function loadProjects() {
|
||
try {
|
||
const res = await fetch('/claude/api/claude/projects');
|
||
const data = await res.json();
|
||
|
||
const gridEl = document.getElementById('projects-grid');
|
||
if (data.projects && data.projects.length > 0) {
|
||
gridEl.innerHTML = data.projects.map(project => `
|
||
<div class="project-card" onclick="viewProject('${project.name}')">
|
||
<h3>${project.name}</h3>
|
||
<p class="project-meta">
|
||
Modified: ${new Date(project.modified).toLocaleString()}
|
||
</p>
|
||
<p class="project-description">Click to view project details</p>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
gridEl.innerHTML = '<p class="placeholder">No projects yet. Create your first project!</p>';
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading projects:', error);
|
||
}
|
||
}
|
||
|
||
async function viewProject(projectName) {
|
||
// Open the project file in the files view
|
||
const path = `Claude Projects/${projectName}.md`;
|
||
loadFileContent(path);
|
||
switchView('files');
|
||
}
|
||
|
||
// Files
|
||
async function loadFiles() {
|
||
try {
|
||
const res = await fetch('/claude/api/files');
|
||
const data = await res.json();
|
||
|
||
const treeEl = document.getElementById('file-tree');
|
||
treeEl.innerHTML = renderFileTree(data.tree);
|
||
} catch (error) {
|
||
console.error('Error loading files:', error);
|
||
}
|
||
}
|
||
|
||
async function loadTerminal() {
|
||
// Initialize terminal manager if not already done
|
||
if (!window.terminalManager) {
|
||
window.terminalManager = new TerminalManager();
|
||
await window.terminalManager.initialize();
|
||
}
|
||
|
||
// Set up new terminal button
|
||
const btnNewTerminal = document.getElementById('btn-new-terminal');
|
||
if (btnNewTerminal) {
|
||
btnNewTerminal.onclick = () => {
|
||
window.terminalManager.createTerminal();
|
||
};
|
||
}
|
||
}
|
||
|
||
function renderFileTree(tree, level = 0) {
|
||
return tree.map(item => {
|
||
const padding = level * 1 + 0.5;
|
||
const icon = item.type === 'folder' ? '📁' : '📄';
|
||
|
||
if (item.type === 'folder' && item.children) {
|
||
return `
|
||
<div style="padding-left: ${padding}rem">
|
||
<div class="tree-item folder" onclick="toggleFolder(this)">
|
||
<span>${icon}</span>
|
||
<span>${item.name}</span>
|
||
</div>
|
||
<div class="tree-children" style="display: none;">
|
||
${renderFileTree(item.children, level + 1)}
|
||
</div>
|
||
</div>
|
||
`;
|
||
} else {
|
||
return `
|
||
<div style="padding-left: ${padding}rem">
|
||
<div class="tree-item file" onclick="loadFile('${item.path}')">
|
||
<span>${icon}</span>
|
||
<span>${item.name}</span>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
}).join('');
|
||
}
|
||
|
||
function toggleFolder(element) {
|
||
const children = element.parentElement.querySelector('.tree-children');
|
||
const icon = element.querySelector('span:first-child');
|
||
|
||
if (children.style.display === 'none') {
|
||
children.style.display = 'block';
|
||
icon.textContent = '📂';
|
||
} else {
|
||
children.style.display = 'none';
|
||
icon.textContent = '📁';
|
||
}
|
||
}
|
||
|
||
async function loadFile(filePath) {
|
||
try {
|
||
const res = await fetch(`/claude/api/file/${encodeURIComponent(filePath)}`);
|
||
const data = await res.json();
|
||
|
||
// Check if Monaco Editor component is available
|
||
if (window.monacoEditor) {
|
||
// Use the Monaco-based editor
|
||
await window.monacoEditor.openFile(filePath, data.content || '');
|
||
} else {
|
||
// Fallback to simple view
|
||
console.warn('[loadFile] Monaco Editor not available, using fallback');
|
||
const editorEl = document.getElementById('file-editor');
|
||
|
||
const isHtmlFile = filePath.toLowerCase().endsWith('.html') || filePath.toLowerCase().endsWith('.htm');
|
||
|
||
if (isHtmlFile) {
|
||
// HTML file - show with preview option
|
||
editorEl.innerHTML = `
|
||
<div class="file-header">
|
||
<h2>${filePath}</h2>
|
||
<div class="file-actions">
|
||
<button class="btn-secondary btn-sm" onclick="showHtmlPreview('${filePath}')">👁️ Preview</button>
|
||
</div>
|
||
</div>
|
||
<div class="file-content" id="file-content-view">
|
||
<div class="view-toggle">
|
||
<button class="toggle-btn active" data-view="code" onclick="switchFileView('code')">Code</button>
|
||
<button class="toggle-btn" data-view="preview" onclick="switchFileView('preview')">Preview</button>
|
||
</div>
|
||
<div class="code-view">
|
||
<pre><code class="language-html">${escapeHtml(data.content || '')}</code></pre>
|
||
</div>
|
||
<div class="preview-view" style="display: none;">
|
||
<iframe id="html-preview-frame" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Store file content for preview
|
||
window.currentFileContent = data.content || '';
|
||
window.currentFilePath = filePath;
|
||
|
||
// Highlight code
|
||
if (window.hljs) {
|
||
document.querySelectorAll('#file-content-view pre code').forEach((block) => {
|
||
hljs.highlightElement(block);
|
||
});
|
||
}
|
||
} else {
|
||
// Non-HTML file - show content
|
||
const language = getLanguageFromFile(filePath);
|
||
editorEl.innerHTML = `
|
||
<div class="file-header">
|
||
<h2>${filePath}</h2>
|
||
<span class="language-badge">${language}</span>
|
||
</div>
|
||
<div class="file-content">
|
||
<pre class="code-content"><code>${escapeHtml(data.content || '')}</code></pre>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading file:', error);
|
||
const editorEl = document.getElementById('file-editor');
|
||
if (editorEl) {
|
||
editorEl.innerHTML = `
|
||
<div class="file-error">
|
||
<h2>Error loading file</h2>
|
||
<p>${error.message}</p>
|
||
</div>
|
||
`;
|
||
}
|
||
}
|
||
}
|
||
|
||
// Helper function to get language from file path
|
||
function getLanguageFromFile(filePath) {
|
||
const ext = filePath.split('.').pop().toLowerCase();
|
||
const languageMap = {
|
||
'js': 'JavaScript',
|
||
'jsx': 'JavaScript JSX',
|
||
'ts': 'TypeScript',
|
||
'tsx': 'TypeScript JSX',
|
||
'py': 'Python',
|
||
'html': 'HTML',
|
||
'css': 'CSS',
|
||
'json': 'JSON',
|
||
'md': 'Markdown',
|
||
'txt': 'Plain Text'
|
||
};
|
||
return languageMap[ext] || 'Plain Text';
|
||
}
|
||
|
||
async function loadFileContent(filePath) {
|
||
await loadFile(filePath);
|
||
switchView('files');
|
||
}
|
||
|
||
// HTML Preview Functions
|
||
function showHtmlPreview(filePath) {
|
||
switchFileView('preview');
|
||
}
|
||
|
||
function switchFileView(view) {
|
||
const codeView = document.querySelector('.code-view');
|
||
const previewView = document.querySelector('.preview-view');
|
||
const toggleBtns = document.querySelectorAll('.toggle-btn');
|
||
|
||
// Update buttons
|
||
toggleBtns.forEach(btn => {
|
||
btn.classList.remove('active');
|
||
if (btn.dataset.view === view) {
|
||
btn.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Show/hide views
|
||
if (view === 'code') {
|
||
codeView.style.display = 'block';
|
||
previewView.style.display = 'none';
|
||
} else if (view === 'preview') {
|
||
codeView.style.display = 'none';
|
||
previewView.style.display = 'block';
|
||
|
||
// Load HTML into iframe using blob URL
|
||
const iframe = document.getElementById('html-preview-frame');
|
||
if (iframe && window.currentFileContent) {
|
||
// Create blob URL from HTML content
|
||
const blob = new Blob([window.currentFileContent], { type: 'text/html' });
|
||
const blobUrl = URL.createObjectURL(blob);
|
||
|
||
// Load blob URL in iframe
|
||
iframe.src = blobUrl;
|
||
|
||
// Clean up blob URL when iframe is unloaded
|
||
iframe.onload = () => {
|
||
// Keep the blob URL active while preview is shown
|
||
};
|
||
}
|
||
}
|
||
}
|
||
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
// Modals
|
||
function createNewSession() {
|
||
document.getElementById('modal-overlay').classList.remove('hidden');
|
||
document.getElementById('new-session-modal').classList.remove('hidden');
|
||
}
|
||
|
||
function createNewProject() {
|
||
document.getElementById('modal-overlay').classList.remove('hidden');
|
||
document.getElementById('new-project-modal').classList.remove('hidden');
|
||
}
|
||
|
||
function closeModal() {
|
||
document.getElementById('modal-overlay').classList.add('hidden');
|
||
document.querySelectorAll('.modal').forEach(modal => {
|
||
modal.classList.add('hidden');
|
||
});
|
||
}
|
||
|
||
async function submitNewSession() {
|
||
const workingDir = document.getElementById('session-working-dir').value;
|
||
const project = document.getElementById('session-project').value;
|
||
|
||
try {
|
||
const res = await fetch('/claude/api/claude/sessions', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
workingDir,
|
||
metadata: { project }
|
||
})
|
||
});
|
||
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
closeModal();
|
||
viewSession(data.session.id);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error creating session:', error);
|
||
alert('Failed to create session');
|
||
}
|
||
}
|
||
|
||
async function submitNewProject() {
|
||
const name = document.getElementById('project-name').value;
|
||
const description = document.getElementById('project-description').value;
|
||
const type = document.getElementById('project-type').value;
|
||
|
||
if (!name) {
|
||
alert('Please enter a project name');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const res = await fetch('/claude/api/claude/projects', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ name, description, type })
|
||
});
|
||
|
||
const data = await res.json();
|
||
|
||
if (data.success) {
|
||
closeModal();
|
||
loadProjects();
|
||
viewProject(name);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error creating project:', error);
|
||
alert('Failed to create project');
|
||
}
|
||
}
|
||
|
||
// Utility functions
|
||
function escapeHtml(text) {
|
||
const div = document.createElement('div');
|
||
div.textContent = text;
|
||
return div.innerHTML;
|
||
}
|
||
|
||
/**
|
||
* Show loading overlay
|
||
* @param {string} message - The message to display
|
||
*/
|
||
function showLoadingOverlay(message = 'Loading...') {
|
||
let overlay = document.getElementById('loading-overlay');
|
||
|
||
if (!overlay) {
|
||
overlay = document.createElement('div');
|
||
overlay.id = 'loading-overlay';
|
||
overlay.className = 'loading-overlay';
|
||
overlay.innerHTML = `
|
||
<div class="loading-spinner"></div>
|
||
<p class="loading-text">${escapeHtml(message)}</p>
|
||
`;
|
||
document.body.appendChild(overlay);
|
||
} else {
|
||
// Update message if provided
|
||
const textElement = overlay.querySelector('.loading-text');
|
||
if (textElement) {
|
||
textElement.textContent = message;
|
||
}
|
||
}
|
||
|
||
overlay.classList.remove('hidden');
|
||
setTimeout(() => {
|
||
overlay.classList.add('visible');
|
||
}, 10);
|
||
}
|
||
|
||
/**
|
||
* Hide loading overlay
|
||
*/
|
||
function hideLoadingOverlay() {
|
||
const overlay = document.getElementById('loading-overlay');
|
||
if (overlay) {
|
||
overlay.classList.remove('visible');
|
||
setTimeout(() => {
|
||
overlay.classList.add('hidden');
|
||
}, 300);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Show toast notification
|
||
* @param {string} message - The message to display
|
||
* @param {string} type - The type of toast: 'success', 'error', 'info'
|
||
* @param {number} duration - Duration in milliseconds (default: 3000)
|
||
*/
|
||
function showToast(message, type = 'info', duration = 3000) {
|
||
// Remove existing toasts
|
||
const existingToasts = document.querySelectorAll('.toast-notification');
|
||
existingToasts.forEach(toast => toast.remove());
|
||
|
||
// Create toast element
|
||
const toast = document.createElement('div');
|
||
toast.className = `toast-notification toast-${type}`;
|
||
toast.innerHTML = `
|
||
<span class="toast-icon">${getToastIcon(type)}</span>
|
||
<span class="toast-message">${escapeHtml(message)}</span>
|
||
`;
|
||
|
||
document.body.appendChild(toast);
|
||
|
||
// Trigger animation
|
||
setTimeout(() => {
|
||
toast.classList.add('visible');
|
||
}, 10);
|
||
|
||
// Auto remove after duration
|
||
setTimeout(() => {
|
||
toast.classList.remove('visible');
|
||
setTimeout(() => {
|
||
toast.remove();
|
||
}, 300);
|
||
}, duration);
|
||
}
|
||
|
||
/**
|
||
* Get toast icon based on type
|
||
*/
|
||
function getToastIcon(type) {
|
||
const icons = {
|
||
success: '✓',
|
||
error: '✕',
|
||
info: 'ℹ',
|
||
warning: '⚠'
|
||
};
|
||
return icons[type] || icons.info;
|
||
}
|
||
|
||
function showProjects() {
|
||
switchView('projects');
|
||
}
|
||
|
||
// Logout
|
||
document.getElementById('logout-btn')?.addEventListener('click', async () => {
|
||
try {
|
||
await fetch('/claude/api/logout', { method: 'POST' });
|
||
window.location.reload();
|
||
} catch (error) {
|
||
console.error('Error logging out:', error);
|
||
}
|
||
});
|