Initial Release: OpenQode Public Alpha v1.3

web-assist/app.js

@@ -0,0 +1,335 @@
+// Web Assist - TUI Companion
+const API_BASE = 'http://127.0.0.1:15044';
+
+class WebAssist {
+    constructor() {
+        this.currentFile = null;
+        this.previewPort = null;
+        this.vercelLoggedIn = false;
+        this.init();
+    }
+
+    async init() {
+        this.bindEvents();
+        await this.loadFileTree();
+        await this.loadGitStatus();
+        await this.checkVercelAuth();
+    }
+
+    bindEvents() {
+        document.getElementById('refresh-btn').addEventListener('click', () => this.loadFileTree());
+        document.getElementById('preview-btn').addEventListener('click', () => this.startPreview());
+        document.getElementById('stop-preview-btn').addEventListener('click', () => this.stopPreview());
+        document.getElementById('commit-btn').addEventListener('click', () => this.gitCommit());
+        document.getElementById('push-btn').addEventListener('click', () => this.gitPush());
+        document.getElementById('deploy-btn').addEventListener('click', () => this.deployVercel());
+        document.getElementById('vercel-login-btn').addEventListener('click', () => this.vercelLogin());
+
+        // File tree click delegation
+        document.getElementById('file-tree').addEventListener('click', (e) => {
+            const fileItem = e.target.closest('.file-item');
+            if (fileItem && fileItem.dataset.type !== 'dir') {
+                this.openFile(fileItem.dataset.path);
+            }
+        });
+    }
+
+    // === File Browser ===
+    async loadFileTree() {
+        const container = document.getElementById('file-tree');
+        container.innerHTML = '<div class="loading">Loading...</div>';
+
+        try {
+            const response = await fetch(`${API_BASE}/api/files/tree`);
+            const data = await response.json();
+
+            if (data.success) {
+                document.getElementById('project-path').textContent = `📂 ${data.root.split(/[/\\]/).pop()}`;
+                container.innerHTML = this.renderTree(data.tree, 0);
+            } else {
+                container.innerHTML = '<div class="loading">Failed to load</div>';
+            }
+        } catch (error) {
+            container.innerHTML = `<div class="loading">Error: ${error.message}</div>`;
+        }
+    }
+
+    renderTree(items, depth) {
+        if (!items || items.length === 0) return '';
+
+        return items
+            .filter(item => !item.name.startsWith('.') && item.name !== 'node_modules')
+            .sort((a, b) => {
+                if (a.type === 'dir' && b.type !== 'dir') return -1;
+                if (a.type !== 'dir' && b.type === 'dir') return 1;
+                return a.name.localeCompare(b.name);
+            })
+            .map(item => {
+                const indent = '<span class="indent"></span>'.repeat(depth);
+                const icon = item.type === 'dir' ? '📁' : this.getFileIcon(item.name);
+                const className = `file-item ${item.type === 'dir' ? 'folder' : 'file'}`;
+
+                let html = `<div class="${className}" data-path="${item.path}" data-type="${item.type}">
+                    ${indent}${icon} ${item.name}
+                </div>`;
+
+                if (item.type === 'dir' && item.children) {
+                    html += this.renderTree(item.children, depth + 1);
+                }
+
+                return html;
+            })
+            .join('');
+    }
+
+    getFileIcon(name) {
+        const ext = name.split('.').pop().toLowerCase();
+        const icons = {
+            'html': '🌐', 'css': '🎨', 'js': '📜', 'ts': '📘',
+            'json': '📋', 'md': '📝', 'py': '🐍', 'go': '🔵',
+            'rs': '🦀', 'jpg': '🖼️', 'png': '🖼️', 'svg': '🎯'
+        };
+        return icons[ext] || '📄';
+    }
+
+    // === File Preview ===
+    async openFile(path) {
+        const editorTitle = document.getElementById('editor-title');
+        const editorPath = document.getElementById('editor-path');
+        const editorContent = document.getElementById('editor-content');
+
+        editorTitle.textContent = '⏳ Loading...';
+        editorPath.textContent = path;
+
+        try {
+            const response = await fetch(`${API_BASE}/api/files/read?path=${encodeURIComponent(path)}`);
+            const data = await response.json();
+
+            if (data.success) {
+                const fileName = path.split(/[/\\]/).pop();
+                const ext = fileName.split('.').pop();
+                editorTitle.textContent = `${this.getFileIcon(fileName)} ${fileName}`;
+                editorContent.innerHTML = `<code class="lang-${ext}">${this.escapeHtml(data.content)}</code>`;
+                this.currentFile = path;
+
+                // Highlight active file in tree
+                document.querySelectorAll('.file-item').forEach(el => el.classList.remove('active'));
+                document.querySelector(`.file-item[data-path="${path}"]`)?.classList.add('active');
+            } else {
+                editorTitle.textContent = '❌ Error';
+                editorContent.innerHTML = `<code>${data.error || 'Failed to load file'}</code>`;
+            }
+        } catch (error) {
+            editorTitle.textContent = '❌ Error';
+            editorContent.innerHTML = `<code>${error.message}</code>`;
+        }
+    }
+
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    // === Live Preview ===
+    async startPreview() {
+        const port = parseInt(document.getElementById('port-input').value) || 3000;
+        const statusEl = document.getElementById('preview-status');
+        statusEl.textContent = 'Starting...';
+        statusEl.className = 'status-message info';
+
+        try {
+            const response = await fetch(`${API_BASE}/api/preview/start`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ port, path: '.' })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                this.previewPort = port;
+                const url = `http://localhost:${port}`;
+
+                document.getElementById('preview-modal').classList.remove('hidden');
+                document.getElementById('preview-link').href = url;
+
+                setTimeout(() => {
+                    document.getElementById('preview-frame').src = url;
+                }, 1500);
+
+                statusEl.textContent = `✅ ${url}`;
+                statusEl.className = 'status-message success';
+            } else {
+                statusEl.textContent = `❌ ${data.error || 'Failed'}`;
+                statusEl.className = 'status-message error';
+            }
+        } catch (error) {
+            statusEl.textContent = `❌ ${error.message}`;
+            statusEl.className = 'status-message error';
+        }
+    }
+
+    stopPreview() {
+        document.getElementById('preview-modal').classList.add('hidden');
+        document.getElementById('preview-frame').src = 'about:blank';
+        document.getElementById('preview-status').textContent = '';
+        this.previewPort = null;
+    }
+
+    // === Git Operations ===
+    async loadGitStatus() {
+        try {
+            const response = await fetch(`${API_BASE}/api/git/status`);
+            const data = await response.json();
+
+            if (data.success) {
+                const statusEl = document.getElementById('git-status');
+                const branch = data.branch || 'main';
+                const changes = data.changes || 0;
+                statusEl.textContent = `🌿 ${branch}${changes > 0 ? ` (${changes})` : ''}`;
+            }
+        } catch (error) {
+            document.getElementById('git-status').textContent = '⚪ Git: --';
+        }
+    }
+
+    async gitCommit() {
+        const message = document.getElementById('commit-msg').value.trim();
+        if (!message) {
+            this.showStatus('commit-status', 'Enter message', 'error');
+            return;
+        }
+
+        this.showStatus('commit-status', 'Committing...', 'info');
+
+        try {
+            const response = await fetch(`${API_BASE}/api/git/commit`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ message })
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                this.showStatus('commit-status', '✅ Done!', 'success');
+                document.getElementById('commit-msg').value = '';
+                await this.loadGitStatus();
+            } else {
+                this.showStatus('commit-status', `❌ ${data.error}`, 'error');
+            }
+        } catch (error) {
+            this.showStatus('commit-status', `❌ ${error.message}`, 'error');
+        }
+    }
+
+    async gitPush() {
+        this.showStatus('push-status', 'Pushing...', 'info');
+
+        try {
+            const response = await fetch(`${API_BASE}/api/git/push`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                this.showStatus('push-status', '✅ Pushed!', 'success');
+            } else {
+                // Check if auth needed
+                if (data.error && data.error.includes('Authentication')) {
+                    this.showStatus('push-status', '🔐 Auth required - use terminal', 'error');
+                } else {
+                    this.showStatus('push-status', `❌ ${data.error}`, 'error');
+                }
+            }
+        } catch (error) {
+            this.showStatus('push-status', `❌ ${error.message}`, 'error');
+        }
+    }
+
+    // === Vercel Deployment ===
+    async checkVercelAuth() {
+        try {
+            const response = await fetch(`${API_BASE}/api/deploy/vercel/status`);
+            const data = await response.json();
+
+            if (data.loggedIn) {
+                this.vercelLoggedIn = true;
+                document.getElementById('vercel-status').textContent = `▲ ${data.user || 'Logged in'}`;
+                document.getElementById('vercel-login-btn').style.display = 'none';
+            } else {
+                this.vercelLoggedIn = false;
+                document.getElementById('vercel-status').textContent = '▲ Not logged in';
+                document.getElementById('vercel-login-btn').style.display = 'inline-block';
+            }
+        } catch (error) {
+            document.getElementById('vercel-status').textContent = '▲ --';
+        }
+    }
+
+    async vercelLogin() {
+        this.showStatus('deploy-status', 'Opening Vercel login...', 'info');
+
+        try {
+            const response = await fetch(`${API_BASE}/api/deploy/vercel/login`, {
+                method: 'POST'
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                if (data.url) {
+                    window.open(data.url, '_blank');
+                    this.showStatus('deploy-status', 'Complete login in browser', 'info');
+                } else {
+                    this.showStatus('deploy-status', '✅ Logged in!', 'success');
+                    await this.checkVercelAuth();
+                }
+            } else {
+                this.showStatus('deploy-status', `❌ ${data.error}`, 'error');
+            }
+        } catch (error) {
+            this.showStatus('deploy-status', `❌ ${error.message}`, 'error');
+        }
+    }
+
+    async deployVercel() {
+        this.showStatus('deploy-status', 'Deploying...', 'info');
+
+        try {
+            const response = await fetch(`${API_BASE}/api/deploy/vercel`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                const url = data.url || 'Deployed!';
+                this.showStatus('deploy-status', `✅ <a href="${url}" target="_blank">${url}</a>`, 'success');
+            } else if (data.needsLogin) {
+                this.showStatus('deploy-status', '🔐 Login required', 'error');
+                document.getElementById('vercel-login-btn').style.display = 'inline-block';
+            } else {
+                this.showStatus('deploy-status', `❌ ${data.error}`, 'error');
+            }
+        } catch (error) {
+            this.showStatus('deploy-status', `❌ ${error.message}`, 'error');
+        }
+    }
+
+    // === Helpers ===
+    showStatus(elementId, message, type) {
+        const el = document.getElementById(elementId);
+        el.innerHTML = message;
+        el.className = `status-message ${type}`;
+    }
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+    window.webAssist = new WebAssist();
+});

web-assist/index.html

@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Assist - TUI Companion</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <!-- Header -->
+        <header class="header">
+            <div class="logo">
+                <span class="logo-icon">🚀</span>
+                <span class="logo-text">Web Assist</span>
+            </div>
+            <div class="status-bar">
+                <span id="project-path" class="status-item">📂 No project</span>
+                <span id="git-status" class="status-item">⚪ Git: --</span>
+                <span id="vercel-status" class="status-item">▲ Vercel: --</span>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="main">
+            <!-- File Browser Panel -->
+            <aside class="panel file-panel">
+                <div class="panel-header">
+                    <h2>📁 Files</h2>
+                    <button id="refresh-btn" class="icon-btn" title="Refresh">🔄</button>
+                </div>
+                <div id="file-tree" class="file-tree">
+                    <div class="loading">Loading files...</div>
+                </div>
+            </aside>
+
+            <!-- Center: File Preview -->
+            <section class="panel editor-panel">
+                <div class="panel-header">
+                    <h2 id="editor-title">📝 Select a file</h2>
+                    <span id="editor-path" class="editor-path"></span>
+                </div>
+                <pre id="editor-content"
+                    class="editor-content"><code>Click on a file in the left panel to preview its contents.</code></pre>
+            </section>
+
+            <!-- Right: Actions Panel -->
+            <aside class="panel actions-panel">
+                <div class="panel-header">
+                    <h2>⚡ Actions</h2>
+                </div>
+                <div class="actions-list">
+                    <!-- Live Preview -->
+                    <div class="action-card">
+                        <h3>🌐 Live Preview</h3>
+                        <div class="action-controls">
+                            <input type="number" id="port-input" value="3000" min="1024" max="65535" placeholder="Port">
+                            <button id="preview-btn" class="btn primary">Start</button>
+                        </div>
+                        <div id="preview-status" class="status-message"></div>
+                    </div>
+
+                    <!-- Git Snapshot -->
+                    <div class="action-card">
+                        <h3>💾 Save Snapshot</h3>
+                        <div class="action-controls">
+                            <input type="text" id="commit-msg" placeholder="Commit message">
+                            <button id="commit-btn" class="btn">Commit</button>
+                        </div>
+                        <div id="commit-status" class="status-message"></div>
+                    </div>
+
+                    <!-- Push to GitHub -->
+                    <div class="action-card">
+                        <h3>🐙 Push to GitHub</h3>
+                        <button id="push-btn" class="btn" style="width:100%">Push</button>
+                        <div id="push-status" class="status-message"></div>
+                    </div>
+
+                    <!-- Deploy to Vercel -->
+                    <div class="action-card">
+                        <h3>▲ Deploy to Vercel</h3>
+                        <div style="display:flex;gap:6px">
+                            <button id="vercel-login-btn" class="btn small" style="display:none;">Login</button>
+                            <button id="deploy-btn" class="btn primary" style="flex:1">Deploy</button>
+                        </div>
+                        <div id="deploy-status" class="status-message"></div>
+                    </div>
+                </div>
+            </aside>
+        </main>
+
+        <!-- Preview Iframe (floating) -->
+        <div id="preview-modal" class="preview-modal hidden">
+            <div class="preview-modal-header">
+                <span>🖥️ Preview</span>
+                <div>
+                    <a id="preview-link" href="#" target="_blank" class="btn small">↗ Open</a>
+                    <button id="stop-preview-btn" class="btn small danger">✕ Close</button>
+                </div>
+            </div>
+            <iframe id="preview-frame" src="about:blank"></iframe>
+        </div>
+    </div>
+
+    <script src="app.js"></script>
+</body>
+
+</html>

web-assist/style.css

@@ -0,0 +1,356 @@
+/* Web Assist - 3-Column Layout */
+:root {
+    --bg-dark: #0d1117;
+    --bg-card: #161b22;
+    --bg-panel: #1c2128;
+    --border: #30363d;
+    --text-primary: #e6edf3;
+    --text-secondary: #8b949e;
+    --accent: #58a6ff;
+    --accent-hover: #79b8ff;
+    --success: #3fb950;
+    --danger: #f85149;
+    --radius: 6px;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-dark);
+    color: var(--text-primary);
+    height: 100vh;
+    overflow: hidden;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+/* Header */
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 16px;
+    background: var(--bg-card);
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.logo-icon {
+    font-size: 20px;
+}
+
+.logo-text {
+    font-size: 15px;
+    font-weight: 600;
+}
+
+.status-bar {
+    display: flex;
+    gap: 10px;
+}
+
+.status-item {
+    font-size: 11px;
+    color: var(--text-secondary);
+    padding: 3px 8px;
+    background: var(--bg-panel);
+    border-radius: 4px;
+}
+
+/* Main 3-Column Layout */
+.main {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* Panels */
+.panel {
+    background: var(--bg-card);
+    border-right: 1px solid var(--border);
+    display: flex;
+    flex-direction: column;
+}
+
+.panel-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--border);
+    flex-shrink: 0;
+}
+
+.panel-header h2 {
+    font-size: 12px;
+    font-weight: 600;
+}
+
+/* File Panel - Left */
+.file-panel {
+    width: 220px;
+    min-width: 160px;
+}
+
+.file-tree {
+    flex: 1;
+    overflow-y: auto;
+    padding: 4px;
+}
+
+.file-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 12px;
+    color: var(--text-secondary);
+    transition: all 0.1s;
+}
+
+.file-item:hover {
+    background: var(--bg-panel);
+    color: var(--text-primary);
+}
+
+.file-item.active {
+    background: var(--accent);
+    color: #000;
+}
+
+.file-item.folder {
+    font-weight: 500;
+}
+
+.file-item .indent {
+    width: 12px;
+    display: inline-block;
+}
+
+/* Editor Panel - Center */
+.editor-panel {
+    flex: 1;
+    min-width: 300px;
+}
+
+.editor-path {
+    font-size: 10px;
+    color: var(--text-secondary);
+    margin-left: 8px;
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.editor-content {
+    flex: 1;
+    overflow: auto;
+    padding: 12px;
+    background: var(--bg-dark);
+    font-family: 'Fira Code', 'Monaco', monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.editor-content code {
+    color: var(--text-primary);
+}
+
+/* Actions Panel - Right */
+.actions-panel {
+    width: 260px;
+    min-width: 200px;
+    border-right: none;
+}
+
+.actions-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.action-card {
+    background: var(--bg-panel);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 12px;
+    margin-bottom: 8px;
+}
+
+.action-card h3 {
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.action-controls {
+    display: flex;
+    gap: 6px;
+}
+
+.action-controls input {
+    flex: 1;
+    padding: 6px 8px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    color: var(--text-primary);
+    font-size: 11px;
+}
+
+.action-controls input:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* Buttons */
+.btn {
+    padding: 6px 10px;
+    border: none;
+    border-radius: 4px;
+    font-size: 11px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.1s;
+    background: var(--bg-card);
+    color: var(--text-primary);
+    border: 1px solid var(--border);
+}
+
+.btn:hover {
+    background: var(--border);
+}
+
+.btn.primary {
+    background: var(--accent);
+    color: #000;
+    border-color: var(--accent);
+}
+
+.btn.primary:hover {
+    background: var(--accent-hover);
+}
+
+.btn.danger {
+    background: var(--danger);
+    border-color: var(--danger);
+    color: #fff;
+}
+
+.btn.small {
+    padding: 4px 8px;
+    font-size: 10px;
+}
+
+.icon-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 13px;
+    padding: 3px;
+    border-radius: 4px;
+}
+
+.icon-btn:hover {
+    background: var(--bg-panel);
+}
+
+/* Status Messages */
+.status-message {
+    margin-top: 6px;
+    font-size: 10px;
+    min-height: 14px;
+    word-break: break-word;
+}
+
+.status-message.success {
+    color: var(--success);
+}
+
+.status-message.error {
+    color: var(--danger);
+}
+
+.status-message.info {
+    color: var(--accent);
+}
+
+.status-message a {
+    color: inherit;
+}
+
+/* Preview Modal */
+.preview-modal {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 500px;
+    height: 400px;
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+}
+
+.preview-modal.hidden {
+    display: none;
+}
+
+.preview-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.preview-modal-header>div {
+    display: flex;
+    gap: 6px;
+}
+
+#preview-frame {
+    flex: 1;
+    width: 100%;
+    border: none;
+    background: #fff;
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+/* Loading */
+.loading {
+    text-align: center;
+    padding: 20px;
+    color: var(--text-secondary);
+    font-size: 11px;
+}
+
+/* Utility */
+.hidden {
+    display: none !important;
+}

web-assist/task.md

@@ -0,0 +1,16 @@
+# Web Assist - TUI Companion
+
+## Tasks
+
+- [/] Create Web Assist Dashboard
+  - [ ] Create `web-assist/` folder structure
+  - [ ] Build minimal dashboard UI
+  - [ ] Implement File Browser panel
+  - [ ] Implement Live Preview (container deployment)
+  - [ ] Add Git operations
+  - [ ] Add Vercel deployment
+
+- [ ] Update Backend
+  - [ ] Add container/preview endpoints
+  - [ ] Add Git status/commit/push endpoints
+  - [ ] Add Vercel deploy endpoint