@vpxa/kb 0.1.32 → 0.1.34

package/packages/server/dist/tools/present/templates.js

@@ -0,0 +1,472 @@
+import{escHtml as e}from"../present-utils.js";function t(t,f){let p=typeof f==`string`?JSON.parse(f):f;switch(t){case`list-sort`:return n(p);case`data-table`:return r(p);case`picker`:return i(p);case`flame-graph`:return a(p);case`form`:return o(p);case`timeline`:return s(p);case`kanban`:return c(p);case`tree`:return l(p);case`diff-view`:return u(p);case`dashboard`:return d(p);default:return`<pre>${e(JSON.stringify(p,null,2))}</pre>`}}function n(t){let n=t.items??[];return`
+<style>
+  .sort-list{list-style:none;padding:0;margin:0}
+  .sort-item{display:flex;align-items:center;gap:10px;padding:12px 16px;margin:4px 0;
+    background:var(--kb-surface);border:1px solid var(--kb-border);border-radius:8px;
+    cursor:grab;transition:all .15s;user-select:none}
+  .sort-item:hover{border-color:var(--kb-accent)}
+  .sort-item.dragging{opacity:.4;transform:scale(.98)}
+  .sort-item.drag-over{border-color:var(--kb-accent);background:rgba(0,120,212,.1);
+    box-shadow:0 0 0 2px rgba(0,120,212,.2)}
+  .drag-handle{font-size:20px;color:var(--kb-muted);cursor:grab}
+  .sort-label{flex:1;color:var(--kb-text);font-family:'SF Mono',Consolas,monospace;font-size:13px}
+  .sort-pos{font-size:12px;color:var(--kb-muted);font-variant-numeric:tabular-nums;
+    min-width:28px;text-align:right}
+  .sort-status{margin-top:12px;padding:10px 14px;background:var(--kb-surface);
+    border-radius:6px;font-size:12px;color:var(--kb-muted)}
+</style>
+<ul class="sort-list" id="sortList">${n.map((t,n)=>`
+    <li class="sort-item" draggable="true" data-idx="${n}" data-id="${e(t.id)}">
+      <span class="drag-handle">⠿</span>
+      <span class="sort-label">${e(t.label)}</span>
+      <span class="sort-pos">#${n+1}</span>
+    </li>`).join(``)}</ul>
+<div class="sort-status" id="sortStatus">Drag items to reorder. ${n.length} items.</div>
+<script>
+(function(){
+  const list = document.getElementById('sortList');
+  let dragIdx = -1;
+  list.addEventListener('dragstart', e => {
+    const li = e.target.closest('.sort-item');
+    if(!li) return;
+    dragIdx = +li.dataset.idx;
+    li.classList.add('dragging');
+    e.dataTransfer.effectAllowed = 'move';
+  });
+  list.addEventListener('dragend', e => {
+    const li = e.target.closest('.sort-item');
+    if(li) li.classList.remove('dragging');
+  });
+  list.addEventListener('dragover', e => {
+    e.preventDefault();
+    const li = e.target.closest('.sort-item');
+    if(li) li.classList.add('drag-over');
+  });
+  list.addEventListener('dragleave', e => {
+    const li = e.target.closest('.sort-item');
+    if(li) li.classList.remove('drag-over');
+  });
+  list.addEventListener('drop', e => {
+    e.preventDefault();
+    const li = e.target.closest('.sort-item');
+    if(!li) return;
+    li.classList.remove('drag-over');
+    const dropIdx = +li.dataset.idx;
+    if(dragIdx < 0 || dragIdx === dropIdx) return;
+    const items = [...list.children];
+    const dragged = items[dragIdx];
+    if(dropIdx < dragIdx) li.before(dragged);
+    else li.after(dragged);
+    [...list.children].forEach((c,i) => {
+      c.dataset.idx = i;
+      c.querySelector('.sort-pos').textContent = '#'+(i+1);
+    });
+    const order = [...list.children].map(c => c.dataset.id);
+    document.getElementById('sortStatus').textContent = 'Reordered: ' + order.join(', ');
+    if(window.__kbCallback) {
+      fetch(window.__kbCallback, {method:'POST',headers:{'Content-Type':'application/json'},
+        body: JSON.stringify({actionId:'reorder',value:JSON.stringify(order)})}).catch(()=>{});
+    }
+  });
+})();
+<\/script>`}function r(t){let n=t.columns??[],r=t.rows??[],i=t.stats??[],a=i.length?`<div class="dt-stats">${i.map(t=>`<div class="dt-stat"><div class="dt-stat-value"${t.color?` style="color:${t.color}"`:``}>${e(String(t.value))}</div><div class="dt-stat-label">${e(t.label)}</div></div>`).join(``)}</div>`:``,o=n.map(t=>`<th data-key="${e(t.key)}">${e(t.label)} <span class="sort-icon">⇅</span></th>`).join(``),s=r.map(t=>`<tr>${n.map(n=>`<td>${e(String(t[n.key]??``))}</td>`).join(``)}</tr>`).join(``);return`
+<style>
+  .dt-stats{display:flex;gap:20px;padding:14px 0;flex-wrap:wrap}
+  .dt-stat{text-align:center;min-width:90px;padding:10px 16px;background:var(--kb-surface);border-radius:8px}
+  .dt-stat-value{font-size:24px;font-weight:700;color:var(--kb-accent)}
+  .dt-stat-label{font-size:11px;color:var(--kb-muted);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
+  .dt-filter{display:flex;align-items:center;gap:10px;padding:10px 0}
+  .dt-search{flex:1;padding:8px 14px;background:var(--kb-surface);border:1px solid var(--kb-border);
+    border-radius:8px;color:var(--kb-text);font-size:13px;outline:none}
+  .dt-search:focus{border-color:var(--kb-accent)}
+  .dt-count{font-size:12px;color:var(--kb-muted);white-space:nowrap}
+  .dt-export{padding:6px 14px;background:var(--kb-surface);border:1px solid var(--kb-border);
+    border-radius:6px;color:var(--kb-text);cursor:pointer;font-size:12px}
+  .dt-export:hover{border-color:var(--kb-accent)}
+  .dt-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
+  .dt-table th{text-align:left;padding:10px 14px;border-bottom:2px solid var(--kb-border);
+    color:var(--kb-muted);cursor:pointer;user-select:none;white-space:nowrap;font-weight:600}
+  .dt-table th:hover{color:var(--kb-text)}
+  .dt-table th.sorted-asc .sort-icon::after{content:" ▲"}
+  .dt-table th.sorted-desc .sort-icon::after{content:" ▼"}
+  .dt-table td{padding:9px 14px;border-bottom:1px solid var(--kb-border);color:var(--kb-text)}
+  .dt-table tr:hover td{background:rgba(255,255,255,.03)}
+  .sort-icon{margin-left:4px;font-size:10px;opacity:.4}
+</style>
+${a}
+<div class="dt-filter">
+  <input class="dt-search" id="dtSearch" placeholder="Search across all columns...">
+  <span class="dt-count" id="dtCount">${r.length} rows</span>
+  <button class="dt-export" id="dtExport">Export</button>
+</div>
+<table class="dt-table">
+  <thead><tr>${o}</tr></thead>
+  <tbody id="dtBody">${s}</tbody>
+</table>
+<script>
+(function(){
+  const cols = ${JSON.stringify(n)};
+  const allRows = ${JSON.stringify(r)};
+  let sortKey = '', sortAsc = true;
+  const tbody = document.getElementById('dtBody');
+  const search = document.getElementById('dtSearch');
+  const countEl = document.getElementById('dtCount');
+
+  function rebuild() {
+    const q = search.value.toLowerCase();
+    let filtered = allRows.filter(r => !q || cols.some(c => String(r[c.key]||'').toLowerCase().includes(q)));
+    if (sortKey) {
+      filtered.sort((a,b) => {
+        const av = String(a[sortKey]||''), bv = String(b[sortKey]||'');
+        const cmp = av.localeCompare(bv, undefined, {numeric:true});
+        return sortAsc ? cmp : -cmp;
+      });
+    }
+    tbody.innerHTML = filtered.map(r => '<tr>' + cols.map(c =>
+      '<td>' + String(r[c.key]||'').replace(/</g,'&lt;') + '</td>'
+    ).join('') + '</tr>').join('');
+    countEl.textContent = filtered.length + ' rows';
+  }
+
+  search.addEventListener('input', rebuild);
+  document.querySelectorAll('.dt-table th').forEach(th => {
+    th.addEventListener('click', () => {
+      const key = th.dataset.key;
+      if (sortKey === key) sortAsc = !sortAsc;
+      else { sortKey = key; sortAsc = true; }
+      document.querySelectorAll('.dt-table th').forEach(t => t.className='');
+      th.className = sortAsc ? 'sorted-asc' : 'sorted-desc';
+      rebuild();
+    });
+  });
+  document.getElementById('dtExport').addEventListener('click', () => {
+    const csv = [cols.map(c=>c.label).join(','), ...allRows.map(r => cols.map(c=>JSON.stringify(r[c.key]||'')).join(','))].join('\\n');
+    const blob = new Blob([csv], {type:'text/csv'});
+    const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
+    a.download = 'export.csv'; a.click();
+  });
+})();
+<\/script>`}function i(t){let n=t.categories??[],r=t.items??[];return`
+<style>
+  .pk-tabs{display:flex;gap:4px;padding:4px;background:var(--kb-surface);border-radius:10px;
+    margin-bottom:12px;overflow-x:auto;flex-wrap:wrap}
+  .pk-tab{padding:7px 16px;border:none;background:transparent;color:var(--kb-muted);
+    border-radius:8px;cursor:pointer;font-size:12px;white-space:nowrap;transition:all .15s}
+  .pk-tab:hover{color:var(--kb-text)}
+  .pk-tab.active{background:var(--kb-accent);color:#fff}
+  .pk-search{width:100%;padding:9px 14px;margin-bottom:10px;background:var(--kb-surface);
+    border:1px solid var(--kb-border);border-radius:8px;color:var(--kb-text);font-size:13px;
+    outline:none;box-sizing:border-box}
+  .pk-search:focus{border-color:var(--kb-accent)}
+  .pk-summary{font-size:12px;color:var(--kb-muted);padding:4px 0}
+  .pk-list{max-height:360px;overflow-y:auto}
+  .pk-item{display:flex;align-items:center;gap:10px;padding:10px 12px;
+    border-bottom:1px solid var(--kb-border);transition:background .1s}
+  .pk-item:hover{background:rgba(255,255,255,.03)}
+  .pk-item input[type=checkbox]{accent-color:var(--kb-accent);width:16px;height:16px}
+  .pk-item-label{flex:1;color:var(--kb-text);font-size:13px}
+  .pk-item-status{font-size:11px;padding:2px 10px;border-radius:12px;
+    background:var(--kb-surface2);color:var(--kb-muted)}
+  .pk-item-status.success{background:rgba(78,201,176,.15);color:var(--kb-success)}
+  .pk-tags{display:flex;gap:4px}
+  .pk-tag{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--kb-surface2);color:var(--kb-muted)}
+  .pk-apply{margin-top:12px;width:100%;padding:10px;background:var(--kb-accent);color:#fff;
+    border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
+  .pk-apply:hover{filter:brightness(1.1)}
+</style>
+<div class="pk-tabs" id="pkTabs">${[`<button class="pk-tab active" data-cat="all">All (${r.length})</button>`].concat(n.map(t=>{let n=r.filter(e=>e.category===t.id).length;return`<button class="pk-tab" data-cat="${e(t.id)}">${e(t.label)} (${n})</button>`})).join(``)}</div>
+<input class="pk-search" id="pkSearch" placeholder="Search items...">
+<div class="pk-summary" id="pkSummary">0 selected</div>
+<div class="pk-list" id="pkList">${r.map(t=>{let n=t.status&&[`active`,`enabled`,`on`].includes(t.status.toLowerCase())?`success`:``,r=t.tags?.length?`<div class="pk-tags">${t.tags.map(t=>`<span class="pk-tag">${e(t)}</span>`).join(``)}</div>`:``;return`<div class="pk-item" data-cat="${e(t.category??``)}" data-label="${e(t.label.toLowerCase())}">
+      <input type="checkbox" data-id="${e(t.id)}">
+      <span class="pk-item-label">${e(t.label)}</span>
+      ${t.status?`<span class="pk-item-status ${n}">${e(t.status)}</span>`:``}
+      ${r}
+    </div>`}).join(``)}</div>
+<button class="pk-apply" id="pkApply">Apply Selection</button>
+<script>
+(function(){
+  let activeCat = 'all', query = '';
+  const tabs = document.getElementById('pkTabs');
+  const list = document.getElementById('pkList');
+  const search = document.getElementById('pkSearch');
+  const summary = document.getElementById('pkSummary');
+
+  function rebuild() {
+    tabs.querySelectorAll('.pk-tab').forEach(t => t.classList.toggle('active', t.dataset.cat === activeCat));
+    list.querySelectorAll('.pk-item').forEach(item => {
+      const catMatch = activeCat === 'all' || item.dataset.cat === activeCat;
+      const qMatch = !query || item.dataset.label.includes(query);
+      item.style.display = (catMatch && qMatch) ? '' : 'none';
+    });
+  }
+  tabs.addEventListener('click', e => {
+    const tab = e.target.closest('.pk-tab');
+    if(tab) { activeCat = tab.dataset.cat; rebuild(); }
+  });
+  search.addEventListener('input', () => { query = search.value.toLowerCase(); rebuild(); });
+  list.addEventListener('change', () => {
+    const count = list.querySelectorAll('input:checked').length;
+    summary.textContent = count + ' selected';
+  });
+  document.getElementById('pkApply').addEventListener('click', () => {
+    const selected = [...list.querySelectorAll('input:checked')].map(cb => cb.dataset.id);
+    if(window.__kbCallback) {
+      fetch(window.__kbCallback, {method:'POST',headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({actionId:'pick',value:JSON.stringify(selected)})}).catch(()=>{});
+    }
+  });
+})();
+<\/script>`}function a(e){let t=e.profile;return t?`
+<style>
+  .fg-breadcrumb{display:flex;align-items:center;gap:4px;padding:10px 0;flex-wrap:wrap}
+  .fg-crumb{background:var(--kb-surface);border:1px solid var(--kb-border);color:var(--kb-text);
+    padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px}
+  .fg-crumb:hover{border-color:var(--kb-accent)}
+  .fg-sep{color:var(--kb-muted);font-size:14px}
+  .fg-canvas{overflow-y:auto;max-height:450px;padding:4px 0}
+  .fg-row{padding:1px 0}
+  .fg-bar{height:24px;border-radius:4px;display:flex;align-items:center;padding:0 8px;
+    min-width:24px;transition:filter .1s;cursor:pointer;position:relative}
+  .fg-bar:hover{filter:brightness(1.15)}
+  .fg-bar-label{font-size:11px;color:#000;white-space:nowrap;overflow:hidden;
+    text-overflow:ellipsis;font-weight:500}
+  .fg-info{font-size:12px;color:var(--kb-muted);padding:10px 0;
+    border-top:1px solid var(--kb-border);margin-top:8px}
+</style>
+<div class="fg-breadcrumb" id="fgBreadcrumb"></div>
+<div class="fg-canvas" id="fgCanvas"></div>
+<div class="fg-info" id="fgInfo"></div>
+<script>
+(function(){
+  const profile = ${JSON.stringify(t)};
+  const colors = ['#e24d28','#e8602a','#edad2a','#f5c842','#fce94f','#c4a000','#e07028','#d45500'];
+  let current = profile;
+  const history = [profile];
+  const bc = document.getElementById('fgBreadcrumb');
+  const canvas = document.getElementById('fgCanvas');
+  const info = document.getElementById('fgInfo');
+
+  function renderFlame() {
+    bc.innerHTML = '';
+    history.forEach((node, i) => {
+      if(i > 0) { const sep = document.createElement('span'); sep.className='fg-sep'; sep.textContent='›'; bc.appendChild(sep); }
+      const btn = document.createElement('button');
+      btn.className = 'fg-crumb';
+      btn.textContent = node.name;
+      btn.addEventListener('click', () => { history.splice(i+1); current = node; renderFlame(); });
+      bc.appendChild(btn);
+    });
+    canvas.innerHTML = '';
+    renderLevel(current, 0, current.total);
+    info.textContent = current.name + ' — total: ' + current.total + (current.self != null ? ', self: '+current.self : '');
+  }
+
+  function renderLevel(node, depth, rootTotal) {
+    const row = document.createElement('div');
+    row.className = 'fg-row';
+    row.style.paddingLeft = (depth * 4) + 'px';
+    const bar = document.createElement('div');
+    bar.className = 'fg-bar';
+    bar.style.width = Math.max(2, (node.total / rootTotal) * 100) + '%';
+    bar.style.background = colors[depth % colors.length];
+    bar.title = node.name + ': ' + node.total;
+    const lbl = document.createElement('span');
+    lbl.className = 'fg-bar-label';
+    lbl.textContent = node.name + ' (' + node.total + ')';
+    bar.appendChild(lbl);
+    bar.addEventListener('mouseenter', () => {
+      info.textContent = node.name + ' — total: ' + node.total + (node.self != null ? ', self: '+node.self : '');
+    });
+    if(node.children && node.children.length) {
+      bar.addEventListener('click', () => { current = node; history.push(node); renderFlame(); });
+    }
+    row.appendChild(bar);
+    canvas.appendChild(row);
+    if(node.children) node.children.forEach(c => renderLevel(c, depth+1, rootTotal));
+  }
+
+  renderFlame();
+})();
+<\/script>`:`<p>No profile data provided</p>`}function o(t){let n=t.fields??[];return`
+<style>
+  .fm-container{display:grid;grid-template-columns:1fr 280px;gap:24px}
+  @media(max-width:640px){.fm-container{grid-template-columns:1fr}}
+  .fm-fields{display:flex;flex-direction:column;gap:16px}
+  .fm-group{display:flex;flex-direction:column;gap:5px}
+  .fm-label{font-size:11px;color:var(--kb-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
+  .fm-input{padding:9px 14px;background:var(--kb-surface);border:1px solid var(--kb-border);
+    border-radius:8px;color:var(--kb-text);font-size:13px;outline:none;font-family:inherit;width:100%;box-sizing:border-box}
+  .fm-input:focus{border-color:var(--kb-accent)}
+  .fm-textarea{resize:vertical;min-height:80px}
+  .fm-multi{display:flex;flex-wrap:wrap;gap:10px;padding:4px 0}
+  .fm-check-label{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--kb-text);cursor:pointer}
+  .fm-check-label input{accent-color:var(--kb-accent)}
+  .fm-submit{margin-top:8px;width:100%;padding:10px;background:var(--kb-accent);color:#fff;
+    border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600}
+  .fm-submit:hover{filter:brightness(1.1)}
+  .fm-preview{background:var(--kb-surface);border:1px solid var(--kb-border);border-radius:10px;
+    padding:16px;height:fit-content;position:sticky;top:20px}
+  .fm-preview-title{font-size:11px;color:var(--kb-muted);text-transform:uppercase;
+    letter-spacing:.5px;margin-bottom:10px}
+  .fm-preview-json{font-size:12px;color:var(--kb-text);margin:0;white-space:pre-wrap;
+    word-break:break-all;font-family:'SF Mono',Consolas,monospace;line-height:1.5}
+</style>
+<div class="fm-container">
+  <div class="fm-fields" id="fmFields">
+    ${n.map(t=>{let n=t.type??`text`,r;if(n===`select`&&t.options){let n=t.options.map(n=>`<option value="${e(n)}"${n===t.value?` selected`:``}>${e(n)}</option>`).join(``);r=`<select class="fm-input" data-field="${e(t.name)}">${n}</select>`}else r=n===`textarea`?`<textarea class="fm-input fm-textarea" data-field="${e(t.name)}" rows="4">${e(t.value??``)}</textarea>`:n===`multi-select`&&t.options?`<div class="fm-multi">${t.options.map(n=>`<label class="fm-check-label"><input type="checkbox" data-field="${e(t.name)}" value="${e(n)}"${t.value?.includes(n)?` checked`:``}> ${e(n)}</label>`).join(``)}</div>`:`<input class="fm-input" type="${e(n)}" data-field="${e(t.name)}" value="${e(t.value??``)}">`;return`<div class="fm-group"><label class="fm-label">${e(t.label)}</label>${r}</div>`}).join(``)}
+    <button class="fm-submit" id="fmSubmit">Submit</button>
+  </div>
+  <div class="fm-preview">
+    <div class="fm-preview-title">Live Preview</div>
+    <pre class="fm-preview-json" id="fmPreview">{}</pre>
+  </div>
+</div>
+<script>
+(function(){
+  const fields = document.getElementById('fmFields');
+  const preview = document.getElementById('fmPreview');
+  const fieldDefs = ${JSON.stringify(n.map(e=>({name:e.name,type:e.type??`text`})))};
+
+  function getValues() {
+    const vals = {};
+    fieldDefs.forEach(f => {
+      if(f.type === 'multi-select') {
+        vals[f.name] = [...fields.querySelectorAll('input[data-field="'+f.name+'"]:checked')].map(cb => cb.value).join(', ');
+      } else {
+        const el = fields.querySelector('[data-field="'+f.name+'"]');
+        if(el) vals[f.name] = el.value;
+      }
+    });
+    return vals;
+  }
+
+  function updatePreview() { preview.textContent = JSON.stringify(getValues(), null, 2); }
+  fields.addEventListener('input', updatePreview);
+  fields.addEventListener('change', updatePreview);
+  updatePreview();
+
+  document.getElementById('fmSubmit').addEventListener('click', () => {
+    if(window.__kbCallback) {
+      fetch(window.__kbCallback, {method:'POST',headers:{'Content-Type':'application/json'},
+        body:JSON.stringify({actionId:'submit',value:JSON.stringify(getValues())})}).catch(()=>{});
+    }
+  });
+})();
+<\/script>`}function s(t){let n=t.events??[],r={complete:`#22c55e`,active:`#3b82f6`,pending:`#9ca3af`,error:`#ef4444`};return`
+<style>
+  .tl-wrap{position:relative;padding-left:28px}
+  .tl-wrap::before{content:'';position:absolute;top:0;bottom:0;left:10px;width:2px;background:var(--kb-border,#3c3c3c)}
+  .tl-event{position:relative;margin-bottom:16px;display:flex;align-items:flex-start;gap:12px}
+  .tl-dot{position:absolute;left:-28px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
+    justify-content:center;font-size:11px;color:#fff;flex-shrink:0}
+  .tl-body{flex:1}
+  .tl-title{color:var(--kb-text,#e5e7eb);font:600 13px/1.4 var(--kb-font-sans,system-ui,sans-serif)}
+  .tl-time{color:var(--kb-muted,#9ca3af);font:400 11px var(--kb-font-sans,system-ui,sans-serif);margin-top:2px}
+  .tl-desc{color:var(--kb-muted,#9ca3af);font:400 12px/1.5 var(--kb-font-sans,system-ui,sans-serif);margin-top:4px}
+  .tl-cat{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--kb-surface,#252526);
+    color:var(--kb-muted,#9ca3af);font:500 10px var(--kb-font-sans,system-ui,sans-serif);margin-top:4px}
+</style>
+<div class="tl-wrap">${n.map(t=>`
+    <div class="tl-event">
+      <span class="tl-dot" style="background:${r[t.status??`pending`]??r.pending}">${e(t.icon??(t.status===`complete`?`✓`:t.status===`error`?`✗`:`●`))}</span>
+      <div class="tl-body">
+        <div class="tl-title">${e(t.title)}</div>
+        ${t.timestamp?`<div class="tl-time">${e(t.timestamp)}</div>`:``}
+        ${t.description?`<div class="tl-desc">${e(t.description)}</div>`:``}
+        ${t.category?`<span class="tl-cat">${e(t.category)}</span>`:``}
+      </div>
+    </div>`).join(``)}</div>`}function c(t){let n=t.columns??[],r=t.cards??[];return`
+<style>
+  .kbn-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px}
+  .kbn-col{min-width:220px;flex:1;border:1px solid var(--kb-border,#3c3c3c);border-radius:8px;background:var(--kb-surface,#252526)}
+  .kbn-col-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--kb-border,#3c3c3c)}
+  .kbn-col-dot{width:10px;height:10px;border-radius:50%}
+  .kbn-col-title{flex:1;color:var(--kb-text,#e5e7eb);font:600 13px var(--kb-font-sans,system-ui,sans-serif)}
+  .kbn-col-count{padding:2px 8px;border-radius:999px;background:var(--kb-surface2,#2d2d30);color:var(--kb-muted,#9ca3af);font:600 11px var(--kb-font-sans,system-ui,sans-serif)}
+  .kbn-cards{display:grid;gap:8px;padding:10px}
+  .kbn-card{padding:10px;border:1px solid var(--kb-border,#3c3c3c);border-left-width:3px;border-radius:6px;background:var(--kb-surface2,#2d2d30)}
+  .kbn-card.priority-high{border-left-color:#ef4444}
+  .kbn-card.priority-medium{border-left-color:#f59e0b}
+  .kbn-card.priority-low{border-left-color:#9ca3af}
+  .kbn-card-title{color:var(--kb-text,#e5e7eb);font:600 13px/1.4 var(--kb-font-sans,system-ui,sans-serif)}
+  .kbn-card-desc{color:var(--kb-muted,#9ca3af);font:400 12px/1.4 var(--kb-font-sans,system-ui,sans-serif);margin-top:6px}
+  .kbn-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
+  .kbn-tag{padding:2px 6px;border-radius:999px;background:var(--kb-surface,#252526);color:var(--kb-muted,#9ca3af);font:500 10px var(--kb-font-sans,system-ui,sans-serif)}
+</style>
+<div class="kbn-board">${n.map(t=>{let n=r.filter(e=>e.column===t.id),i=n.map(t=>`
+      <div class="kbn-card ${t.priority?`priority-${t.priority}`:``}">
+        <div class="kbn-card-title">${e(t.title)}</div>
+        ${t.description?`<div class="kbn-card-desc">${e(t.description)}</div>`:``}
+        ${t.tags?.length?`<div class="kbn-tags">${t.tags.map(t=>`<span class="kbn-tag">${e(t)}</span>`).join(``)}</div>`:``}
+      </div>`).join(``);return`
+    <div class="kbn-col">
+      <div class="kbn-col-hdr">
+        <span class="kbn-col-dot" style="background:${t.color??`var(--kb-accent,#3b82f6)`}"></span>
+        <span class="kbn-col-title">${e(t.label)}</span>
+        <span class="kbn-col-count">${n.length}</span>
+      </div>
+      <div class="kbn-cards">${i}</div>
+    </div>`}).join(``)}</div>`}function l(t){let n=Array.isArray(t.root)?t.root:t.root?[t.root]:t.roots??[],r=0;function i(t,n){let a=`tn-${r++}`,o=t.children&&t.children.length>0,s=t.icon?`<span class="tr-icon">${e(t.icon)}</span>`:``,c=o?`<button class="tr-toggle" data-target="${a}">▸</button>`:`<span class="tr-spacer"></span>`,l=t.metadata?Object.entries(t.metadata).map(([t,n])=>`<span class="tr-meta">${e(t)}: ${e(n)}</span>`).join(` `):``,u=`<div class="tr-row">${c}${s}<span class="tr-label">${e(t.label)}</span>${l}</div>`;return o&&(u+=`<div class="tr-children" id="${a}" hidden>${(t.children??[]).map(e=>i(e,n+1)).join(``)}</div>`),`<div class="tr-node">${u}</div>`}return`
+<style>
+  .tr-wrap{font:13px var(--kb-font-sans,system-ui,sans-serif)}
+  .tr-node{margin-left:16px}
+  .tr-row{display:flex;align-items:center;gap:6px;padding:4px 6px;border-radius:4px;color:var(--kb-text,#e5e7eb)}
+  .tr-row:hover{background:var(--kb-surface2,#2d2d30)}
+  .tr-toggle{border:0;background:0;color:var(--kb-muted,#9ca3af);cursor:pointer;font-size:12px;width:18px;padding:0}
+  .tr-toggle.open{transform:rotate(90deg)}
+  .tr-spacer{width:18px;display:inline-block}
+  .tr-icon{width:18px;text-align:center}
+  .tr-label{color:var(--kb-text,#e5e7eb)}
+  .tr-meta{color:var(--kb-muted,#9ca3af);font-size:11px;margin-left:8px}
+  .tr-children{margin-left:4px;padding-left:10px;border-left:1px dashed var(--kb-border,#3c3c3c)}
+  .tr-children[hidden]{display:none}
+</style>
+<div class="tr-wrap">${n.map(e=>i(e,0)).join(``)}</div>
+<script>
+(function(){
+  document.querySelectorAll('.tr-toggle').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const target = document.getElementById(btn.dataset.target);
+      if(target) { target.hidden = !target.hidden; btn.classList.toggle('open'); btn.textContent = target.hidden ? '▸' : '▾'; }
+    });
+  });
+})();
+<\/script>`}function u(t){let n=t.files??[],r=t.stats,i={added:`🟢`,modified:`🟡`,deleted:`🔴`,renamed:`🔵`};return`
+<style>
+  .dv-stats{padding:8px 12px;background:var(--kb-surface,#252526);border-radius:6px;color:var(--kb-text,#e5e7eb);font:600 13px var(--kb-font-sans,system-ui,sans-serif);margin-bottom:12px}
+  .dv-add{color:#22c55e}.dv-del{color:#ef4444}
+  .dv-file{border:1px solid var(--kb-border,#3c3c3c);border-radius:6px;margin-bottom:8px;overflow:hidden}
+  .dv-file-hdr{padding:10px 12px;background:var(--kb-surface,#252526);cursor:pointer;color:var(--kb-text,#e5e7eb);font:500 13px var(--kb-font-sans,system-ui,sans-serif)}
+  .dv-hunk{border-top:1px solid var(--kb-border,#3c3c3c)}
+  .dv-hunk-hdr{padding:4px 12px;background:var(--kb-surface2,#2d2d30);color:var(--kb-muted,#9ca3af);font:400 11px 'SF Mono',Consolas,monospace}
+  .dv-line-add,.dv-line-del,.dv-line-ctx{padding:1px 12px;font:400 12px/1.6 'SF Mono',Consolas,monospace}
+  .dv-line-add{background:rgba(34,197,94,.1);color:#22c55e}
+  .dv-line-del{background:rgba(239,68,68,.1);color:#ef4444}
+  .dv-line-ctx{color:var(--kb-muted,#9ca3af)}
+  .dv-ln{display:inline-block;width:40px;text-align:right;margin-right:8px;color:var(--kb-muted,#9ca3af);font-size:11px}
+</style>
+${r?`<div class="dv-stats"><span class="dv-add">+${r.additions}</span> <span class="dv-del">-${r.deletions}</span> in ${r.filesChanged} files</div>`:``}
+<div class="dv-wrap">${n.map(t=>{let n=t.hunks.map(t=>{let n=t.changes.map(t=>{let n=t.type===`add`?`dv-line-add`:t.type===`delete`?`dv-line-del`:`dv-line-ctx`,r=t.type===`add`?`+`:t.type===`delete`?`-`:` `;return`<div class="${n}">${t.line==null?``:`<span class="dv-ln">${t.line}</span>`}<code>${r} ${e(t.content)}</code></div>`}).join(``);return`<div class="dv-hunk"><div class="dv-hunk-hdr">${e(t.header)}</div>${n}</div>`}).join(``),r=i[t.status]??`⚪`,a=t.oldPath?` ← ${e(t.oldPath)}`:``;return`
+    <details class="dv-file" open>
+      <summary class="dv-file-hdr">${r} <strong>${e(t.path)}</strong>${a}
+        <span class="dv-add">+${t.additions}</span> <span class="dv-del">-${t.deletions}</span></summary>
+      ${n}
+    </details>`}).join(``)}</div>`}function d(t){let n=t.metrics??[],r={success:`#22c55e`,warning:`#f59e0b`,error:`#ef4444`,info:`#38bdf8`},i={up:`↑`,down:`↓`,neutral:`→`};return`
+<style>
+  .db-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
+  .db-card{padding:14px;border:1px solid var(--kb-border,#3c3c3c);border-left-width:4px;border-radius:8px;background:var(--kb-surface,#252526)}
+  .db-label{color:var(--kb-muted,#9ca3af);font:600 11px var(--kb-font-sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.06em}
+  .db-value{color:var(--kb-text,#e5e7eb);font:700 24px var(--kb-font-sans,system-ui,sans-serif);margin-top:6px}
+  .db-trend{font:600 12px var(--kb-font-sans,system-ui,sans-serif);margin-left:8px}
+  .db-trend.up{color:#22c55e}.db-trend.down{color:#ef4444}.db-trend.neutral{color:#9ca3af}
+  .db-progress{height:6px;background:var(--kb-surface2,#2d2d30);border-radius:3px;margin-top:8px;overflow:hidden}
+  .db-progress-bar{height:100%;border-radius:3px;transition:width .3s}
+  .db-list{margin-top:8px;display:grid;gap:4px}
+  .db-list-row{display:flex;justify-content:space-between;padding:4px 0;color:var(--kb-muted,#9ca3af);font:400 12px var(--kb-font-sans,system-ui,sans-serif);border-bottom:1px solid var(--kb-border,#3c3c3c)}
+</style>
+<div class="db-grid">${n.map(t=>{let n=r[t.status??`info`]??r.info,a=t.trend?`<span class="db-trend ${t.trend.direction}">${i[t.trend.direction]??``} ${e(t.trend.value)}</span>`:``,o=`<div class="db-value">${e(String(t.value))}</div>${a}`;return t.type===`progress`&&t.progress!=null&&(o+=`<div class="db-progress"><div class="db-progress-bar" style="width:${Math.min(100,Math.max(0,t.progress))}%;background:${n}"></div></div>`),t.type===`list`&&t.items?.length&&(o+=`<div class="db-list">${t.items.map(t=>`<div class="db-list-row"><span>${e(t.label)}</span><span>${e(t.value)}</span></div>`).join(``)}</div>`),`
+    <div class="db-card" style="border-left-color:${n}">
+      <div class="db-label">${e(t.label)}</div>
+      ${o}
+    </div>`}).join(``)}</div>`}export{d as buildDashboardHtml,r as buildDataTableHtml,u as buildDiffViewHtml,a as buildFlameGraphHtml,o as buildFormHtml,c as buildKanbanHtml,n as buildListSortHtml,i as buildPickerHtml,t as buildTemplateHtml,s as buildTimelineHtml,l as buildTreeHtml};

package/packages/server/dist/tools/present/tool.d.ts

@@ -0,0 +1,25 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { UIResource } from "@mcp-ui/server";
+import { Elicitor } from "../../../../elicitation/dist/index.js";
+
+//#region packages/server/src/tools/present/tool.d.ts
+declare function resolvePresentHtml(): string;
+declare function getPresentHtml(): string;
+declare function registerPresentTool(server: McpServer, elicitor?: Elicitor): void;
+declare function formatAsBrowser(title: string | undefined, content: unknown, actions: unknown, elicitor: Elicitor | undefined, template?: string): Promise<{
+  content: Array<{
+    type: 'text';
+    text: string;
+  } | UIResource>;
+}>;
+declare function formatAsHtml(title: string | undefined, content: unknown, actions: unknown, template?: string): {
+  content: Array<{
+    type: 'text';
+    text: string;
+  } | UIResource>;
+  structuredContent: {
+    actions: Array<Record<string, unknown>>;
+  };
+};
+//#endregion
+export { formatAsBrowser, formatAsHtml, getPresentHtml, registerPresentTool, resolvePresentHtml };

package/packages/server/dist/tools/present/tool.js

@@ -0,0 +1,19 @@
+import{getToolMeta as e}from"../../tool-metadata.js";import{buildBrowserHtml as t}from"./browser.js";import{buildMarkdown as n}from"./markdown.js";import{readFileSync as r}from"node:fs";import{dirname as i,join as a}from"node:path";import{fileURLToPath as o}from"node:url";import{z as s}from"zod";import{exec as c}from"node:child_process";import{createServer as l}from"node:http";import{createUIResource as u}from"@mcp-ui/server";import{RESOURCE_MIME_TYPE as d,registerAppResource as f,registerAppTool as p}from"@modelcontextprotocol/ext-apps/server";const m=import.meta.dirname??i(o(import.meta.url)),h=`ui://kb/present.html`,g=s.object({type:s.enum([`button`,`select`]).describe(`Action type`),id:s.string().describe(`Unique action identifier`),label:s.string().describe(`Display label`),variant:s.enum([`primary`,`danger`,`default`]).optional().describe(`Button style variant`),options:s.array(s.union([s.string(),s.object({label:s.string(),value:s.string()})])).optional().describe(`Select options (for type=select)`)}),_={format:s.enum([`html`,`browser`]).default(`html`).describe(`Output format.
+- "html" (default): Rich markdown in chat + embedded UIResource for MCP-UI hosts. Actions shown as numbered choices.
+- "browser": Rich markdown in chat + opens beautiful themed dashboard in the browser. When actions are provided, the browser shows interactive buttons and the tool blocks until user clicks, returning their selection.`),title:s.string().optional().describe(`Optional heading`),content:s.any().describe(`Content to present. Accepts: markdown string, array of objects (→ table), { nodes, edges } (→ mermaid graph), typed blocks [{ type, value }], or any JSON (→ tree).`),actions:s.array(g).optional().describe(`Interactive actions (buttons/selects). In html mode, shown as numbered choices. In browser mode, rendered as clickable buttons and the tool blocks until user clicks.`),template:s.enum([`auto`,`list-sort`,`data-table`,`picker`,`flame-graph`,`form`,`timeline`,`kanban`,`tree`,`diff-view`,`dashboard`]).optional().describe(`UI template for interactive display in MCP Apps hosts.
+- auto (default): detect from content shape
+- list-sort: drag-drop reorderable list — content: { items: [{id, label}] }
+- data-table: filterable sortable table — content: { columns: [{key, label}], rows: [{...}], stats?: [{label, value}] }
+- picker: multi-select with categories/search — content: { categories: [{id, label}], items: [{id, label, category?, tags?[]}] }
+- flame-graph: hierarchical zoom visualization — content: { profile: {name, total, children:[]} }
+- form: input fields with live preview — content: { fields: [{name, label, type?, options?[], value?}] }
+- timeline: vertical event timeline — content: { events: [{title, description?, timestamp?, status?}] }
+- kanban: drag-drop board — content: { columns: [{id, label, color?}], cards: [{id, title, column, tags?[], priority?}] }
+- tree: collapsible tree view — content: { root: {label, children?:[...]} | [...] }
+- diff-view: side-by-side diff — content: { files: [{path, status, additions, deletions, hunks:[{header, changes:[{type, content}]}]}] }
+- dashboard: metric cards grid — content: { metrics: [{label, value, trend?, status?, type?}] }`)};let v,y=!1,b=null;process.on(`exit`,()=>{if(b){try{b.close()}catch{}b=null}});function x(){return a(m,`..`,`..`,`..`,`..`,`present`,`dist`,`index.html`)}function S(){if(!v)try{v=r(x(),`utf-8`)}catch{v=``}return v}function C(t,n){let r=e(`present`);y||=(f(t,`KB Present App`,h,{description:`Rich interactive content viewer for KB tools`},async()=>({contents:[{uri:h,mimeType:d,text:S()}]})),!0),p(t,`present`,{title:r.title,description:`Present content to the user in the best format. Two modes:
+- "html" (default): Rich markdown in chat + embedded UIResource. Use for display-only content (tables, charts, reports, status boards) where no user interaction is needed.
+- "browser": Serves a themed dashboard on a local URL. Use ONLY when you need user interaction back (confirmations, selections, form input). The tool blocks until user clicks an action button, then returns their selection.
+FORMAT RULE: If no user interaction is needed → use "html". If you need user input back → use "browser".
+BROWSER WORKFLOW: After calling present with format "browser", you MUST extract the URL from the response and call openBrowserPage({ url }) to open it in VS Code Simple Browser. A system browser fallback also opens automatically, but always call openBrowserPage yourself.`,annotations:r.annotations,inputSchema:_,_meta:{ui:{resourceUri:h}}},async({format:e,title:t,content:r,actions:i,template:a})=>(e??`html`)===`browser`?await w(t,r,i,n,a):T(t,r,i,a))}async function w(e,r,i,a,o){let s=n(e,r),d=t(e,r,i,o),f=u({uri:`ui://kb/present-browser.html`,content:{type:`rawHtml`,htmlString:d},encoding:`text`,adapters:{mcpApps:{enabled:!0}}}),p,m,h=Array.isArray(i)?i:[],g=``,_;try{b&&=(b.close(),null),h.length>0&&(p=new Promise(e=>{m=e}));let e=!1;g=await new Promise((t,n)=>{let r=l((t,n)=>{if(e||(e=!0,_&&clearTimeout(_)),t.method===`POST`&&t.url===`/callback`){let e=``;t.on(`data`,t=>{e+=t.toString()}),t.on(`end`,()=>{n.writeHead(200,{"Content-Type":`application/json`,"Access-Control-Allow-Origin":`*`}),n.end(`{"ok":true}`);try{let t=JSON.parse(e);m?.(t)}catch{}});return}if(t.method===`OPTIONS`){n.writeHead(204,{"Access-Control-Allow-Origin":`*`,"Access-Control-Allow-Methods":`POST`,"Access-Control-Allow-Headers":`Content-Type`}),n.end();return}n.writeHead(200,{"Content-Type":`text/html; charset=utf-8`}),n.end(d)});r.listen(0,`127.0.0.1`,()=>{let i=r.address();if(typeof i==`object`&&i){b=r;let n=`http://127.0.0.1:${i.port}`;_=setTimeout(()=>{if(!e)try{c(process.platform===`win32`?`start "" "${n}"`:process.platform===`darwin`?`open "${n}"`:`xdg-open "${n}"`)}catch{}},8e3),_.unref(),t(n)}else n(Error(`Failed to start present server`))}),setTimeout(()=>{r.close(),b===r&&(b=null)},300*1e3).unref()})}catch{}let v=g?`${s}\n\n---\n🌐 **Dashboard opened in browser:** ${g}\n\n**IMPORTANT:** You MUST now open this URL using the \`openBrowserPage\` tool (Simple Browser). If that tool is unavailable, open the URL in the system browser as a fallback. If neither works, ask the user to open the URL manually.`:s;if(h.length>0&&a?.available&&p)try{let e=await Promise.race([p,new Promise((e,t)=>setTimeout(()=>t(Error(`timeout`)),300*1e3))]);return{content:[{type:`text`,text:`${v}\n\n✅ **Selected:** ${e.actionId} = \`${e.value}\``},f]}}catch{return{content:[{type:`text`,text:`${v}\n\n⚠️ *No selection received (timed out).*`},f]}}return{content:[{type:`text`,text:v},f]}}function T(e,r,i,a){let o=Array.isArray(i)?i:[],s=n(e,r);if(o.length>0){let e=[``];for(let t=0;t<o.length;t++){let n=o[t],r=typeof n.label==`string`?n.label:`Action ${t+1}`;if(n.type===`select`&&Array.isArray(n.options)){let i=n.options.map(e=>typeof e==`string`?e:e.label).join(`, `);e.push(`${t+1}. **${r}** — choose: ${i}`)}else e.push(`${t+1}. **${r}**`)}s+=`\n${e.join(`
+`)}`}let c=u({uri:`ui://kb/present-static.html`,content:{type:`rawHtml`,htmlString:t(e,r,i,a)},encoding:`text`,adapters:{mcpApps:{enabled:!0}}});return{content:[{type:`text`,text:s},c],structuredContent:{actions:o}}}export{w as formatAsBrowser,T as formatAsHtml,S as getPresentHtml,C as registerPresentTool,x as resolvePresentHtml};

package/packages/server/dist/tools/present.tool.d.ts

@@ -1,7 +1,2 @@
-import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
-import { Elicitor } from "../../../elicitation/dist/index.js";
-
-//#region packages/server/src/tools/present.tool.d.ts
-declare function registerPresentTool(server: McpServer, elicitor?: Elicitor): void;
-//#endregion
+import { registerPresentTool } from "./present/tool.js";
 export { registerPresentTool };