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>
2026-01-19 16:29:44 +00:00
commit 0dd2083556
44 changed files with 18955 additions and 0 deletions
--- a/IDE_FEATURES.md
+++ b/IDE_FEATURES.md
@@ -0,0 +1,389 @@
+# Claude Code Web IDE - Complete Feature Set
+
+## Overview
+Your Obsidian Web Interface has been transformed into a **full-featured remote web IDE for Claude Code** with project management, session tracking, context memory management, and real-time chat capabilities.
+
+## Access
+- **URL**: https://www.rommark.dev/claude/ide
+- **Login**: admin / !@#$q1w2e3r4!A
+
+---
+
+## 🎯 Features Implemented
+
+### 1. Session Management
+✅ **Complete**
+
+**View Active & Historical Sessions**
+- Dashboard overview of all sessions
+- Real-time session status updates
+- Session detail view with full output
+- PID and working directory tracking
+
+**Create & Manage Sessions**
+- Start new Claude Code sessions
+- Specify working directory
+- Associate sessions with projects
+- Send commands to active sessions
+- Terminate running sessions
+
+**Session Storage**
+- All sessions saved to Obsidian vault
+- Stored in `Claude Sessions/` folder
+- Markdown format for easy reference
+- Searchable through Obsidian
+
+### 2. Context Memory Management
+✅ **Complete**
+
+**Visualize Context Usage**
+- Real-time token usage display
+- Progress bar showing capacity
+- Percentage usage calculation
+- Token limit tracking (200K default)
+
+**Context Analytics**
+- Total tokens used per session
+- Message count tracking
+- Usage history
+- Capacity warnings
+
+### 3. Project Management
+✅ **Complete**
+
+**Create Projects**
+- Quick project creation wizard
+- Project name and description
+- Project type categorization
+- Automatic project folder creation
+
+**Project Tracking**
+- List all projects
+- Recent projects on dashboard
+- Project modification dates
+- Quick access to project files
+
+**Integration with Obsidian**
+- Projects stored in `Claude Projects/` folder
+- Markdown format with frontmatter
+- Compatible with Obsidian Tasks
+- Linked to dedicated notes
+
+### 4. Real-Time Chat Interface
+✅ **Complete**
+
+**WebSocket Communication**
+- Real-time connection to Claude Code
+- Bidirectional messaging
+- Session-specific channels
+- Automatic reconnection
+
+**Command Execution**
+- Send commands via chat interface
+- Real-time output streaming
+- Command history
+- Syntax highlighting support
+
+### 5. File Browser & Editor
+✅ **Complete**
+
+**File Tree Navigation**
+- Expandable/collapsible folders
+- File type icons
+- Path display
+- Quick file access
+
+**File Viewing**
+- Markdown rendering
+- Syntax highlighting for code
+- Preview mode
+- Edit mode
+
+**File Operations**
+- View file contents
+- Edit markdown files
+- Save changes
+- Navigate between files
+
+---
+
+## 🏗️ Architecture
+
+### Backend Services
+
+#### Claude Code Service (`services/claude-service.js`)
+- Spawns and manages Claude Code CLI processes
+- Handles stdin/stdout/stderr streams
+- Session lifecycle management
+- Command execution and response capture
+- Automatic session persistence to vault
+
+#### WebSocket Server
+- Real-time bidirectional communication
+- Session-specific channels
+- Authentication required
+- Automatic reconnection handling
+
+### API Endpoints
+
+#### Session Management
+```
+GET    /claude/api/claude/sessions           # List all sessions
+POST   /claude/api/claude/sessions           # Create new session
+GET    /claude/api/claude/sessions/:id       # Get session details
+POST   /claude/api/claude/sessions/:id/command  # Send command
+DELETE /claude/api/claude/sessions/:id       # Terminate session
+GET    /claude/api/claude/sessions/:id/context  # Get context stats
+```
+
+#### Project Management
+```
+GET    /claude/api/claude/projects            # List projects
+POST   /claude/api/claude/projects            # Create project
+```
+
+#### WebSocket
+```
+WS     /claude/api/claude/chat                # Real-time chat
+```
+
+### Data Storage (Obsidian Vault)
+
+```
+obsidian-vault/
+├── Claude Sessions/              # Session storage
+│   ├── 2026-01-19-session-xxx.md
+│   └── session-index.md
+├── Claude Context/               # Context tracking (future)
+└── Claude Projects/              # Project management
+    ├── Project-Name.md
+    └── active-projects.md
+```
+
+---
+
+## 🚀 Usage Examples
+
+### Starting a New Session
+
+1. Navigate to https://www.rommark.dev/claude/ide
+2. Click "New Session" button
+3. Enter working directory (default: `/home/uroma/obsidian-vault`)
+4. Optionally associate with a project
+5. Click "Create"
+
+### Managing Projects
+
+1. Click "Projects" in navigation
+2. Click "+ New Project"
+3. Enter project name and description
+4. Select project type
+5. Project created in your Obsidian vault!
+
+### Sending Commands to Claude Code
+
+1. Select an active session
+2. Type command in input field
+3. Press Enter or click "Send"
+4. Watch real-time output in the session panel
+
+### Viewing Context Usage
+
+1. Open any session detail view
+2. View context bar showing token usage
+3. See percentage of capacity used
+4. Track message count
+
+---
+
+## 📊 Dashboard Features
+
+The main dashboard provides:
+
+- **Stats Cards**
+  - Active sessions count
+  - Total projects count
+  - Historical sessions count
+  - Quick action buttons
+
+- **Active Sessions Panel**
+  - List of all running sessions
+  - Click to view session details
+  - Status indicators
+  - Working directory display
+
+- **Recent Projects Panel**
+  - Last 5 projects created/modified
+  - Quick access to project files
+  - Modification dates
+
+---
+
+## 🎨 User Interface
+
+### Dark Theme
+- GitHub-inspired dark theme
+- High contrast for readability
+- Smooth transitions and animations
+
+### Responsive Design
+- Works on desktop and tablet
+- Flexible grid layouts
+- Collapsible panels
+
+### Real-Time Updates
+- WebSocket-powered updates
+- No page refresh needed
+- Instant feedback
+
+---
+
+## 🔒 Security
+
+- **Authentication Required**
+  - All API endpoints protected
+  - WebSocket requires valid session
+  - Session-based auth
+
+- **Input Validation**
+  - Command sanitization
+  - Path validation
+  - File system protection
+
+- **Audit Trail**
+  - All commands logged
+  - Session history preserved
+  - Stored in Obsidian vault
+
+---
+
+## 📁 File Structure
+
+```
+/home/uroma/obsidian-web-interface/
+├── services/
+│   └── claude-service.js          # Claude Code process manager
+├── public/
+│   ├── claude-ide/
+│   │   ├── index.html            # IDE main interface
+│   │   ├── ide.css               # IDE styles
+│   │   └── ide.js                # IDE JavaScript
+│   ├── css/
+│   │   └── style.css             # Base styles
+│   └── js/
+│       └── app.js                # Base JavaScript
+├── server.js                      # Main Express server
+└── claude-integration.md          # Architecture documentation
+```
+
+---
+
+## 🔮 Future Enhancements
+
+### Planned Features
+- [ ] Context pruning and optimization
+- [ ] Multi-file editing
+- [ ] Session templates
+- [ ] Project analytics dashboard
+- [ ] Automated testing integration
+- [ ] Git integration
+- [ ] Collaborative sessions
+- [ ] Mobile app
+
+### Advanced Features
+- [ ] AI-powered context suggestions
+- [ ] Natural language session control
+- [ ] Voice commands
+- [ ] Custom themes
+- [ ] Plugin system
+- [ ] API key management
+- [ ] Rate limiting and quotas
+
+---
+
+## 🐛 Troubleshooting
+
+### Session Won't Start
+- Check that Claude Code CLI is installed
+- Verify working directory exists
+- Check service logs: `sudo journalctl -u obsidian-web -f`
+
+### WebSocket Connection Issues
+- Ensure you're logged in
+- Check browser console for errors
+- Verify WSS port is accessible
+
+### Projects Not Saving
+- Check vault write permissions
+- Verify `Claude Projects/` folder exists
+- Check service logs for errors
+
+---
+
+## 📝 Example Workflows
+
+### Workflow 1: Create and Manage a Project
+
+```bash
+# 1. Navigate to IDE
+https://www.rommark.dev/claude/ide
+
+# 2. Create new project
+Projects → + New Project
+Name: "MyAPI"
+Type: "Web Development"
+
+# 3. Create session for the project
+New Session → Working Dir: /home/uroma/myapi
+Project: MyAPI
+
+# 4. Send planning command
+"Create a REST API with Express.js"
+
+# 5. Track progress in dedicated note
+Obsidian vault → Claude Projects → MyAPI.md
+```
+
+### Workflow 2: Review Historical Sessions
+
+```bash
+# 1. Navigate to Sessions view
+Sessions → View historical sessions
+
+# 2. Click on session to review
+See full output, commands, and context
+
+# 3. Copy useful commands to new session
+Use as reference for similar tasks
+```
+
+### Workflow 3: Monitor Context Usage
+
+```bash
+# 1. Open active session
+View session details
+
+# 2. Check context bar
+See token usage percentage
+
+# 3. If approaching limit
+- Start new session
+- Reference previous session in vault
+- Maintain continuity through notes
+```
+
+---
+
+## 🎓 Getting Started
+
+1. **Login**: https://www.rommark.dev/claude/ide
+2. **Explore Dashboard**: See active sessions and projects
+3. **Create First Project**: Try the "+ New Project" button
+4. **Start Session**: Create a new session and send a command
+5. **Explore Files**: Navigate your Obsidian vault
+
+---
+
+**Last Updated**: 2026-01-19
+**Version**: 1.0.0
+**Status**: ✅ Production Ready