a7d2f37219
- Added debug panel in terminal view that shows all terminal activity - Added debugLog() method to TerminalManager for consistent logging - Updated connectTerminal, handleTerminalMessage, launchCommand, createTerminal, initializeXTerm with detailed logging - Enhanced backend logging for WebSocket messages and close codes - Logs now show both to console and visual debug panel This should help diagnose the terminal command execution issue without requiring browser console access.
328 lines
16 KiB
HTML
328 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Claude Code IDE</title>
|
|
<link rel="stylesheet" href="/claude/css/style.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/ide.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/tag-renderer.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/preview-manager.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/chat-enhanced.css">
|
|
<link rel="stylesheet" href="/claude/claude-ide/terminal.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Navigation -->
|
|
<nav class="navbar">
|
|
<div class="nav-brand">
|
|
<h1>Claude Code IDE</h1>
|
|
</div>
|
|
<div class="nav-menu">
|
|
<button class="nav-item active" data-view="dashboard">Dashboard</button>
|
|
<button class="nav-item" data-view="chat">💬 Chat</button>
|
|
<button class="nav-item" data-view="sessions">Sessions</button>
|
|
<button class="nav-item" data-view="projects">Projects</button>
|
|
<button class="nav-item" data-view="files">Files</button>
|
|
<button class="nav-item" data-view="terminal">🖥️ Terminal</button>
|
|
</div>
|
|
<div class="nav-user">
|
|
<button id="logout-btn" class="btn-secondary">Logout</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Dashboard View -->
|
|
<div id="dashboard-view" class="view active">
|
|
<div class="dashboard-grid">
|
|
<!-- Stats Cards -->
|
|
<div class="stat-card">
|
|
<h3>Active Sessions</h3>
|
|
<div class="stat-value" id="active-sessions-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Total Projects</h3>
|
|
<div class="stat-value" id="total-projects-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Historical Sessions</h3>
|
|
<div class="stat-value" id="historical-sessions-count">0</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<h3>Quick Actions</h3>
|
|
<div class="stat-actions">
|
|
<button class="btn-primary" onclick="createNewSession()">New Session</button>
|
|
<button class="btn-secondary" onclick="createNewProject()">New Project</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Sessions Panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Active Sessions</h2>
|
|
<button class="btn-secondary btn-sm" onclick="refreshSessions()">Refresh</button>
|
|
</div>
|
|
<div class="panel-content" id="active-sessions-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Projects Panel -->
|
|
<div class="panel">
|
|
<div class="panel-header">
|
|
<h2>Recent Projects</h2>
|
|
<button class="btn-secondary btn-sm" onclick="showProjects()">View All</button>
|
|
</div>
|
|
<div class="panel-content" id="recent-projects-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sessions View -->
|
|
<div id="sessions-view" class="view">
|
|
<div class="sessions-layout">
|
|
<div class="sessions-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Sessions</h2>
|
|
<button class="btn-primary" onclick="createNewSession()">+ New</button>
|
|
</div>
|
|
<div class="sessions-list" id="sessions-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="sessions-main">
|
|
<div id="session-detail" class="session-detail">
|
|
<div class="placeholder">
|
|
<h2>Select a session</h2>
|
|
<p>Choose a session from the sidebar to view details</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Projects View -->
|
|
<div id="projects-view" class="view">
|
|
<div class="projects-header">
|
|
<h2>Projects</h2>
|
|
<button class="btn-primary" onclick="createNewProject()">+ New Project</button>
|
|
</div>
|
|
<div class="projects-grid" id="projects-grid">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chat View -->
|
|
<div id="chat-view" class="view">
|
|
<div class="chat-layout">
|
|
<div class="chat-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Chat</h2>
|
|
<button class="btn-primary" onclick="startNewChat()">+ New</button>
|
|
</div>
|
|
<div class="chat-history-list" id="chat-history-list">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-main">
|
|
<div class="chat-header" id="chat-header">
|
|
<div class="chat-session-info">
|
|
<h2 id="chat-title">New Chat</h2>
|
|
<span class="chat-session-id" id="current-session-id"></span>
|
|
</div>
|
|
<div class="chat-actions">
|
|
<button class="btn-secondary btn-sm" onclick="clearChat()" title="Clear chat">Clear</button>
|
|
<button class="btn-secondary btn-sm" onclick="showChatSettings()" title="Settings">⚙️</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-messages" id="chat-messages">
|
|
<div class="chat-welcome">
|
|
<h2>👋 Welcome to Claude Code Chat!</h2>
|
|
<p>Start a conversation with Claude Code. Your session will be saved automatically.</p>
|
|
<div class="chat-tips">
|
|
<h3>Quick Tips:</h3>
|
|
<ul>
|
|
<li>Type your message and press Enter to send</li>
|
|
<li>Shift+Enter for a new line</li>
|
|
<li>Use <code>/help</code> to see available commands</li>
|
|
<li>Attach files from your vault using <code>@filename</code></li>
|
|
</ul>
|
|
</div>
|
|
<div class="chat-connection-info">
|
|
<h3>💡 Pro Tip: Continue from CLI</h3>
|
|
<p>To continue a CLI session in the web interface:</p>
|
|
<ol>
|
|
<li>In your terminal, note the session ID shown by Claude Code</li>
|
|
<li>Click "Attach CLI Session" below</li>
|
|
<li>Enter the session ID to connect</li>
|
|
</ol>
|
|
<button class="btn-secondary" onclick="showAttachCliModal()" style="margin-top: 1rem;">Attach CLI Session</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-container">
|
|
<div class="chat-input-wrapper">
|
|
<textarea id="chat-input"
|
|
placeholder="Type your message to Claude Code... (Enter to send, Shift+Enter for new line)"
|
|
rows="1"
|
|
onkeydown="handleChatKeypress(event)"></textarea>
|
|
<div class="chat-input-actions">
|
|
<button class="btn-icon" onclick="attachFile()" title="Attach file">📎</button>
|
|
<button class="btn-primary btn-send" onclick="sendChatMessage()">Send</button>
|
|
</div>
|
|
</div>
|
|
<div class="chat-input-info">
|
|
<span class="token-usage" id="token-usage">0 tokens used</span>
|
|
<span class="char-count" id="char-count">0 characters</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Files View -->
|
|
<div id="files-view" class="view">
|
|
<div class="files-layout">
|
|
<div class="files-sidebar">
|
|
<div class="sidebar-header">
|
|
<h2>Files</h2>
|
|
</div>
|
|
<div class="search-box">
|
|
<input type="text" id="file-search" placeholder="Search files...">
|
|
</div>
|
|
<div class="file-tree" id="file-tree">
|
|
<div class="loading">Loading...</div>
|
|
</div>
|
|
</div>
|
|
<div class="files-main">
|
|
<div id="file-editor" class="file-editor">
|
|
<div class="placeholder">
|
|
<h2>Select a file</h2>
|
|
<p>Choose a file from the sidebar to view and edit</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Terminal View -->
|
|
<div id="terminal-view" class="view">
|
|
<div class="terminal-layout">
|
|
<div class="terminal-header">
|
|
<h2>🖥️ Terminals</h2>
|
|
<button class="btn-primary" id="btn-new-terminal">+ New Terminal</button>
|
|
</div>
|
|
<div class="terminal-tabs" id="terminal-tabs">
|
|
<!-- Terminal tabs will be added here -->
|
|
</div>
|
|
<div class="terminals-container" id="terminals-container">
|
|
<!-- Terminal instances will be added here -->
|
|
<div class="terminal-placeholder">
|
|
<h3>No terminals open</h3>
|
|
<p>Click "+ New Terminal" to get started</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Debug Panel -->
|
|
<div id="terminal-debug-panel" style="margin: 20px; padding: 15px; background: #1a1a1a; border: 1px solid #ff6b6b; border-radius: 8px; font-family: monospace; font-size: 12px; color: #e0e0e0;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
|
<h3 style="margin: 0; color: #ff6b6b;">🐛 Terminal Debug Panel</h3>
|
|
<button onclick="document.getElementById('terminal-debug-panel').style.display = 'none'" style="background: #ff6b6b; border: none; color: white; padding: 4px 12px; border-radius: 4px; cursor: pointer;">Close</button>
|
|
</div>
|
|
<div id="terminal-debug-content" style="max-height: 300px; overflow-y: auto;">
|
|
<div style="color: #888;">Waiting for terminal activity...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modals -->
|
|
<div id="modal-overlay" class="modal-overlay hidden">
|
|
<div id="new-session-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>New Session</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Working Directory</label>
|
|
<input type="text" id="session-working-dir" value="/home/uroma/obsidian-vault">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Project (optional)</label>
|
|
<input type="text" id="session-project" placeholder="e.g., DedicatedNodes">
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitNewSession()">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="new-project-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>New Project</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group">
|
|
<label>Project Name</label>
|
|
<input type="text" id="project-name" placeholder="My Project">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Description</label>
|
|
<textarea id="project-description" rows="3" placeholder="Project description..."></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Type</label>
|
|
<select id="project-type">
|
|
<option value="general">General</option>
|
|
<option value="web">Web Development</option>
|
|
<option value="mobile">Mobile App</option>
|
|
<option value="infrastructure">Infrastructure</option>
|
|
<option value="research">Research</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitNewProject()">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="attach-cli-modal" class="modal hidden">
|
|
<div class="modal-header">
|
|
<h2>Attach CLI Session</h2>
|
|
<button class="modal-close" onclick="closeModal()">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="modal-info">
|
|
Enter the session ID from your Claude Code CLI session to continue it in the web interface.
|
|
</p>
|
|
<div class="form-group">
|
|
<label>Session ID</label>
|
|
<input type="text" id="cli-session-id" placeholder="e.g., session-1234567890-abc123">
|
|
<small style="display: block; margin-top: 0.5rem; color: var(--text-secondary);">
|
|
Tip: When you start Claude Code in the terminal, it shows the session ID at the top.
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button class="btn-secondary" onclick="closeModal()">Cancel</button>
|
|
<button class="btn-primary" onclick="submitAttachCliSession()">Attach</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/claude/claude-ide/ide.js"></script>
|
|
<script src="/claude/claude-ide/chat-functions.js"></script>
|
|
<script src="/claude/claude-ide/tag-renderer.js"></script>
|
|
<script src="/claude/claude-ide/preview-manager.js"></script>
|
|
<script src="/claude/claude-ide/chat-enhanced.js"></script>
|
|
<script src="/claude/claude-ide/terminal.js"></script>
|
|
</body>
|
|
</html>
|