@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/scripts/generate-gateway-tools.ts

@@ -5,7 +5,7 @@
  * Called automatically during `pnpm build`.
  */
 
-import { writeFileSync, mkdirSync } from 'fs';
+import { writeFileSync, mkdirSync, copyFileSync, existsSync } from 'fs';
 import { join } from 'path';
 import { ToolRegistry } from '../src/agent/tool-registry.js';
 
@@ -109,6 +109,10 @@ const distDir = join(__dirname, '..', 'dist', 'agent');
 try {
   mkdirSync(distDir, { recursive: true });
   writeFileSync(join(distDir, 'gateway-tools.md'), output, 'utf-8');
+  const osAgentCapabilitiesSrc = join(__dirname, '..', 'src', 'agent', 'os-agent-capabilities.md');
+  if (existsSync(osAgentCapabilitiesSrc)) {
+    copyFileSync(osAgentCapabilitiesSrc, join(distDir, 'os-agent-capabilities.md'));
+  }
 } catch {
   // dist may not exist yet during first build
 }

package/public/viewer/js/modules/playground.js

@@ -1,148 +0,0 @@
-/**
- * Playground Module
- * @module modules/playground
- *
- * Lists, views, and manages interactive HTML playgrounds
- * created by agents via playground_create gateway tool.
- */
-export const PlaygroundModule = {
-    initialized: false,
-    async init() {
-        await this.loadList();
-        this.bindEvents();
-        this.initialized = true;
-    },
-    bindEvents() {
-        const refreshBtn = document.getElementById('playground-refresh-btn');
-        if (refreshBtn && !refreshBtn.dataset.bound) {
-            refreshBtn.addEventListener('click', () => this.loadList());
-            refreshBtn.dataset.bound = '1';
-        }
-        const backBtn = document.getElementById('playground-back-btn');
-        if (backBtn && !backBtn.dataset.bound) {
-            backBtn.addEventListener('click', () => this.showList());
-            backBtn.dataset.bound = '1';
-        }
-    },
-    async loadList() {
-        const listEl = document.getElementById('playground-list');
-        if (!listEl)
-            return;
-        try {
-            const res = await fetch('/api/playgrounds');
-            const items = await res.json();
-            if (!items.length) {
-                listEl.innerHTML =
-                    '<div class="text-gray-500 text-sm col-span-full text-center py-8">No playgrounds yet. Ask an agent to create one!</div>';
-                return;
-            }
-            listEl.innerHTML = items
-                .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
-                .map((item) => `
-        <div class="playground-card bg-white border border-mama-lavender-dark rounded-xl p-4 hover:shadow-md transition-shadow cursor-pointer flex flex-col gap-2" data-slug="${item.slug}">
-          <div class="flex items-center justify-between">
-            <h3 class="font-semibold text-mama-black text-sm truncate">${this.escapeHtml(item.name)}</h3>
-            <button class="playground-delete p-1 rounded hover:bg-red-100 text-gray-400 hover:text-red-500 transition-colors" data-slug="${item.slug}" title="Delete">
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
-              </svg>
-            </button>
-          </div>
-          ${item.description ? `<p class="text-xs text-gray-500 line-clamp-2">${this.escapeHtml(item.description)}</p>` : ''}
-          <span class="text-[10px] text-gray-400 mt-auto">${new Date(item.created_at).toLocaleString()}</span>
-        </div>
-      `)
-                .join('');
-            // Bind card clicks
-            listEl.querySelectorAll('.playground-card').forEach((card) => {
-                card.addEventListener('click', (e) => {
-                    const target = e.target;
-                    if (target.closest('.playground-delete'))
-                        return;
-                    const slug = card.dataset.slug;
-                    if (slug)
-                        this.openPlayground(slug, items.find((i) => i.slug === slug)?.name || slug);
-                });
-            });
-            // Bind delete buttons
-            listEl.querySelectorAll('.playground-delete').forEach((btn) => {
-                btn.addEventListener('click', async (e) => {
-                    e.stopPropagation();
-                    const slug = btn.dataset.slug;
-                    if (slug && confirm(`Delete playground "${slug}"?`)) {
-                        await this.deletePlayground(slug);
-                    }
-                });
-            });
-        }
-        catch (err) {
-            listEl.innerHTML =
-                '<div class="text-red-500 text-sm col-span-full text-center py-8">Failed to load playgrounds</div>';
-            console.error('[Playground] Failed to load:', err);
-        }
-    },
-    openPlayground(slug, name) {
-        const listEl = document.getElementById('playground-list');
-        const viewerEl = document.getElementById('playground-viewer');
-        const iframe = document.getElementById('playground-iframe');
-        const titleEl = document.getElementById('playground-viewer-title');
-        const openNewEl = document.getElementById('playground-open-new');
-        if (!listEl || !viewerEl || !iframe)
-            return;
-        const url = `/playgrounds/${slug}.html`;
-        listEl.classList.add('hidden');
-        viewerEl.classList.remove('hidden');
-        iframe.src = url;
-        if (titleEl)
-            titleEl.textContent = name;
-        if (openNewEl)
-            openNewEl.href = url;
-    },
-    showList() {
-        const listEl = document.getElementById('playground-list');
-        const viewerEl = document.getElementById('playground-viewer');
-        const iframe = document.getElementById('playground-iframe');
-        if (listEl)
-            listEl.classList.remove('hidden');
-        if (viewerEl)
-            viewerEl.classList.add('hidden');
-        if (iframe)
-            iframe.src = 'about:blank';
-    },
-    async deletePlayground(slug) {
-        try {
-            await fetch(`/api/playgrounds/${slug}`, { method: 'DELETE' });
-            this.showList();
-            await this.loadList();
-        }
-        catch (err) {
-            console.error('[Playground] Failed to delete:', err);
-        }
-    },
-    /**
-     * Open Skill Lab playground and optionally send skill data for editing
-     */
-    openSkillLab(skillData) {
-        const slug = 'skill-lab-playground';
-        this.openPlayground(slug, 'Skill Lab');
-        if (skillData) {
-            const iframe = document.getElementById('playground-iframe');
-            if (!iframe)
-                return;
-            // Wait for iframe to load before sending skill:load
-            iframe.addEventListener('load', () => {
-                iframe.contentWindow?.postMessage({
-                    type: 'skill:load',
-                    id: skillData.id,
-                    name: skillData.name,
-                    content: skillData.content,
-                }, '*');
-            }, { once: true });
-        }
-    },
-    escapeHtml(str) {
-        const div = document.createElement('div');
-        div.textContent = str;
-        return div.innerHTML;
-    },
-};

package/public/viewer/js/modules/skills.js

@@ -1,451 +0,0 @@
-/**
- * Skills Marketplace Module
- * @module modules/skills
- * @version 1.0.0
- *
- * Manages skill browsing, installation, and configuration
- * across MAMA, Cowork, and OpenClaw sources.
- */
-/* eslint-env browser */
-import { API } from '../utils/api.js';
-import { DebugLogger } from '../utils/debug-logger.js';
-import { getElementByIdOrNull } from '../utils/dom.js';
-import { renderSafeMarkdown } from '../utils/markdown.js';
-const logger = new DebugLogger('Skills');
-/**
- * Skills marketplace module
- */
-export const SkillsModule = {
-    /** All skills (installed + catalog) */
-    installed: [],
-    catalog: [],
-    /** Current filter */
-    currentFilter: 'all',
-    /** Search query */
-    searchQuery: '',
-    /** Whether initialized */
-    _initialized: false,
-    /** Debounce timer */
-    _searchTimer: null,
-    /**
-     * Initialize the skills tab
-     */
-    async init() {
-        if (!this._initialized) {
-            this._bindEvents();
-            this._initialized = true;
-        }
-        await this.loadSkills();
-        this.render();
-    },
-    /**
-     * Load installed + catalog skills
-     */
-    async loadSkills() {
-        try {
-            const [installedResponse, catalogResponse] = await Promise.all([
-                API.getSkills(),
-                API.getSkillCatalog('all'),
-            ]);
-            this.installed = installedResponse.skills || [];
-            const catalogItems = catalogResponse.skills || [];
-            const installedMap = new Set(this.installed.map((item) => `${item.source}::${item.id}`));
-            this.catalog = catalogItems.filter((s) => !installedMap.has(`${s.source}::${s.id}`));
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            logger.error('Unexpected error while loading skills:', message);
-            // Initialize with empty arrays on failure
-            this.installed = [];
-            this.catalog = [];
-        }
-    },
-    /**
-     * Bind UI events
-     */
-    _bindEvents() {
-        // Search input
-        const searchInput = getElementByIdOrNull('skills-search');
-        if (searchInput) {
-            searchInput.addEventListener('input', (e) => {
-                clearTimeout(this._searchTimer);
-                this._searchTimer = setTimeout(() => {
-                    const target = e.target;
-                    if (!(target instanceof HTMLInputElement)) {
-                        return;
-                    }
-                    this.searchQuery = target.value.trim();
-                    this.render();
-                }, 300);
-            });
-        }
-        // URL install
-        const urlBtn = getElementByIdOrNull('skills-url-install-btn');
-        if (urlBtn) {
-            urlBtn.addEventListener('click', () => {
-                const input = getElementByIdOrNull('skills-url-input');
-                const url = input?.value?.trim();
-                if (url) {
-                    this.installFromUrl(url);
-                }
-            });
-        }
-        const urlInput = getElementByIdOrNull('skills-url-input');
-        if (urlInput) {
-            urlInput.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
-                    const target = e.target;
-                    if (!(target instanceof HTMLInputElement)) {
-                        return;
-                    }
-                    const url = target.value.trim();
-                    if (url) {
-                        this.installFromUrl(url);
-                    }
-                }
-            });
-        }
-        // Filter buttons
-        const filterBar = getElementByIdOrNull('skills-filter-bar');
-        if (filterBar) {
-            filterBar.addEventListener('click', (e) => {
-                const target = e.target;
-                const btn = target instanceof HTMLElement ? target.closest('[data-filter]') : null;
-                if (!btn) {
-                    return;
-                }
-                const filter = btn.dataset.filter;
-                if (!filter) {
-                    return;
-                }
-                this.currentFilter = filter;
-                // Update active state
-                filterBar.querySelectorAll('[data-filter]').forEach((b) => {
-                    b.classList.toggle('bg-mama-yellow', b.dataset.filter === this.currentFilter);
-                    b.classList.toggle('text-mama-black', b.dataset.filter === this.currentFilter);
-                    b.classList.toggle('bg-white', b.dataset.filter !== this.currentFilter);
-                    b.classList.toggle('text-gray-600', b.dataset.filter !== this.currentFilter);
-                });
-                this.render();
-            });
-        }
-    },
-    /**
-     * Render the full skills view
-     */
-    render() {
-        const container = getElementByIdOrNull('skills-content');
-        if (!container) {
-            return;
-        }
-        const installed = this._filterSkills(this.installed);
-        const available = this._filterSkills(this.catalog);
-        container.innerHTML = `
-      <div class="flex items-center justify-between mb-4">
-        <span></span>
-        <button id="skills-new-btn"
-          class="text-xs px-3 py-1.5 rounded-lg bg-yellow-500 text-gray-900 font-semibold hover:bg-yellow-400">
-          + New Skill
-        </button>
-      </div>
-      ${installed.length > 0
-            ? `
-        <div class="mb-6">
-          <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
-            Installed (${installed.length})
-          </h3>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-            ${installed.map((s) => this._renderCard(s, true)).join('')}
-          </div>
-        </div>
-      `
-            : ''}
-
-      <div class="mb-6">
-        <h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">
-          Available (${available.length})
-        </h3>
-        ${available.length > 0
-            ? `
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
-            ${available.map((s) => this._renderCard(s, false)).join('')}
-          </div>
-        `
-            : `
-          <p class="text-gray-500 text-sm">
-            ${this.searchQuery ? 'No skills match your search.' : 'Loading catalog...'}
-          </p>
-        `}
-      </div>
-    `;
-        // Bind card actions
-        container.querySelectorAll('[data-action]').forEach((btn) => {
-            btn.addEventListener('click', (e) => {
-                e.stopPropagation();
-                const action = btn.dataset.action;
-                const id = btn.dataset.id;
-                const source = btn.dataset.source;
-                if (!action || !id || !source) {
-                    return;
-                }
-                if (action === 'install') {
-                    this.install(source, id);
-                }
-                else if (action === 'uninstall') {
-                    this.uninstall(source, id);
-                }
-                else if (action === 'toggle') {
-                    this.toggle(source, id, btn.dataset.enabled !== 'true');
-                }
-                else if (action === 'edit') {
-                    this.editInSkillLab(source, id);
-                }
-            });
-        });
-        // Bind + New button
-        const newBtn = container.querySelector('#skills-new-btn');
-        if (newBtn) {
-            newBtn.addEventListener('click', () => this.openNewSkillLab());
-        }
-        // Bind card click for detail
-        container.querySelectorAll('[data-skill-card]').forEach((card) => {
-            card.addEventListener('click', () => {
-                const source = card.dataset.source;
-                const id = card.dataset.id;
-                if (!source || !id) {
-                    return;
-                }
-                this.showDetail(source, id);
-            });
-        });
-    },
-    /**
-     * Filter skills by current filter + search query
-     */
-    _filterSkills(skills) {
-        let filtered = skills;
-        // Source filter
-        if (this.currentFilter !== 'all' && this.currentFilter !== 'installed') {
-            filtered = filtered.filter((s) => s.source === this.currentFilter);
-        }
-        // Search filter
-        if (this.searchQuery) {
-            const q = this.searchQuery.toLowerCase();
-            filtered = filtered.filter((s) => s.name.toLowerCase().includes(q) ||
-                (s.description || '').toLowerCase().includes(q) ||
-                s.id.toLowerCase().includes(q));
-        }
-        return filtered;
-    },
-    /**
-     * Render a single skill card
-     */
-    _renderCard(skill, isInstalled) {
-        const sourceColors = {
-            mama: 'bg-mama-yellow/20 text-yellow-700',
-            cowork: 'bg-blue-100 text-blue-700',
-            external: 'bg-purple-100 text-purple-700',
-        };
-        const badgeClass = sourceColors[skill.source] || 'bg-gray-100 text-gray-600';
-        const enabledClass = skill.enabled !== false ? 'border-green-300' : 'border-gray-200';
-        return `
-      <div class="bg-white rounded-lg border ${enabledClass} p-3 cursor-pointer
-        hover:border-mama-yellow hover:shadow-md transition-all"
-        data-skill-card data-id="${this._escapeHtml(skill.id)}" data-source="${this._escapeHtml(skill.source)}">
-        <div class="flex items-start justify-between mb-2">
-          <h4 class="font-medium text-sm text-gray-900 truncate flex-1">${this._escapeHtml(skill.name)}</h4>
-          <span class="text-[10px] px-1.5 py-0.5 rounded ${badgeClass} ml-2 whitespace-nowrap font-medium">
-            ${this._escapeHtml(skill.source)}
-          </span>
-        </div>
-        <p class="text-xs text-gray-500 line-clamp-2 mb-3">${this._escapeHtml(skill.description || '')}</p>
-        <div class="flex items-center justify-between">
-          ${isInstalled
-            ? `
-            <button data-action="toggle" data-id="${this._escapeHtml(skill.id)}" data-source="${this._escapeHtml(skill.source)}"
-              data-enabled="${skill.enabled !== false}"
-              class="text-xs px-2 py-1 rounded ${skill.enabled !== false ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}">
-              ${skill.enabled !== false ? 'Enabled' : 'Disabled'}
-            </button>
-            <div class="flex gap-1">
-              <button data-action="edit" data-id="${this._escapeHtml(skill.id)}" data-source="${this._escapeHtml(skill.source)}"
-                class="text-xs px-2 py-1 rounded bg-blue-100 text-blue-600 hover:bg-blue-200">
-                Edit
-              </button>
-              <button data-action="uninstall" data-id="${this._escapeHtml(skill.id)}" data-source="${this._escapeHtml(skill.source)}"
-                class="text-xs px-2 py-1 rounded bg-red-100 text-red-600 hover:bg-red-200">
-                Remove
-              </button>
-            </div>
-          `
-            : `
-            <span></span>
-            <button data-action="install" data-id="${this._escapeHtml(skill.id)}" data-source="${this._escapeHtml(skill.source)}"
-              class="text-xs px-2 py-1 rounded bg-mama-yellow text-mama-black hover:bg-mama-yellow-hover font-medium">
-              Install
-            </button>
-          `}
-        </div>
-      </div>
-    `;
-    },
-    /**
-     * Install a skill
-     */
-    async install(source, name) {
-        try {
-            const btn = document.querySelector(`[data-action="install"][data-id="${CSS.escape(name)}"][data-source="${CSS.escape(source)}"]`);
-            if (btn) {
-                btn.textContent = 'Installing...';
-                btn.disabled = true;
-            }
-            await API.installSkill(source, name);
-            await this.loadSkills();
-            this.render();
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            logger.error('Install failed:', message);
-            alert(`Failed to install ${name}: ${message}`);
-            this.render();
-        }
-    },
-    /**
-     * Install from GitHub URL
-     */
-    async installFromUrl(url) {
-        const btn = getElementByIdOrNull('skills-url-install-btn');
-        const input = getElementByIdOrNull('skills-url-input');
-        try {
-            if (btn) {
-                btn.textContent = 'Installing...';
-                btn.disabled = true;
-            }
-            await API.installSkillFromUrl(url);
-            if (input) {
-                input.value = '';
-            }
-            await this.loadSkills();
-            this.render();
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            logger.error('URL install failed:', message);
-            alert(`Failed to install from URL: ${message}`);
-        }
-        finally {
-            if (btn) {
-                btn.textContent = 'Install URL';
-                btn.disabled = false;
-            }
-        }
-    },
-    /**
-     * Uninstall a skill
-     */
-    async uninstall(source, name) {
-        if (!confirm(`Remove skill "${name}"?`)) {
-            return;
-        }
-        try {
-            await API.uninstallSkill(name, source);
-            await this.loadSkills();
-            this.render();
-        }
-        catch (error) {
-            logger.error('Uninstall failed:', error instanceof Error ? error.message : String(error));
-        }
-    },
-    /**
-     * Toggle skill enabled/disabled
-     */
-    async toggle(source, name, enabled) {
-        try {
-            await API.toggleSkill(name, enabled, source);
-            // Update local state
-            const skill = this.installed.find((s) => s.id === name && s.source === source);
-            if (skill) {
-                skill.enabled = enabled;
-            }
-            this.render();
-        }
-        catch (error) {
-            logger.error('Toggle failed:', error instanceof Error ? error.message : String(error));
-        }
-    },
-    /**
-     * Show skill detail modal
-     */
-    async showDetail(source, name) {
-        const modal = getElementByIdOrNull('skill-detail-modal');
-        const modalContent = getElementByIdOrNull('skill-detail-content');
-        if (!modal || !modalContent) {
-            return;
-        }
-        modalContent.innerHTML = '<p class="text-gray-500">Loading...</p>';
-        modal.classList.remove('hidden');
-        try {
-            const { content } = await API.getSkillContent(name, source);
-            modalContent.innerHTML = `
-        <div class="flex items-center justify-between mb-4">
-          <h2 class="text-lg font-bold text-gray-900">${this._escapeHtml(name)}</h2>
-          <span class="text-[10px] px-2 py-1 rounded bg-gray-100 text-gray-600">${this._escapeHtml(source)}</span>
-        </div>
-        <div class="prose prose-sm max-w-none">
-          ${this._renderMarkdown(content)}
-        </div>
-      `;
-        }
-        catch (error) {
-            const message = error instanceof Error ? error.message : String(error);
-            modalContent.innerHTML = `<p class="text-red-600">Failed to load: ${this._escapeHtml(message)}</p>`;
-        }
-    },
-    /**
-     * Close detail modal
-     */
-    closeDetail() {
-        const modal = getElementByIdOrNull('skill-detail-modal');
-        if (modal) {
-            modal.classList.add('hidden');
-        }
-    },
-    /**
-     * Open Skill Lab with existing skill content for editing
-     */
-    async editInSkillLab(_source, id) {
-        alert(`Skill editing is available via CLI: mama skill edit ${id}`);
-    },
-    /**
-     * Open Skill Lab with empty state for new skill creation
-     */
-    openNewSkillLab() {
-        alert('Create new skills via CLI: mama skill create');
-    },
-    /**
-     * Escape HTML special characters
-     */
-    _escapeHtml(unsafe) {
-        if (!unsafe) {
-            return '';
-        }
-        return unsafe
-            .toString()
-            .replace(/&/g, '&amp;')
-            .replace(/</g, '&lt;')
-            .replace(/>/g, '&gt;')
-            .replace(/"/g, '&quot;')
-            .replace(/'/g, '&#039;');
-    },
-    /**
-     * Render markdown to HTML using marked.js, with sanitization
-     */
-    _renderMarkdown(md) {
-        if (!md) {
-            return '';
-        }
-        // Remove frontmatter
-        md = md.replace(/^---\n[\s\S]*?\n---\n/, '');
-        return renderSafeMarkdown(md);
-    },
-};