@vpxa/aikit 0.1.1

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

@@ -0,0 +1,18 @@
+import { TypedBlock } from "./helpers.js";
+
+//#region packages/server/src/tools/present/html.d.ts
+declare function contentToHtml(title: string | undefined, content: unknown): string;
+declare function renderBlockAsHtml(block: TypedBlock): string;
+declare function arrayToHtmlTable(rows: Record<string, unknown>[]): string;
+declare function metricsToHtml(metrics: Array<{
+  label: string;
+  value: string | number;
+}>): string;
+declare function cardsToHtml(cards: Record<string, unknown>[]): string;
+declare function objectToHtmlTree(obj: Record<string, unknown>): string;
+declare function graphToMermaidRaw(data: {
+  nodes: unknown[];
+  edges: unknown[];
+}): string;
+//#endregion
+export { arrayToHtmlTable, cardsToHtml, contentToHtml, graphToMermaidRaw, metricsToHtml, objectToHtmlTree, renderBlockAsHtml };

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

@@ -0,0 +1,5 @@
+import{escHtml as e}from"../present-utils.js";import{renderChecklistHtml as t,renderComparisonHtml as n,renderProgressHtml as r,renderPromptHtml as i,renderStatusBoardHtml as a,renderTimelineHtml as o}from"../present-blocks.js";import{renderChartAsHtml as s}from"../present-charts.js";import{formatValue as c,isTypedBlock as l,normalizeBlock as u,sanitizeId as d}from"./helpers.js";import{marked as f}from"marked";f.setOptions({async:!1,gfm:!0,breaks:!0}),f.use({renderer:{html(t){return e(t.text)}}});function p(t,n){let r=[];if(t&&r.push(`<h1>${e(t)}</h1>`),typeof n==`string`)r.push(`<div class="md-content">${f.parse(n)}</div>`);else if(Array.isArray(n))if(n.length===0)r.push(`<p><em>empty</em></p>`);else if(l(n[0]))for(let e of n)r.push(m(u(e)));else typeof n[0]==`object`&&n[0]!==null?r.push(h(n)):r.push(`<ul>${n.map(t=>`<li>${e(String(t))}</li>`).join(``)}</ul>`);else if(typeof n==`object`&&n){let t=n;if(Array.isArray(t.blocks)&&t.blocks.length>0)for(let n of t.blocks)l(n)?r.push(m(u(n))):r.push(`<p>${e(String(n))}</p>`);else Array.isArray(t.metrics)?r.push(g(t.metrics)):Array.isArray(t.nodes)&&Array.isArray(t.edges)?(r.push(`<pre class="mermaid">${e(y(t))}</pre>`),r.push(`<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"><\/script>`),r.push(`<script>mermaid.run();<\/script>`)):r.push(v(t))}else r.push(`<p>${e(String(n))}</p>`);return r.join(`
+`)}function m(c){let l=[];switch(c.title&&l.push(`<h2>${e(c.title)}</h2>`),c.type){case`markdown`:l.push(`<div class="md-content">${f.parse(String(c.value??``))}</div>`);break;case`code`:l.push(`<pre><code>${e(String(c.value??``))}</code></pre>`);break;case`mermaid`:l.push(`<pre class="mermaid">${e(String(c.value??``))}</pre>`);break;case`table`:if(Array.isArray(c.value)){let e=c.value;if(e.length>0&&Array.isArray(e[0])){let t=e,n=t[0].map(String),r=t.slice(1).map(e=>Object.fromEntries(n.map((t,n)=>[t,e[n]])));l.push(h(r))}else l.push(h(e))}else if(c.value&&typeof c.value==`object`&&`headers`in c.value&&`rows`in c.value){let{headers:e,rows:t}=c.value,n=t.map(t=>Object.fromEntries(e.map((e,n)=>[e,t[n]])));l.push(h(n))}break;case`metrics`:{let e;Array.isArray(c.value)?e=c.value:c.value&&typeof c.value==`object`&&(e=Object.entries(c.value).map(([e,t])=>({label:e,value:String(t)}))),e&&l.push(g(e));break}case`cards`:Array.isArray(c.value)&&l.push(_(c.value));break;case`tree`:c.value&&typeof c.value==`object`&&l.push(v(c.value));break;case`graph`:c.value&&typeof c.value==`object`&&l.push(`<pre class="mermaid">${e(y(c.value))}</pre>`);break;case`chart`:{let e=c.value;if(e&&!e.chartType&&e.type&&Array.isArray(e.labels)&&Array.isArray(e.datasets)){let t=e.labels,n=e.datasets,r=n.map((e,t)=>e.label??`series${t+1}`),i=t.map((e,t)=>{let i={_label:e};return n.forEach((e,n)=>{i[r[n]]=e.data[t]??0}),i}),a={type:`chart`,title:c.title,value:{chartType:String(e.type),data:i,xKey:`_label`,yKeys:r}};l.push(s(a))}else l.push(s(c));break}case`timeline`:{let e=c.value;Array.isArray(e)&&(e={items:e.map(e=>({title:String(e.event??e.title??``),phase:e.date==null?e.phase==null?void 0:String(e.phase):String(e.date),description:e.description==null?void 0:String(e.description),status:e.status??`done`}))}),e&&l.push(o(e));break}case`checklist`:c.value&&l.push(t(c.value));break;case`comparison`:c.value&&l.push(n(c.value));break;case`status-board`:c.value&&l.push(a(c.value));break;case`prompt`:c.value&&l.push(i(c.value));break;case`progress`:c.value&&l.push(r(c.value));break;case`text`:l.push(`<div class="md-content">${f.parse(String(c.value??``))}</div>`);break;case`heading`:{let t=Math.min(Math.max(Number(c.level)||2,1),6);l.push(`<h${t}>${e(String(c.value??``))}</h${t}>`);break}case`paragraph`:l.push(`<p>${e(String(c.value??``))}</p>`);break;case`separator`:l.push(`<hr class="separator">`);break;default:l.push(`<pre>${e(JSON.stringify(c.value,null,2))}</pre>`)}return l.join(`
+`)}function h(t){if(t.length===0)return`<p><em>empty table</em></p>`;let n=Object.keys(t[0]);return`<div class="table-wrap"><table><thead><tr>${n.map(t=>`<th>${e(t)}</th>`).join(``)}</tr></thead><tbody>${t.map(t=>`<tr>${n.map(n=>`<td>${e(String(t[n]??``))}</td>`).join(``)}</tr>`).join(`
+`)}</tbody></table></div>`}function g(t){return`<div class="metric-grid">${t.map(t=>`<div class="metric"><div class="metric-value">${e(String(t.value))}</div><div class="metric-label">${e(t.label)}</div></div>`).join(``)}</div>`}function _(t){return`<div class="card-grid">${t.map(t=>{let n=[`<div class="card">`];return t.title&&n.push(`<div class="card-title">${e(String(t.title))}</div>`),(t.body||t.description)&&n.push(`<div class="card-body">${e(String(t.body??t.description))}</div>`),(t.badge||t.status)&&n.push(`<span class="badge">${e(String(t.badge??t.status))}</span>`),n.push(`</div>`),n.join(``)}).join(``)}</div>`}function v(t){let n=[];for(let[r,i]of Object.entries(t))typeof i==`object`&&i&&!Array.isArray(i)?n.push(`<div class="tree-node"><span class="tree-key">${e(r)}:</span><div class="tree-children">${v(i)}</div></div>`):n.push(`<div class="tree-node"><span class="tree-key">${e(r)}:</span> ${e(c(i))}</div>`);return n.join(``)}function y(e){let t=[`graph LR`];for(let n of e.nodes){let e=d(String(n.id??n.name??``)),r=String(n.label??n.name??e);t.push(`  ${e}["${r}"]`)}for(let n of e.edges){let e=d(String(n.source??n.from??``)),r=d(String(n.target??n.to??``)),i=n.label?`|${String(n.label)}|`:``;t.push(`  ${e} -->${i} ${r}`)}return t.join(`
+`)}export{h as arrayToHtmlTable,_ as cardsToHtml,p as contentToHtml,y as graphToMermaidRaw,g as metricsToHtml,v as objectToHtmlTree,m as renderBlockAsHtml};

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

@@ -0,0 +1,2 @@
+import { registerPresentTool } from "./tool.js";
+export { registerPresentTool };

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

@@ -0,0 +1 @@
+import{registerPresentTool as e}from"./tool.js";export{e as registerPresentTool};

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

@@ -0,0 +1,17 @@
+import { TypedBlock } from "./helpers.js";
+
+//#region packages/server/src/tools/present/markdown.d.ts
+declare function buildMarkdown(title: string | undefined, content: unknown): string;
+declare function renderBlockAsMarkdown(block: TypedBlock): string;
+declare function arrayToMarkdownTable(rows: Record<string, unknown>[]): string;
+declare function metricsToMarkdown(metrics: Array<{
+  label: string;
+  value: string | number;
+}>): string;
+declare function graphToMermaid(data: {
+  nodes: unknown[];
+  edges: unknown[];
+}): string;
+declare function objectToMarkdownTree(obj: Record<string, unknown>, indent?: number): string;
+//#endregion
+export { arrayToMarkdownTable, buildMarkdown, graphToMermaid, metricsToMarkdown, objectToMarkdownTree, renderBlockAsMarkdown };

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

@@ -0,0 +1,8 @@
+import{formatValue as e,isTypedBlock as t,normalizeBlock as n,sanitizeId as r}from"./helpers.js";function i(e,r){let i=[];if(e&&i.push(`# ${e}\n`),typeof r==`string`)i.push(r);else if(Array.isArray(r))if(r.length===0)i.push(`*(empty)*`);else if(t(r[0]))for(let e of r)i.push(a(n(e)));else if(typeof r[0]==`object`&&r[0]!==null)i.push(o(r));else for(let e of r)i.push(`- ${String(e)}`);else if(typeof r==`object`&&r){let e=r;if(Array.isArray(e.blocks)&&e.blocks.length>0)for(let r of e.blocks)t(r)?i.push(a(n(r))):i.push(String(r));else Array.isArray(e.nodes)&&Array.isArray(e.edges)?i.push(c(e)):Array.isArray(e.metrics)?i.push(s(e.metrics)):i.push(l(e))}else i.push(String(r));return i.join(`
+`)}function a(e){let t=[];switch(e.title&&t.push(`## ${e.title}\n`),e.type){case`markdown`:t.push(String(e.value??``));break;case`code`:t.push(`\`\`\`${e.language??``}\n${String(e.value??``)}\n\`\`\``);break;case`mermaid`:t.push(`\`\`\`mermaid\n${String(e.value??``)}\n\`\`\``);break;case`table`:Array.isArray(e.value)&&t.push(o(e.value));break;case`metrics`:Array.isArray(e.value)&&t.push(s(e.value));break;case`graph`:e.value&&typeof e.value==`object`&&t.push(c(e.value));break;case`cards`:if(Array.isArray(e.value))for(let n of e.value)t.push(`### ${n.title??`Card`}`),(n.body||n.description)&&t.push(String(n.body??n.description)),(n.badge||n.status)&&t.push(`> **${n.badge??n.status}**`),t.push(``);break;case`tree`:e.value&&typeof e.value==`object`&&t.push(l(e.value));break;case`chart`:{let n=e.value;n?.data&&Array.isArray(n.data)&&t.push(`*${String(n.chartType??`chart`)} chart — ${n.data.length} data points*`);break}case`timeline`:{let n=e.value;if(n?.items)for(let e of n.items){let n=e.status===`done`?`✅`:e.status===`active`?`🔄`:e.status===`error`?`❌`:`⬜`;t.push(`${n} **${e.title}**${e.description?` — ${e.description}`:``}`)}break}case`checklist`:{let n=e.value;if(n?.items)for(let e of n.items)t.push(`- [${e.checked?`x`:` `}] ${e.label}${e.note?` — ${e.note}`:``}`);break}case`comparison`:{let n=e.value;if(n?.columns&&n.columns.length>0){let e=Math.max(...n.columns.map(e=>e.items?.length??0)),r=n.columns.map(e=>e.title);t.push(`| ${r.join(` | `)} |`),t.push(`| ${r.map(()=>`---`).join(` | `)} |`);for(let r=0;r<e;r++)t.push(`| ${n.columns.map(e=>e.items?.[r]??``).join(` | `)} |`)}break}case`status-board`:{let n=e.value;if(n?.items)for(let e of n.items){let n=e.status===`success`?`🟢`:e.status===`warning`?`🟡`:e.status===`error`?`🔴`:e.status===`info`?`🔵`:`⚪`;t.push(`${n} **${e.label}**${e.detail?` — ${e.detail}`:``}`)}break}case`prompt`:{let n=e.value;n?.question&&(t.push(`> **${n.question}**`),n.context&&t.push(`> ${n.context}`));break}case`progress`:{let n=e.value;if(n?.items)for(let e of n.items){let n=e.max??100,r=n>0?Math.round(e.value/n*100):0,i=Math.round(r/5),a=`█`.repeat(i)+`░`.repeat(20-i);t.push(`${e.label}: ${a} ${r}%`)}break}case`text`:t.push(String(e.value??``));break;case`heading`:{let n=Math.min(Math.max(Number(e.level)||2,1),6);t.push(`${`#`.repeat(n)} ${String(e.value??``)}\n`);break}case`paragraph`:t.push(String(e.value??``));break;case`separator`:t.push(`---
+`);break;default:t.push(JSON.stringify(e.value,null,2))}return t.push(``),t.join(`
+`)}function o(e){if(e.length===0)return`*(empty table)*`;let t=Object.keys(e[0]),n=[];n.push(`| ${t.join(` | `)} |`),n.push(`| ${t.map(()=>`---`).join(` | `)} |`);for(let r of e)n.push(`| ${t.map(e=>String(r[e]??``)).join(` | `)} |`);return n.join(`
+`)}function s(e){return e.map(e=>`- **${e.label}**: ${e.value}`).join(`
+`)}function c(e){let t=["```mermaid",`graph LR`];for(let n of e.nodes){let e=r(String(n.id??n.name??``)),i=String(n.label??n.name??e);t.push(`  ${e}["${i}"]`)}for(let n of e.edges){let e=r(String(n.source??n.from??``)),i=r(String(n.target??n.to??``)),a=n.label?`|${String(n.label)}|`:``;t.push(`  ${e} -->${a} ${i}`)}return t.push("```"),t.join(`
+`)}function l(t,n=0){let r=`  `.repeat(n),i=[];for(let[a,o]of Object.entries(t))typeof o==`object`&&o&&!Array.isArray(o)?(i.push(`${r}- **${a}**:`),i.push(l(o,n+1))):i.push(`${r}- **${a}**: ${e(o)}`);return i.join(`
+`)}export{o as arrayToMarkdownTable,i as buildMarkdown,c as graphToMermaid,s as metricsToMarkdown,l as objectToMarkdownTree,a as renderBlockAsMarkdown};

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

@@ -0,0 +1,14 @@
+//#region packages/server/src/tools/present/templates.d.ts
+declare function buildTemplateHtml(template: string, content: unknown): string;
+declare function buildListSortHtml(data: Record<string, unknown>): string;
+declare function buildDataTableHtml(data: Record<string, unknown>): string;
+declare function buildPickerHtml(data: Record<string, unknown>): string;
+declare function buildFlameGraphHtml(data: Record<string, unknown>): string;
+declare function buildFormHtml(data: Record<string, unknown>): string;
+declare function buildTimelineHtml(data: Record<string, unknown>): string;
+declare function buildKanbanHtml(data: Record<string, unknown>): string;
+declare function buildTreeHtml(data: Record<string, unknown>): string;
+declare function buildDiffViewHtml(data: Record<string, unknown>): string;
+declare function buildDashboardHtml(data: Record<string, unknown>): string;
+//#endregion
+export { buildDashboardHtml, buildDataTableHtml, buildDiffViewHtml, buildFlameGraphHtml, buildFormHtml, buildKanbanHtml, buildListSortHtml, buildPickerHtml, buildTemplateHtml, buildTimelineHtml, buildTreeHtml };

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(--aikit-surface);border:1px solid var(--aikit-border);border-radius:8px;
+    cursor:grab;transition:all .15s;user-select:none}
+  .sort-item:hover{border-color:var(--aikit-accent)}
+  .sort-item.dragging{opacity:.4;transform:scale(.98)}
+  .sort-item.drag-over{border-color:var(--aikit-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(--aikit-muted);cursor:grab}
+  .sort-label{flex:1;color:var(--aikit-text);font-family:'SF Mono',Consolas,monospace;font-size:13px}
+  .sort-pos{font-size:12px;color:var(--aikit-muted);font-variant-numeric:tabular-nums;
+    min-width:28px;text-align:right}
+  .sort-status{margin-top:12px;padding:10px 14px;background:var(--aikit-surface);
+    border-radius:6px;font-size:12px;color:var(--aikit-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(--aikit-surface);border-radius:8px}
+  .dt-stat-value{font-size:24px;font-weight:700;color:var(--aikit-accent)}
+  .dt-stat-label{font-size:11px;color:var(--aikit-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(--aikit-surface);border:1px solid var(--aikit-border);
+    border-radius:8px;color:var(--aikit-text);font-size:13px;outline:none}
+  .dt-search:focus{border-color:var(--aikit-accent)}
+  .dt-count{font-size:12px;color:var(--aikit-muted);white-space:nowrap}
+  .dt-export{padding:6px 14px;background:var(--aikit-surface);border:1px solid var(--aikit-border);
+    border-radius:6px;color:var(--aikit-text);cursor:pointer;font-size:12px}
+  .dt-export:hover{border-color:var(--aikit-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(--aikit-border);
+    color:var(--aikit-muted);cursor:pointer;user-select:none;white-space:nowrap;font-weight:600}
+  .dt-table th:hover{color:var(--aikit-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(--aikit-border);color:var(--aikit-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(--aikit-surface);border-radius:10px;
+    margin-bottom:12px;overflow-x:auto;flex-wrap:wrap}
+  .pk-tab{padding:7px 16px;border:none;background:transparent;color:var(--aikit-muted);
+    border-radius:8px;cursor:pointer;font-size:12px;white-space:nowrap;transition:all .15s}
+  .pk-tab:hover{color:var(--aikit-text)}
+  .pk-tab.active{background:var(--aikit-accent);color:#fff}
+  .pk-search{width:100%;padding:9px 14px;margin-bottom:10px;background:var(--aikit-surface);
+    border:1px solid var(--aikit-border);border-radius:8px;color:var(--aikit-text);font-size:13px;
+    outline:none;box-sizing:border-box}
+  .pk-search:focus{border-color:var(--aikit-accent)}
+  .pk-summary{font-size:12px;color:var(--aikit-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(--aikit-border);transition:background .1s}
+  .pk-item:hover{background:rgba(255,255,255,.03)}
+  .pk-item input[type=checkbox]{accent-color:var(--aikit-accent);width:16px;height:16px}
+  .pk-item-label{flex:1;color:var(--aikit-text);font-size:13px}
+  .pk-item-status{font-size:11px;padding:2px 10px;border-radius:12px;
+    background:var(--aikit-surface2);color:var(--aikit-muted)}
+  .pk-item-status.success{background:rgba(78,201,176,.15);color:var(--aikit-success)}
+  .pk-tags{display:flex;gap:4px}
+  .pk-tag{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--aikit-surface2);color:var(--aikit-muted)}
+  .pk-apply{margin-top:12px;width:100%;padding:10px;background:var(--aikit-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(--aikit-surface);border:1px solid var(--aikit-border);color:var(--aikit-text);
+    padding:4px 12px;border-radius:6px;cursor:pointer;font-size:12px}
+  .fg-crumb:hover{border-color:var(--aikit-accent)}
+  .fg-sep{color:var(--aikit-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(--aikit-muted);padding:10px 0;
+    border-top:1px solid var(--aikit-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(--aikit-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
+  .fm-input{padding:9px 14px;background:var(--aikit-surface);border:1px solid var(--aikit-border);
+    border-radius:8px;color:var(--aikit-text);font-size:13px;outline:none;font-family:inherit;width:100%;box-sizing:border-box}
+  .fm-input:focus{border-color:var(--aikit-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(--aikit-text);cursor:pointer}
+  .fm-check-label input{accent-color:var(--aikit-accent)}
+  .fm-submit{margin-top:8px;width:100%;padding:10px;background:var(--aikit-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(--aikit-surface);border:1px solid var(--aikit-border);border-radius:10px;
+    padding:16px;height:fit-content;position:sticky;top:20px}
+  .fm-preview-title{font-size:11px;color:var(--aikit-muted);text-transform:uppercase;
+    letter-spacing:.5px;margin-bottom:10px}
+  .fm-preview-json{font-size:12px;color:var(--aikit-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(--aikit-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(--aikit-text,#e5e7eb);font:600 13px/1.4 var(--aikit-font-sans,system-ui,sans-serif)}
+  .tl-time{color:var(--aikit-muted,#9ca3af);font:400 11px var(--aikit-font-sans,system-ui,sans-serif);margin-top:2px}
+  .tl-desc{color:var(--aikit-muted,#9ca3af);font:400 12px/1.5 var(--aikit-font-sans,system-ui,sans-serif);margin-top:4px}
+  .tl-cat{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--aikit-surface,#252526);
+    color:var(--aikit-muted,#9ca3af);font:500 10px var(--aikit-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(--aikit-border,#3c3c3c);border-radius:8px;background:var(--aikit-surface,#252526)}
+  .kbn-col-hdr{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--aikit-border,#3c3c3c)}
+  .kbn-col-dot{width:10px;height:10px;border-radius:50%}
+  .kbn-col-title{flex:1;color:var(--aikit-text,#e5e7eb);font:600 13px var(--aikit-font-sans,system-ui,sans-serif)}
+  .kbn-col-count{padding:2px 8px;border-radius:999px;background:var(--aikit-surface2,#2d2d30);color:var(--aikit-muted,#9ca3af);font:600 11px var(--aikit-font-sans,system-ui,sans-serif)}
+  .kbn-cards{display:grid;gap:8px;padding:10px}
+  .kbn-card{padding:10px;border:1px solid var(--aikit-border,#3c3c3c);border-left-width:3px;border-radius:6px;background:var(--aikit-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(--aikit-text,#e5e7eb);font:600 13px/1.4 var(--aikit-font-sans,system-ui,sans-serif)}
+  .kbn-card-desc{color:var(--aikit-muted,#9ca3af);font:400 12px/1.4 var(--aikit-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(--aikit-surface,#252526);color:var(--aikit-muted,#9ca3af);font:500 10px var(--aikit-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(--aikit-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(--aikit-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(--aikit-text,#e5e7eb)}
+  .tr-row:hover{background:var(--aikit-surface2,#2d2d30)}
+  .tr-toggle{border:0;background:0;color:var(--aikit-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(--aikit-text,#e5e7eb)}
+  .tr-meta{color:var(--aikit-muted,#9ca3af);font-size:11px;margin-left:8px}
+  .tr-children{margin-left:4px;padding-left:10px;border-left:1px dashed var(--aikit-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(--aikit-surface,#252526);border-radius:6px;color:var(--aikit-text,#e5e7eb);font:600 13px var(--aikit-font-sans,system-ui,sans-serif);margin-bottom:12px}
+  .dv-add{color:#22c55e}.dv-del{color:#ef4444}
+  .dv-file{border:1px solid var(--aikit-border,#3c3c3c);border-radius:6px;margin-bottom:8px;overflow:hidden}
+  .dv-file-hdr{padding:10px 12px;background:var(--aikit-surface,#252526);cursor:pointer;color:var(--aikit-text,#e5e7eb);font:500 13px var(--aikit-font-sans,system-ui,sans-serif)}
+  .dv-hunk{border-top:1px solid var(--aikit-border,#3c3c3c)}
+  .dv-hunk-hdr{padding:4px 12px;background:var(--aikit-surface2,#2d2d30);color:var(--aikit-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(--aikit-muted,#9ca3af)}
+  .dv-ln{display:inline-block;width:40px;text-align:right;margin-right:8px;color:var(--aikit-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(--aikit-border,#3c3c3c);border-left-width:4px;border-radius:8px;background:var(--aikit-surface,#252526)}
+  .db-label{color:var(--aikit-muted,#9ca3af);font:600 11px var(--aikit-font-sans,system-ui,sans-serif);text-transform:uppercase;letter-spacing:.06em}
+  .db-value{color:var(--aikit-text,#e5e7eb);font:700 24px var(--aikit-font-sans,system-ui,sans-serif);margin-top:6px}
+  .db-trend{font:600 12px var(--aikit-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(--aikit-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(--aikit-muted,#9ca3af);font:400 12px var(--aikit-font-sans,system-ui,sans-serif);border-bottom:1px solid var(--aikit-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,27 @@
+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: {
+    title?: string;
+    content?: unknown;
+    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:{title:e,content:r,actions:o}}}export{w as formatAsBrowser,T as formatAsHtml,S as getPresentHtml,C as registerPresentTool,x as resolvePresentHtml};