Skip to content
SlashClone
DiscoverUse in ClaudeSubmit a link
Sign in
Made by@agentcosts

Agent cost dashboard

@agentcosts/agent-cost-dashboard

Turn LLM usage logs into one self-contained HTML cost dashboard for an agentic product: cost per customer, per task, per successful outcome, model mix, cache hit rate, and gross margin when you add revenue by customer. Prices blank costs from an editable price table.

SkillDatav1.0.0 (latest)Tested
Use in Claude Save Like Clone Comment
Activity
New: be the first to try it
  1. 1// Builds a single self-contained HTML page with inline SVG charts.
  2. 2// No external scripts, fonts, or images. Light and dark themes follow the viewer's OS setting.
  3. 3import { escapeHtml as esc } from "./lib.mjs";
  4. 4
  5. 5export const SERIES = ["var(--s1)", "var(--s2)", "var(--s3)", "var(--s4)", "var(--s5)", "var(--s6)"];
  6. 6
  7. 7const CSS = `
  8. 8:root{color-scheme:light;--bg:#f9f9f7;--card:#fcfcfb;--ink:#0b0b0b;--ink2:#52514e;--muted:#898781;--grid:#e1e0d9;--axis:#c3c2b7;--ring:rgba(11,11,11,.10);
  9. 9--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#6250d6;--good:#0ca30c;--warn:#fab219;--bad:#d03b3b;--up:#006300;
  10. 10--q1:#cde2fb;--q2:#9ec5f4;--q3:#6da7ec;--q4:#3987e5;--q5:#256abf;--q6:#184f95;--hiink:#ffffff}
  11. 11@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0d0d0d;--card:#1a1a19;--ink:#f0efec;--ink2:#c3c2b7;--muted:#898781;--grid:#2c2c2a;--axis:#383835;--ring:rgba(255,255,255,.10);
  12. 12--s1:#3987e5;--s2:#d95926;--s3:#199e70;--s4:#c98500;--s5:#d55181;--s6:#9085e9;--up:#0ca30c;
  13. 13--q1:#184f95;--q2:#1c5cab;--q3:#256abf;--q4:#3987e5;--q5:#6da7ec;--q6:#9ec5f4;--hiink:#0b0b0b}}
  14. 14*{box-sizing:border-box}
  15. 15body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
  16. 16main{max-width:1120px;margin:0 auto;padding:24px 16px 48px}
  17. 17h1{font-size:22px;margin:0 0 4px}h2{font-size:16px;margin:0 0 4px}
  18. 18.sub{color:var(--ink2);margin:0 0 20px}.note{color:var(--muted);font-size:12px;margin:6px 0 0}
  19. 19.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));margin-bottom:16px}
  20. 20.tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
  21. 21.card{background:var(--card);border:1px solid var(--ring);border-radius:10px;padding:16px;min-width:0}
  22. 22.tile .v{font-size:26px;font-weight:600;margin-top:2px}.tile .l{color:var(--ink2);font-size:12px}.tile .h{color:var(--muted);font-size:12px}
  23. 23svg{display:block;width:100%;height:auto;overflow:visible}
  24. 24svg text{fill:var(--muted);font-size:11px}
  25. 25.tw{overflow-x:auto}
  26. 26table{border-collapse:collapse;width:100%;font-size:13px;font-variant-numeric:tabular-nums}
  27. 27th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--grid);white-space:nowrap}
  28. 28th{color:var(--ink2);font-weight:600}td.n,th.n{text-align:right}
  29. 29.hm td.c{text-align:center;color:var(--ink)}
  30. 30.flag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;border:1px solid var(--ring)}
  31. 31.flag.bad::before{content:"\\25BC ";color:var(--bad)}.flag.warn::before{content:"\\25B2 ";color:var(--warn)}.flag.good::before{content:"\\25CF ";color:var(--good)}
  32. 32.legend{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 0;color:var(--ink2);font-size:12px}
  33. 33.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
  34. 34.mark:hover{opacity:.8}
  35. 35`;
  36. 36
  37. 37export function page(title, subtitle, body) {
  38. 38 return `<!doctype html>
  39. 39<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  40. 40<title>${esc(title)}</title><style>${CSS}</style></head>
  41. 41<body><main><h1>${esc(title)}</h1><p class="sub">${esc(subtitle)}</p>
  42. 42${body}
  43. 43</main></body></html>
  44. 44`;
  45. 45}
  46. 46
  47. 47export function tiles(items) {
  48. 48 return `<div class="tiles">${items
  49. 49 .map(
  50. 50 (t) =>
  51. 51 `<div class="card tile"><div class="l">${esc(t.label)}</div><div class="v">${esc(t.value)}</div>${
  52. 52 t.hint ? `<div class="h">${esc(t.hint)}</div>` : ""
  53. 53 }</div>`,
  54. 54 )
  55. 55 .join("")}</div>`;
  56. 56}
  57. 57
  58. 58export function card(title, inner, note) {
  59. 59 return `<section class="card"><h2>${esc(title)}</h2>${inner}${note ? `<p class="note">${esc(note)}</p>` : ""}</section>`;
  60. 60}
  61. 61
  62. 62function niceMax(v) {
  63. 63 if (!(v > 0)) return 1;
  64. 64 const p = 10 ** Math.floor(Math.log10(v));
  65. 65 for (const m of [1, 2, 2.5, 5, 10]) if (v <= m * p) return m * p;
  66. 66 return 10 * p;
  67. 67}
  68. 68
  69. 69/**
  70. 70 * Line chart. series: [{ name, values: [number|null] }], labels: x labels (same length).
  71. 71 * format: value formatter for axis and tooltips.
  72. 72 */
  73. 73export function lineChart(labels, series, format = String, { height = 200 } = {}) {
  74. 74 const W = 640;
  75. 75 const H = height;
  76. 76 const L = 48;
  77. 77 const R = 12;
  78. 78 const T = 10;
  79. 79 const B = 24;
  80. 80 const all = series.flatMap((s) => s.values).filter((v) => Number.isFinite(v));
  81. 81 const max = niceMax(Math.max(0, ...all));
  82. 82 const n = labels.length;
  83. 83 const x = (i) => L + (n <= 1 ? 0 : (i * (W - L - R)) / (n - 1));
  84. 84 const y = (v) => T + (H - T - B) * (1 - v / max);
  85. 85 let g = "";
  86. 86 for (let k = 0; k <= 4; k++) {
  87. 87 const v = (max * k) / 4;
  88. 88 g += `<line x1="${L}" x2="${W - R}" y1="${y(v)}" y2="${y(v)}" stroke="var(--grid)" stroke-width="1"/>`;
  89. 89 g += `<text x="${L - 6}" y="${y(v) + 4}" text-anchor="end">${esc(format(v))}</text>`;
  90. 90 }
  91. 91 const step = Math.max(1, Math.ceil(n / 6));
  92. 92 for (let i = 0; i < n; i += step)
  93. 93 g += `<text x="${x(i)}" y="${H - 6}" text-anchor="middle">${esc(labels[i])}</text>`;
  94. 94 series.forEach((s, si) => {
  95. 95 const color = SERIES[si % SERIES.length];
  96. 96 let d = "";
  97. 97 s.values.forEach((v, i) => {
  98. 98 if (!Number.isFinite(v)) return;
  99. 99 d += `${d ? "L" : "M"}${x(i).toFixed(1)},${y(v).toFixed(1)}`;
  100. 100 });
  101. 101 g += `<path d="${d}" fill="none" stroke="${color}" stroke-width="2" stroke-linejoin="round"/>`;
  102. 102 s.values.forEach((v, i) => {
  103. 103 if (!Number.isFinite(v)) return;
  104. 104 g += `<circle class="mark" cx="${x(i).toFixed(1)}" cy="${y(v).toFixed(1)}" r="6" fill="transparent"><title>${esc(
  105. 105 `${labels[i]} ${s.name}: ${format(v)}`,
  106. 106 )}</title></circle>`;
  107. 107 });
  108. 108 });
  109. 109 const legend =
  110. 110 series.length > 1
  111. 111 ? `<div class="legend">${series
  112. 112 .map((s, i) => `<span><i style="background:${SERIES[i % SERIES.length]}"></i>${esc(s.name)}</span>`)
  113. 113 .join("")}</div>`
  114. 114 : "";
  115. 115 return `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="line chart">${g}</svg>${legend}`;
  116. 116}
  117. 117
  118. 118/** Horizontal bar chart. items: [{ label, value, color? }] */
  119. 119export function barChart(items, format = String, { color = "var(--s1)" } = {}) {
  120. 120 const W = 640;
  121. 121 const rowH = 26;
  122. 122 const labelW = 170;
  123. 123 const valueW = 80;
  124. 124 const H = Math.max(rowH, items.length * rowH);
  125. 125 const max = Math.max(0, ...items.map((i) => i.value));
  126. 126 const span = W - labelW - valueW;
  127. 127 let g = "";
  128. 128 items.forEach((it, i) => {
  129. 129 const w = max > 0 ? Math.max(2, (span * Math.max(0, it.value)) / max) : 2;
  130. 130 const yy = i * rowH;
  131. 131 const label = it.label.length > 26 ? `${it.label.slice(0, 25)}...` : it.label;
  132. 132 g += `<text x="${labelW - 8}" y="${yy + 17}" text-anchor="end" style="fill:var(--ink2)">${esc(label)}</text>`;
  133. 133 g += `<rect class="mark" x="${labelW}" y="${yy + 6}" width="${w.toFixed(1)}" height="${rowH - 12}" rx="3" fill="${
  134. 134 it.color || color
  135. 135 }"><title>${esc(`${it.label}: ${format(it.value)}`)}</title></rect>`;
  136. 136 g += `<text x="${labelW + w + 6}" y="${yy + 17}" style="fill:var(--ink)">${esc(format(it.value))}</text>`;
  137. 137 });
  138. 138 return `<svg viewBox="0 0 ${W} ${H}" role="img" aria-label="bar chart">${g}</svg>`;
  139. 139}
  140. 140
  141. 141/** Plain table. columns: [{ label, numeric? }], rows: arrays of already-formatted cells (strings may contain safe HTML if html: true). */
  142. 142export function table(columns, rows, { html = false } = {}) {
  143. 143 const th = columns.map((c) => `<th${c.numeric ? ' class="n"' : ""}>${esc(c.label)}</th>`).join("");
  144. 144 const tr = rows
  145. 145 .map(
  146. 146 (r) =>
  147. 147 `<tr>${r
  148. 148 .map((cell, i) => `<td${columns[i]?.numeric ? ' class="n"' : ""}>${html ? cell : esc(cell)}</td>`)
  149. 149 .join("")}</tr>`,
  150. 150 )
  151. 151 .join("");
  152. 152 return `<div class="tw"><table><thead><tr>${th}</tr></thead><tbody>${tr}</tbody></table></div>`;
  153. 153}
  154. 154
  155. 155/** Retention-style heatmap: values 0..1, null for not yet observable. */
  156. 156export function heatmap(rowLabels, colLabels, values, extraCol) {
  157. 157 const steps = ["--q1", "--q2", "--q3", "--q4", "--q5", "--q6"];
  158. 158 const th = `<th>Cohort</th>${extraCol ? `<th class="n">${esc(extraCol.label)}</th>` : ""}${colLabels
  159. 159 .map((c) => `<th class="n">${esc(c)}</th>`)
  160. 160 .join("")}`;
  161. 161 const rows = rowLabels
  162. 162 .map((rl, ri) => {
  163. 163 const cells = values[ri]
  164. 164 .map((v) => {
  165. 165 if (v === null || v === undefined) return `<td class="c"></td>`;
  166. 166 const s = steps[Math.min(steps.length - 1, Math.floor(v * steps.length))];
  167. 167 const ink = v >= 0.5 ? "var(--hiink)" : "var(--ink)";
  168. 168 return `<td class="c" style="background:var(${s});color:${ink}">${Math.round(v * 100)}%</td>`;
  169. 169 })
  170. 170 .join("");
  171. 171 return `<tr><td>${esc(rl)}</td>${extraCol ? `<td class="n">${esc(extraCol.values[ri])}</td>` : ""}${cells}</tr>`;
  172. 172 })
  173. 173 .join("");
  174. 174 return `<div class="tw"><table class="hm"><thead><tr>${th}</tr></thead><tbody>${rows}</tbody></table></div>`;
  175. 175}
  176. 176
  177. 177export function flag(kind, text) {
  178. 178 return `<span class="flag ${kind}">${esc(text)}</span>`;
  179. 179}
Sign in to comment on a line