@dollhousemcp/mcp-server 2.0.0-rc.6 → 2.0.0

package/dist/web/public/app.js

@@ -173,11 +173,19 @@ function safeParseYaml(content) {
 
   // ── Type filter chips ──────────────────────────────────────────────────────
 
+  /** Elements filtered by source toggle only (no type/topic/search). */
+  function getSourceFilteredElements() {
+    if (activeSource === 'collection') return allElements.filter(el => !el._local);
+    if (activeSource === 'portfolio') return allElements.filter(el => el._local);
+    return allElements;
+  }
+
   function renderTypeFilters() {
     const container = document.getElementById('type-filters');
     if (!container) return;
 
-    const typeCounts = allElements.reduce((acc, el) => {
+    const sourceFiltered = getSourceFilteredElements();
+    const typeCounts = sourceFiltered.reduce((acc, el) => {
       acc[el.type] = (acc[el.type] || 0) + 1;
       return acc;
     }, {});
@@ -186,7 +194,7 @@ function safeParseYaml(content) {
 
     const isAllActive = activeTypes.size === 0;
     container.innerHTML = types.map(type => {
-      const count = type === 'all' ? allElements.length : typeCounts[type];
+      const count = type === 'all' ? sourceFiltered.length : typeCounts[type];
       const isActive = type === 'all' ? isAllActive : activeTypes.has(type);
       return `<button
         class="type-filter${isActive ? ' active' : ''}"
@@ -253,8 +261,9 @@ function safeParseYaml(content) {
     const container = document.getElementById('topic-filters');
     if (!container) return;
 
+    const sourceFiltered = getSourceFilteredElements();
     const topicCounts = {};
-    allElements.forEach(el => {
+    sourceFiltered.forEach(el => {
       const topic = getTopicForElement(el);
       if (topic) topicCounts[topic] = (topicCounts[topic] || 0) + 1;
     });
@@ -264,7 +273,7 @@ function safeParseYaml(content) {
 
     container.hidden = false;
     container.innerHTML = topics.map(topic => {
-      const count = topic === 'all' ? allElements.length : topicCounts[topic];
+      const count = topic === 'all' ? sourceFiltered.length : topicCounts[topic];
       const isActive = topic === activeTopic;
       return `<button
         class="topic-filter${isActive ? ' active' : ''}"
@@ -356,9 +365,10 @@ function safeParseYaml(content) {
     const pageItems = filteredElements.slice(pageStart, pageEnd);
 
     if (countEl) {
-      const base = total === allElements.length
-        ? `${allElements.length} elements`
-        : `${total} of ${allElements.length} elements`;
+      const sourceTotal = getSourceFilteredElements().length;
+      const base = total === sourceTotal
+        ? `${sourceTotal} elements`
+        : `${total} of ${sourceTotal} elements`;
       const pageNote = totalPages > 1 ? ` · page ${currentPage} of ${totalPages}` : '';
       countEl.textContent = base + pageNote;
     }
@@ -708,19 +718,25 @@ function safeParseYaml(content) {
     document.body.classList.add('modal-open');
     body.focus(); // focus body so arrow/Page/Home/End keys scroll content natively
 
-    // Fetch full content as raw text — local API for portfolio, GitHub for collection
+    // Fetch element content — structured JSON for local, raw text for collection
     try {
-      let content;
+      let content;       // raw file content (for Raw view, Copy, Download)
+      let structured;    // { metadata, body, type, validation } when available
+
       if (element._content) {
         content = element._content;
       } else if (element._local) {
         const res = await fetch(`/api/elements/${element.path}`);
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        content = await res.text();
+        const data = await res.json();
+        structured = data;
+        content = data.raw;
       } else {
-        const res = await fetch(`https://raw.githubusercontent.com/DollhouseMCP/collection/main/${element.path}`);
+        const res = await fetch(`/api/collection/content/${element.path}`);
         if (!res.ok) throw new Error(`HTTP ${res.status}`);
-        content = await res.text();
+        const data = await res.json();
+        structured = data;
+        content = data.raw;
       }
 
       const renderBtn = modal.querySelector('#btn-render');
@@ -729,6 +745,11 @@ function safeParseYaml(content) {
         if (modalShowRaw) {
           body.innerHTML = `<pre class="element-source"><code class="element-code language-yaml">${escapeHtml(content)}</code></pre>`;
           if (globalThis.hljs) body.querySelectorAll('pre code').forEach(b => hljs.highlightElement(b));
+        } else if (structured) {
+          body.innerHTML = renderStructuredDetail(structured);
+          body.querySelectorAll('pre code').forEach(b => {
+            if (globalThis.hljs) hljs.highlightElement(b);
+          });
         } else {
           body.innerHTML = renderDetailView(content, element.type);
           body.querySelectorAll('pre code').forEach(b => {
@@ -1304,27 +1325,15 @@ function safeParseYaml(content) {
     return html;
   }
 
-  function renderDetailView(content, type) { // NOSONAR - sequential independent metadata sections; complexity score is inflated by &&-guards on array existence checks
-    if (type === 'memory') {
-      // Portfolio memories are pure YAML — jsyaml.load succeeds.
-      // Collection memories are markdown-with-frontmatter — jsyaml.load throws on the
-      // second `---` document marker, so we fall through to the standard renderer below.
-      try {
-        const parsed = safeParseYaml(content);
-        if (parsed && typeof parsed === 'object') return renderMemoryView(content);
-      } catch { /* not pure YAML — fall through */ }
-    }
-
-    const { frontmatter: fm, body } = parseFrontmatter(content);
+  /** Render common metadata sections (created, author, tags, etc.) shared by both renderers */
+  function renderCommonMetadata(fm, type) {
     let html = '';
 
-    // ── Created date — prominent header line ──
     const createdVal = fm.created || fm.created_date;
     if (createdVal) {
       html += `<div class="detail-created"><span class="detail-created-label">Created</span><span class="detail-created-value">${escapeHtml(formatDate(createdVal))}</span></div>`;
     }
 
-    // ── Core metadata ──
     const coreFields = [
       detailField('Author', fm.author),
       detailField('Version', fm.version ? `v${fm.version}` : null),
@@ -1335,68 +1344,103 @@ function safeParseYaml(content) {
     ].filter(Boolean).join('');
     if (coreFields) html += detailSection('Details', coreFields);
 
-    // ── Tags ──
     if (Array.isArray(fm.tags) && fm.tags.length) {
       html += detailSection('Tags', detailPillList(fm.tags, 'pill-tag'));
     }
-
-    // ── Triggers (personas) ──
     if (Array.isArray(fm.triggers) && fm.triggers.length) {
       html += detailSection('Trigger words', detailPillList(fm.triggers, 'pill-trigger'));
     }
 
-    // ── Components (ensembles) ──
-    const compTypes = ['personas','skills','tools','templates','prompts','memories'];
-    const compEntries = compTypes
-      .filter(k => Array.isArray(fm[k]) && fm[k].length)
-      .map(k => `<div class="detail-field"><span class="detail-label">${capitalize(k)}</span><span class="detail-value">${detailPillList(fm[k])}</span></div>`)
-      .join('');
-    if (compEntries) html += detailSection('Components', compEntries);
-
-    // ── Ensemble coordination ──
+    html += renderComponentsSections(fm);
     if (fm.coordination_strategy) html += detailSection('Coordination', `<p class="detail-prose">${escapeHtml(fm.coordination_strategy)}</p>`);
+    html += renderUseCases(fm);
 
-    // ── Use cases ──
-    if (Array.isArray(fm.use_cases) && fm.use_cases.length) {
-      const useCaseItems = fm.use_cases.map(u => `<li>${escapeHtml(u)}</li>`).join('');
-      html += detailSection('Use cases', `<ul class="detail-list">${useCaseItems}</ul>`);
-    }
-
-    // ── Instructions (all element types) ──
     if (fm.instructions && type !== 'agent' && type !== 'ensemble') {
-      // Agents and ensembles render instructions in their own sections
       html += detailSection('Instructions', renderInstructions(fm.instructions));
     }
-
-    // ── Gatekeeper (all element types) ──
     if (fm.gatekeeper && typeof fm.gatekeeper === 'object' && type !== 'agent' && type !== 'ensemble') {
       html += renderGatekeeperSection(fm.gatekeeper);
     }
 
-    // ── Parameters (skills/tools) ──
-    html += renderDetailParameters(fm);
+    return html;
+  }
 
-    // ── Variables (templates) ──
-    html += renderDetailVariables(fm);
+  /** Render components section (ensembles) */
+  function renderComponentsSections(fm) {
+    const compTypes = ['personas','skills','tools','templates','prompts','memories'];
+    const compEntries = compTypes
+      .filter(k => Array.isArray(fm[k]) && fm[k].length)
+      .map(k => `<div class="detail-field"><span class="detail-label">${capitalize(k)}</span><span class="detail-value">${detailPillList(fm[k])}</span></div>`)
+      .join('');
+    return compEntries ? detailSection('Components', compEntries) : '';
+  }
+
+  /** Render use cases section */
+  function renderUseCases(fm) {
+    if (!Array.isArray(fm.use_cases) || !fm.use_cases.length) return '';
+    const items = fm.use_cases.map(u => `<li>${escapeHtml(u)}</li>`).join('');
+    return detailSection('Use cases', `<ul class="detail-list">${items}</ul>`);
+  }
 
-    // ── Proficiency levels (skills) ──
+  /** Render type-specific sections (parameters, agent, ensemble, proficiency) */
+  function renderTypeSpecificSections(fm, type) {
+    let html = '';
+    html += renderDetailParameters(fm);
+    html += renderDetailVariables(fm);
     if (fm.proficiency_levels && typeof fm.proficiency_levels === 'object') {
       const levels = Object.entries(fm.proficiency_levels)
         .map(([lvl, desc]) => detailField(capitalize(lvl), desc)).join('');
       if (levels) html += detailSection('Proficiency levels', levels);
     }
+    if (type === 'agent') html += renderAgentSection(fm);
+    if (type === 'ensemble') html += renderEnsembleSection(fm);
+    return html;
+  }
 
-    // ── Agent fields ──
-    if (type === 'agent') {
-      html += renderAgentSection(fm);
+  /**
+   * Render element detail from pre-parsed structured JSON.
+   * The server has already validated and parsed the YAML — no client-side
+   * re-parsing needed. Uses the same rendering helpers as renderDetailView.
+   */
+  function renderStructuredDetail(data) {
+    const { metadata: fm, body, type } = data;
+    if (!fm || typeof fm !== 'object') {
+      return `<pre class="element-source"><code class="element-code">${escapeHtml(data.raw || JSON.stringify(data))}</code></pre>`;
+    }
+
+    if (type === 'memory') {
+      return renderMemoryView(data.raw);
     }
 
-    // ── Ensemble fields ──
-    if (type === 'ensemble') {
-      html += renderEnsembleSection(fm);
+    let html = '';
+
+    if (data.validation?.status === 'warn') {
+      html += `<div class="detail-validation-warn">Security scan: ${escapeHtml(data.validation?.reason || 'warning')}</div>`;
+    }
+
+    html += renderCommonMetadata(fm, type);
+    html += renderTypeSpecificSections(fm, type);
+    html += renderDetailExtra(fm, body || '');
+
+    return html || `<pre class="element-source"><code class="element-code">${escapeHtml(data.raw || '')}</code></pre>`;
+  }
+
+  function renderDetailView(content, type) { // NOSONAR - sequential independent metadata sections; complexity score is inflated by &&-guards on array existence checks
+    if (type === 'memory') {
+      // Portfolio memories are pure YAML — jsyaml.load succeeds.
+      // Collection memories are markdown-with-frontmatter — jsyaml.load throws on the
+      // second `---` document marker, so we fall through to the standard renderer below.
+      try {
+        const parsed = safeParseYaml(content);
+        if (parsed && typeof parsed === 'object') return renderMemoryView(content);
+      } catch { /* not pure YAML — fall through */ }
     }
 
-    // ── Catch-all + body ──
+    const { frontmatter: fm, body } = parseFrontmatter(content);
+    let html = '';
+
+    html += renderCommonMetadata(fm, type);
+    html += renderTypeSpecificSections(fm, type);
     html += renderDetailExtra(fm, body);
 
     return html || `<pre class="element-source"><code class="element-code">${escapeHtml(content)}</code></pre>`;
@@ -1865,6 +1909,8 @@ function safeParseYaml(content) {
           b.classList.toggle('active', on);
           b.setAttribute('aria-pressed', on);
         });
+        renderTypeFilters();
+        renderTopicFilters();
         applyFilters();
       });
     }
@@ -1872,6 +1918,48 @@ function safeParseYaml(content) {
     // Portfolio button
     document.getElementById('btn-portfolio')?.addEventListener('click', loadLocalPortfolio);
 
+    // ── Tab switching ─────────────────────────────────────────────────────────
+    const consoleTabs = document.getElementById('console-tabs');
+    const tabInits = { logs: false, metrics: false, permissions: false };
+
+    if (consoleTabs) {
+      consoleTabs.addEventListener('click', (e) => {
+        const btn = e.target.closest('.console-tab');
+        if (!btn) return;
+        const tab = btn.dataset.tab;
+        if (!tab) return;
+
+        // Update active tab button
+        consoleTabs.querySelectorAll('.console-tab').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Show/hide panels
+        document.querySelectorAll('.tab-panel').forEach(p => {
+          p.hidden = p.id !== 'tab-' + tab;
+          if (p.id === 'tab-' + tab) p.classList.add('active');
+          else p.classList.remove('active');
+        });
+
+        lazyInitTab(tab, tabInits);
+      });
+    }
+
+    function lazyInitTab(tab, tabInits) {
+      const dc = globalThis.DollhouseConsole;
+      if (tab === 'logs' && dc?.logs) {
+        if (!tabInits.logs) { tabInits.logs = true; dc.logs.init(); }
+        else if (dc.logs.refresh) { dc.logs.refresh(); }
+      }
+      if (tab === 'metrics' && dc?.metrics) {
+        if (!tabInits.metrics) { tabInits.metrics = true; dc.metrics.init(); }
+        else if (dc.metrics.refresh) { dc.metrics.refresh(); }
+      }
+      if (tab === 'permissions' && dc?.permissions) {
+        if (!tabInits.permissions) { tabInits.permissions = true; dc.permissions.init(); }
+        else if (dc.permissions.refresh) { dc.permissions.refresh(); }
+      }
+    }
+
     init();
   });