Loading sessions...
';
+
+ const res = await fetch(apiUrl);
+
+ // Handle HTTP errors
+ if (!res.ok) {
+ if (res.status === 401) {
+ sessionsListEl.innerHTML = `
+
+ // 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 = `
+
+
π
+
No sessions found for ${escapeHtml(projectName)}
+
+
+ `;
+ 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 `
+
- `).join('');
- } else {
- sessionsListEl.innerHTML = '
No sessions
';
- }
+ `;
+ }).join('');
+
} catch (error) {
- console.error('Error loading sessions:', error);
+ console.error('[loadSessions] Error:', error);
+ sessionsListEl.innerHTML = `
+
+
β οΈ
+
Failed to load sessions
+
${escapeHtml(error.message)}
+
+
+ `;
}
}
-async function viewSession(sessionId) {
+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 = '
Loading session details...
';
+
+ const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
+
+ // Handle 404 - session not found
+ if (res.status === 404) {
+ detailEl.innerHTML = `
+
+
π
+
Session Not Found
+
The session ${escapeHtml(sessionId)} could not be found.
+
+
+ `;
+ 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 = `
+
+
+
+
+
+
+
Token Usage
+
+
+ ${(session.context?.totalTokens || 0).toLocaleString()} / ${(session.context?.maxTokens || 200000).toLocaleString()} tokens
+ ${Math.round((session.context?.totalTokens || 0) / (session.context?.maxTokens || 200000) * 100)}% used
+
+
+
+
+
Session Output (${messageCount} entries)
+
+
+
+ `;
+
+ currentSession = session;
+
+ } catch (error) {
+ console.error('[viewSessionDetails] Error:', error);
+ detailEl.innerHTML = `
+
+
β οΈ
+
Failed to Load Session
+
${escapeHtml(error.message)}
+
+
+ `;
+ }
+}
+
+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;
+
+ 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();
- currentSession = data.session;
+ if (!data.session) {
+ throw new Error('Session not found');
+ }
- const detailEl = document.getElementById('session-detail');
- detailEl.innerHTML = `
-
+ const workingDir = data.session.workingDir;
+ const projectName = workingDir.split('/').pop();
-
Context Usage
-
-
- ${data.session.context.totalTokens.toLocaleString()} tokens
- ${Math.round(data.session.context.totalTokens / data.session.context.maxTokens * 100)}% used
-
+ showLoadingOverlay('Duplicating session...');
-
Session Output
-
- ${data.session.outputBuffer.map(entry => `
-
${escapeHtml(entry.content)}
- `).join('')}
-
-
- ${data.session.status === 'running' ? `
-
-
-
-
- ` : ''}
- `;
-
- // Switch to sessions view
- switchView('sessions');
- } catch (error) {
- console.error('Error viewing session:', error);
- alert('Failed to load session');
- }
-}
-
-function handleCommandKeypress(event) {
- if (event.key === 'Enter') {
- sendCommand();
- }
-}
-
-async function sendCommand() {
- const input = document.getElementById('command-input');
- const command = input.value.trim();
-
- if (!command || !currentSession) return;
-
- try {
- await fetch(`/claude/api/claude/sessions/${currentSession.id}/command`, {
+ const createRes = await fetch('/claude/api/claude/sessions', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
- body: JSON.stringify({ command })
+ body: JSON.stringify({
+ workingDir,
+ metadata: {
+ type: 'chat',
+ source: 'web-ide',
+ project: projectName,
+ duplicatedFrom: sessionId
+ }
+ })
});
- input.value = '';
+ 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);
- // Append command to output
- appendOutput({
- type: 'command',
- content: `$ ${command}\n`
- });
} catch (error) {
- console.error('Error sending command:', error);
- alert('Failed to send command');
+ console.error('[duplicateSession] Error:', error);
+ hideLoadingOverlay();
+ showToast('Failed to duplicate session: ' + error.message, 'error');
}
}
-function appendOutput(data) {
- const outputEl = document.getElementById('session-output');
- if (outputEl) {
- const line = document.createElement('div');
- line.className = `output-line ${data.type}`;
- line.textContent = data.content;
- outputEl.appendChild(line);
- outputEl.scrollTop = outputEl.scrollHeight;
+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 = `
+
+
Session Terminated
+
Select another session from the sidebar
+
+ `;
+ currentSession = null;
+ }
+
+ } catch (error) {
+ console.error('[terminateSession] Error:', error);
+ hideLoadingOverlay();
+ showToast('Failed to terminate session: ' + error.message, 'error');
}
}
diff --git a/server.js b/server.js
index 7dcd2a7d..7e1db2fe 100644
--- a/server.js
+++ b/server.js
@@ -500,17 +500,38 @@ app.get('/claude/api/recent', requireAuth, (req, res) => {
// ============================================
// Session Management
+// GET /claude/api/claude/sessions?project=/encoded/path
app.get('/claude/api/claude/sessions', requireAuth, (req, res) => {
try {
- const activeSessions = claudeService.listSessions();
- const historicalSessions = claudeService.loadHistoricalSessions();
+ const { project } = req.query;
+
+ let activeSessions = claudeService.listSessions();
+ let historicalSessions = claudeService.loadHistoricalSessions();
+
+ // PROJECT FILTERING
+ if (project) {
+ const projectPath = decodeURIComponent(project);
+ console.log('[SESSIONS] Filtering by project path:', projectPath);
+
+ activeSessions = activeSessions.filter(s => {
+ const sessionPath = s.workingDir || '';
+ return sessionPath.startsWith(projectPath) || sessionPath === projectPath;
+ });
+
+ historicalSessions = historicalSessions.filter(s => {
+ const sessionPath = s.workingDir || '';
+ return sessionPath.startsWith(projectPath) || sessionPath === projectPath;
+ });
+
+ console.log('[SESSIONS] Filtered to', activeSessions.length, 'active,', historicalSessions.length, 'historical');
+ }
res.json({
active: activeSessions,
historical: historicalSessions
});
} catch (error) {
- console.error('Error listing sessions:', error);
+ console.error('[SESSIONS] Error:', error);
res.status(500).json({ error: 'Failed to list sessions' });
}
});
@@ -1608,46 +1629,46 @@ app.post('/claude/api/terminals/:id/input', requireAuth, (req, res) => {
res.status(500).json({ error: 'Failed to send input' });
}
});
-
-// Get terminal output via HTTP polling (bypasses WebSocket issue)
-app.get('/claude/api/terminals/:id/output', requireAuth, (req, res) => {
- try {
- const sinceIndex = parseInt(req.query.since) || 0;
- const result = terminalService.getTerminalOutput(req.params.id, sinceIndex);
-
- if (result.success) {
- res.json(result);
- } else {
- res.status(404).json({ error: result.error });
- }
- } catch (error) {
- console.error('Error getting terminal output:', error);
- res.status(500).json({ error: 'Failed to get output' });
- }
-});
-
-// Resize terminal via HTTP
-app.post('/claude/api/terminals/:id/resize', requireAuth, (req, res) => {
- try {
- const { cols, rows } = req.body;
-
- if (!cols || !rows) {
- res.status(400).json({ error: 'Missing cols or rows parameter' });
- return;
- }
-
- const result = terminalService.resizeTerminal(req.params.id, cols, rows);
-
- if (result.success) {
- res.json({ success: true });
- } else {
- res.status(404).json({ error: result.error });
- }
- } catch (error) {
- console.error('Error resizing terminal:', error);
- res.status(500).json({ error: 'Failed to resize terminal' });
- }
-});
+
+// Get terminal output via HTTP polling (bypasses WebSocket issue)
+app.get('/claude/api/terminals/:id/output', requireAuth, (req, res) => {
+ try {
+ const sinceIndex = parseInt(req.query.since) || 0;
+ const result = terminalService.getTerminalOutput(req.params.id, sinceIndex);
+
+ if (result.success) {
+ res.json(result);
+ } else {
+ res.status(404).json({ error: result.error });
+ }
+ } catch (error) {
+ console.error('Error getting terminal output:', error);
+ res.status(500).json({ error: 'Failed to get output' });
+ }
+});
+
+// Resize terminal via HTTP
+app.post('/claude/api/terminals/:id/resize', requireAuth, (req, res) => {
+ try {
+ const { cols, rows } = req.body;
+
+ if (!cols || !rows) {
+ res.status(400).json({ error: 'Missing cols or rows parameter' });
+ return;
+ }
+
+ const result = terminalService.resizeTerminal(req.params.id, cols, rows);
+
+ if (result.success) {
+ res.json({ success: true });
+ } else {
+ res.status(404).json({ error: result.error });
+ }
+ } catch (error) {
+ console.error('Error resizing terminal:', error);
+ res.status(500).json({ error: 'Failed to resize terminal' });
+ }
+});
// Get recent directories for terminal picker
app.get('/claude/api/files/recent-dirs', requireAuth, (req, res) => {
diff --git a/services/claude-service.js b/services/claude-service.js
index daf3999d..b81811b7 100644
--- a/services/claude-service.js
+++ b/services/claude-service.js
@@ -446,11 +446,17 @@ class ClaudeCodeService extends EventEmitter {
listSessions() {
return Array.from(this.sessions.values()).map(session => {
const metadata = this.calculateSessionMetadata(session);
+
+ // FIX: Only mark as running if process is actually alive
+ const isRunning = session.status === 'running' &&
+ session.process &&
+ !session.process.killed;
+
return {
id: session.id,
pid: session.pid,
workingDir: session.workingDir,
- status: session.status,
+ status: isRunning ? 'running' : 'stopped',
createdAt: session.createdAt,
lastActivity: session.lastActivity,
metadata: session.metadata,