Initial commit: Obsidian Web Interface for Claude Code
- 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>
This commit is contained in:
uroma
316
public/claude-ide/index.html
Normal file
316
public/claude-ide/index.html
Normal file
@@ -0,0 +1,316 @@
|
||||
<!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>
|
||||
</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>
|
||||
Reference in New Issue
Block a user