@memoryblock/web 0.1.0-beta

package/public/components/chat.js

@@ -0,0 +1,394 @@
+import { api, connectWs, getToken } from '../app.js';
+
+/**
+ * Lightweight markdown-to-HTML renderer.
+ * Handles: bold, italic, code blocks, inline code, headers, lists, links, line breaks.
+ */
+function renderMarkdown(text) {
+    if (!text) return '';
+    
+    // Escape HTML first
+    let html = text
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+    // Fenced code blocks: ```lang\ncode\n```
+    html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (_m, lang, code) => {
+        return `<pre class="code-block"><code class="lang-${lang || 'text'}">${code.trim()}</code></pre>`;
+    });
+
+    // Inline code: `code`
+    html = html.replace(/`([^`]+)`/g, '<code class="inline-code">$1</code>');
+
+    // Headers: ### heading
+    html = html.replace(/^### (.+)$/gm, '<strong class="md-h3">$1</strong>');
+    html = html.replace(/^## (.+)$/gm, '<strong class="md-h2">$1</strong>');
+    html = html.replace(/^# (.+)$/gm, '<strong class="md-h1">$1</strong>');
+
+    // Bold: **text**
+    html = html.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    // Italic: _text_ or *text*
+    html = html.replace(/(?<!\w)_(.+?)_(?!\w)/g, '<em>$1</em>');
+    html = html.replace(/(?<!\*)\*([^*]+?)\*(?!\*)/g, '<em>$1</em>');
+
+    // Links: [text](url)
+    html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener">$1</a>');
+
+    // Unordered lists: - item or * item (at start of line)
+    html = html.replace(/^[\-\*] (.+)$/gm, '<li>$1</li>');
+    html = html.replace(/((?:<li>.*<\/li>\n?)+)/g, '<ul>$1</ul>');
+
+    // Ordered lists: 1. item
+    html = html.replace(/^\d+\. (.+)$/gm, '<li>$1</li>');
+
+    // Horizontal rules
+    html = html.replace(/^(?:---|\*\*\*|___)$/gm, '<hr>');
+
+    // Line breaks
+    html = html.replace(/\n\n/g, '</p><p>');
+    html = html.replace(/\n/g, '<br>');
+
+    html = `<p>${html}</p>`;
+    html = html.replace(/<p><\/p>/g, '');
+
+    return html;
+}
+
+let chatWs = null;
+let currentSession = 'web';
+
+export async function renderChatView(container, blockName) {
+    let renderedMessageCount = 0;
+    // Fetch block details to get monitor name + emoji
+    let monitorLabel = blockName;
+    let monitorEmoji = '';
+    try {
+        const data = await api(`/api/blocks/${blockName}`, { method: 'GET' });
+        if (data.config) {
+            monitorLabel = data.config.monitorName || blockName;
+            monitorEmoji = data.config.monitorEmoji || '';
+        }
+    } catch { /* fallback to block name */ }
+
+    const displayName = monitorEmoji ? `${monitorEmoji} ${monitorLabel}` : monitorLabel;
+
+    // Create a full-screen overlay that sits on top of everything
+    const overlay = document.createElement('div');
+    overlay.id = 'chat-overlay';
+    overlay.className = 'chat-overlay';
+    overlay.innerHTML = `
+        <div class="chat-overlay-inner">
+            <div class="chat-container">
+                <div class="chat-sidebar" id="chat-sidebar">
+                    <div class="sidebar-header">
+                        <h3>Sessions</h3>
+                        <button class="sidebar-toggle" id="sidebar-toggle" title="Collapse sidebar">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+                        </button>
+                    </div>
+                    <div class="session-list" id="chat-sessions">
+                        <div class="session-tab active" data-session="web">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+                            Web Channel
+                        </div>
+                        <div class="session-tab" data-session="cli">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+                            CLI Channel
+                        </div>
+                        <div class="session-tab" data-session="telegram">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="m22 2-7 20-4-9-9-4z"/><path d="M22 2 11 13"/></svg>
+                            Telegram
+                        </div>
+                    </div>
+                </div>
+
+                <button class="sidebar-expand-btn hidden" id="sidebar-expand-btn" title="Show sidebar">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                </button>
+                
+                <div class="chat-main">
+                    <div class="chat-header">
+                        <div class="chat-header-left">
+                            <button class="chat-close-btn" id="chat-close-btn" title="Close chat">
+                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                            </button>
+                            <h2>${escapeHtml(displayName)}</h2>
+                        </div>
+                        <span class="status-indicator" id="chat-status">
+                            <span class="status-dot sleeping"></span>
+                            <span id="chat-status-text">Checking...</span>
+                        </span>
+                    </div>
+                    
+                    <div class="chat-messages" id="chat-messages">
+                        <div class="chat-msg system">
+                            <div class="msg-content">Joined Web Channel for ${escapeHtml(displayName)}.</div>
+                        </div>
+                    </div>
+                    
+                    <div class="chat-input-area">
+                        <textarea id="chat-input" placeholder="Type a message... (Enter to send, Shift+Enter for new line)" rows="1"></textarea>
+                        <button id="chat-send-btn" class="action-btn primary"><span class="action-icon">↑</span></button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    document.body.appendChild(overlay);
+    // Trigger transition
+    requestAnimationFrame(() => overlay.classList.add('visible'));
+
+    // Close button — remove overlay and go back
+    function closeChat() {
+        if (chatWs) { chatWs.close(); chatWs = null; }
+        overlay.classList.remove('visible');
+        setTimeout(() => {
+            overlay.remove();
+        }, 300);
+    }
+
+    document.getElementById('chat-close-btn').addEventListener('click', closeChat);
+
+    // ESC key to close
+    const escHandler = (e) => { if (e.key === 'Escape') closeChat(); };
+    document.addEventListener('keydown', escHandler);
+
+    // Sidebar toggle
+    const sidebar = document.getElementById('chat-sidebar');
+    const expandBtn = document.getElementById('sidebar-expand-btn');
+    document.getElementById('sidebar-toggle').addEventListener('click', () => {
+        sidebar.classList.add('collapsed');
+        expandBtn.classList.remove('hidden');
+    });
+    expandBtn.addEventListener('click', () => {
+        sidebar.classList.remove('collapsed');
+        expandBtn.classList.add('hidden');
+    });
+
+    // Session tab switching
+    const messagesDiv = document.getElementById('chat-messages');
+
+    document.querySelectorAll('.session-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            const session = tab.dataset.session;
+            if (session === currentSession) return;
+            
+            currentSession = session;
+            document.querySelectorAll('.session-tab').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            
+            const channelLabels = { web: 'Web Channel', cli: 'CLI Channel', telegram: 'Telegram' };
+            messagesDiv.innerHTML = '';
+            renderedMessageCount = 0;
+            removeTypingIndicator();
+            appendMessage('system', `Viewing ${channelLabels[session] || session} logs for ${escapeHtml(displayName)}.`);
+            loadChatHistory(session, true);
+
+            // Disable input if not web channel
+            const inputArea = document.querySelector('.chat-input-area');
+            if (session !== 'web') {
+                inputArea.classList.add('disabled-input');
+                chatInput.disabled = true;
+                sendBtn.disabled = true;
+                chatInput.placeholder = 'Viewing mode (switch to Web Channel to chat)';
+            } else {
+                inputArea.classList.remove('disabled-input');
+                chatInput.disabled = false;
+                sendBtn.disabled = false;
+                chatInput.placeholder = 'Type a message... (Enter to send, Shift+Enter for new line)';
+                chatInput.focus();
+            }
+        });
+    });
+
+    const chatInput = document.getElementById('chat-input');
+    const sendBtn = document.getElementById('chat-send-btn');
+
+    function removeTypingIndicator() {
+        const ind = document.getElementById('typing-indicator');
+        if (ind) ind.remove();
+    }
+
+    function showTypingIndicator() {
+        if (document.getElementById('typing-indicator')) return;
+        const msgDiv = document.createElement('div');
+        msgDiv.id = 'typing-indicator';
+        msgDiv.className = `chat-msg assistant typing-indicator`;
+        msgDiv.innerHTML = `<div class="msg-content"><span class="dot"></span><span class="dot"></span><span class="dot"></span></div>`;
+        messagesDiv.appendChild(msgDiv);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+
+    function appendMessage(role, content) {
+        removeTypingIndicator();
+        const msgDiv = document.createElement('div');
+        msgDiv.className = `chat-msg ${role}`;
+        
+        if (role === 'assistant' || role === 'system') {
+            msgDiv.innerHTML = `<div class="msg-content">${renderMarkdown(content)}</div>`;
+        } else if (role === 'error') {
+            msgDiv.innerHTML = `<div class="msg-content">${escapeHtml(content)}</div>`;
+        } else {
+            msgDiv.innerHTML = `<div class="msg-content">${escapeHtml(content).replace(/\n/g, '<br>')}</div>`;
+        }
+        
+        messagesDiv.appendChild(msgDiv);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+
+    let currentStreamDiv = null;
+    let currentStreamText = '';
+
+    function handleStreamChunk(chunk) {
+        if (!currentStreamDiv) {
+            removeTypingIndicator();
+            const msgDiv = document.createElement('div');
+            msgDiv.className = `chat-msg assistant`;
+            currentStreamDiv = document.createElement('div');
+            currentStreamDiv.className = 'msg-content';
+            msgDiv.appendChild(currentStreamDiv);
+            messagesDiv.appendChild(msgDiv);
+            currentStreamText = '';
+        }
+        
+        currentStreamText += chunk;
+        currentStreamDiv.innerHTML = renderMarkdown(currentStreamText);
+        messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+
+    function resetStreamDiv() {
+        if (currentStreamDiv) {
+            currentStreamDiv.parentElement.remove();
+            currentStreamDiv = null;
+            currentStreamText = '';
+        }
+    }
+
+    async function loadChatHistory(channel, initialLoad = false) {
+        try {
+            const data = await api(`/api/blocks/${blockName}/chat?channel=${channel || 'web'}`, { method: 'GET' });
+            if (data.messages && data.messages.length > renderedMessageCount) {
+                const newMessages = data.messages.slice(renderedMessageCount);
+                renderedMessageCount = data.messages.length;
+                
+                resetStreamDiv();
+                
+                for (const m of newMessages) {
+                    appendMessage(m.role, m.content);
+                }
+            }
+        } catch {
+            // failed to load history
+        }
+    }
+
+    async function updateConnectionStatus() {
+        try {
+            const data = await api(`/api/blocks/${blockName}`, { method: 'GET' });
+            const statusDot = document.querySelector('#chat-status .status-dot');
+            const statusText = document.getElementById('chat-status-text');
+            if (!statusDot || !statusText) return;
+
+            const pulseStatus = data.pulse?.status || 'SLEEPING';
+            
+            if (pulseStatus === 'ACTIVE') {
+                statusDot.className = 'status-dot active';
+                statusText.textContent = 'Connected';
+            } else if (pulseStatus === 'ERROR') {
+                statusDot.className = 'status-dot error';
+                statusText.textContent = 'Error';
+            } else {
+                statusDot.className = 'status-dot sleeping';
+                statusText.textContent = 'Sleeping';
+            }
+        } catch { /* ignore */ }
+    }
+
+    async function sendMessage() {
+        const text = chatInput.value.trim();
+        if (!text) return;
+
+        chatInput.value = '';
+        chatInput.style.height = 'auto';
+        appendMessage('user', text);
+        renderedMessageCount++;
+
+        showTypingIndicator();
+
+        // Wake the block if asleep
+        try {
+            await api(`/api/blocks/${blockName}/start`, { method: 'POST' });
+        } catch { /* already active */ }
+
+        // Show connecting status
+        const statusDot = document.querySelector('#chat-status .status-dot');
+        const statusText = document.getElementById('chat-status-text');
+        if (statusDot && statusText) {
+            statusDot.className = 'status-dot connecting';
+            statusText.textContent = 'Connecting...';
+        }
+
+        try {
+            const res = await api(`/api/blocks/${blockName}/chat`, {
+                method: 'POST',
+                body: JSON.stringify({ message: text })
+            });
+            if (res.error) {
+                removeTypingIndicator();
+                appendMessage('error', res.error);
+                renderedMessageCount--;
+            } else if (res.note) {
+                appendMessage('system', res.note);
+            }
+        } catch (err) {
+            removeTypingIndicator();
+            appendMessage('error', 'Error: ' + err.message);
+            renderedMessageCount--;
+        }
+    }
+
+    chatInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+
+    // Auto-resize textarea
+    chatInput.addEventListener('input', () => {
+        chatInput.style.height = 'auto';
+        chatInput.style.height = Math.min(chatInput.scrollHeight, 120) + 'px';
+    });
+
+    sendBtn.addEventListener('click', sendMessage);
+
+    if (chatWs) chatWs.close();
+    chatWs = connectWs(blockName, () => {
+        loadChatHistory(currentSession, false); // initialLoad = false for ws refresh
+        updateConnectionStatus();
+    });
+
+    chatWs.addEventListener('message', (e) => {
+        try {
+            const msg = JSON.parse(e.data);
+            if (msg.type === 'stream') {
+                handleStreamChunk(msg.chunk);
+            }
+        } catch {}
+    });
+
+    currentSession = 'web';
+    loadChatHistory('web', true);
+    updateConnectionStatus();
+    setTimeout(() => chatInput.focus(), 300);
+}
+
+function escapeHtml(str) {
+    if (!str) return '';
+    return str.replace(/[&<>'"]/g, tag => ({
+        '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;'
+    }[tag] || tag));
+}

package/public/components/create-block.js

@@ -0,0 +1,108 @@
+// create-block.js — Block creation form component
+
+export function renderCreateBlock(container, { apiBase, token, onCreated }) {
+    container.innerHTML = `
+        <div class="create-block-view">
+            <div class="view-header" style="margin-bottom: 24px;">
+                <button class="back-btn" id="create-back">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:2px; vertical-align:text-bottom;"><path d="m15 18-6-6 6-6"/></svg> back to blocks
+                </button>
+            </div>
+            
+            <div class="create-card" style="background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 48px; text-align: center; max-width: 540px; margin: 32px auto 0; box-shadow: 0 10px 40px rgba(0,0,0,0.15);">
+                <div class="create-icon" style="background: var(--accent-glow); color: var(--accent); width: 72px; height: 72px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 24px;">
+                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path><polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline><line x1="12" y1="22.08" x2="12" y2="12"></line></svg>
+                </div>
+                <h2 style="font-size: 1.8rem; margin-bottom: 12px; font-weight: 600; font-family: 'Outfit', sans-serif;">Deploy a New Block</h2>
+                <p style="color: var(--text-dim); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.5;">Create an isolated intelligence wrapper primitive. Highly optimized background daemons for massive scaled logic flow tracking.</p>
+                
+                <form id="create-block-form" class="create-form" style="text-align: left;">
+                    <div class="form-group">
+                        <label for="block-name" style="font-weight: 500; display: block; margin-bottom: 12px; color: var(--text);">Block Identifier <span style="color:var(--text-dim);font-weight:400;font-size:0.85rem;margin-left:8px;">(lowercase, hyphens)</span></label>
+                        <input type="text" id="block-name" class="form-input" style="width: 100%; padding: 16px 18px; font-size: 1.15rem; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); transition: border-color 0.2s;"
+                            placeholder="e.g. data-analyzer"
+                            pattern="[a-z0-9][a-z0-9\\-]{0,31}"
+                            required
+                            autocomplete="off" />
+                    </div>
+                    <div id="create-error" class="form-error" style="display:none; color: var(--error); background: rgba(255,59,48,0.1); padding: 14px; border-radius: 8px; margin-top: 16px; font-size: 0.95rem; border: 1px solid rgba(255,59,48,0.2);"></div>
+                    
+                    <button type="submit" class="action-btn primary" id="create-submit" style="width: 100%; padding: 18px; margin-top: 32px; font-size: 1.1rem; justify-content: center; border-radius: 12px; font-weight: 600;">
+                        Initialize Primitive
+                    </button>
+                </form>
+            </div>
+        </div>
+    `;
+
+    // Back button
+    document.getElementById('create-back').addEventListener('click', () => {
+        window.location.hash = '#/blocks';
+    });
+
+    // Name validation in real-time
+    const nameInput = document.getElementById('block-name');
+    nameInput.addEventListener('input', () => {
+        const val = nameInput.value;
+        const valid = /^[a-z0-9][a-z0-9\-]{0,31}$/.test(val);
+        nameInput.classList.toggle('invalid', val.length > 0 && !valid);
+    });
+
+    // Submit
+    document.getElementById('create-block-form').addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const name = nameInput.value.trim();
+        const errorEl = document.getElementById('create-error');
+        const submitBtn = document.getElementById('create-submit');
+
+        if (!/^[a-z0-9][a-z0-9\-]{0,31}$/.test(name)) {
+            errorEl.textContent = 'Invalid name. Use lowercase letters, numbers, and hyphens only.';
+            errorEl.style.display = 'block';
+            return;
+        }
+
+        submitBtn.disabled = true;
+        submitBtn.textContent = 'Creating...';
+        errorEl.style.display = 'none';
+
+        try {
+            const res = await fetch(`${apiBase}/api/blocks`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ name }),
+            });
+
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.error || 'Failed to create block');
+
+            showToast(`Block "${name}" created successfully.`);
+            if (onCreated) onCreated(name);
+            window.location.hash = '#/blocks';
+        } catch (err) {
+            errorEl.textContent = err.message;
+            errorEl.style.display = 'block';
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Create Block';
+        }
+    });
+
+    // Focus
+    nameInput.focus();
+}
+
+// Toast notification helper
+export function showToast(message, duration = 3000) {
+    let toast = document.getElementById('toast-notification');
+    if (!toast) {
+        toast = document.createElement('div');
+        toast.id = 'toast-notification';
+        toast.className = 'toast';
+        document.body.appendChild(toast);
+    }
+    toast.textContent = message;
+    toast.classList.add('visible');
+    setTimeout(() => toast.classList.remove('visible'), duration);
+}