@slickfast/mcp 0.7.5 → 0.7.7

package/README.md

@@ -1,30 +1,43 @@
 # SlickFast — charts & dashboards for AI agents
 
-SlickFast turns a small JSON spec into a polished, retina-quality chart — **47 chart and
-information-design types** (bar, line, pie, KPI, cards, funnel, gauge, heatmap, calendar,
-gantt, waterfall…), plus **multiple charts tiled into a single dashboard image in one call**.
-It runs as an [MCP](https://modelcontextprotocol.io) tool, so an AI agent hands it a spec and
-gets back a finished PNG (or SVG). Everything renders **locally** — nothing leaves your machine.
+**A tiny JSON spec in → a finished, retina-quality chart out. Milliseconds, a handful of
+tokens, nothing leaves your machine.**
+
+SlickFast is a **native SVG engine built for AI agents** — not a browser screenshotting a
+webpage, not a plotting library an agent has to write code against. A pure
+`spec → SVG → PNG` pipeline: **47 chart and information-design types** (bar, line, pie, KPI,
+cards, funnel, gauge, heatmap, calendar, gantt, waterfall…), plus **entire multi-chart
+dashboards tiled into one image in a single call**. It runs as an
+[MCP](https://modelcontextprotocol.io) tool, so an agent hands it a spec and gets back a
+finished PNG (or SVG).
 
 ```txt
 render_chart({ type: "bar", data: { labels: ["Q1","Q2","Q3"], series: [{ values: [12,19,8] }] } })
   → a retina PNG, rendered on your machine
 ```
 
-## Why it's built for agents
-
-- **Deterministic — same spec, same bytes, forever.** No randomness, no timestamps, no
-  headless-browser drift. Outputs are **cacheable, testable, and reproducible**, with zero
-  flaky pixel diffs. Almost no charting tool can promise this — and it's exactly what a
-  tool-calling agent needs.
-- **Never throws garbage at the model.** Empty data, a bad tile, a filtered-to-nothing series →
-  a clean, graceful frame, not a crash or a stack trace. Reliability is a feature when the
-  caller is an agent, not a human who can eyeball the error.
-- **Fails loud on real mistakes.** An unknown palette or enum is *rejected* with a clear error
-  listing the valid options — so the agent fixes it immediately instead of silently shipping the
-  wrong-looking chart.
-- **Good-looking by default.** A spec of just `{type, data}` renders a complete, well-designed
-  chart; fonts, colors, palettes, and size are optional overrides.
+## Why agents (and the people paying for their tokens) pick SlickFast
+
+- **Tokens are the real cost — a spec is nearly free.** An agent hand-writing SVG or
+  matplotlib code burns hundreds to thousands of output tokens, then often retries when it
+  doesn't render. A SlickFast spec is a few dozen tokens, and `{type, data}` alone is a
+  finished, well-designed chart. A whole dashboard is **one tool call**, not ten renders
+  and layout math.
+- **Changes are one-field edits.** Swap `bar` → `line`, change a palette, resize for a
+  slide: edit one key, re-render. The agent never rewrites code or reasons about a diff —
+  which is what makes iteration with a human ("make it dark, bigger title") actually cheap.
+- **No headless browser.** Most chart-to-image pipelines secretly spawn Puppeteer or
+  Playwright — hundreds of MB, slow cold starts, flaky output. SlickFast renders pure
+  in-memory, milliseconds per chart.
+- **Native SVG, vector-first.** Output is a few KB of crisp-at-any-scale SVG (or retina PNG
+  on demand) — small enough to cache, embed, or ship anywhere.
+- **Deterministic — same spec, same chart, every time.** No randomness, no timestamps, no
+  browser drift. Cacheable, testable, reproducible; zero flaky pixel diffs. Almost no
+  charting tool can promise this — and it's exactly what a tool-calling agent needs.
+- **Never throws garbage at the model.** Empty data, a bad tile, a filtered-to-nothing
+  series → a clean, graceful frame, not a crash or a stack trace. A real mistake (unknown
+  palette, bad enum) → a **loud error listing the valid options**, so the agent
+  self-corrects in one step.
 - **100% local & private.** Rendered and rasterized on your machine. Nothing is sent anywhere.
 
 ## Tools
@@ -41,7 +54,7 @@ render_chart({ type: "bar", data: { labels: ["Q1","Q2","Q3"], series: [{ values:
 - **`list_palettes()`** → every valid `palette` name, grouped into flat palettes and nested
   themes, with their colors. Ask *"what palettes are available?"*.
 - **`report_issue(summary, spec?)`** → *"report this bug."* Formats a bug report and returns a
-  prefilled email link you click to send — SlickFast sends nothing itself.
+  prefilled GitHub-issue link and email link you click to send — SlickFast sends nothing itself.
 
 ## Install
 
@@ -95,11 +108,19 @@ or post** — it never auto-inserts links. (The endpoint stays unadvertised duri
 **AGPL-3.0-only.** Free to use, self-host, and embed under the AGPL's terms (your friends
 running it locally are completely unaffected). Building it into a **closed-source product
 or a hosted service**? That needs the AGPL'd source opened — or a **commercial license**
-from us instead. Reach out for commercial terms.
+from us instead. Write to feedback@slickfast.com for commercial terms.
+
+## Feedback, bugs & feature requests
+
+- **GitHub:** [SlickFast/slickfast](https://github.com/SlickFast/slickfast) — bug reports and
+  feature requests via the [issue templates](https://github.com/SlickFast/slickfast/issues/new/choose).
+- **Email:** feedback@slickfast.com
+- Or ask your agent to *"report this as a SlickFast issue"* — the `report_issue` tool drafts
+  the report (with the repro spec) for you. Nothing is ever sent automatically.
 
 ## Developing locally
 
-Clone the repo, then from the package directory:
+Clone [the repo](https://github.com/SlickFast/slickfast), then from the package directory:
 
 ```bash
 cd apps/mcp

package/dist/index.js

@@ -199,6 +199,7 @@ function contrastFloor(color, bg, transparent) {
   return hslToHex(hsl.h, hsl.s, Math.max(0, Math.min(100, hsl.l + dl)));
 }
 var esc = (s) => String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var svgOpen = (W, H, font) => `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" style="max-width:100%;height:auto" font-family="${esc(font)}">`;
 var r = (n) => Math.round(n * 100) / 100;
 var fmt = (n) => (Number(n) || 0).toLocaleString("en-US");
 function pct100(vals) {
@@ -312,7 +313,7 @@ function renderBar(spec) {
   const band = plotW / labels.length;
   const barW = Math.min(band * 0.62, 96);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const y = r(yPix(v));
@@ -371,7 +372,7 @@ function renderBarGrouped(spec) {
   const n = series.length;
   const barW = groupW / n;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const y = r(yPix(v));
@@ -441,7 +442,7 @@ function renderBarStacked(spec) {
   const band = plotW / labels.length;
   const barW = Math.min(band * 0.62, 96);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const y = r(yPix(v));
@@ -520,7 +521,7 @@ function renderBarStackedH(spec) {
   const band = plotH / labels.length;
   const barH = Math.min(band * 0.62, 64);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const x = r(xPix(v));
@@ -604,7 +605,7 @@ function renderBarH(spec) {
   const band = plotH / labels.length;
   const barH = Math.min(band * 0.62, 56);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const x = r(xPix(v));
@@ -679,7 +680,7 @@ function renderDiverging(spec) {
   const band = plotW / labels.length;
   const barW = Math.min(band * 0.5, 72);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = step; v <= niceMax + 1e-9; v += step) {
     [yUp(v), yDn(v)].forEach((y) => {
@@ -757,7 +758,7 @@ function renderLollipop(spec) {
   const band = plotW / labels.length;
   const baseY = M.top + plotH;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const y = r(yPix(v));
@@ -806,7 +807,7 @@ function renderKpi(spec) {
   const pillBg = good ? isDark ? "#064e3b" : "#ecfdf5" : bad ? isDark ? "#7f1d1d" : "#fef2f2" : isDark ? "#334155" : "#f1f5f9";
   const pillTx = good ? isDark ? "#6ee7b7" : "#059669" : bad ? isDark ? "#fca5a5" : "#dc2626" : labelCol;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" rx="14" fill="${bg}"/>`);
   const portrait = H > W;
   if (!portrait) {
@@ -899,7 +900,7 @@ function renderLine(spec) {
   const n = labels.length;
   const xPix = (i) => M.left + (n > 1 ? i / (n - 1) : 0.5) * plotW;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   for (let v = 0; v <= niceMax + 1e-9; v += step) {
     const y = r(yPix(v));
@@ -1008,7 +1009,7 @@ function renderSlope(spec) {
   const { niceMax } = niceScale(Math.max(1, ...firstVals, ...lastVals));
   const yPix = (v) => M.top + plotH - v / niceMax * plotH;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   p.push(`<line x1="${leftX}" y1="${M.top}" x2="${leftX}" y2="${r(baseY)}" stroke="${guide}" stroke-width="1"/>`);
   p.push(`<line x1="${rightX}" y1="${M.top}" x2="${rightX}" y2="${r(baseY)}" stroke="${guide}" stroke-width="1"/>`);
@@ -1076,7 +1077,7 @@ function renderPie(spec) {
   const gapW = spec.sliceGap != null ? Number(spec.sliceGap) : Math.max(2, r(rad * 0.016));
   const gapAttr = gapColor && gapW > 0 ? ` stroke="${gapColor}" stroke-width="${gapW}" stroke-linejoin="round"` : "";
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   let a = -Math.PI / 2;
   values.forEach((v, i) => {
@@ -1171,7 +1172,7 @@ function renderPieOfPie(spec) {
   });
   const n = pies.length;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (n === 0) {
     p.push(`</svg>`);
@@ -1313,7 +1314,7 @@ function renderCards(spec) {
   const cellW = (W - PAD * 2 - GAP * (cols - 1)) / cols;
   const cellH = (H - PAD * 2 - titleH - GAP * (rows - 1)) / rows;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   cards.forEach((c, i) => {
@@ -1372,7 +1373,7 @@ function renderLayers(spec) {
   const blockW = W - PAD * 2;
   const blockH = (H - topY - 16 - GAP * (n - 1)) / n;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   layers.forEach((layer, i) => {
@@ -1416,7 +1417,7 @@ function renderProgress(spec) {
   const H = spec.height || topY + n * ROW_H + 8;
   const trackW = W - PAD * 2;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   bars.forEach((b, i) => {
@@ -1477,7 +1478,7 @@ function renderWaffle(spec) {
   const W = spec.width || 600;
   const H = spec.height || topY + gridSize + 16;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   for (let k = 0; k < 100; k++) {
@@ -1534,7 +1535,7 @@ function renderHeatmap(spec) {
   const cellW = plotW / nc;
   const gridTop = topY + COLH;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   cols.forEach((c, ci) => p.push(`<text x="${r(plotLeft + ci * cellW + cellW / 2)}" y="${r(gridTop - 8)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${labelCol}">${esc(c)}</text>`));
@@ -1580,7 +1581,7 @@ function renderFunnel(spec) {
   const maxV = Math.max(1, ...vals);
   const top = vals[0] || 0;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(cx)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   stages.forEach((s, i) => {
@@ -1621,7 +1622,7 @@ function renderPyramid(spec) {
   const apexY = topY, cx = W / 2, bandH = totalH / n;
   const widthAt = (y) => (y - apexY) / totalH * baseW;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(cx)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   levels.forEach((lv, i) => {
@@ -1660,7 +1661,7 @@ function renderQuadrant(spec) {
   const S = Math.min(W - PAD * 2, H - plotTop - 46);
   const plotX = (W - S) / 2, plotBottom = plotTop + S;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   p.push(`<rect x="${r(plotX)}" y="${r(plotTop)}" width="${r(S)}" height="${r(S)}" rx="8" fill="none" stroke="${gridCol}" stroke-width="1"/>`);
@@ -1704,7 +1705,7 @@ function renderTimeline(spec) {
   const plotW = W - PAD * 2;
   const xOf = (i) => n === 1 ? W / 2 : PAD + i * (plotW / (n - 1));
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   p.push(`<line x1="${PAD}" y1="${r(lineY)}" x2="${W - PAD}" y2="${r(lineY)}" stroke="${lineCol}" stroke-width="2"/>`);
@@ -1743,7 +1744,7 @@ function renderVenn(spec) {
   const W = spec.width || 600, H = spec.height || 460;
   const val = (i) => fmt(Number(sets[i] && sets[i].value) || 0);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   if (ns <= 2) {
@@ -1828,7 +1829,7 @@ function renderMatrix(spec) {
   const plotLeft = PAD + LEFTW;
   const cellW = (W - PAD - plotLeft) / nc;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   columns.forEach((c, ci) => p.push(`<text x="${r(plotLeft + ci * cellW + cellW / 2)}" y="${r(topY + HEAD - 14)}" text-anchor="middle" font-size="${fs}" ${wAttr(spec, 700)} fill="${headCol}">${esc(c)}</text>`));
@@ -1866,7 +1867,7 @@ function renderChecklist(spec) {
   const H = spec.height || topY + n * ROWH + 12;
   const s = fs * 1, gx = PAD + 11;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${PAD}" y="33" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   items.forEach((it, i) => {
@@ -1911,7 +1912,7 @@ function renderIconArray(spec) {
   const W = spec.width || PAD * 2 + perRow * ICON + (perRow - 1) * GAP;
   const H = spec.height || topY + rowsN * (ICON + GAP) + 12;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${PAD}" y="33" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   for (let k = 0; k < total; k++) {
@@ -1950,7 +1951,7 @@ function renderSteps(spec) {
   const cy = topY + 36 + R;
   const xOf = (i) => n === 1 ? W / 2 : PAD + R + i * ((W - 2 * (PAD + R)) / (n - 1));
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   for (let i = 0; i < n - 1; i++) p.push(connectorLine(xOf(i) + R + 6, xOf(i + 1) - R - 6, cy, connCol));
@@ -1990,7 +1991,7 @@ function renderTable(spec) {
   const isNum = (v) => typeof v === "number" || typeof v === "string" && v.trim() !== "" && !isNaN(Number(v));
   const cellX = (ci, right) => right ? PAD + ci * colW + colW - 10 : PAD + ci * colW + 4;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   columns.forEach((c, ci) => {
@@ -2041,7 +2042,7 @@ function renderGauge(spec) {
   const innerR = rad * 0.72;
   const u = spec.valueUnit ? " " + spec.valueUnit : "";
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(cx)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${valueCol}">${esc(title)}</text>`);
   p.push(`<path d="${arcPath(cx, cy, rad, Math.PI, 2 * Math.PI, innerR)}" fill="${track}"/>`);
@@ -2076,7 +2077,7 @@ function renderBullet(spec) {
   const H = spec.height || topY + n * ROW_H + 8;
   const trackW = W - PAD * 2;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${tickCol}">${esc(title)}</text>`);
   bars.forEach((b, i) => {
@@ -2146,7 +2147,7 @@ function renderCalendar(spec) {
   const W = spec.width || gridX + weeks * (CELL + GAP) + PAD;
   const H = spec.height || gridY + 7 * (CELL + GAP) + 16;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${PAD}" y="33" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   const MON = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
@@ -2190,7 +2191,7 @@ function renderLeaderboard(spec) {
   const barLeft = PAD + RANKW + LABELW, barRight = W - PAD - VALW;
   const maxV = Math.max(1, ...items.map((s) => s.value));
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   items.forEach((it, i) => {
@@ -2223,7 +2224,7 @@ function renderCallout(spec) {
   const topY = title ? 50 : 20;
   const valueStr = (spec.valuePrefix || "") + (spec.value != null ? fmt(spec.value) : "") + (spec.valueUnit || "");
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${PAD}" y="33" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   const by = topY + (H - topY) * 0.5;
@@ -2264,7 +2265,7 @@ function renderRing(spec) {
   const circ = 2 * Math.PI * R;
   const dash = frac * circ;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(cx)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${valueCol}">${esc(title)}</text>`);
   p.push(`<circle cx="${r(cx)}" cy="${r(cy)}" r="${r(R)}" fill="none" stroke="${track}" stroke-width="${r(sw)}"/>`);
@@ -2293,7 +2294,7 @@ function renderVersus(spec) {
   const colW = (W - PAD * 2 - GAP) / 2;
   const cols = [PAD, PAD + colW + GAP];
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   [0, 1].forEach((si) => {
@@ -2341,7 +2342,7 @@ function renderGantt(spec) {
   const plotLeft = PAD + LABELW, plotW = W - PAD - plotLeft, gridTop = topY + HEAD;
   const xOf = (v) => plotLeft + (v - lo) / (hi - lo || 1) * plotW;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   for (let k = 0; k <= 4; k++) {
@@ -2390,7 +2391,7 @@ function renderWaterfall(spec) {
   const bandW = (plotW - GAP * (N - 1)) / N;
   const yOf = (v) => plotBottom - (v - lo) / (hi - lo || 1) * (plotBottom - plotTop);
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   segs.forEach((s, i) => {
@@ -2433,7 +2434,7 @@ function renderSwimlane(spec) {
   const W = spec.width || 680, H = spec.height || topY + HEAD + nl * LANEH + 16;
   const plotLeft = PAD + LABELW, colW = (W - PAD - plotLeft) / np, gridTop = topY + HEAD;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   phases.forEach((ph, ci) => p.push(`<text x="${r(plotLeft + ci * colW + colW / 2)}" y="${r(topY + HEAD - 7)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${labelCol}">${esc(ph)}</text>`));
@@ -2470,25 +2471,48 @@ function renderTierList(spec) {
   const faint = isDark ? "#475569" : "#94a3b8";
   const PAD = 16, LABELW = 56, ROWH = 48, GAP = 6;
   const topY = title ? 50 : 14;
-  const W = spec.width || 560, H = spec.height || topY + n * (ROWH + GAP) + 12;
+  const W = spec.width || 560;
+  const chipH = 26, chipGapX = 8, chipGapY = 6;
+  const chipX0 = PAD + LABELW + 10, maxLineW = W - PAD - chipX0;
+  const layout = tiers.map((t) => {
+    const lines = [[]];
+    (Array.isArray(t.items) ? t.items : []).forEach((it) => {
+      let label = typeof it === "string" ? it : it && it.label || "";
+      let cw = Math.round(label.length * (fs * 0.6) + 18);
+      if (cw > maxLineW) {
+        const maxChars = Math.max(1, Math.floor((maxLineW - 18) / (fs * 0.6)) - 1);
+        label = label.slice(0, maxChars) + "\u2026";
+        cw = Math.min(Math.round((maxChars + 1) * (fs * 0.6) + 18), maxLineW);
+      }
+      const cur = lines[lines.length - 1];
+      const curW = cur.reduce((a, c) => a + c.cw + chipGapX, 0);
+      if (cur.length && curW + cw > maxLineW) lines.push([]);
+      lines[lines.length - 1].push({ label, cw });
+    });
+    return { lines, rowH: lines.length * chipH + (lines.length - 1) * chipGapY + 22 };
+  });
+  const H = spec.height || topY + Math.max(layout.reduce((a, l) => a + l.rowH + GAP, 0), ROWH + GAP) + 12;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${PAD}" y="31" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  let ty = topY;
   tiers.forEach((t, i) => {
-    const y = topY + i * (ROWH + GAP);
+    const y = ty;
+    const { lines, rowH } = layout[i];
     const col = t.color || palette[i % palette.length];
-    p.push(`<rect x="${PAD}" y="${r(y)}" width="${LABELW}" height="${ROWH}" rx="6" fill="${col}"/>`);
-    p.push(`<text x="${r(PAD + LABELW / 2)}" y="${r(y + ROWH / 2 + 6)}" text-anchor="middle" font-size="${fs + 4}" ${wAttr(spec, 800)} fill="${contrastColor(col)}">${esc(t.label || "")}</text>`);
-    let cx = PAD + LABELW + 10;
-    (Array.isArray(t.items) ? t.items : []).forEach((it) => {
-      const label = typeof it === "string" ? it : it && it.label || "";
-      const cw = Math.round(label.length * (fs * 0.6) + 18);
-      if (cx + cw > W - PAD) return;
-      p.push(`<rect x="${r(cx)}" y="${r(y + ROWH / 2 - 13)}" width="${cw}" height="26" rx="6" fill="${chipBg}"/>`);
-      p.push(`<text x="${r(cx + cw / 2)}" y="${r(y + ROWH / 2 + 5)}" text-anchor="middle" font-size="${fs}"${wOpt(spec)} fill="${chipTx}">${esc(label)}</text>`);
-      cx += cw + 8;
+    p.push(`<rect x="${PAD}" y="${r(y)}" width="${LABELW}" height="${rowH}" rx="6" fill="${col}"/>`);
+    p.push(`<text x="${r(PAD + LABELW / 2)}" y="${r(y + rowH / 2 + 6)}" text-anchor="middle" font-size="${fs + 4}" ${wAttr(spec, 800)} fill="${contrastColor(col)}">${esc(t.label || "")}</text>`);
+    lines.forEach((line, j) => {
+      let cx = chipX0;
+      const cy = y + 11 + j * (chipH + chipGapY);
+      line.forEach(({ label, cw }) => {
+        p.push(`<rect x="${r(cx)}" y="${r(cy)}" width="${cw}" height="26" rx="6" fill="${chipBg}"/>`);
+        p.push(`<text x="${r(cx + cw / 2)}" y="${r(cy + 18)}" text-anchor="middle" font-size="${fs}"${wOpt(spec)} fill="${chipTx}">${esc(label)}</text>`);
+        cx += cw + chipGapX;
+      });
     });
+    ty += rowH + GAP;
   });
   if (watermark) p.push(`<text x="${W - 10}" y="${H - 9}" text-anchor="end" font-size="9" fill="${faint}" opacity="0.6">slickfast.com</text>`);
   p.push(`</svg>`);
@@ -2512,7 +2536,7 @@ function renderSwot(spec) {
   const W = spec.width || 640, H = spec.height || 440;
   const cellW = (W - PAD * 2 - GAP) / 2, cellH = (H - topY - PAD - GAP) / 2;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   for (let i = 0; i < 4; i++) {
@@ -2584,7 +2608,7 @@ function renderDashboard(spec) {
   const cellW = (W - PAD * 2 - gap * (cols - 1)) / cols;
   const cellH = (H - PAD * 2 - titleH - gap * (totalRows - 1)) / totalRows;
   const p = [];
-  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  p.push(svgOpen(W, H, font));
   if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
   if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 7}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
   if (!n) {
@@ -3292,9 +3316,11 @@ server.registerTool("report_issue", {
     "_Reported via the SlickFast report_issue tool._"
   ].filter(Boolean).join("\n\n");
   const mailto = `mailto:${FEEDBACK_EMAIL}?subject=${encodeURIComponent("SlickFast bug: " + summary)}&body=${encodeURIComponent(body)}`;
-  const text = `Bug report ready \u2014 **nothing has been sent.** To submit, click this link (it opens your mail client):
+  const ghIssue = `https://github.com/SlickFast/slickfast/issues/new?labels=bug&title=${encodeURIComponent("[bug] " + summary)}&body=${encodeURIComponent(body)}`;
+  const text = `Bug report ready \u2014 **nothing has been sent.** To submit, pick either:
 
-${mailto}
+- **GitHub issue** (preferred \u2014 public, trackable): ${ghIssue}
+- **Email** (opens your mail client): ${mailto}
 
 Or copy the report below into an email to ${FEEDBACK_EMAIL}:
 

package/package.json

@@ -1,6 +1,10 @@
 {
   "name": "@slickfast/mcp",
-  "version": "0.7.5",
+  "version": "0.7.7",
+  "mcpName": "com.slickfast/mcp",
+  "homepage": "https://slickfast.com",
+  "repository": { "type": "git", "url": "git+https://github.com/SlickFast/slickfast.git", "directory": "apps/mcp" },
+  "bugs": { "url": "https://github.com/SlickFast/slickfast/issues", "email": "feedback@slickfast.com" },
   "description": "SlickFast — render 47 chart & info-design types (bar, line, pie, KPI, cards, funnel, matrix, gauge, calendar…) plus multi-chart dashboards tiled into one image, as SVG/PNG via MCP. Local and deterministic; nothing leaves your machine.",
   "keywords": ["mcp", "model-context-protocol", "chart", "charts", "dashboard", "data-visualization", "svg", "png", "ai", "agent", "claude", "llm", "deterministic"],
   "license": "AGPL-3.0-only",