0dd2083556
- Full IDE with terminal integration using xterm.js - Session management with local and web sessions - HTML preview functionality - Multi-terminal support with session picker Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
835 lines
27 KiB
JavaScript
835 lines
27 KiB
JavaScript
// Claude Code IDE JavaScript
|
||
let currentSession = 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 and prompt
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
const sessionId = urlParams.get('session');
|
||
const prompt = urlParams.get('prompt');
|
||
|
||
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 {
|
||
// 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);
|
||
|
||
window.ws.onopen = () => {
|
||
console.log('WebSocket connected, readyState:', window.ws.readyState);
|
||
// Send a test message to verify connection
|
||
try {
|
||
window.ws.send(JSON.stringify({ type: 'ping' }));
|
||
} catch (error) {
|
||
console.error('Error sending ping:', error);
|
||
}
|
||
};
|
||
|
||
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
|
||
});
|
||
// Clear the ws reference
|
||
window.ws = null;
|
||
// Attempt to reconnect after 5 seconds
|
||
setTimeout(() => {
|
||
console.log('Attempting to reconnect...');
|
||
connectWebSocket();
|
||
}, 5000);
|
||
};
|
||
}
|
||
|
||
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 '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);
|
||
}
|
||
}
|
||
|
||
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
|
||
if (typeof hideStreamingIndicator === 'function') {
|
||
hideStreamingIndicator();
|
||
}
|
||
|
||
// Append output as assistant message
|
||
if (typeof appendMessage === 'function') {
|
||
appendMessage('assistant', data.data.content, true);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 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() {
|
||
try {
|
||
const res = await fetch('/claude/api/claude/sessions');
|
||
const data = await res.json();
|
||
|
||
const sessionsListEl = document.getElementById('sessions-list');
|
||
const allSessions = [
|
||
...(data.active || []),
|
||
...(data.historical || [])
|
||
];
|
||
|
||
if (allSessions.length > 0) {
|
||
sessionsListEl.innerHTML = allSessions.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">
|
||
${session.workingDir}<br>
|
||
${new Date(session.createdAt).toLocaleString()}
|
||
</div>
|
||
</div>
|
||
`).join('');
|
||
} else {
|
||
sessionsListEl.innerHTML = '<p class="placeholder">No sessions</p>';
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading sessions:', error);
|
||
}
|
||
}
|
||
|
||
async function viewSession(sessionId) {
|
||
try {
|
||
const res = await fetch(`/claude/api/claude/sessions/${sessionId}`);
|
||
const data = await res.json();
|
||
|
||
currentSession = data.session;
|
||
|
||
const detailEl = document.getElementById('session-detail');
|
||
detailEl.innerHTML = `
|
||
<div class="session-header-info">
|
||
<h2>${data.session.id}</h2>
|
||
<p>Status: <span class="session-status ${data.session.status}">${data.session.status}</span></p>
|
||
<p>PID: ${data.session.pid || 'N/A'}</p>
|
||
<p>Working Directory: ${data.session.workingDir}</p>
|
||
<p>Created: ${new Date(data.session.createdAt).toLocaleString()}</p>
|
||
</div>
|
||
|
||
<h3>Context Usage</h3>
|
||
<div class="context-bar">
|
||
<div class="context-fill" style="width: ${data.session.context.totalTokens / data.session.context.maxTokens * 100}%"></div>
|
||
</div>
|
||
<div class="context-stats">
|
||
<span>${data.session.context.totalTokens.toLocaleString()} tokens</span>
|
||
<span>${Math.round(data.session.context.totalTokens / data.session.context.maxTokens * 100)}% used</span>
|
||
</div>
|
||
|
||
<h3>Session Output</h3>
|
||
<div class="session-output" id="session-output">
|
||
${data.session.outputBuffer.map(entry => `
|
||
<div class="output-line ${entry.type}">${escapeHtml(entry.content)}</div>
|
||
`).join('')}
|
||
</div>
|
||
|
||
${data.session.status === 'running' ? `
|
||
<div class="command-input-container">
|
||
<input type="text" id="command-input" class="command-input" placeholder="Enter command..." onkeypress="handleCommandKeypress(event)">
|
||
<button class="btn-primary" onclick="sendCommand()">Send</button>
|
||
</div>
|
||
` : ''}
|
||
`;
|
||
|
||
// 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`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ command })
|
||
});
|
||
|
||
input.value = '';
|
||
|
||
// Append command to output
|
||
appendOutput({
|
||
type: 'command',
|
||
content: `$ ${command}\n`
|
||
});
|
||
} catch (error) {
|
||
console.error('Error sending command:', error);
|
||
alert('Failed to send command');
|
||
}
|
||
}
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
// 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();
|
||
|
||
const isHtmlFile = filePath.toLowerCase().endsWith('.html') || filePath.toLowerCase().endsWith('.htm');
|
||
|
||
const editorEl = document.getElementById('file-editor');
|
||
|
||
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="editFile('${filePath}')">Edit</button>
|
||
<button class="btn-primary 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 as before
|
||
editorEl.innerHTML = `
|
||
<div class="file-header">
|
||
<h2>${filePath}</h2>
|
||
<div class="file-actions">
|
||
<button class="btn-secondary btn-sm" onclick="editFile('${filePath}')">Edit</button>
|
||
</div>
|
||
</div>
|
||
<div class="file-content">
|
||
<div class="markdown-body">${data.html}</div>
|
||
</div>
|
||
`;
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading file:', error);
|
||
}
|
||
}
|
||
|
||
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 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);
|
||
}
|
||
});
|