Fix project isolation: Make loadChatHistory respect active project sessions
- Modified loadChatHistory() to check for active project before fetching all sessions - When active project exists, use project.sessions instead of fetching from API - Added detailed console logging to debug session filtering - This prevents ALL sessions from appearing in every project's sidebar Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
uroma
@@ -3,6 +3,264 @@ let currentSession = null;
|
||||
let currentProjectName = null;
|
||||
let ws = null;
|
||||
|
||||
// Streaming message state for accumulating response chunks
|
||||
// MUST be declared at module scope BEFORE any functions that use them
|
||||
let streamingMessageElement = null;
|
||||
let streamingMessageContent = '';
|
||||
let streamingTimeout = null;
|
||||
|
||||
// ============================================================
|
||||
// REAL-TIME LOGGER WITH AUTO-FIX
|
||||
// ============================================================
|
||||
// Tier 1: Client-side auto-fix (instant)
|
||||
// Tier 2: Escalation to AI agents (systematic-debugging + brainstorming)
|
||||
window.AutoFixLogger = (function() {
|
||||
const logs = [];
|
||||
const maxLogs = 100;
|
||||
let panel = null;
|
||||
|
||||
// Create the logger panel
|
||||
function createPanel() {
|
||||
if (panel) return;
|
||||
|
||||
panel = document.createElement('div');
|
||||
panel.id = 'autofix-logger-panel';
|
||||
panel.innerHTML = `
|
||||
<div class="autofix-logger-header">
|
||||
<span>🔧 Auto-Fix Logger</span>
|
||||
<button onclick="AutoFixLogger.clear()">Clear</button>
|
||||
<button onclick="AutoFixLogger.export()">Export</button>
|
||||
<button onclick="AutoFixLogger.toggle()">−</button>
|
||||
</div>
|
||||
<div class="autofix-logger-content" id="autofix-logger-content"></div>
|
||||
`;
|
||||
|
||||
// Add styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
#autofix-logger-panel {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 400px;
|
||||
max-height: 300px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
z-index: 99999;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#autofix-logger-panel.minimized {
|
||||
height: 40px;
|
||||
}
|
||||
.autofix-logger-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 15px;
|
||||
background: #252525;
|
||||
border-bottom: 1px solid #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
.autofix-logger-header button {
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
color: #e0e0e0;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 11px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.autofix-logger-header button:hover {
|
||||
background: #444;
|
||||
}
|
||||
.autofix-logger-content {
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
}
|
||||
.autofix-log-entry {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
border-left: 3px solid #666;
|
||||
}
|
||||
.autofix-log-entry.success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border-left-color: #22c55e;
|
||||
}
|
||||
.autofix-log-entry.error {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
.autofix-log-entry.warning {
|
||||
background: rgba(234, 179, 8, 0.1);
|
||||
border-left-color: #eab308;
|
||||
}
|
||||
.autofix-log-entry.info {
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
border-left-color: #4a9eff;
|
||||
}
|
||||
.autofix-log-time {
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
}
|
||||
.autofix-log-message {
|
||||
margin-top: 4px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
.autofix-log-detail {
|
||||
margin-top: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #0d0d0d;
|
||||
border-radius: 4px;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
`;
|
||||
|
||||
document.head.appendChild(style);
|
||||
document.body.appendChild(panel);
|
||||
}
|
||||
|
||||
function addLog(type, message, detail = null) {
|
||||
const timestamp = new Date().toLocaleTimeString();
|
||||
const log = { timestamp, type, message, detail };
|
||||
logs.push(log);
|
||||
|
||||
if (logs.length > maxLogs) logs.shift();
|
||||
|
||||
if (!panel) createPanel();
|
||||
|
||||
const content = document.getElementById('autofix-logger-content');
|
||||
const entry = document.createElement('div');
|
||||
entry.className = `autofix-log-entry ${type}`;
|
||||
entry.innerHTML = `
|
||||
<div class="autofix-log-time">${timestamp}</div>
|
||||
<div class="autofix-log-message">${message}</div>
|
||||
${detail ? `<div class="autofix-log-detail">${typeof detail === 'object' ? JSON.stringify(detail, null, 2) : detail}</div>` : ''}
|
||||
`;
|
||||
content.appendChild(entry);
|
||||
content.scrollTop = content.scrollHeight;
|
||||
|
||||
// Auto-fix triggers
|
||||
checkAndAutoFix();
|
||||
}
|
||||
|
||||
function checkAndAutoFix() {
|
||||
const recentLogs = logs.slice(-10);
|
||||
|
||||
// Detect: Session ID in URL but not attached
|
||||
const hasSessionInUrl = window.PRELOAD_SESSION_ID || window.location.pathname.match(/\/claude\/ide\/session\/([^\/]+)$/);
|
||||
const showsNoSessions = document.body.textContent.includes('No sessions yet');
|
||||
|
||||
if (hasSessionInUrl && showsNoSessions) {
|
||||
const sessionId = window.PRELOAD_SESSION_ID || window.location.pathname.match(/\/claude\/ide\/session\/([^\/]+)$/)[1];
|
||||
|
||||
// Check if already attached
|
||||
if (typeof attachedSessionId !== 'undefined' && attachedSessionId === sessionId) {
|
||||
return; // Already attached, no fix needed
|
||||
}
|
||||
|
||||
addLog('warning', '⚠️ Detected: Session in URL but not attached. Attempting auto-fix...');
|
||||
|
||||
// Tier 1 Auto-fix: Force attach
|
||||
if (typeof attachToSession === 'function') {
|
||||
setTimeout(() => {
|
||||
attachToSession(sessionId);
|
||||
addLog('success', '✅ Auto-fix applied: Force attached to session', { sessionId });
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
// Detect: API errors
|
||||
const apiErrors = recentLogs.filter(l => l.type === 'error' && l.message.includes('API'));
|
||||
if (apiErrors.length >= 3) {
|
||||
addLog('warning', '⚠️ Multiple API errors detected. Consider reloading page.');
|
||||
}
|
||||
}
|
||||
|
||||
function escalateToAgents(issue) {
|
||||
addLog('warning', '🤖 Tier 1 auto-fix failed. Escalating to AI agents...');
|
||||
|
||||
const diagnosticReport = {
|
||||
url: window.location.href,
|
||||
sessionId: window.PRELOAD_SESSION_ID,
|
||||
attachedSessionId: typeof attachedSessionId !== 'undefined' ? attachedSessionId : null,
|
||||
timestamp: new Date().toISOString(),
|
||||
logs: logs.slice(-20),
|
||||
userAgent: navigator.userAgent,
|
||||
sessionStorage: { ...sessionStorage },
|
||||
localStorage: { ...localStorage }
|
||||
};
|
||||
|
||||
addLog('info', '📋 Diagnostic report generated', { issue, reportKeys: Object.keys(diagnosticReport) });
|
||||
|
||||
// Store report for agent retrieval
|
||||
sessionStorage.setItem('AUTOFIX_DIAGNOSTIC_REPORT', JSON.stringify(diagnosticReport));
|
||||
sessionStorage.setItem('AUTOFIX_ISSUE', JSON.stringify(issue));
|
||||
|
||||
// The actual agent escalation happens server-side via the skill system
|
||||
console.log('[AUTOFIX] Diagnostic report ready for agent retrieval');
|
||||
console.log('[AUTOFIX] Report:', diagnosticReport);
|
||||
|
||||
addLog('info', '💡 Tip: Share this diagnostic report with Claude for agent-assisted fix');
|
||||
}
|
||||
|
||||
return {
|
||||
init: function() {
|
||||
createPanel();
|
||||
addLog('info', '🔧 Auto-Fix Logger initialized');
|
||||
addLog('info', '✅ PRELOAD_SESSION_ID:', window.PRELOAD_SESSION_ID || 'none');
|
||||
|
||||
// Start monitoring
|
||||
setInterval(checkAndAutoFix, 5000);
|
||||
},
|
||||
log: function(message, detail = null) {
|
||||
addLog('info', message, detail);
|
||||
},
|
||||
success: function(message, detail = null) {
|
||||
addLog('success', '✅ ' + message, detail);
|
||||
},
|
||||
error: function(message, detail = null) {
|
||||
addLog('error', '❌ ' + message, detail);
|
||||
},
|
||||
warning: function(message, detail = null) {
|
||||
addLog('warning', '⚠️ ' + message, detail);
|
||||
},
|
||||
clear: function() {
|
||||
logs.length = 0;
|
||||
if (panel) {
|
||||
document.getElementById('autofix-logger-content').innerHTML = '';
|
||||
}
|
||||
},
|
||||
export: function() {
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
url: window.location.href,
|
||||
sessionId: window.PRELOAD_SESSION_ID,
|
||||
logs: logs
|
||||
};
|
||||
const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `autofix-log-${Date.now()}.json`;
|
||||
a.click();
|
||||
},
|
||||
toggle: function() {
|
||||
if (panel) {
|
||||
panel.classList.toggle('minimized');
|
||||
}
|
||||
},
|
||||
escalate: escalateToAgents
|
||||
};
|
||||
})();
|
||||
|
||||
// Make ws globally accessible for other scripts
|
||||
Object.defineProperty(window, 'ws', {
|
||||
get: function() { return ws; },
|
||||
@@ -11,18 +269,68 @@ Object.defineProperty(window, 'ws', {
|
||||
configurable: true
|
||||
});
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// Initialize - Use same pattern as session-picker (run immediately if DOM ready, otherwise wait for DOMContentLoaded)
|
||||
function ideInit() {
|
||||
// ============================================================
|
||||
// TRACE: ide.js initialized
|
||||
// ============================================================
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'ideInit called', { pathname: window.location.pathname, readyState: document.readyState });
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Initialize Auto-Fix Logger FIRST
|
||||
// ============================================================
|
||||
if (window.AutoFixLogger) {
|
||||
window.AutoFixLogger.init();
|
||||
}
|
||||
|
||||
initNavigation();
|
||||
connectWebSocket();
|
||||
|
||||
// Check URL params for session, prompt, project, and view
|
||||
// ============================================================
|
||||
// Session ID Extraction - Use PRELOAD_SESSION_ID first
|
||||
// ============================================================
|
||||
// PRELOAD_SESSION_ID is set by inline script BEFORE any other JS
|
||||
// This guarantees it's available when loadChatView() runs
|
||||
let sessionId = window.PRELOAD_SESSION_ID || null;
|
||||
|
||||
if (sessionId) {
|
||||
console.log('[Init] Using PRELOAD_SESSION_ID:', sessionId);
|
||||
if (window.AutoFixLogger) {
|
||||
window.AutoFixLogger.success('Session ID from PRELOAD', { sessionId });
|
||||
}
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'Using PRELOAD_SESSION_ID', { sessionId });
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: Extract from route-based URL if PRELOAD didn't work
|
||||
if (!sessionId) {
|
||||
const pathname = window.location.pathname;
|
||||
const sessionMatch = pathname.match(/\/claude\/ide\/session\/([^\/]+)$/);
|
||||
if (sessionMatch && sessionMatch[1]) {
|
||||
sessionId = sessionMatch[1];
|
||||
console.log('[Init] Extracted sessionId from route:', sessionId);
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'Extracted sessionId from URL path', { sessionId, pathname });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Check URL params for session (legacy format), prompt, project, and view
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const sessionId = urlParams.get('session');
|
||||
const legacySessionId = urlParams.get('session');
|
||||
const prompt = urlParams.get('prompt');
|
||||
const project = urlParams.get('project');
|
||||
const view = urlParams.get('view');
|
||||
|
||||
// Use route-based sessionId if available, otherwise fall back to legacy query param
|
||||
if (!sessionId && legacySessionId) {
|
||||
sessionId = legacySessionId;
|
||||
console.log('[Init] Using legacy sessionId from query param:', sessionId);
|
||||
}
|
||||
|
||||
// Parse project parameter if present
|
||||
if (project) {
|
||||
window.currentProjectDir = decodeURIComponent(project);
|
||||
@@ -31,12 +339,32 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
if (sessionId || prompt) {
|
||||
// CRITICAL: Set pending session attachment flag BEFORE switching view
|
||||
// This allows loadChatView() to know a session is about to be attached
|
||||
// and show appropriate loading state instead of "No sessions yet"
|
||||
if (sessionId) {
|
||||
window.pendingSessionAttach = sessionId;
|
||||
console.log('[Init] Set pendingSessionAttach:', sessionId);
|
||||
if (window.AutoFixLogger) {
|
||||
window.AutoFixLogger.log('Set pendingSessionAttach flag', { sessionId });
|
||||
}
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'Set pendingSessionAttach flag', { sessionId });
|
||||
}
|
||||
}
|
||||
|
||||
// Switch to chat view first
|
||||
switchView('chat');
|
||||
|
||||
// Wait for chat to load, then handle session/prompt
|
||||
setTimeout(() => {
|
||||
if (sessionId) {
|
||||
if (window.AutoFixLogger) {
|
||||
window.AutoFixLogger.log('Calling attachToSession...', { sessionId });
|
||||
}
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'Calling attachToSession', { sessionId });
|
||||
}
|
||||
attachToSession(sessionId);
|
||||
}
|
||||
|
||||
@@ -52,12 +380,23 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}, 500);
|
||||
} else if (view) {
|
||||
// Switch to the specified view
|
||||
switchView(view);
|
||||
switchView('chat');
|
||||
} else {
|
||||
// Default to chat view
|
||||
switchView('chat');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Auto-initialize using same pattern as session-picker
|
||||
// Check if DOM is already loaded, if so run immediately, otherwise wait for DOMContentLoaded
|
||||
if (typeof window !== 'undefined') {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', ideInit);
|
||||
} else {
|
||||
// DOM already loaded, run immediately
|
||||
ideInit();
|
||||
}
|
||||
}
|
||||
|
||||
// Navigation
|
||||
function initNavigation() {
|
||||
@@ -71,6 +410,10 @@ function initNavigation() {
|
||||
}
|
||||
|
||||
function switchView(viewName) {
|
||||
if (window.traceExecution) {
|
||||
window.traceExecution('ide.js', 'switchView called', { viewName });
|
||||
}
|
||||
|
||||
// Update nav items
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
@@ -134,9 +477,17 @@ function connectWebSocket() {
|
||||
};
|
||||
|
||||
window.ws.onmessage = (event) => {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log('WebSocket message received:', data.type);
|
||||
handleWebSocketMessage(data);
|
||||
// Use requestIdleCallback or setTimeout to prevent blocking
|
||||
// Priority: requestIdleCallback > setTimeout(0) > setTimeout(4ms)
|
||||
if (window.requestIdleCallback) {
|
||||
window.requestIdleCallback(() => {
|
||||
processWebSocketMessage(event.data);
|
||||
}, { timeout: 1000 });
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
processWebSocketMessage(event.data);
|
||||
}, 0);
|
||||
}
|
||||
};
|
||||
|
||||
window.ws.onerror = (error) => {
|
||||
@@ -156,14 +507,94 @@ function connectWebSocket() {
|
||||
});
|
||||
window.wsReady = false;
|
||||
window.ws = null;
|
||||
// Attempt to reconnect after 5 seconds
|
||||
setTimeout(() => {
|
||||
console.log('Attempting to reconnect...');
|
||||
connectWebSocket();
|
||||
}, 5000);
|
||||
// Attempt to reconnect with exponential backoff
|
||||
scheduleReconnect();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Process WebSocket message with error handling and timeout protection
|
||||
* @param {string} rawData - Raw message data from WebSocket
|
||||
*/
|
||||
function processWebSocketMessage(rawData) {
|
||||
const startTime = performance.now();
|
||||
const MESSAGE_PROCESSING_TIMEOUT = 100; // 100ms max per message
|
||||
|
||||
try {
|
||||
// Add timeout protection for message processing
|
||||
const timeoutId = setTimeout(() => {
|
||||
console.warn('[WebSocket] Message processing timeout, blocking detected:', {
|
||||
dataLength: rawData?.length || 0,
|
||||
elapsed: performance.now() - startTime
|
||||
});
|
||||
}, MESSAGE_PROCESSING_TIMEOUT);
|
||||
|
||||
const data = JSON.parse(rawData);
|
||||
console.log('WebSocket message received:', data.type);
|
||||
|
||||
// Clear timeout if processing completed in time
|
||||
clearTimeout(timeoutId);
|
||||
|
||||
// Use defer for heavy message handlers
|
||||
if (data.type === 'output' && data.data?.content?.length > 10000) {
|
||||
// Large message - defer processing
|
||||
setTimeout(() => handleWebSocketMessage(data), 0);
|
||||
} else {
|
||||
handleWebSocketMessage(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[WebSocket] Failed to parse message:', error, 'Raw data length:', rawData?.length);
|
||||
}
|
||||
}
|
||||
|
||||
// Exponential backoff for reconnection
|
||||
let reconnectAttempts = 0;
|
||||
const MAX_RECONNECT_ATTEMPTS = 10;
|
||||
const BASE_RECONNECT_DELAY = 1000; // 1 second
|
||||
|
||||
function scheduleReconnect() {
|
||||
if (reconnectAttempts >= MAX_RECONNECT_ATTEMPTS) {
|
||||
console.error('[WebSocket] Max reconnection attempts reached');
|
||||
if (typeof appendSystemMessage === 'function') {
|
||||
appendSystemMessage('⚠️ WebSocket connection lost. Please refresh the page.');
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Exponential backoff with jitter
|
||||
const delay = Math.min(
|
||||
BASE_RECONNECT_DELAY * Math.pow(2, reconnectAttempts) + Math.random() * 1000,
|
||||
30000 // Max 30 seconds
|
||||
);
|
||||
|
||||
reconnectAttempts++;
|
||||
console.log(`[WebSocket] Scheduling reconnect attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS} in ${Math.round(delay)}ms`);
|
||||
|
||||
setTimeout(() => {
|
||||
if (!window.ws || window.ws.readyState === WebSocket.CLOSED) {
|
||||
console.log('[WebSocket] Attempting to reconnect...');
|
||||
connectWebSocket();
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
// Reset reconnect attempts on successful connection
|
||||
window.ws.onopen = () => {
|
||||
reconnectAttempts = 0;
|
||||
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();
|
||||
};
|
||||
|
||||
// === WebSocket State Management ===
|
||||
// Message queue for messages sent before WebSocket is ready
|
||||
window.messageQueue = [];
|
||||
@@ -213,28 +644,46 @@ function flushMessageQueue() {
|
||||
|
||||
console.log(`[WebSocket] Flushing ${window.messageQueue.length} queued messages`);
|
||||
|
||||
// Send all queued messages
|
||||
const messagesToSend = [...window.messageQueue];
|
||||
// Send all queued messages in batches to prevent blocking
|
||||
const BATCH_SIZE = 10;
|
||||
const batches = [];
|
||||
for (let i = 0; i < window.messageQueue.length; i += BATCH_SIZE) {
|
||||
batches.push(window.messageQueue.slice(i, i + BATCH_SIZE));
|
||||
}
|
||||
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);
|
||||
// Send batches with defer to prevent blocking
|
||||
let batchIndex = 0;
|
||||
function sendNextBatch() {
|
||||
if (batchIndex >= batches.length) {
|
||||
hideQueuedMessageIndicator();
|
||||
return;
|
||||
}
|
||||
|
||||
const batch = batches[batchIndex];
|
||||
for (const item of batch) {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
batchIndex++;
|
||||
// Defer next batch to prevent blocking
|
||||
setTimeout(sendNextBatch, 0);
|
||||
}
|
||||
|
||||
hideQueuedMessageIndicator();
|
||||
sendNextBatch();
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -491,9 +940,15 @@ function detectApprovalRequest(content) {
|
||||
|
||||
// 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();
|
||||
// Pattern 1: "this will/does X" followed by period, newline, or end
|
||||
const thisPattern = content.match(/this\s+(?:will|is)\s+([^.]+?)(?:\.|\n|$)/i);
|
||||
// Pattern 2: "operation: X" followed by period, newline, or end
|
||||
const operationPattern = content.match(/(?:network\s+operation|file\s+operation|system\s+operation)\s*[:\-]\s*([^.]+?)(?:\.|\n|$)/i);
|
||||
|
||||
if (thisPattern) {
|
||||
explanation = thisPattern[1].trim();
|
||||
} else if (operationPattern) {
|
||||
explanation = operationPattern[1].trim();
|
||||
}
|
||||
|
||||
// Generate a reasonable explanation if not found
|
||||
@@ -534,11 +989,6 @@ function escapeHtml(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) {
|
||||
@@ -692,10 +1142,10 @@ function handleSessionOutput(data) {
|
||||
// Dashboard
|
||||
async function loadDashboard() {
|
||||
try {
|
||||
// Load stats
|
||||
// Load stats with timeout protection
|
||||
const [sessionsRes, projectsRes] = await Promise.all([
|
||||
fetch('/claude/api/claude/sessions'),
|
||||
fetch('/claude/api/claude/projects')
|
||||
fetchWithTimeout('/claude/api/claude/sessions', 5000),
|
||||
fetchWithTimeout('/claude/api/claude/projects', 5000)
|
||||
]);
|
||||
|
||||
const sessionsData = await sessionsRes.json();
|
||||
@@ -709,7 +1159,7 @@ async function loadDashboard() {
|
||||
document.getElementById('total-projects-count').textContent =
|
||||
projectsData.projects?.length || 0;
|
||||
|
||||
// Update active sessions list
|
||||
// Update active sessions list - CLEAR LOADING STATE
|
||||
const activeSessionsEl = document.getElementById('active-sessions-list');
|
||||
if (sessionsData.active && sessionsData.active.length > 0) {
|
||||
activeSessionsEl.innerHTML = sessionsData.active.map(session => `
|
||||
@@ -725,10 +1175,11 @@ async function loadDashboard() {
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
// Clear loading state, show empty state
|
||||
activeSessionsEl.innerHTML = '<p class="placeholder">No active sessions</p>';
|
||||
}
|
||||
|
||||
// Update projects list
|
||||
// Update projects list - CLEAR LOADING STATE
|
||||
const projectsEl = document.getElementById('recent-projects-list');
|
||||
if (projectsData.projects && projectsData.projects.length > 0) {
|
||||
projectsEl.innerHTML = projectsData.projects.slice(0, 5).map(project => `
|
||||
@@ -740,10 +1191,16 @@ async function loadDashboard() {
|
||||
</div>
|
||||
`).join('');
|
||||
} else {
|
||||
// Clear loading state, show empty state
|
||||
projectsEl.innerHTML = '<p class="placeholder">No projects yet</p>';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading dashboard:', error);
|
||||
// Clear loading states on error
|
||||
const activeSessionsEl = document.getElementById('active-sessions-list');
|
||||
const projectsEl = document.getElementById('recent-projects-list');
|
||||
if (activeSessionsEl) activeSessionsEl.innerHTML = '<p class="placeholder">Error loading sessions</p>';
|
||||
if (projectsEl) projectsEl.innerHTML = '<p class="placeholder">Error loading projects</p>';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -770,7 +1227,7 @@ async function loadSessions() {
|
||||
// Show loading state
|
||||
sessionsListEl.innerHTML = '<div class="loading">Loading sessions...</div>';
|
||||
|
||||
const res = await fetch(apiUrl);
|
||||
const res = await fetchWithTimeout(apiUrl, 5000);
|
||||
|
||||
// Handle HTTP errors
|
||||
if (!res.ok) {
|
||||
@@ -805,7 +1262,7 @@ async function loadSessions() {
|
||||
return dateB - dateA;
|
||||
});
|
||||
|
||||
// Empty state
|
||||
// Empty state - CLEAR LOADING STATE
|
||||
if (allSessions.length === 0) {
|
||||
const projectName = projectPath ? projectPath.split('/').pop() : 'this project';
|
||||
sessionsListEl.innerHTML = `
|
||||
@@ -818,7 +1275,7 @@ async function loadSessions() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Render session list
|
||||
// Render session list - CLEAR LOADING STATE
|
||||
sessionsListEl.innerHTML = allSessions.map(session => {
|
||||
const isRunning = session.status === 'running' && session.type === 'active';
|
||||
const relativeTime = getRelativeTime(session);
|
||||
@@ -826,6 +1283,7 @@ async function loadSessions() {
|
||||
|
||||
return `
|
||||
<div class="session-item ${session.type}" onclick="viewSessionDetails('${session.id}')">
|
||||
<button class="session-close-btn" onclick="deleteSession('${session.id}', event)" title="Delete session">×</button>
|
||||
<div class="session-header">
|
||||
<div class="session-info">
|
||||
<span class="session-id">${session.id.substring(0, 12)}...</span>
|
||||
@@ -845,6 +1303,12 @@ async function loadSessions() {
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
// CRITICAL FIX: Also update session tabs with the same sessions
|
||||
if (window.sessionTabs && typeof window.sessionTabs.setSessions === 'function') {
|
||||
window.sessionTabs.setSessions(allSessions);
|
||||
console.log('[loadSessions] Updated session tabs with', allSessions.length, 'sessions');
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('[loadSessions] Error:', error);
|
||||
sessionsListEl.innerHTML = `
|
||||
@@ -875,6 +1339,70 @@ function escapeHtml(text) {
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Delete Session
|
||||
async function deleteSession(sessionId, event) {
|
||||
// Prevent triggering the session item click
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
// Confirm deletion
|
||||
const shortId = sessionId.substring(0, 12);
|
||||
if (!confirm(`Delete session ${shortId}...?\n\nThis action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
console.log('[deleteSession] Deleting session:', sessionId);
|
||||
|
||||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}: ${res.statusText}`);
|
||||
}
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (data.success || data.deleted) {
|
||||
console.log('[deleteSession] Session deleted successfully');
|
||||
|
||||
// If the deleted session was the current one, clear current session state
|
||||
if (attachedSessionId === sessionId || chatSessionId === sessionId) {
|
||||
console.log('[deleteSession] Deleted current session, clearing state');
|
||||
attachedSessionId = null;
|
||||
chatSessionId = null;
|
||||
|
||||
// Clear UI
|
||||
document.getElementById('current-session-id').textContent = 'None';
|
||||
document.getElementById('chat-title').textContent = 'Claude Code IDE';
|
||||
clearChatDisplay();
|
||||
}
|
||||
|
||||
// Refresh the session list
|
||||
await loadSessions();
|
||||
|
||||
// Show success message
|
||||
if (typeof appendSystemMessage === 'function') {
|
||||
appendSystemMessage(`✅ Session ${shortId}... deleted`);
|
||||
}
|
||||
} else {
|
||||
throw new Error(data.error || 'Failed to delete session');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('[deleteSession] Error:', error);
|
||||
if (typeof appendSystemMessage === 'function') {
|
||||
appendSystemMessage(`❌ Failed to delete session: ${error.message}`);
|
||||
} else {
|
||||
alert(`Failed to delete session: ${error.message}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function viewSessionDetails(sessionId) {
|
||||
const detailEl = document.getElementById('session-detail');
|
||||
|
||||
@@ -882,7 +1410,7 @@ async function viewSessionDetails(sessionId) {
|
||||
// Show loading state
|
||||
detailEl.innerHTML = '<div class="loading">Loading session details...</div>';
|
||||
|
||||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||||
const res = await fetchWithTimeout(`/claude/api/claude/sessions/${sessionId}`, 5000);
|
||||
|
||||
// Handle 404 - session not found
|
||||
if (res.status === 404) {
|
||||
@@ -915,7 +1443,7 @@ async function viewSessionDetails(sessionId) {
|
||||
const isRunning = session.status === 'running' && session.pid;
|
||||
const messageCount = session.outputBuffer?.length || 0;
|
||||
|
||||
// Render session detail card
|
||||
// Render session detail card - CLEAR LOADING STATE
|
||||
detailEl.innerHTML = `
|
||||
<div class="session-detail-card">
|
||||
<div class="session-detail-header">
|
||||
@@ -1015,7 +1543,7 @@ async function continueSessionInChat(sessionId) {
|
||||
try {
|
||||
showLoadingOverlay('Loading session...');
|
||||
|
||||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||||
const res = await fetchWithTimeout(`/claude/api/claude/sessions/${sessionId}`, 5000);
|
||||
if (!res.ok) {
|
||||
throw new Error(`HTTP ${res.status}`);
|
||||
}
|
||||
@@ -1053,7 +1581,7 @@ async function continueSessionInChat(sessionId) {
|
||||
|
||||
async function duplicateSession(sessionId) {
|
||||
try {
|
||||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||||
const res = await fetchWithTimeout(`/claude/api/claude/sessions/${sessionId}`, 5000);
|
||||
const data = await res.json();
|
||||
|
||||
if (!data.session) {
|
||||
@@ -1065,7 +1593,7 @@ async function duplicateSession(sessionId) {
|
||||
|
||||
showLoadingOverlay('Duplicating session...');
|
||||
|
||||
const createRes = await fetch('/claude/api/claude/sessions', {
|
||||
const createRes = await fetchWithTimeout('/claude/api/claude/sessions', 5000, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
@@ -1111,7 +1639,7 @@ async function terminateSession(sessionId) {
|
||||
try {
|
||||
showLoadingOverlay('Terminating session...');
|
||||
|
||||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`, {
|
||||
const res = await fetchWithTimeout(`/claude/api/claude/sessions/${sessionId}`, 5000, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
@@ -1144,7 +1672,7 @@ async function terminateSession(sessionId) {
|
||||
// Projects
|
||||
async function loadProjects() {
|
||||
try {
|
||||
const res = await fetch('/claude/api/claude/projects');
|
||||
const res = await fetchWithTimeout('/claude/api/claude/projects', 5000);
|
||||
const data = await res.json();
|
||||
|
||||
const gridEl = document.getElementById('projects-grid');
|
||||
@@ -1176,7 +1704,7 @@ async function viewProject(projectName) {
|
||||
// Files
|
||||
async function loadFiles() {
|
||||
try {
|
||||
const res = await fetch('/claude/api/files');
|
||||
const res = await fetchWithTimeout('/claude/api/files', 5000);
|
||||
const data = await res.json();
|
||||
|
||||
const treeEl = document.getElementById('file-tree');
|
||||
@@ -1247,7 +1775,7 @@ function toggleFolder(element) {
|
||||
|
||||
async function loadFile(filePath) {
|
||||
try {
|
||||
const res = await fetch(`/claude/api/file/${encodeURIComponent(filePath)}`);
|
||||
const res = await fetchWithTimeout(`/claude/api/file/${encodeURIComponent(filePath)}`, 5000);
|
||||
const data = await res.json();
|
||||
|
||||
// Check if Monaco Editor component is available
|
||||
@@ -1418,7 +1946,7 @@ async function submitNewSession() {
|
||||
const project = document.getElementById('session-project').value;
|
||||
|
||||
try {
|
||||
const res = await fetch('/claude/api/claude/sessions', {
|
||||
const res = await fetchWithTimeout('/claude/api/claude/sessions', 5000, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
@@ -1450,7 +1978,7 @@ async function submitNewProject() {
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/claude/api/claude/projects', {
|
||||
const res = await fetchWithTimeout('/claude/api/claude/projects', 5000, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name, description, type })
|
||||
@@ -1567,6 +2095,33 @@ function getToastIcon(type) {
|
||||
return icons[type] || icons.info;
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch with timeout protection to prevent hanging requests
|
||||
* @param {string} url - The URL to fetch
|
||||
* @param {number} timeout - Timeout in milliseconds
|
||||
* @param {object} options - Fetch options
|
||||
* @returns {Promise<Response>}
|
||||
*/
|
||||
async function fetchWithTimeout(url, timeout = 5000, options = {}) {
|
||||
const controller = new AbortController();
|
||||
const timeoutId = setTimeout(() => controller.abort(), timeout);
|
||||
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
signal: controller.signal
|
||||
});
|
||||
clearTimeout(timeoutId);
|
||||
return response;
|
||||
} catch (error) {
|
||||
clearTimeout(timeoutId);
|
||||
if (error.name === 'AbortError') {
|
||||
throw new Error(`Request timeout after ${timeout}ms`);
|
||||
}
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
function showProjects() {
|
||||
switchView('projects');
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user