@memoryblock/web 0.1.0-beta

package/public/components/settings.js

@@ -0,0 +1,363 @@
+/**
+ * Settings component — theme, plugins, session.
+ * Plugin settings panels are auto-generated from plugin settings schemas.
+ */
+
+import { clearToken, getTheme, setTheme, api } from '../app.js';
+
+export function renderSettings(container) {
+    const currentTheme = getTheme();
+
+    container.innerHTML = `
+        <div class="settings-grid">
+            <div class="settings-nav">
+                <button class="settings-nav-item active" data-target="general">General</button>
+                <button class="settings-nav-item" data-target="appearance">Appearance</button>
+                <button class="settings-nav-item" data-target="plugins">Plugins</button>
+                <button class="settings-nav-item" data-target="advanced">Advanced</button>
+            </div>
+            
+            <div class="settings-content">
+                <!-- General Settings -->
+                <div class="settings-content-section active" id="setting-general">
+                    <div class="settings-panel">
+                        <h3>Workspace</h3>
+                        <p class="desc">Manage your core memoryblock environment and data.</p>
+                        <div class="setting-row">
+                            <div>
+                                <div class="setting-label">API Endpoint</div>
+                                <div class="setting-desc">The local daemon server URL for memoryblock.</div>
+                            </div>
+                            <span class="dim" style="font-family: monospace;">${location.origin}</span>
+                        </div>
+                        <div class="setting-row">
+                            <div>
+                                <div class="setting-label">Channel Connectivity Alerts</div>
+                                <div class="setting-desc">Broadcast "online" and "offline" status announcements to channels.</div>
+                            </div>
+                            <label class="plugin-toggle">
+                                <input type="checkbox" id="setting-channel-alerts" disabled>
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                        <div class="setting-row">
+                            <div>
+                                <div class="setting-label">Session Status</div>
+                                <div class="setting-desc">You are connected to the API correctly.</div>
+                            </div>
+                            <button class="btn-small danger" id="logout-btn">disconnect</button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Appearance Settings -->
+                <div class="settings-content-section" id="setting-appearance">
+                    <div class="settings-panel">
+                        <h3>Appearance</h3>
+                        <p class="desc">Customize the look and feel of your memoryblock dashboard.</p>
+                        <div class="setting-row">
+                            <div>
+                                <div class="setting-label">Theme</div>
+                                <div class="setting-desc">Select between light and dark mode.</div>
+                            </div>
+                            <div class="theme-selector">
+                                <button class="theme-option ${currentTheme === 'light' ? 'active' : ''}" data-theme="light">☀ light</button>
+                                <button class="theme-option ${currentTheme === 'dark' ? 'active' : ''}" data-theme="dark">◑ dark</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Plugins Settings -->
+                <div class="settings-content-section" id="setting-plugins">
+                    <div class="settings-panel">
+                        <h3>Plugins Configuration</h3>
+                        <p class="desc">Manage settings and API keys for installed plugins.</p>
+                        <div id="plugin-settings-list" class="plugin-settings-list">
+                            <div class="loading">Loading plugins...</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Advanced Settings -->
+                <div class="settings-content-section" id="setting-advanced">
+                    <div class="settings-panel">
+                        <h3>Advanced Setup</h3>
+                        <p class="desc">Experimental features and dangerous actions.</p>
+                        <div class="empty-state" style="padding: 20px;">
+                            <span class="empty-icon" style="font-size: 1.5rem">🚧</span>
+                            <p>More features coming soon.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Tab Navigation
+    const navItems = container.querySelectorAll('.settings-nav-item');
+    navItems.forEach(btn => {
+        btn.addEventListener('click', () => {
+            navItems.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            
+            container.querySelectorAll('.settings-content-section').forEach(sec => {
+                sec.classList.remove('active');
+            });
+            container.querySelector(`#setting-${btn.dataset.target}`).classList.add('active');
+        });
+    });
+
+    // Theme toggle
+    container.querySelectorAll('.theme-option').forEach(btn => {
+        btn.addEventListener('click', () => {
+            const theme = btn.dataset.theme;
+            setTheme(theme);
+            container.querySelectorAll('.theme-option').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+        });
+    });
+
+    // Logout
+    document.getElementById('logout-btn').addEventListener('click', () => {
+        clearToken();
+        window.dispatchEvent(new Event('auth:logout'));
+    });
+
+    // Load plugin settings
+    loadPluginSettings();
+    
+    // Load general settings
+    loadGeneralSettings();
+}
+
+async function loadGeneralSettings() {
+    try {
+        const data = await api('/api/config');
+        if (!data || !data.config) return;
+        
+        const alertsToggle = document.getElementById('setting-channel-alerts');
+        if (alertsToggle) {
+            alertsToggle.checked = data.config.channelAlerts !== false;
+            alertsToggle.disabled = false;
+            
+            alertsToggle.addEventListener('change', async () => {
+                alertsToggle.disabled = true;
+                try {
+                    await api('/api/config', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({ channelAlerts: alertsToggle.checked })
+                    });
+                } catch {
+                    alertsToggle.checked = !alertsToggle.checked; // revert on fail
+                } finally {
+                    alertsToggle.disabled = false;
+                }
+            });
+        }
+    } catch {
+        // silently fail to load config
+    }
+}
+
+async function loadPluginSettings() {
+    const list = document.getElementById('plugin-settings-list');
+    if (!list) return;
+
+    try {
+        const data = await api('/api/plugins');
+        const plugins = data.plugins || [];
+
+        if (plugins.length === 0) {
+            list.innerHTML = '<div class="dim">No plugins installed.</div>';
+            return;
+        }
+
+        list.innerHTML = plugins.map(pl => `
+            <div class="plugin-settings-card" data-plugin="${pl.id}">
+                <div class="plugin-settings-header" style="align-items: center; display: flex; justify-content: space-between;">
+                    <div class="plugin-settings-info" style="flex: 1;">
+                        <span class="plugin-settings-name">
+                            ${pl.core ? '●' : '○'} ${pl.name}
+                            ${pl.core ? '<span class="badge-core">core</span>' : ''}
+                        </span>
+                        <span class="plugin-settings-desc">${pl.description}</span>
+                    </div>
+                    <div style="display: flex; gap: 8px; align-items: center;">
+                        <label class="plugin-toggle" title="${pl.core ? 'Core plugins cannot be disabled' : 'Toggle plugin installation'}">
+                            <input type="checkbox" class="plugin-install-toggle" data-id="${pl.id}" ${pl.installed ? 'checked' : ''} ${pl.core ? 'disabled' : ''}>
+                            <span class="toggle-slider"></span>
+                        </label>
+                        ${pl.settings && Object.keys(pl.settings).length > 0
+                            ? `<button class="btn-small plugin-expand" data-id="${pl.id}">settings ▾</button>`
+                            : ''}
+                    </div>
+                </div>
+                <!-- Logs container for install/uninstall streaming -->
+                <div class="plugin-logs" id="plugin-logs-${pl.id}" style="display:none; margin: 12px 0; background: var(--bg-deep); padding: 12px; border-radius: 6px; font-family: monospace; font-size: 0.85rem; color: #a3a3a3; max-height: 200px; overflow-y: auto; white-space: pre-wrap;"></div>
+                <div class="plugin-settings-body" id="plugin-body-${pl.id}" style="display:none;">
+                    ${renderPluginFields(pl)}
+                </div>
+            </div>
+        `).join('');
+
+        // Expand/collapse settings
+        list.querySelectorAll('.plugin-expand').forEach(btn => {
+            btn.addEventListener('click', () => {
+                const body = document.getElementById(`plugin-body-${btn.dataset.id}`);
+                if (body) {
+                    const open = body.style.display !== 'none';
+                    body.style.display = open ? 'none' : 'block';
+                    btn.textContent = open ? 'settings ▾' : 'settings ▴';
+                }
+            });
+        });
+
+        // Install/Uninstall toggle
+        list.querySelectorAll('.plugin-install-toggle').forEach(toggle => {
+            toggle.addEventListener('change', async (e) => {
+                const isChecked = toggle.checked; // the target state
+                const pluginId = toggle.dataset.id;
+                const action = isChecked ? 'install' : 'uninstall';
+                const logsDiv = document.getElementById(`plugin-logs-${pluginId}`);
+                
+                toggle.disabled = true; // prevent multi-click
+                logsDiv.style.display = 'block';
+                logsDiv.textContent = `Starting ${action} for ${pluginId}...\n`;
+
+                try {
+                    const res = await fetch(`${location.origin}/api/plugins/${pluginId}/${action}`, {
+                        method: action === 'install' ? 'POST' : 'DELETE',
+                        headers: { 'Authorization': `Bearer ${document.cookie || localStorage.getItem('mblk_token')}` } // api fetch overrides
+                    });
+
+                    if (!res.body) throw new Error('ReadableStream not supported');
+                    const reader = res.body.getReader();
+                    const decoder = new TextDecoder('utf-8');
+
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+                        const chunk = decoder.decode(value, { stream: true });
+                        
+                        // Parse the __RESULT__ marker if present
+                        if (chunk.includes('__RESULT__')) {
+                            const [logPart, resultStr] = chunk.split('__RESULT__');
+                            logsDiv.textContent += logPart;
+                            try {
+                                const result = JSON.parse(resultStr);
+                                if (!result.success) {
+                                    logsDiv.textContent += `\nError: ${result.message}`;
+                                    toggle.checked = !isChecked; // revert
+                                } else {
+                                    logsDiv.textContent += `\nSuccess: ${result.message}`;
+                                }
+                            } catch { }
+                        } else {
+                            logsDiv.textContent += chunk;
+                        }
+                        logsDiv.scrollTop = logsDiv.scrollHeight;
+                    }
+                } catch (err) {
+                    logsDiv.textContent += `\nError: ${err.message}`;
+                    toggle.checked = !isChecked; // revert
+                } finally {
+                    toggle.disabled = false;
+                    setTimeout(() => { if (logsDiv) logsDiv.style.display = 'none'; }, 3000);
+                }
+            });
+        });
+
+        // Save handlers
+        list.querySelectorAll('.plugin-save').forEach(btn => {
+            btn.addEventListener('click', async () => {
+                const pluginId = btn.dataset.id;
+                const body = document.getElementById(`plugin-body-${pluginId}`);
+                if (!body) return;
+
+                const values = {};
+                body.querySelectorAll('[data-field]').forEach(input => {
+                    if (input.type === 'checkbox') {
+                        values[input.dataset.field] = input.checked;
+                    } else if (input.type === 'number') {
+                        values[input.dataset.field] = parseInt(input.value, 10);
+                    } else {
+                        values[input.dataset.field] = input.value;
+                    }
+                });
+
+                try {
+                    await api(`/api/plugins/${pluginId}/settings`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(values),
+                    });
+                    btn.textContent = '✓ saved';
+                    setTimeout(() => btn.textContent = 'save', 1500);
+                } catch {
+                    btn.textContent = '✗ error';
+                    setTimeout(() => btn.textContent = 'save', 1500);
+                }
+            });
+        });
+    } catch {
+        list.innerHTML = '<div class="dim">Could not load plugins.</div>';
+    }
+}
+
+function renderPluginFields(plugin) {
+    if (!plugin.settings) return '';
+
+    const fields = Object.entries(plugin.settings).map(([key, field]) => {
+        const val = field.default ?? '';
+
+        if (field.type === 'select') {
+            const opts = (field.options || []).map(o =>
+                `<option value="${o}" ${o === val ? 'selected' : ''}>${o}</option>`
+            ).join('');
+            return `
+                <div class="setup-field">
+                    <label>${field.label}</label>
+                    <select data-field="${key}" class="settings-input">${opts}</select>
+                </div>`;
+        }
+
+        if (field.type === 'toggle') {
+            return `
+                <div class="setup-field toggle-field">
+                    <label>${field.label}</label>
+                    <label class="plugin-toggle">
+                        <input type="checkbox" data-field="${key}" ${val ? 'checked' : ''}>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>`;
+        }
+
+        if (field.type === 'number') {
+            return `
+                <div class="setup-field">
+                    <label>${field.label}</label>
+                    <input type="number" data-field="${key}" value="${val}"
+                           ${field.min !== undefined ? `min="${field.min}"` : ''}
+                           ${field.max !== undefined ? `max="${field.max}"` : ''}
+                           class="settings-input">
+                </div>`;
+        }
+
+        return `
+            <div class="setup-field">
+                <label>${field.label}</label>
+                <input type="${field.type === 'password' ? 'password' : 'text'}"
+                       data-field="${key}" value="${val}"
+                       placeholder="${field.placeholder || ''}"
+                       class="settings-input">
+            </div>`;
+    }).join('');
+
+    return `
+        ${fields}
+        <div class="plugin-settings-actions">
+            <button class="btn-small plugin-save" data-id="${plugin.id}">save</button>
+        </div>`;
+}

package/public/components/setup.js

@@ -0,0 +1,301 @@
+/**
+ * memoryblock web ui — setup wizard.
+ * Multi-step card-based onboarding flow.
+ * Only shown when no workspace is configured or on /setup route.
+ */
+
+const PROVIDERS = [
+    { id: 'bedrock',   name: 'AWS Bedrock',        hint: 'Claude, Llama via AWS', fields: ['accessKeyId', 'secretAccessKey', 'region'] },
+    { id: 'anthropic', name: 'Anthropic',           hint: 'Claude API direct', fields: ['apiKey'] },
+    { id: 'openai',    name: 'OpenAI',              hint: 'GPT-4, GPT-4o', fields: ['apiKey'] },
+    { id: 'gemini',    name: 'Google Gemini',        hint: 'Gemini Pro, Flash', fields: ['apiKey'] },
+    { id: 'ollama',    name: 'Ollama (local)',       hint: 'No API key required', fields: [] },
+];
+
+const CHANNELS = [
+    { id: 'cli',      name: 'Terminal (CLI)',  hint: 'always enabled', locked: true },
+    { id: 'telegram', name: 'Telegram',        hint: 'bot token required', fields: ['botToken', 'chatId'] },
+    { id: 'discord',  name: 'Discord',         hint: 'coming soon', disabled: true },
+    { id: 'slack',    name: 'Slack',            hint: 'coming soon', disabled: true },
+];
+
+const PLUGINS = [
+    { id: 'agents',        name: 'Multi-Agent Orchestration', locked: true, installed: true },
+    { id: 'web-search',    name: 'Web Search',                locked: false, installed: false },
+    { id: 'fetch-webpage', name: 'Fetch Webpage',             locked: false, installed: false },
+    { id: 'aws',           name: 'AWS Tools',                 locked: false, installed: false },
+];
+
+const STEPS = ['welcome', 'providers', 'channels', 'plugins', 'credentials', 'block', 'finish'];
+
+/**
+ * Render the setup wizard
+ */
+export function renderSetup(container, { api, onComplete }) {
+    let currentStep = 0;
+    let selections = {
+        providers: ['bedrock'],
+        channels: ['cli'],
+        plugins: ['agents'],
+        credentials: {},
+        blockName: 'home',
+    };
+
+    function render() {
+        const step = STEPS[currentStep];
+        container.innerHTML = `
+            <div class="setup-overlay">
+                <div class="setup-container">
+                    <div class="setup-progress">
+                        ${STEPS.map((s, i) => `<div class="setup-dot ${i === currentStep ? 'active' : i < currentStep ? 'done' : ''}"></div>`).join('')}
+                    </div>
+                    <div class="setup-card" id="setup-card">
+                        ${renderStep(step)}
+                    </div>
+                </div>
+            </div>
+        `;
+        bindEvents(step);
+    }
+
+    function renderStep(step) {
+        switch (step) {
+            case 'welcome': return `
+                <div class="setup-welcome">
+                    <div class="setup-logo">⬡</div>
+                    <h1>memoryblock</h1>
+                    <p class="setup-subtitle">Deploy isolated AI workspaces on your machine.</p>
+                    <p class="setup-hint">Let's set things up. You can skip any step.</p>
+                    <div class="setup-actions">
+                        <button class="btn-primary" id="setup-next">Get Started</button>
+                        <button class="btn-ghost" id="setup-skip-all">Skip to Dashboard</button>
+                    </div>
+                </div>`;
+
+            case 'providers': return `
+                <h2>Choose Providers</h2>
+                <p class="setup-hint">Select the AI providers you want to use.</p>
+                <div class="setup-options">
+                    ${PROVIDERS.map(p => `
+                        <label class="setup-option ${selections.providers.includes(p.id) ? 'selected' : ''}">
+                            <input type="checkbox" value="${p.id}" ${selections.providers.includes(p.id) ? 'checked' : ''}>
+                            <span class="option-name">${p.name}</span>
+                            <span class="option-hint">${p.hint}</span>
+                        </label>
+                    `).join('')}
+                </div>
+                <div class="setup-actions">
+                    <button class="btn-ghost" id="setup-back">Back</button>
+                    <button class="btn-ghost" id="setup-skip">Skip</button>
+                    <button class="btn-primary" id="setup-next">Next</button>
+                </div>`;
+
+            case 'channels': return `
+                <h2>Enable Channels</h2>
+                <p class="setup-hint">How do you want to talk to your blocks?</p>
+                <div class="setup-options">
+                    ${CHANNELS.map(ch => `
+                        <label class="setup-option ${ch.locked ? 'locked' : ''} ${ch.disabled ? 'disabled' : ''} ${selections.channels.includes(ch.id) ? 'selected' : ''}">
+                            <input type="checkbox" value="${ch.id}" 
+                                ${selections.channels.includes(ch.id) ? 'checked' : ''}
+                                ${ch.locked || ch.disabled ? 'disabled' : ''}>
+                            <span class="option-name">${ch.name}</span>
+                            <span class="option-hint">${ch.hint}</span>
+                        </label>
+                    `).join('')}
+                </div>
+                <div class="setup-actions">
+                    <button class="btn-ghost" id="setup-back">Back</button>
+                    <button class="btn-ghost" id="setup-skip">Skip</button>
+                    <button class="btn-primary" id="setup-next">Next</button>
+                </div>`;
+
+            case 'plugins': return `
+                <h2>Plugins</h2>
+                <p class="setup-hint">Extend your blocks with additional capabilities.</p>
+                <div class="setup-plugins-table">
+                    <div class="plugin-header">
+                        <span>Plugin</span>
+                        <span>Status</span>
+                    </div>
+                    ${PLUGINS.map(pl => `
+                        <div class="plugin-row ${pl.locked ? 'locked' : ''}">
+                            <span class="plugin-name">${pl.name}</span>
+                            <label class="plugin-toggle">
+                                <input type="checkbox" value="${pl.id}"
+                                    ${pl.installed || selections.plugins.includes(pl.id) ? 'checked' : ''}
+                                    ${pl.locked ? 'disabled' : ''}>
+                                <span class="toggle-slider"></span>
+                            </label>
+                        </div>
+                    `).join('')}
+                </div>
+                <div class="setup-actions">
+                    <button class="btn-ghost" id="setup-back">Back</button>
+                    <button class="btn-ghost" id="setup-skip">Skip</button>
+                    <button class="btn-primary" id="setup-next">Next</button>
+                </div>`;
+
+            case 'credentials': return renderCredentialsStep();
+
+            case 'block': return `
+                <h2>Your First Block</h2>
+                <p class="setup-hint">A block is an isolated AI workspace with its own memory.</p>
+                <div class="setup-field">
+                    <label>Block Name</label>
+                    <input type="text" id="block-name" value="${selections.blockName}" placeholder="home"
+                           pattern="[a-z0-9][a-z0-9\\-]{0,31}">
+                    <span class="field-hint">lowercase, numbers, hyphens (max 32)</span>
+                </div>
+                <div class="setup-actions">
+                    <button class="btn-ghost" id="setup-back">Back</button>
+                    <button class="btn-primary" id="setup-next">Create & Finish</button>
+                </div>`;
+
+            case 'finish': return `
+                <div class="setup-welcome">
+                    <div class="setup-logo done">✓</div>
+                    <h1>You're all set</h1>
+                    <div class="setup-summary" id="setup-results"></div>
+                    <div class="setup-actions">
+                        <button class="btn-primary" id="setup-launch">Launch Dashboard</button>
+                    </div>
+                </div>`;
+        }
+    }
+
+    function renderCredentialsStep() {
+        // Show fields only for selected providers and channels
+        const fields = [];
+
+        for (const pid of selections.providers) {
+            const provider = PROVIDERS.find(p => p.id === pid);
+            if (!provider || provider.fields.length === 0) continue;
+            fields.push(`<h3>${provider.name}</h3>`);
+            for (const f of provider.fields) {
+                const key = `${pid}.${f}`;
+                const val = selections.credentials[key] || '';
+                const isSecret = f !== 'region' && f !== 'chatId';
+                fields.push(`
+                    <div class="setup-field">
+                        <label>${f.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase())}</label>
+                        <input type="${isSecret ? 'password' : 'text'}" data-key="${key}" value="${val}"
+                               placeholder="${f === 'region' ? 'us-east-1' : ''}">
+                    </div>
+                `);
+            }
+        }
+
+        for (const cid of selections.channels) {
+            const channel = CHANNELS.find(c => c.id === cid);
+            if (!channel?.fields) continue;
+            fields.push(`<h3>${channel.name}</h3>`);
+            for (const f of channel.fields) {
+                const key = `${cid}.${f}`;
+                const val = selections.credentials[key] || '';
+                const isSecret = f === 'botToken';
+                fields.push(`
+                    <div class="setup-field">
+                        <label>${f.replace(/([A-Z])/g, ' $1').replace(/^./, s => s.toUpperCase())}</label>
+                        <input type="${isSecret ? 'password' : 'text'}" data-key="${key}" value="${val}">
+                    </div>
+                `);
+            }
+        }
+
+        if (fields.length === 0) {
+            fields.push('<p class="setup-hint">No credentials needed for the selected services.</p>');
+        }
+
+        return `
+            <h2>Credentials</h2>
+            <p class="setup-hint">Enter API keys for the services you selected.</p>
+            <div class="setup-credentials">${fields.join('')}</div>
+            <div id="connection-status"></div>
+            <div class="setup-actions">
+                <button class="btn-ghost" id="setup-back">Back</button>
+                <button class="btn-ghost" id="setup-skip">Skip</button>
+                <button class="btn-primary" id="setup-next">Test & Continue</button>
+            </div>`;
+    }
+
+    function bindEvents(step) {
+        const next = document.getElementById('setup-next');
+        const back = document.getElementById('setup-back');
+        const skip = document.getElementById('setup-skip');
+        const skipAll = document.getElementById('setup-skip-all');
+        const launch = document.getElementById('setup-launch');
+
+        if (next) next.addEventListener('click', () => handleNext(step));
+        if (back) back.addEventListener('click', () => { currentStep--; render(); });
+        if (skip) skip.addEventListener('click', () => { currentStep++; render(); });
+        if (skipAll) skipAll.addEventListener('click', () => onComplete());
+        if (launch) launch.addEventListener('click', () => onComplete());
+
+        // Checkbox bindings
+        if (step === 'providers' || step === 'channels') {
+            const key = step;
+            container.querySelectorAll('.setup-option input[type="checkbox"]').forEach(cb => {
+                cb.addEventListener('change', () => {
+                    const checked = [...container.querySelectorAll('.setup-option input:checked')].map(c => c.value);
+                    selections[key] = checked;
+                    render();
+                });
+            });
+        }
+
+        if (step === 'plugins') {
+            container.querySelectorAll('.plugin-row input[type="checkbox"]').forEach(cb => {
+                cb.addEventListener('change', () => {
+                    const checked = [...container.querySelectorAll('.plugin-row input:checked')].map(c => c.value);
+                    selections.plugins = checked;
+                });
+            });
+        }
+
+        if (step === 'credentials') {
+            container.querySelectorAll('.setup-credentials input').forEach(inp => {
+                inp.addEventListener('input', () => {
+                    selections.credentials[inp.dataset.key] = inp.value;
+                });
+            });
+        }
+
+        // Show connection test results on finish step
+        if (step === 'finish') {
+            const el = document.getElementById('setup-results');
+            if (el) {
+                const lines = [];
+                if (selections.providers.length) lines.push(`<p>Providers: ${selections.providers.join(', ')}</p>`);
+                if (selections.channels.length) lines.push(`<p>Channels: ${selections.channels.join(', ')}</p>`);
+                lines.push(`<p>Block: <strong>${selections.blockName}</strong></p>`);
+                el.innerHTML = lines.join('');
+            }
+        }
+    }
+
+    async function handleNext(step) {
+        if (step === 'block') {
+            const input = document.getElementById('block-name');
+            if (input) selections.blockName = input.value || 'home';
+
+            // Save configuration via API
+            try {
+                await api('/api/setup', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(selections),
+                });
+            } catch { }
+        }
+
+        currentStep++;
+        if (currentStep >= STEPS.length) {
+            onComplete();
+        } else {
+            render();
+        }
+    }
+
+    render();
+}