@vpxa/kb 0.1.24 → 0.1.26

package/packages/server/dist/tools/present-blocks.d.ts

@@ -0,0 +1,46 @@
+//#region packages/server/src/tools/present-blocks.d.ts
+/**
+ * Present Blocks — New block-type renderers.
+ *
+ * Each function returns an HTML string that pairs with classes
+ * already defined in present-theme.ts.
+ */
+interface TimelineItem {
+  phase?: string;
+  title: string;
+  description?: string;
+  status?: 'done' | 'active' | 'pending' | 'error';
+}
+interface ChecklistItem {
+  label: string;
+  checked?: boolean;
+  note?: string;
+}
+interface ComparisonColumn {
+  title: string;
+  items: string[];
+}
+interface StatusItem {
+  label: string;
+  status: 'success' | 'warning' | 'error' | 'info' | 'pending';
+  detail?: string;
+}
+interface PromptValue {
+  question: string;
+  context?: string;
+  placeholder?: string;
+}
+interface ProgressItem {
+  label: string;
+  value: number;
+  max?: number;
+  color?: string;
+}
+declare function renderTimelineHtml(value: unknown): string;
+declare function renderChecklistHtml(value: unknown): string;
+declare function renderComparisonHtml(value: unknown): string;
+declare function renderStatusBoardHtml(value: unknown): string;
+declare function renderPromptHtml(value: unknown): string;
+declare function renderProgressHtml(value: unknown): string;
+//#endregion
+export { ChecklistItem, ComparisonColumn, ProgressItem, PromptValue, StatusItem, TimelineItem, renderChecklistHtml, renderComparisonHtml, renderProgressHtml, renderPromptHtml, renderStatusBoardHtml, renderTimelineHtml };

package/packages/server/dist/tools/present-blocks.js

@@ -0,0 +1,27 @@
+import{escHtml as e}from"./present-utils.js";const t=e;function n(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="timeline">${n.items.map(e=>{let n=e.status??`pending`,r=e.phase?`<div class="timeline-phase">${t(e.phase)}</div>`:``,i=e.description?`<div class="timeline-desc">${t(e.description)}</div>`:``;return`<div class="timeline-item">
+      <div class="timeline-dot ${n}"></div>
+      ${r}
+      <div class="timeline-title">${t(e.title)}</div>
+      ${i}
+    </div>`}).join(``)}</div>`}function r(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="checklist">${n.items.map(e=>{let n=e.checked?`checked`:``,r=e.checked?`✓`:``,i=e.note?`<div class="checklist-note">${t(e.note)}</div>`:``;return`<div class="checklist-item ${n}">
+      <div class="checklist-check ${n}">${r}</div>
+      <div>
+        <div class="checklist-label">${t(e.label)}</div>
+        ${i}
+      </div>
+    </div>`}).join(``)}</div>`}function i(e){let n=e;if(!n?.columns||!Array.isArray(n.columns)||n.columns.length===0)return``;let r=n.columns.length,i=Math.max(...n.columns.map(e=>e.items?.length??0));return`<div class="comparison-grid" style="grid-template-columns:repeat(${r},1fr)">${n.columns.map(e=>{let n=`<div class="comparison-header">${t(e.title)}</div>`,r=[];for(let n=0;n<i;n++){let i=e.items?.[n]??``;r.push(`<div class="comparison-item">${t(i)}</div>`)}return`<div class="comparison-col">${n}${r.join(``)}</div>`}).join(``)}</div>`}function a(e){let n=e;return!n?.items||!Array.isArray(n.items)?``:`<div class="status-board">${n.items.map(e=>{let n=e.detail?`<span class="status-detail">${t(e.detail)}</span>`:``;return`<div class="status-row">
+      <div class="status-indicator ${e.status??`pending`}"></div>
+      <span class="status-label">${t(e.label)}</span>
+      ${n}
+    </div>`}).join(``)}</div>`}function o(e){let n=e;if(!n?.question)return``;let r=n.context?`<div class="prompt-context">${t(n.context)}</div>`:``,i=n.placeholder?`<div class="prompt-placeholder">${t(n.placeholder)}</div>`:``;return`<div class="prompt-block">
+    <div class="prompt-question">${t(n.question)}</div>
+    ${r}${i}
+  </div>`}function s(e){let n=e;if(!n?.items||!Array.isArray(n.items))return``;let r=e=>e>=100?`var(--success)`:e>=60?`var(--primary)`:e>=30?`var(--warning)`:`var(--error)`;return`<div class="progress-list">${n.items.map(e=>{let n=e.max??100,i=n>0?Math.min(100,e.value/n*100):0,a=e.color??r(i);return`<div class="progress-item">
+      <div class="progress-header">
+        <span class="progress-label">${t(e.label)}</span>
+        <span class="progress-value">${e.value}/${n}</span>
+      </div>
+      <div class="progress-track">
+        <div class="progress-fill" style="width:${i.toFixed(1)}%;background:${a}"></div>
+      </div>
+    </div>`}).join(``)}</div>`}export{r as renderChecklistHtml,i as renderComparisonHtml,s as renderProgressHtml,o as renderPromptHtml,a as renderStatusBoardHtml,n as renderTimelineHtml};

package/packages/server/dist/tools/present-charts.d.ts

@@ -0,0 +1,31 @@
+//#region packages/server/src/tools/present-charts.d.ts
+/**
+ * Present Charts — Pure SVG chart rendering engine.
+ *
+ * Supports: line, area, bar, horizontal-bar, pie, donut, sparkline, heatmap.
+ * Uses CSS custom properties (--chart-1 … --chart-12) from present-theme.ts.
+ * Zero external dependencies.
+ */
+interface ChartBlock {
+  type: 'chart';
+  title?: string;
+  value: ChartValue;
+}
+interface ChartValue {
+  chartType: 'line' | 'area' | 'bar' | 'horizontal-bar' | 'pie' | 'donut' | 'sparkline' | 'heatmap';
+  data: Record<string, unknown>[];
+  xKey: string;
+  yKeys: string[];
+  title?: string;
+  height?: number;
+  showLegend?: boolean;
+  showGrid?: boolean;
+  config?: Record<string, unknown>;
+}
+/**
+ * Render a chart block as an HTML string containing an inline SVG.
+ * Returns a wrapping `<div class="chart-container">` with optional title and legend.
+ */
+declare function renderChartAsHtml(block: ChartBlock): string;
+//#endregion
+export { ChartBlock, ChartValue, renderChartAsHtml };

package/packages/server/dist/tools/present-charts.js

@@ -0,0 +1,34 @@
+import{escHtml as e}from"./present-utils.js";const t=e;function n(e){return Math.abs(e)>=1e6?`${(e/1e6).toFixed(1).replace(/\.0$/,``)}M`:Math.abs(e)>=1e3?`${(e/1e3).toFixed(1).replace(/\.0$/,``)}k`:Number.isInteger(e)?String(e):e.toFixed(1)}function r(e){return`var(--chart-${e%12+1})`}let i=0;function a(e){let n=e.value;if(!n?.data?.length||!n.chartType)return`<pre>${t(JSON.stringify(e.value,null,2))}</pre>`;i++;let r=e.title||n.title?`<div class="chart-title">${t(String(e.title||n.title))}</div>`:``,a;switch(n.chartType){case`line`:a=m(n,!1);break;case`area`:a=m(n,!0);break;case`bar`:a=h(n,!1);break;case`horizontal-bar`:a=h(n,!0);break;case`pie`:a=g(n,!1);break;case`donut`:a=g(n,!0);break;case`sparkline`:a=_(n);break;case`heatmap`:a=v(n);break;default:a=`<pre>${t(JSON.stringify(n,null,2))}</pre>`}let s=n.showLegend!==!1&&n.yKeys.length>1&&n.chartType!==`sparkline`?o(n.yKeys):``;return`<div class="chart-container">${r}${a}${s}</div>`}function o(e){return`<div class="chart-legend">${e.map((e,n)=>`<span class="chart-legend-item"><span class="chart-legend-swatch" style="background:${r(n)}"></span>${t(e)}</span>`).join(``)}</div>`}const s={top:20,right:20,bottom:35,left:55};function c(e,t){return e.map(e=>Number(e[t])||0)}function l(e,t){return e.map(e=>String(e[t]??``))}function u(e){let t=1/0,n=-1/0;for(let r of e)r<t&&(t=r),r>n&&(n=r);return t===n&&(t=t===0?0:t*.9,n=n===0?1:n*1.1),[t,n]}function d(e){return e>=0?0:e}function f(e,t,r,i=5){let a=[];for(let o=0;o<=i;o++){let c=o/i,l=s.top+r-c*r,u=e+c*(t-e);a.push(`<line class="chart-grid-line" x1="${s.left}" x2="${600-s.right}" y1="${l}" y2="${l}"/>`),a.push(`<text class="chart-axis-label" x="${s.left-8}" y="${l+4}" text-anchor="end">${n(u)}</text>`)}return a.join(``)}function p(e,n,r,i){let a=Math.floor(n/50),o=Math.max(1,Math.ceil(e.length/a));return e.map((e,n)=>n%o===0?`<text class="chart-axis-label" x="${s.left+n*i+i/2}" y="${s.top+r+18}" text-anchor="middle">${t(e.length>10?`${e.slice(0,9)}…`:e)}</text>`:``).join(``)}function m(e,t){let n=(e.height??300)-s.top-s.bottom,a=600-s.left-s.right,o=l(e.data,e.xKey),m=e.data.length;if(m===0)return``;let h=a/Math.max(m-1,1),g=1/0,_=-1/0;for(let t of e.yKeys){let[n,r]=u(c(e.data,t));n<g&&(g=n),r>_&&(_=r)}g=d(g);let v=_-g||1,y=e=>s.top+n-(e-g)/v*n,b=e=>s.left+e*h,x=``,S=[];for(let a=0;a<e.yKeys.length;a++){let o=c(e.data,e.yKeys[a]),l=r(a),u=`M${o.map((e,t)=>`${b(t).toFixed(1)},${y(e).toFixed(1)}`).join(`L`)}`;if(t){let e=`ag${i}_${a}`;x+=`<linearGradient id="${e}" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="${l}" stop-opacity="0.3"/>
+        <stop offset="100%" stop-color="${l}" stop-opacity="0"/>
+      </linearGradient>`;let t=`${u}L${b(m-1).toFixed(1)},${(s.top+n).toFixed(1)}L${b(0).toFixed(1)},${(s.top+n).toFixed(1)}Z`;S.push(`<path d="${t}" fill="url(#${e})" stroke="none"/>`)}S.push(`<path d="${u}" fill="none" stroke="${l}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>`);for(let e=0;e<o.length;e++)S.push(`<circle cx="${b(e).toFixed(1)}" cy="${y(o[e]).toFixed(1)}" r="3" fill="${l}" stroke="var(--card)" stroke-width="1.5"/>`)}let C=e.height??300,w=e.showGrid===!1?``:f(g,_,n),T=p(o,a,n,m>1?h:a);return`<svg class="chart-svg" viewBox="0 0 600 ${C}" preserveAspectRatio="xMidYMid meet">
+    ${x?`<defs>${x}</defs>`:``}
+    ${w}${T}${S.join(``)}
+  </svg>`}function h(e,i){let a=(e.height??300)-s.top-s.bottom,o=600-s.left-s.right,u=l(e.data,e.xKey),d=e.data.length;if(d===0)return``;let m=e.yKeys.length,h=0;for(let t of e.yKeys)for(let n of c(e.data,t))n>h&&(h=n);h===0&&(h=1);let g=e.height??300,_=[];if(i){let i=Math.min(24,(a-(d-1)*4)/(d*m)),c=i*m+4,l=e.showGrid===!1?``:f(0,h,a),p=u.map((e,n)=>{let r=s.top+n*c+c/2,i=e.length>15?`${e.slice(0,14)}…`:e;return`<text class="chart-axis-label" x="${s.left-8}" y="${r+4}" text-anchor="end">${t(i)}</text>`}).join(``);for(let a=0;a<d;a++)for(let l=0;l<m;l++){let u=Number(e.data[a][e.yKeys[l]])||0,d=u/h*o,f=s.top+a*c+l*i;_.push(`<rect x="${s.left}" y="${f}" width="${d.toFixed(1)}" height="${i-2}" rx="3" fill="${r(l)}" opacity="0.85">
+          <title>${t(e.yKeys[l])}: ${n(u)}</title>
+        </rect>`)}return`<svg class="chart-svg" viewBox="0 0 600 ${Math.max(g,d*c+s.top+s.bottom)}" preserveAspectRatio="xMidYMid meet">
+      ${l}${p}${_.join(``)}
+    </svg>`}else{let i=o/d,c=Math.min(40,(i-8)/m),l=e.showGrid===!1?``:f(0,h,a),v=p(u,o,a,i);for(let o=0;o<d;o++)for(let l=0;l<m;l++){let u=Number(e.data[o][e.yKeys[l]])||0,d=u/h*a,f=s.left+o*i+(i-c*m)/2+l*c,p=s.top+a-d;_.push(`<rect x="${f.toFixed(1)}" y="${p.toFixed(1)}" width="${(c-2).toFixed(1)}" height="${d.toFixed(1)}" rx="3" fill="${r(l)}" opacity="0.85">
+          <title>${t(e.yKeys[l])}: ${n(u)}</title>
+        </rect>`)}return`<svg class="chart-svg" viewBox="0 0 600 ${g}" preserveAspectRatio="xMidYMid meet">
+      ${l}${v}${_.join(``)}
+    </svg>`}}function g(e,i){let a=e.height??300,s=a/2,c=a/2,u=a/2-10,d=i?u*.55:0,f=e.yKeys[0]||`value`,p=e.data.map(e=>Math.max(0,Number(e[f])||0)),m=l(e.data,e.xKey),h=p.reduce((e,t)=>e+t,0);if(h===0)return`<div style="color:var(--muted-foreground);text-align:center;padding:20px">No data</div>`;let g=[],_=-Math.PI/2;for(let e=0;e<p.length;e++){let i=p[e]/h;if(i===0)continue;let a=i*Math.PI*2,o=_,l=_+a,f=s+u*Math.cos(o),v=c+u*Math.sin(o),y=s+u*Math.cos(l),b=c+u*Math.sin(l),x=a>Math.PI?1:0,S;if(d>0){let e=s+d*Math.cos(o),t=c+d*Math.sin(o),n=s+d*Math.cos(l),r=c+d*Math.sin(l);S=`M${f.toFixed(2)},${v.toFixed(2)} A${u},${u} 0 ${x},1 ${y.toFixed(2)},${b.toFixed(2)} L${n.toFixed(2)},${r.toFixed(2)} A${d},${d} 0 ${x},0 ${e.toFixed(2)},${t.toFixed(2)}Z`}else S=`M${s},${c} L${f.toFixed(2)},${v.toFixed(2)} A${u},${u} 0 ${x},1 ${y.toFixed(2)},${b.toFixed(2)}Z`;g.push(`<path d="${S}" fill="${r(e)}" stroke="var(--background)" stroke-width="2" opacity="0.9">
+      <title>${t(m[e]||`Item ${e+1}`)}: ${n(p[e])} (${(i*100).toFixed(1)}%)</title>
+    </path>`),_=l}let v=i?`<text x="${s}" y="${c-6}" text-anchor="middle" fill="var(--foreground)" font-size="18" font-weight="700">${n(h)}</text>
+       <text x="${s}" y="${c+12}" text-anchor="middle" fill="var(--muted-foreground)" font-size="11">Total</text>`:``,y=o(m.filter((e,t)=>p[t]>0));return`<svg class="chart-svg" viewBox="0 0 ${a} ${a}" preserveAspectRatio="xMidYMid meet">
+    ${g.join(``)}${v}
+  </svg>${y}`}function _(e){let t=e.height??40,n=e.yKeys[0]||`value`,a=c(e.data,n),o=a.length;if(o===0)return``;let[s,l]=u(a),d=l-s||1,f=200/Math.max(o-1,1),p=a.map((e,n)=>`${(n*f).toFixed(1)},${(t-4-(e-s)/d*(t-8)).toFixed(1)}`),m=`spk${i}`,h=r(0);return`<svg class="chart-svg" viewBox="0 0 200 ${t}" preserveAspectRatio="xMidYMid meet" style="max-width:200px;height:${t}px">
+    <defs>
+      <linearGradient id="${m}" x1="0" y1="0" x2="0" y2="1">
+        <stop offset="0%" stop-color="${h}" stop-opacity="0.2"/>
+        <stop offset="100%" stop-color="${h}" stop-opacity="0"/>
+      </linearGradient>
+    </defs>
+    <path d="M${p.join(`L`)}L${((o-1)*f).toFixed(1)},${t}L0,${t}Z" fill="url(#${m})" stroke="none"/>
+    <polyline points="${p.join(` `)}" fill="none" stroke="${h}" stroke-width="1.5" stroke-linejoin="round"/>
+    <circle cx="${((o-1)*f).toFixed(1)}" cy="${p[o-1].split(`,`)[1]}" r="2.5" fill="${h}"/>
+  </svg>`}function v(e){let r=l(e.data,e.xKey),i=e.data.length,a=e.yKeys.length;if(i===0||a===0)return``;let o=1/0,u=-1/0;for(let t of e.yKeys)for(let n of c(e.data,t))n<o&&(o=n),n>u&&(u=n);let d=u-o||1,f=Math.min(50,(600-s.left-s.right)/i),p=Math.min(30,200/a),m=s.left+i*f+s.right,h=s.top+a*p+s.bottom,g=[];for(let n=0;n<a;n++){let r=s.top+n*p+p/2+4,i=e.yKeys[n].length>8?`${e.yKeys[n].slice(0,7)}…`:e.yKeys[n];g.push(`<text class="chart-axis-label" x="${s.left-8}" y="${r}" text-anchor="end">${t(i)}</text>`)}let _=Math.floor((m-s.left)/40),v=Math.max(1,Math.ceil(i/_));for(let e=0;e<i;e++){if(e%v!==0)continue;let n=s.left+e*f+f/2,i=r[e].length>6?`${r[e].slice(0,5)}…`:r[e];g.push(`<text class="chart-axis-label" x="${n}" y="${h-8}" text-anchor="middle">${t(i)}</text>`)}for(let c=0;c<i;c++)for(let i=0;i<a;i++){let a=Number(e.data[c][e.yKeys[i]])||0,l=(a-o)/d,u=s.left+c*f,m=s.top+i*p;g.push(`<rect x="${u}" y="${m}" width="${f-1}" height="${p-1}" rx="2" fill="var(--primary)" opacity="${(.1+l*.8).toFixed(2)}">
+        <title>${t(r[c])} / ${t(e.yKeys[i])}: ${n(a)}</title>
+      </rect>`)}return`<svg class="chart-svg" viewBox="0 0 ${m} ${h}" preserveAspectRatio="xMidYMid meet">
+    ${g.join(``)}
+  </svg>`}export{a as renderChartAsHtml};

package/packages/server/dist/tools/present-theme.d.ts

@@ -0,0 +1,14 @@
+//#region packages/server/src/tools/present-theme.d.ts
+/**
+ * Present Design System — CSS tokens and component styles.
+ *
+ * Based on notification-dashboard design tokens.
+ * Dark mode by default, professional clean aesthetic.
+ * Font: Plus Jakarta Sans via Google Fonts CDN.
+ */
+/** Google Fonts <link> tag to inject into <head>. */
+declare const FONT_LINK = "<link href=\"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">";
+/** Returns the full design system CSS string for browser-mode HTML pages. */
+declare function getDesignSystemCSS(): string;
+//#endregion
+export { FONT_LINK, getDesignSystemCSS };

package/packages/server/dist/tools/present-theme.js

@@ -0,0 +1,395 @@
+const e=`<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">`;function t(){return`
+/* ── Reset ────────────────────────────────────────────────────────── */
+*{box-sizing:border-box;margin:0;padding:0}
+
+/* ── Design Tokens ────────────────────────────────────────────────── */
+:root{
+  /* Background hierarchy */
+  --background:#0f1419;
+  --background-subtle:#141b24;
+  --foreground:#e2e8f0;
+  --card:#1a2332;
+  --card-foreground:#e2e8f0;
+
+  /* Semantic colors */
+  --primary:#818cf8;
+  --primary-glow:rgba(129,140,248,.15);
+  --primary-foreground:#1e1b4b;
+  --secondary:#2a3549;
+  --secondary-foreground:#e2e8f0;
+  --muted:#2a3549;
+  --muted-foreground:#94a3b8;
+  --accent:#1e293b;
+  --accent-foreground:#a5b4fc;
+  --destructive:#f87171;
+  --border:rgba(148,163,184,.12);
+  --border-subtle:rgba(148,163,184,.06);
+  --input:#384766;
+  --ring:#6366f1;
+
+  /* Status colors */
+  --success:#10b981;
+  --success-light:#34d399;
+  --warning:#f59e0b;
+  --warning-light:#fbbf24;
+  --error:#ef4444;
+  --error-light:#f87171;
+  --info:#0ea5e9;
+  --info-light:#38bdf8;
+
+  /* Chart palette */
+  --chart-1:#818cf8;
+  --chart-2:#38bdf8;
+  --chart-3:#34d399;
+  --chart-4:#fbbf24;
+  --chart-5:#f87171;
+  --chart-6:#a78bfa;
+  --chart-7:#f472b6;
+  --chart-8:#2dd4bf;
+  --chart-9:#fb923c;
+  --chart-10:#22d3ee;
+  --chart-11:#c084fc;
+  --chart-12:#a3e635;
+  --chart-others:#a8a29e;
+  --chart-gradient-start:0.3;
+  --chart-gradient-end:0;
+
+  /* Layout */
+  --radius:0.625rem;
+  --shadow:0 4px 24px rgba(0,0,0,.25);
+  --shadow-sm:0 1px 3px rgba(0,0,0,.2);
+}
+
+/* ── Base ─────────────────────────────────────────────────────────── */
+body{
+  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
+  background:var(--background);color:var(--foreground);
+  min-height:100vh;padding:0;line-height:1.6;font-size:14px;
+  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
+  background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(129,140,248,.08),transparent);
+}
+
+/* ── Animations ───────────────────────────────────────────────────── */
+@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
+@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
+
+/* ── Layout ───────────────────────────────────────────────────────── */
+.dashboard{max-width:1200px;margin:0 auto;padding:40px 28px}
+
+/* ── Header ───────────────────────────────────────────────────────── */
+.header{
+  padding:28px 0;margin-bottom:32px;
+  border-bottom:1px solid var(--border);
+  position:relative;
+}
+.header::after{
+  content:'';position:absolute;bottom:-1px;left:0;width:120px;height:2px;
+  background:linear-gradient(90deg,var(--primary),transparent);
+}
+.header h1{
+  font-size:1.75em;font-weight:700;color:var(--foreground);
+  letter-spacing:-0.03em;line-height:1.2;
+}
+.header .subtitle{
+  color:var(--muted-foreground);font-size:.88em;margin-top:6px;font-weight:400;
+  letter-spacing:.01em;
+}
+
+/* ── Section headings ─────────────────────────────────────────────── */
+h2{
+  font-size:1.1em;margin:32px 0 16px;color:var(--foreground);font-weight:600;
+  display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;
+  animation:fadeInUp .4s ease both;
+}
+h2::before{
+  content:'';width:3px;height:16px;background:linear-gradient(180deg,var(--primary),rgba(129,140,248,.3));border-radius:2px;flex-shrink:0;
+}
+h3{font-size:1em;margin:16px 0 8px;color:var(--foreground);font-weight:600}
+
+/* ── Rendered markdown content ────────────────────────────────────── */
+.md-content{line-height:1.7;margin:12px 0}
+.md-content h1{font-size:1.4em;font-weight:700;margin:24px 0 12px;color:var(--foreground);letter-spacing:-0.02em}
+.md-content h2{font-size:1.2em;margin:20px 0 10px;color:var(--foreground);display:block}
+.md-content h2::before{display:none}
+.md-content h3{font-size:1.05em;margin:16px 0 8px;color:var(--foreground)}
+.md-content h4{font-size:.95em;margin:12px 0 6px;color:var(--foreground);font-weight:600}
+.md-content p{margin:8px 0;color:var(--foreground)}
+.md-content strong{color:var(--foreground);font-weight:600}
+.md-content em{color:var(--muted-foreground);font-style:italic}
+.md-content a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}
+.md-content a:hover{color:var(--accent-foreground)}
+.md-content ul,.md-content ol{padding-left:24px;margin:8px 0}
+.md-content li{margin:4px 0;color:var(--foreground)}
+.md-content li::marker{color:var(--muted-foreground)}
+.md-content blockquote{
+  border-left:3px solid var(--primary);padding:10px 16px;margin:12px 0;
+  color:var(--muted-foreground);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
+}
+.md-content pre{
+  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
+  padding:16px;overflow-x:auto;margin:12px 0;
+}
+.md-content code{font-family:'JetBrains Mono','Cascadia Code','Fira Code',monospace;font-size:.88em}
+.md-content :not(pre)>code{background:var(--accent);padding:2px 6px;border-radius:4px;font-size:.85em;color:var(--accent-foreground)}
+.md-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
+.md-content th{
+  background:var(--accent);padding:10px 14px;text-align:left;font-weight:600;
+  color:var(--muted-foreground);border-bottom:2px solid var(--border);font-size:.8em;
+  text-transform:uppercase;letter-spacing:.5px;
+}
+.md-content td{padding:8px 14px;border-bottom:1px solid var(--border);color:var(--foreground)}
+.md-content tr:hover td{background:rgba(129,140,248,.04)}
+.md-content hr{border:none;border-top:1px solid var(--border);margin:24px 0}
+.md-content img{max-width:100%;border-radius:var(--radius)}
+
+/* ── Metrics grid ─────────────────────────────────────────────────── */
+.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:14px 0 28px}
+.metric{
+  background:linear-gradient(135deg,var(--card),var(--accent));
+  border:1px solid var(--border);border-radius:var(--radius);
+  padding:22px 18px;text-align:center;transition:all .2s ease;position:relative;overflow:hidden;
+  animation:fadeInUp .4s ease both;
+}
+.metric::before{
+  content:'';position:absolute;top:0;left:0;right:0;height:2px;
+  background:linear-gradient(90deg,transparent,var(--primary),transparent);opacity:0;
+  transition:opacity .2s ease;
+}
+.metric:hover{border-color:rgba(129,140,248,.3);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}
+.metric:hover::before{opacity:1}
+.metric-value{
+  font-size:1.8em;font-weight:700;color:var(--primary);
+  font-variant-numeric:tabular-nums;letter-spacing:-0.02em;
+}
+.metric-label{
+  font-size:.75em;color:var(--muted-foreground);margin-top:6px;
+  text-transform:uppercase;letter-spacing:.6px;font-weight:500;
+}
+
+/* ── Cards grid ───────────────────────────────────────────────────── */
+.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:14px 0 28px}
+.card{
+  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
+  padding:20px;transition:all .2s ease;position:relative;overflow:hidden;
+  animation:fadeInUp .4s ease both;
+}
+.card::after{
+  content:'';position:absolute;top:0;left:0;width:3px;height:0;
+  background:var(--primary);transition:height .2s ease;border-radius:0 0 2px 0;
+}
+.card:hover{border-color:rgba(129,140,248,.2);box-shadow:0 4px 20px rgba(0,0,0,.15);transform:translateY(-1px)}
+.card:hover::after{height:100%}
+.card-title{font-weight:600;font-size:.98em;margin-bottom:8px;color:var(--foreground)}
+.card-body{color:var(--muted-foreground);font-size:.88em;line-height:1.55}
+.badge{
+  display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;
+  font-size:.75em;font-weight:600;margin-top:10px;
+  background:rgba(129,140,248,.1);color:var(--primary);border:1px solid rgba(129,140,248,.15);
+}
+
+/* ── Table ─────────────────────────────────────────────────────────── */
+.table-wrap{
+  overflow-x:auto;margin:14px 0 28px;border-radius:var(--radius);border:1px solid var(--border);
+  background:var(--card);animation:fadeInUp .4s ease both;
+}
+table{width:100%;border-collapse:collapse;font-size:13px}
+thead{position:sticky;top:0;z-index:1}
+th{
+  background:var(--accent);padding:12px 16px;text-align:left;font-weight:600;
+  color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;font-size:.72em;
+  border-bottom:1px solid var(--border);cursor:pointer;user-select:none;white-space:nowrap;
+  transition:color .15s;
+}
+th:hover{color:var(--primary)}
+td{padding:10px 16px;border-bottom:1px solid var(--border-subtle);color:var(--foreground)}
+tr:hover td{background:rgba(129,140,248,.04)}
+.tool-name{font-family:'JetBrains Mono','Cascadia Code',monospace;font-size:.85em;color:var(--primary);font-weight:500}
+.category-tag{
+  display:inline-flex;padding:2px 8px;border-radius:6px;font-size:.8em;font-weight:500;
+  background:var(--accent);color:var(--muted-foreground);border:1px solid var(--border);white-space:nowrap;
+}
+
+/* ── Code blocks ──────────────────────────────────────────────────── */
+pre{
+  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
+  padding:16px;overflow-x:auto;font-size:13px;margin:12px 0;
+}
+code{font-family:'JetBrains Mono','Cascadia Code','Fira Code',monospace;font-size:.9em}
+blockquote{
+  border-left:3px solid var(--primary);padding:10px 16px;color:var(--muted-foreground);
+  margin:12px 0;background:var(--card);border-radius:0 var(--radius) var(--radius) 0;
+}
+ul,ol{padding-left:24px;margin:8px 0}
+li{margin:4px 0}
+.tree-node{padding:3px 0}
+.tree-key{font-weight:600;color:var(--primary)}
+.tree-children{margin-left:20px;border-left:2px solid var(--border);padding-left:12px}
+
+/* ── Mermaid ──────────────────────────────────────────────────────── */
+.mermaid{background:transparent !important;border:none !important}
+
+/* ── Charts ───────────────────────────────────────────────────────── */
+.chart-container{
+  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
+  padding:24px;margin:14px 0 28px;overflow:hidden;animation:fadeInUp .4s ease both;
+}
+.chart-title{font-size:.95em;font-weight:600;color:var(--foreground);margin-bottom:14px}
+.chart-svg{width:100%;display:block}
+.chart-legend{
+  display:flex;flex-wrap:wrap;gap:14px;margin-top:14px;padding-top:12px;
+  border-top:1px solid var(--border);
+}
+.chart-legend-item{display:flex;align-items:center;gap:6px;font-size:.8em;color:var(--muted-foreground)}
+.chart-legend-swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0}
+.chart-tooltip{
+  position:absolute;background:var(--card);border:1px solid var(--border);
+  border-radius:6px;padding:8px 12px;font-size:.8em;pointer-events:none;
+  box-shadow:var(--shadow);z-index:10;display:none;color:var(--foreground);
+}
+.chart-axis-label{font-size:.7em;fill:var(--muted-foreground);font-family:inherit}
+.chart-grid-line{stroke:var(--border);stroke-dasharray:3,3;stroke-width:0.5}
+
+/* ── Timeline ─────────────────────────────────────────────────────── */
+.timeline{margin:14px 0 28px;padding-left:28px;border-left:2px solid var(--border);position:relative;animation:fadeInUp .4s ease both}
+.timeline-item{position:relative;padding:0 0 28px 22px}
+.timeline-item:last-child{padding-bottom:0}
+.timeline-dot{
+  position:absolute;left:-33px;top:4px;width:12px;height:12px;
+  border-radius:50%;border:2px solid var(--border);background:var(--background);
+  transition:all .2s ease;
+}
+.timeline-dot.done{background:var(--success);border-color:var(--success);box-shadow:0 0 8px rgba(16,185,129,.3)}
+.timeline-dot.active{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px rgba(129,140,248,.15)}
+.timeline-dot.pending{background:var(--muted);border-color:var(--muted-foreground)}
+.timeline-dot.error{background:var(--error);border-color:var(--error);box-shadow:0 0 8px rgba(239,68,68,.3)}
+.timeline-phase{font-size:.7em;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:2px}
+.timeline-title{font-weight:600;color:var(--foreground);font-size:.95em}
+.timeline-desc{color:var(--muted-foreground);font-size:.85em;margin-top:4px;line-height:1.5}
+
+/* ── Checklist ────────────────────────────────────────────────────── */
+.checklist{margin:14px 0 28px}
+.checklist-item{
+  display:flex;align-items:flex-start;gap:10px;padding:10px 14px;
+  border-radius:var(--radius);transition:background .1s;
+}
+.checklist-item:hover{background:var(--accent)}
+.checklist-check{
+  width:18px;height:18px;border-radius:4px;border:2px solid var(--border);
+  flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;
+  font-size:11px;color:transparent;
+}
+.checklist-check.checked{background:var(--success);border-color:var(--success);color:#fff}
+.checklist-label{color:var(--foreground);font-size:.9em;font-weight:500}
+.checklist-item.checked .checklist-label{color:var(--muted-foreground);text-decoration:line-through}
+.checklist-note{font-size:.8em;color:var(--muted-foreground);margin-top:2px}
+
+/* ── Comparison grid ──────────────────────────────────────────────── */
+.comparison-grid{
+  display:grid;gap:0;margin:14px 0 28px;border:1px solid var(--border);
+  border-radius:var(--radius);overflow:hidden;
+}
+.comparison-col{min-width:0}
+.comparison-col:not(:last-child){border-right:1px solid var(--border)}
+.comparison-header{
+  padding:14px 16px;font-weight:600;font-size:.9em;color:var(--foreground);
+  background:var(--accent);border-bottom:2px solid var(--border);text-align:center;
+}
+.comparison-item{
+  padding:10px 16px;border-bottom:1px solid var(--border);font-size:.88em;
+  color:var(--foreground);min-height:40px;display:flex;align-items:center;
+}
+.comparison-item:last-child{border-bottom:none}
+
+/* ── Status board ─────────────────────────────────────────────────── */
+.status-board{display:flex;flex-direction:column;gap:8px;margin:14px 0 28px}
+.status-row{
+  display:flex;align-items:center;gap:12px;padding:10px 14px;
+  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
+}
+.status-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}
+.status-indicator.success{background:var(--success)}
+.status-indicator.warning{background:var(--warning)}
+.status-indicator.error{background:var(--error)}
+.status-indicator.info{background:var(--info)}
+.status-indicator.pending{background:var(--muted-foreground)}
+.status-label{font-weight:500;font-size:.9em;color:var(--foreground);flex:1}
+.status-detail{font-size:.8em;color:var(--muted-foreground)}
+
+/* ── Progress bars ────────────────────────────────────────────────── */
+.progress-list{display:flex;flex-direction:column;gap:12px;margin:14px 0 28px}
+.progress-item{display:flex;flex-direction:column;gap:4px}
+.progress-header{display:flex;justify-content:space-between;align-items:baseline}
+.progress-label{font-size:.88em;font-weight:500;color:var(--foreground)}
+.progress-value{font-size:.8em;color:var(--muted-foreground);font-variant-numeric:tabular-nums}
+.progress-track{
+  height:6px;background:var(--accent);border-radius:3px;overflow:hidden;
+}
+.progress-fill{
+  height:100%;border-radius:3px;transition:width .3s ease;
+}
+
+/* ── Prompt / Question block ──────────────────────────────────────── */
+.prompt-block{
+  background:var(--card);border:1px solid var(--primary);border-radius:var(--radius);
+  padding:20px;margin:14px 0 28px;
+}
+.prompt-question{font-size:1.05em;font-weight:600;color:var(--foreground);margin-bottom:8px}
+.prompt-context{font-size:.88em;color:var(--muted-foreground);line-height:1.6;margin-bottom:12px}
+.prompt-placeholder{
+  padding:10px 14px;background:var(--accent);border:1px dashed var(--border);
+  border-radius:var(--radius);color:var(--muted-foreground);font-size:.85em;font-style:italic;
+}
+
+/* ── Actions ──────────────────────────────────────────────────────── */
+.actions-bar{margin:32px 0}
+.actions-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
+.action-group{display:flex;flex-direction:column;gap:6px}
+.action-group label{font-size:.85em;color:var(--muted-foreground);font-weight:500}
+.action-group select{
+  padding:9px 14px;background:var(--card);border:1px solid var(--border);
+  border-radius:var(--radius);color:var(--foreground);font-size:.9em;cursor:pointer;min-width:200px;
+  font-family:inherit;
+}
+.action-group select:hover{border-color:var(--primary)}
+.action-btn{
+  padding:10px 22px;border:1px solid var(--border);border-radius:var(--radius);
+  font-size:.88em;font-weight:600;cursor:pointer;transition:all .2s ease;
+  background:var(--card);color:var(--foreground);font-family:inherit;
+}
+.action-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.2)}
+.action-primary{background:linear-gradient(135deg,var(--primary),#6366f1);color:var(--primary-foreground);border-color:transparent}
+.action-primary:hover{opacity:.9;box-shadow:0 4px 20px rgba(129,140,248,.3)}
+.action-danger{background:var(--error);color:#fff;border-color:var(--error)}
+.action-danger:hover{opacity:.9}
+.action-default:hover{border-color:var(--primary);color:var(--primary)}
+.action-feedback{
+  margin-top:14px;padding:10px 16px;border-radius:var(--radius);
+  display:none;font-weight:500;font-size:.9em;
+}
+.action-feedback.sent{
+  display:block;background:rgba(16,185,129,.1);color:var(--success);
+  border:1px solid rgba(16,185,129,.2);
+}
+
+/* ── Footer ───────────────────────────────────────────────────────── */
+.footer{
+  text-align:center;padding:24px;color:var(--muted-foreground);font-size:.75em;
+  border-top:1px solid var(--border);margin-top:48px;letter-spacing:.02em;
+}
+
+/* ── Search filter (injected for tables) ──────────────────────────── */
+.search-bar{display:flex;gap:12px;margin-bottom:14px;align-items:center}
+.search-bar input{
+  flex:1;padding:9px 14px;background:var(--card);border:1px solid var(--border);
+  border-radius:var(--radius);color:var(--foreground);font-size:.9em;outline:none;
+  transition:border-color .15s;font-family:inherit;
+}
+.search-bar input:focus{border-color:var(--primary)}
+.search-bar .count{color:var(--muted-foreground);font-size:.85em;white-space:nowrap}
+
+/* ── Scrollbar ────────────────────────────────────────────────────── */
+::-webkit-scrollbar{width:6px;height:6px}
+::-webkit-scrollbar-track{background:var(--card)}
+::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
+::-webkit-scrollbar-thumb:hover{background:var(--muted-foreground)}
+`}export{e as FONT_LINK,t as getDesignSystemCSS};

package/packages/server/dist/tools/present-utils.d.ts

@@ -0,0 +1,11 @@
+//#region packages/server/src/tools/present-utils.d.ts
+/**
+ * Shared HTML utility functions for the Present tool family.
+ *
+ * Used by present.tool.ts, present-charts.ts, and present-blocks.ts
+ * to avoid duplicating escape logic across modules.
+ */
+/** HTML-escape a string for safe insertion into HTML content and attributes. */
+declare function escHtml(s: string): string;
+//#endregion
+export { escHtml };

package/packages/server/dist/tools/present-utils.js

@@ -0,0 +1 @@
+function e(e){return e.replace(/&/g,`&amp;`).replace(/</g,`&lt;`).replace(/>/g,`&gt;`).replace(/"/g,`&quot;`)}export{e as escHtml};

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

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