core/packages/hello-dashboard/js/main.js

/**
 * Hello Dashboard — sample extension surface.
 *
 * Platform contract:
 *   - Mounts into #extension-mount
 *   - window.__MANIFEST__ — surface manifest (json, lowercase keys)
 *   - sw.auth.user         — authenticated user (from SDK boot)
 *   - UI.toast(msg, type) — platform toast (success/error/info/warning)
 *   - API._get(path)      — authenticated fetch (returns parsed JSON)
 */
(function() {
    'use strict';

    var mount = document.getElementById('extension-mount');
    if (!mount) return;

    var manifest = window.__MANIFEST__ || {};
    var user = window.sw?.auth?.user || {};
    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
    var name = user.display_name || user.username || 'World';

    mount.innerHTML =
        '<div class="ext-hello-dashboard">' +
            '<div class="ext-hello-dashboard-header">' +
                '<h1>Hello, ' + esc(name) + '!</h1>' +
                '<p class="ext-hello-dashboard-subtitle">Extension surface <code>' + esc(manifest.id || 'unknown') + '</code> loaded successfully.</p>' +
            '</div>' +
            '<div class="ext-hello-dashboard-cards">' +
                card('Platform Access', (typeof UI !== 'undefined' ? '\u2713 Connected' : '\u2717 Unavailable'),
                     'API, Theme, UI primitives available', 'var(--accent)') +
                card('Theme', isDark ? '\uD83C\uDF19 Dark' : '\u2600\uFE0F Light',
                     'Reads from platform theme system', '') +
                card('Route', '<code>' + esc(manifest.route || '/s/hello-dashboard') + '</code>',
                     'Registered via surface manifest', '') +
            '</div>' +
            '<div class="ext-hello-dashboard-actions">' +
                '<button class="sw-btn sw-btn--primary sw-btn--md" id="helloToast">Show Toast</button>' +
                '<button class="sw-btn sw-btn--secondary sw-btn--md" id="helloApi">Test API</button>' +
            '</div>' +
            '<pre class="ext-hello-dashboard-manifest">' + esc(JSON.stringify(manifest, null, 2)) + '</pre>' +
        '</div>';

    // Wire toast button
    document.getElementById('helloToast').addEventListener('click', function() {
        if (typeof UI !== 'undefined' && UI.toast) {
            UI.toast('Extension surface is working!', 'success');
        } else {
            alert('Extension surface is working! (UI.toast not available)');
        }
    });

    // Wire API test button
    document.getElementById('helloApi').addEventListener('click', function() {
        if (typeof API === 'undefined' || !API._get) {
            toast('API module not available', 'error');
            return;
        }
        API._get('/api/v1/surfaces').then(function(resp) {
            toast('API returned ' + (resp.surfaces || []).length + ' registered surfaces', 'info');
        }).catch(function(e) {
            toast('API error: ' + e.message, 'error');
        });
    });

    function toast(msg, type) {
        if (typeof UI !== 'undefined' && UI.toast) UI.toast(msg, type);
        else alert(msg);
    }

    function card(title, value, detail, color) {
        var style = color ? ' style="color:' + color + ';"' : '';
        return '<div class="ext-hello-dashboard-card">' +
            '<div class="ext-hello-dashboard-card-title">' + esc(title) + '</div>' +
            '<div class="ext-hello-dashboard-card-value"' + style + '>' + value + '</div>' +
            '<div class="ext-hello-dashboard-card-detail">' + esc(detail) + '</div>' +
        '</div>';
    }

    function esc(s) {
        var el = document.createElement('span');
        el.textContent = s;
        return el.innerHTML;
    }
})();