@jungjaehoon/mama-os 0.18.2 → 0.19.0

package/public/viewer/src/modules/playground.ts

@@ -1,173 +0,0 @@
-/**
- * Playground Module
- * @module modules/playground
- *
- * Lists, views, and manages interactive HTML playgrounds
- * created by agents via playground_create gateway tool.
- */
-
-/* eslint-env browser */
-
-interface PlaygroundEntry {
-  name: string;
-  slug: string;
-  description?: string;
-  created_at: string;
-}
-
-export const PlaygroundModule = {
-  initialized: false,
-
-  async init(): Promise<void> {
-    await this.loadList();
-    this.bindEvents();
-    this.initialized = true;
-  },
-
-  bindEvents(): void {
-    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(): Promise<void> {
-    const listEl = document.getElementById('playground-list');
-    if (!listEl) return;
-
-    try {
-      const res = await fetch('/api/playgrounds');
-      const items: PlaygroundEntry[] = 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 as HTMLElement;
-          if (target.closest('.playground-delete')) return;
-          const slug = (card as HTMLElement).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 as HTMLElement).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: string, name: string): void {
-    const listEl = document.getElementById('playground-list');
-    const viewerEl = document.getElementById('playground-viewer');
-    const iframe = document.getElementById('playground-iframe') as HTMLIFrameElement | null;
-    const titleEl = document.getElementById('playground-viewer-title');
-    const openNewEl = document.getElementById('playground-open-new') as HTMLAnchorElement | null;
-
-    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(): void {
-    const listEl = document.getElementById('playground-list');
-    const viewerEl = document.getElementById('playground-viewer');
-    const iframe = document.getElementById('playground-iframe') as HTMLIFrameElement | null;
-
-    if (listEl) listEl.classList.remove('hidden');
-    if (viewerEl) viewerEl.classList.add('hidden');
-    if (iframe) iframe.src = 'about:blank';
-  },
-
-  async deletePlayground(slug: string): Promise<void> {
-    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?: { id: string; name: string; content: string }): void {
-    const slug = 'skill-lab-playground';
-    this.openPlayground(slug, 'Skill Lab');
-
-    if (skillData) {
-      const iframe = document.getElementById('playground-iframe') as HTMLIFrameElement | null;
-      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: string): string {
-    const div = document.createElement('div');
-    div.textContent = str;
-    return div.innerHTML;
-  },
-};

package/public/viewer/src/modules/skills.ts

@@ -1,491 +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, type SkillItem } 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: [] as SkillItem[],
-  catalog: [] as SkillItem[],
-  /** Current filter */
-  currentFilter: 'all',
-  /** Search query */
-  searchQuery: '',
-  /** Whether initialized */
-  _initialized: false,
-  /** Debounce timer */
-  _searchTimer: null as ReturnType<typeof setTimeout> | null,
-
-  /**
-   * Initialize the skills tab
-   */
-  async init(): Promise<void> {
-    if (!this._initialized) {
-      this._bindEvents();
-      this._initialized = true;
-    }
-    await this.loadSkills();
-    this.render();
-  },
-
-  /**
-   * Load installed + catalog skills
-   */
-  async loadSkills(): Promise<void> {
-    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: SkillItem) => `${item.source}::${item.id}`)
-      );
-      this.catalog = catalogItems.filter(
-        (s: SkillItem) => !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(): void {
-    // Search input
-    const searchInput = getElementByIdOrNull<HTMLInputElement>('skills-search');
-    if (searchInput) {
-      searchInput.addEventListener('input', (e: Event) => {
-        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<HTMLButtonElement>('skills-url-install-btn');
-    if (urlBtn) {
-      urlBtn.addEventListener('click', () => {
-        const input = getElementByIdOrNull<HTMLInputElement>('skills-url-input');
-        const url = input?.value?.trim();
-        if (url) {
-          this.installFromUrl(url);
-        }
-      });
-    }
-    const urlInput = getElementByIdOrNull<HTMLInputElement>('skills-url-input');
-    if (urlInput) {
-      urlInput.addEventListener('keydown', (e: KeyboardEvent) => {
-        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<HTMLElement>('skills-filter-bar');
-    if (filterBar) {
-      filterBar.addEventListener('click', (e: MouseEvent) => {
-        const target = e.target;
-        const btn =
-          target instanceof HTMLElement ? target.closest<HTMLElement>('[data-filter]') : null;
-        if (!btn) {
-          return;
-        }
-        const filter = btn.dataset.filter;
-        if (!filter) {
-          return;
-        }
-        this.currentFilter = filter;
-        // Update active state
-        filterBar.querySelectorAll<HTMLElement>('[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(): void {
-    const container = getElementByIdOrNull<HTMLElement>('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<HTMLButtonElement>('[data-action]').forEach((btn) => {
-      btn.addEventListener('click', (e: MouseEvent) => {
-        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<HTMLButtonElement>('#skills-new-btn');
-    if (newBtn) {
-      newBtn.addEventListener('click', () => this.openNewSkillLab());
-    }
-
-    // Bind card click for detail
-    container.querySelectorAll<HTMLElement>('[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: SkillItem[]): SkillItem[] {
-    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: SkillItem, isInstalled: boolean): string {
-    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: string, name: string): Promise<void> {
-    try {
-      const btn = document.querySelector<HTMLButtonElement>(
-        `[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: string): Promise<void> {
-    const btn = getElementByIdOrNull<HTMLButtonElement>('skills-url-install-btn');
-    const input = getElementByIdOrNull<HTMLInputElement>('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: string, name: string): Promise<void> {
-    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: string, name: string, enabled: boolean): Promise<void> {
-    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: string, name: string): Promise<void> {
-    const modal = getElementByIdOrNull<HTMLElement>('skill-detail-modal');
-    const modalContent = getElementByIdOrNull<HTMLElement>('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(): void {
-    const modal = getElementByIdOrNull<HTMLElement>('skill-detail-modal');
-    if (modal) {
-      modal.classList.add('hidden');
-    }
-  },
-
-  /**
-   * Open Skill Lab with existing skill content for editing
-   */
-  async editInSkillLab(_source: string, id: string): Promise<void> {
-    alert(`Skill editing is available via CLI: mama skill edit ${id}`);
-  },
-
-  /**
-   * Open Skill Lab with empty state for new skill creation
-   */
-  openNewSkillLab(): void {
-    alert('Create new skills via CLI: mama skill create');
-  },
-
-  /**
-   * Escape HTML special characters
-   */
-  _escapeHtml(unsafe: unknown): string {
-    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: string): string {
-    if (!md) {
-      return '';
-    }
-    // Remove frontmatter
-    md = md.replace(/^---\n[\s\S]*?\n---\n/, '');
-    return renderSafeMarkdown(md);
-  },
-};