@memoryblock/web 0.1.0-beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 memoryblock
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@memoryblock/web",
+  "version": "0.1.0-beta",
+  "description": "Front-end dashboard and Web UI for memoryblock.",
+  "files": [
+    "public/"
+  ],
+  "keywords": [
+    "memoryblock",
+    "mblk",
+    "ai-agent",
+    "assistants",
+    "agents",
+    "automation",
+    "multi-agent",
+    "agentic-framework",
+    "web",
+    "ui",
+    "dashboard",
+    "frontend",
+    "chat",
+    "chat-ui",
+    "dashboard"
+  ],
+  "author": {
+    "name": "Ghazi",
+    "url": "https://mgks.dev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/memoryblock-io/memoryblock.git"
+  },
+  "bugs": {
+    "url": "https://github.com/memoryblock-io/memoryblock/issues"
+  },
+  "homepage": "https://memoryblock.io",
+  "funding": "https://github.com/sponsors/mgks",
+  "license": "MIT"
+}

package/public/app.js

@@ -0,0 +1,205 @@
+/**
+ * memoryblock web ui — app router & shared utilities.
+ * ES module entry point — imports components.
+ */
+
+import { renderAuth, tryAutoAuth } from './components/auth.js';
+import { renderBlocksList, renderBlockDetail } from './components/blocks.js';
+import { renderSettings } from './components/settings.js';
+import { renderCreateBlock } from './components/create-block.js';
+import { renderArchive } from './components/archive.js';
+import { renderSetup } from './components/setup.js';
+import { renderChatView } from './components/chat.js';
+
+const API_BASE = location.origin;
+
+// ===== Token Management =====
+
+export function getToken() { return localStorage.getItem('mblk_token') || ''; }
+export function setToken(t) { localStorage.setItem('mblk_token', t); }
+export function clearToken() { localStorage.removeItem('mblk_token'); }
+
+// ===== Theme Management =====
+
+export function getTheme() { return localStorage.getItem('mblk_theme') || 'dark'; }
+export function setTheme(t) {
+    localStorage.setItem('mblk_theme', t);
+    document.documentElement.setAttribute('data-theme', t);
+}
+
+// ===== API Helper =====
+
+export async function api(path, options = {}) {
+    const res = await fetch(`${API_BASE}${path}`, {
+        ...options,
+        headers: { 
+            'Authorization': `Bearer ${getToken()}`,
+            ...(options.body ? { 'Content-Type': 'application/json' } : {}),
+            ...(options.headers || {})
+        },
+    });
+    if (res.status === 401) {
+        clearToken();
+        window.dispatchEvent(new Event('auth:logout'));
+        throw new Error('unauthorized');
+    }
+    return res.json();
+}
+
+// ===== WebSocket Helper =====
+
+export function connectWs(blockName, onRefresh) {
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${protocol}//${location.host}/api/ws?token=${getToken()}`);
+    
+    ws.onopen = () => {
+        ws.send(JSON.stringify({ type: 'subscribe', block: blockName }));
+    };
+    
+    ws.onmessage = (e) => {
+        try {
+            const msg = JSON.parse(e.data);
+            if (msg.type === 'refresh' && onRefresh) onRefresh();
+        } catch {}
+    };
+    
+    return ws;
+}
+
+// ===== Layout Templates =====
+
+function mainLayout() {
+    return `
+        <div class="view active" id="main-view">
+            <header>
+                <div class="header-left">
+                    <div class="brand-small">⬡ memoryblock</div>
+                    <nav>
+                        <button class="nav-btn active" data-tab="blocks">blocks</button>
+                        <button class="nav-btn" data-tab="archive">archive</button>
+                        <button class="nav-btn" data-tab="settings">settings</button>
+                    </nav>
+                </div>
+                <button class="theme-toggle" id="quick-theme">${getTheme() === 'dark' ? '☀' : '◑'}</button>
+            </header>
+            <main id="main-content"></main>
+        </div>
+    `;
+}
+
+// ===== Router =====
+
+let currentTab = 'blocks';
+
+async function showMain() {
+    // Check if any blocks exist — if not, show setup wizard
+    try {
+        const data = await api('/api/blocks');
+        if (!data.blocks || data.blocks.length === 0) {
+            const setupDone = localStorage.getItem('mblk_setup_done');
+            if (!setupDone) {
+                const app = document.getElementById('app');
+                renderSetup(app, {
+                    api,
+                    onComplete: () => {
+                        localStorage.setItem('mblk_setup_done', '1');
+                        showMain();
+                    },
+                });
+                return;
+            }
+        }
+    } catch { }
+
+    const app = document.getElementById('app');
+    app.innerHTML = mainLayout();
+
+    const content = document.getElementById('main-content');
+
+    // Tab navigation
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+            currentTab = btn.dataset.tab;
+            document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            renderTab(content, currentTab);
+        });
+    });
+
+    // Quick theme toggle
+    document.getElementById('quick-theme').addEventListener('click', () => {
+        const next = getTheme() === 'dark' ? 'light' : 'dark';
+        setTheme(next);
+        document.getElementById('quick-theme').textContent = next === 'dark' ? '☀' : '◑';
+    });
+
+    renderTab(content, currentTab);
+}
+
+function renderTab(content, tab) {
+    if (tab === 'blocks') renderBlocksList(content);
+    else if (tab === 'archive') renderArchive(content, { apiBase: API_BASE, token: getToken() });
+    else if (tab === 'settings') renderSettings(content);
+}
+
+function showAuth() {
+    const app = document.getElementById('app');
+    renderAuth(app);
+}
+
+// ===== Event Listeners =====
+
+window.addEventListener('auth:success', () => showMain());
+window.addEventListener('auth:logout', () => showAuth());
+window.addEventListener('navigate', (e) => {
+    const { view, block } = e.detail;
+    const content = document.getElementById('main-content');
+    if (view === 'detail' && block) {
+        renderBlockDetail(content, block);
+    } else if (view === 'chat' && block) {
+        renderChatView(content, block);
+    } else if (view === 'blocks') {
+        renderBlocksList(content);
+    }
+});
+
+// ===== Hash Router =====
+
+function handleHash() {
+    const hash = window.location.hash;
+    const content = document.getElementById('main-content');
+    if (!content) return;
+
+    if (hash === '#/create') {
+        renderCreateBlock(content, {
+            apiBase: API_BASE,
+            token: getToken(),
+            onCreated: () => {},
+        });
+    } else if (hash.startsWith('#/block/')) {
+        const blockName = hash.replace('#/block/', '');
+        renderBlockDetail(content, blockName);
+    } else if (hash.startsWith('#/chat/')) {
+        const blockName = hash.replace('#/chat/', '');
+        renderChatView(content, blockName);
+    } else if (hash === '#/archive') {
+        currentTab = 'archive';
+        document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
+        document.querySelector('[data-tab="archive"]')?.classList.add('active');
+        renderArchive(content, { apiBase: API_BASE, token: getToken() });
+    }
+}
+
+window.addEventListener('hashchange', handleHash);
+
+// ===== Init =====
+
+(async () => {
+    setTheme(getTheme());
+    if (await tryAutoAuth()) {
+        showMain();
+        handleHash();
+    } else {
+        showAuth();
+    }
+})();

package/public/components/archive.js

@@ -0,0 +1,110 @@
+// archive.js — Archive management component
+
+import { showToast } from './create-block.js';
+
+export function renderArchive(container, { apiBase, token }) {
+    container.innerHTML = `
+        <div class="archive-view">
+            <div class="view-header">
+                <h2>Archived Blocks</h2>
+            </div>
+            <div id="archive-list" class="archive-list">
+                <div class="loading">Loading archives...</div>
+            </div>
+        </div>
+    `;
+
+    loadArchives(apiBase, token);
+}
+
+async function loadArchives(apiBase, token) {
+    const listEl = document.getElementById('archive-list');
+
+    try {
+        const res = await fetch(`${apiBase}/api/archive`, {
+            headers: { 'Authorization': `Bearer ${token}` },
+        });
+        const data = await res.json();
+
+        if (!data.archives || data.archives.length === 0) {
+            listEl.innerHTML = `
+                <div class="empty-state">
+                    <span class="empty-icon">📦</span>
+                    <p>No archived blocks.</p>
+                    <p class="dim">Deleted blocks appear here for safe recovery.</p>
+                </div>
+            `;
+            return;
+        }
+
+        listEl.innerHTML = data.archives.map(a => `
+            <div class="archive-card" data-name="${a.archiveName}">
+                <div class="archive-info">
+                    <span class="archive-name">${a.originalName}</span>
+                    <span class="archive-date">${formatDate(a.archivedAt)}</span>
+                </div>
+                <div class="archive-actions">
+                    <button class="action-btn" data-action="restore" data-archive="${a.archiveName}">
+                        Restore
+                    </button>
+                    <button class="action-btn danger" data-action="delete" data-archive="${a.archiveName}">
+                        Delete Forever
+                    </button>
+                </div>
+            </div>
+        `).join('');
+
+        // Bind actions
+        listEl.querySelectorAll('[data-action="restore"]').forEach(btn => {
+            btn.addEventListener('click', () => handleRestore(btn.dataset.archive, apiBase, token));
+        });
+        listEl.querySelectorAll('[data-action="delete"]').forEach(btn => {
+            btn.addEventListener('click', () => handleDelete(btn.dataset.archive, apiBase, token));
+        });
+    } catch (err) {
+        listEl.innerHTML = `<div class="error-state">Failed to load archives: ${err.message}</div>`;
+    }
+}
+
+async function handleRestore(archiveName, apiBase, token) {
+    if (!confirm(`Restore "${archiveName.split('_')[0]}" from archive?`)) return;
+
+    try {
+        const res = await fetch(`${apiBase}/api/archive/${archiveName}/restore`, {
+            method: 'POST',
+            headers: { 'Authorization': `Bearer ${token}` },
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        showToast('Block restored successfully.');
+        loadArchives(apiBase, token);
+    } catch (err) {
+        showToast(`Restore failed: ${err.message}`);
+    }
+}
+
+async function handleDelete(archiveName, apiBase, token) {
+    if (!confirm(`Permanently delete "${archiveName}"? This cannot be undone.`)) return;
+
+    try {
+        const res = await fetch(`${apiBase}/api/archive/${archiveName}`, {
+            method: 'DELETE',
+            headers: { 'Authorization': `Bearer ${token}` },
+        });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.error);
+
+        showToast('Permanently deleted.');
+        loadArchives(apiBase, token);
+    } catch (err) {
+        showToast(`Delete failed: ${err.message}`);
+    }
+}
+
+function formatDate(isoString) {
+    if (!isoString) return 'Unknown date';
+    const d = new Date(isoString);
+    return d.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+        + ' ' + d.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' });
+}

package/public/components/auth.js

@@ -0,0 +1,70 @@
+/**
+ * Auth component — token input card and session management.
+ */
+
+import { api, getToken, setToken, clearToken } from '../app.js';
+
+export function renderAuth(container) {
+    container.innerHTML = `
+        <div class="view active" id="auth-view">
+            <div class="auth-wrapper">
+                <div class="auth-card">
+                    <div class="brand">⬡ memoryblock</div>
+                    <p class="auth-hint">paste your auth token to continue</p>
+                    <input type="text" class="token-input" id="token-input" placeholder="mblk_..." autocomplete="off" spellcheck="false">
+                    <button class="btn-primary" id="auth-btn">connect</button>
+                    <p class="error-text" id="auth-error"></p>
+                </div>
+            </div>
+        </div>
+    `;
+
+    const input = document.getElementById('token-input');
+    const errorEl = document.getElementById('auth-error');
+
+    input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') authenticate();
+    });
+
+    document.getElementById('auth-btn').addEventListener('click', authenticate);
+
+    async function authenticate() {
+        const token = input.value.trim();
+        if (!token) { errorEl.textContent = 'enter a token'; return; }
+
+        try {
+            const res = await fetch(`${location.origin}/api/auth/status`, {
+                headers: { 'Authorization': `Bearer ${token}` },
+            });
+            const data = await res.json();
+
+            if (data.authenticated) {
+                setToken(token);
+                errorEl.textContent = '';
+                window.dispatchEvent(new Event('auth:success'));
+            } else {
+                errorEl.textContent = 'invalid token';
+                input.focus();
+            }
+        } catch {
+            errorEl.textContent = 'cannot reach api server';
+        }
+    }
+
+    input.focus();
+}
+
+export async function tryAutoAuth() {
+    const token = getToken();
+    if (!token) return false;
+
+    try {
+        const res = await fetch(`${location.origin}/api/auth/status`, {
+            headers: { 'Authorization': `Bearer ${token}` },
+        });
+        const data = await res.json();
+        return data.authenticated;
+    } catch {
+        return false;
+    }
+}