agentlytics 0.1.10 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Comprehensive analytics dashboard for AI coding agents — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, OpenCode, Command Code",
   "main": "index.js",
   "bin": {

package/server.js

@@ -266,7 +266,16 @@ app.get('/api/share-image', (req, res) => {
   try {
     const overview = cache.getCachedOverview();
     const stats = cache.getCachedDashboardStats();
-    const svg = generateShareSvg(overview, stats);
+    const costs = cache.getCostAnalytics({ hiddenFolders: getHiddenFolders() });
+    const opts = {};
+    if (req.query.showEditors !== undefined) opts.showEditors = req.query.showEditors !== 'false';
+    if (req.query.showModels !== undefined) opts.showModels = req.query.showModels !== 'false';
+    if (req.query.showCosts !== undefined) opts.showCosts = req.query.showCosts !== 'false';
+    if (req.query.showTokens !== undefined) opts.showTokens = req.query.showTokens !== 'false';
+    if (req.query.showHours !== undefined) opts.showHours = req.query.showHours !== 'false';
+    if (req.query.username) opts.username = req.query.username;
+    if (req.query.theme) opts.theme = req.query.theme;
+    const svg = generateShareSvg(overview, stats, costs, opts);
     res.setHeader('Content-Type', 'image/svg+xml');
     res.send(svg);
   } catch (err) {

package/share-image.js

@@ -1,5 +1,6 @@
 /**
  * Generates a shareable SVG stats card from cached data.
+ * Accepts an `opts` object to toggle sections on/off.
  */
 
 function fmt(n) {
@@ -9,6 +10,14 @@ function fmt(n) {
   return n.toLocaleString();
 }
 
+function fmtCost(n) {
+  if (n == null || n === 0) return '$0';
+  if (n < 0.01) return '<$0.01';
+  if (n >= 1000) return '$' + (n / 1000).toFixed(1) + 'K';
+  if (n >= 100) return '$' + Math.round(n);
+  return '$' + n.toFixed(2);
+}
+
 const EDITOR_COLORS = {
   'cursor': '#f59e0b',
   'windsurf': '#06b6d4',
@@ -20,9 +29,11 @@ const EDITOR_COLORS = {
   'vscode-insiders': '#60a5fa',
   'zed': '#10b981',
   'opencode': '#ec4899',
+  'codex': '#0f766e',
   'gemini-cli': '#4285f4',
   'copilot-cli': '#8957e5',
   'cursor-agent': '#f59e0b',
+  'commandcode': '#e11d48',
 };
 
 const EDITOR_LABELS = {
@@ -36,107 +47,309 @@ const EDITOR_LABELS = {
   'vscode-insiders': 'VS Code Ins.',
   'zed': 'Zed',
   'opencode': 'OpenCode',
+  'codex': 'Codex',
   'gemini-cli': 'Gemini CLI',
   'copilot-cli': 'Copilot CLI',
   'cursor-agent': 'Cursor Agent',
+  'commandcode': 'Cmd Code',
 };
 
-function generateShareSvg(overview, stats) {
-  const W = 800, H = 440;
-  const F = "Menlo, Monaco, Cascadia Code, Courier New, monospace";
+/**
+ * @param {object} overview  — from getCachedOverview()
+ * @param {object} stats     — from getCachedDashboardStats()
+ * @param {object} costs     — from getCostBreakdown()
+ * @param {object} [opts]    — toggle sections
+ * @param {boolean} [opts.showEditors=true]
+ * @param {boolean} [opts.showModels=true]
+ * @param {boolean} [opts.showCosts=true]
+ * @param {boolean} [opts.showTokens=true]
+ * @param {boolean} [opts.showHours=true]
+ * @param {boolean} [opts.showProjects=true]
+ * @param {string}  [opts.username]
+ * @param {string}  [opts.theme='dark'] — 'dark' or 'light'
+ */
+const THEMES = {
+  dark: {
+    bg: '#09090f', bg2: '#111118', card: '#111', border: '#1e1e2a',
+    text: '#fff', text2: '#888', text3: '#666', text4: '#555', text5: '#444',
+    titleText: '#555',
+    hourHigh: '#818cf8', hourMed: '#6366f1', hourLow: '#4f46e5', hourMin: '#1e1b4b',
+  },
+  light: {
+    bg: '#f8f8fa', bg2: '#eeeef2', card: '#e8e8ee', border: '#d0d0d8',
+    text: '#111', text2: '#555', text3: '#888', text4: '#999', text5: '#aaa',
+    titleText: '#888',
+    hourHigh: '#6366f1', hourMed: '#818cf8', hourLow: '#a5b4fc', hourMin: '#e0e7ff',
+  },
+};
+
+function generateShareSvg(overview, stats, costs, opts = {}) {
+  const show = {
+    editors:  opts.showEditors  !== false,
+    models:   opts.showModels   !== false,
+    costs:    opts.showCosts    !== false,
+    tokens:   opts.showTokens   !== false,
+    hours:    opts.showHours    !== false,
+  };
+  const username = opts.username || '';
+  const t = THEMES[opts.theme] || THEMES.dark;
+
+  const W = 1200;
+  const H_FIXED = 675;
+  const F = "'Menlo','Monaco','Cascadia Code','Courier New',monospace";
   const editors = overview.editors || [];
   const tk = stats.tokens || {};
   const streaks = stats.streaks || {};
   const topModels = (stats.topModels || []).slice(0, 5);
+  const costData = costs || {};
+  const totalCost = costData.totalCost || 0;
+  const costByEditor = (costData.byEditor || []).slice(0, 6);
+  const totalTokens = (tk.input || 0) + (tk.output || 0);
+  const now = new Date();
+  const dateStr = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+
+  // ── Compute layout ──
+  let y = 0;
+  const pad = 28;
+
+  // Title bar
+  y += 40;
+  // Header area (prompt + branding)
+  y += 54;
+  // KPI row
+  y += 80;
+  // Sections
+  const midSections = [];
+  if (show.editors) midSections.push('editors');
+  if (show.costs && totalCost > 0) midSections.push('costs');
+  if (show.hours) midSections.push('hours');
+  if (show.models && topModels.length > 0) midSections.push('models');
+
+  // Layout: 2 columns, each section ~row
+  const leftSections = [];
+  const rightSections = [];
+  midSections.forEach((s, i) => {
+    if (i % 2 === 0) leftSections.push(s);
+    else rightSections.push(s);
+  });
+
+  function sectionHeight(name) {
+    if (name === 'editors') return Math.max(editors.slice(0, 8).length * 26 + 34, 70);
+    if (name === 'costs') return Math.max(costByEditor.length * 26 + 34, 70);
+    if (name === 'hours') return 110;
+    if (name === 'models') return topModels.length * 22 + 34;
+    return 70;
+  }
+
+  // Mid-section pairs: compute max height of each row
+  const rowCount = Math.max(leftSections.length, rightSections.length);
+  let midHeight = 0;
+  for (let i = 0; i < rowCount; i++) {
+    const lh = leftSections[i] ? sectionHeight(leftSections[i]) : 0;
+    const rh = rightSections[i] ? sectionHeight(rightSections[i]) : 0;
+    midHeight += Math.max(lh, rh) + 8;
+  }
+
+  // Token footer
+  const tokenFooterH = show.tokens ? 44 : 0;
+  // Footer
+  const footerH = 36;
+
+  const naturalH = y + midHeight + tokenFooterH + footerH + 20;
+  // Stretch: if content is shorter than 675, distribute extra space into sections
+  const extraSpace = Math.max(0, H_FIXED - naturalH);
+  const extraPerRow = rowCount > 0 ? extraSpace / rowCount : 0;
 
-  // Editor bar chart
+  // ── KPI cards ──
+  const kpiY = 94;
+  const kpiCards = [];
+  const kpiItems = [
+    { label: 'sessions', value: fmt(overview.totalChats) },
+    { label: 'tokens', value: fmt(totalTokens) },
+    { label: 'active days', value: String(streaks.totalDays || 0) },
+    { label: 'streak', value: `${streaks.current || 0}d` },
+  ];
+  if (show.costs && totalCost > 0) {
+    kpiItems.push({ label: 'est. cost', value: fmtCost(totalCost) });
+  }
+  const kpiW = (W - pad * 2 - (kpiItems.length - 1) * 8) / kpiItems.length;
+  kpiItems.forEach((item, i) => {
+    const x = pad + i * (kpiW + 8);
+    kpiCards.push(`
+      <rect x="${x}" y="${kpiY}" width="${kpiW}" height="64" rx="6" fill="${t.card}"/>
+      <text x="${x + 14}" y="${kpiY + 22}" fill="${t.text3}" font-size="11" font-family=${F}>${esc(item.label)}</text>
+      <text x="${x + 14}" y="${kpiY + 50}" fill="${t.text}" font-size="24" font-weight="bold" font-family=${F}>${esc(item.value)}</text>
+    `);
+  });
+
+  // ── Editor bar chart ──
   const maxEditorCount = Math.max(...editors.map(e => e.count), 1);
-  const editorBars = editors.slice(0, 8).map((e, i) => {
-    const barW = Math.max((e.count / maxEditorCount) * 180, 4);
+  const editorBarsArr = editors.slice(0, 8).map((e, i) => {
+    const maxBarW = W / 2 - pad - 140;
+    const barW = Math.max((e.count / maxEditorCount) * maxBarW, 4);
     const color = EDITOR_COLORS[e.id] || '#6b7280';
-    const label = (EDITOR_LABELS[e.id] || e.id).padEnd(12);
-    const y = 170 + i * 22;
-    return `
-      <text x="30" y="${y + 12}" fill="#888" font-size="10" font-family="${F}">${esc(label)}</text>
-      <rect x="140" y="${y + 1}" width="${barW}" height="14" fill="${color}" opacity="0.8"/>
-      <text x="${146 + barW}" y="${y + 12}" fill="#aaa" font-size="9" font-family="${F}">${e.count}</text>
-    `;
-  }).join('');
-
-  // Activity sparkline from hourly data
+    const label = (EDITOR_LABELS[e.id] || e.id);
+    return { label, barW, color, count: e.count };
+  });
+
+  // ── Cost bar chart ──
+  const maxCostVal = costByEditor.length > 0 ? Math.max(...costByEditor.map(c => c.cost), 0.01) : 1;
+  const costBarsArr = costByEditor.map(c => {
+    const maxBarW = W / 2 - pad - 140;
+    const barW = Math.max((c.cost / maxCostVal) * maxBarW, 4);
+    const color = EDITOR_COLORS[c.editor] || '#6b7280';
+    const label = EDITOR_LABELS[c.editor] || c.editor;
+    return { label, barW, color, value: fmtCost(c.cost) };
+  });
+
+  // ── Hourly sparkline ──
   const hourly = stats.hourly || new Array(24).fill(0);
-  const maxH = Math.max(...hourly, 1);
-  const sparkW = 180, sparkH = 40;
-  const sparkPoints = hourly.map((v, i) => {
-    const x = 590 + (i / 23) * sparkW;
-    const y = 180 + sparkH - (v / maxH) * sparkH;
-    return `${x},${y}`;
-  }).join(' ');
-
-  // Top models list
-  const modelsList = topModels.map((m, i) => {
-    const y = 274 + i * 16;
-    const name = m.name.length > 24 ? m.name.substring(0, 24) : m.name;
-    return `<text x="590" y="${y}" fill="#888" font-size="9" font-family="${F}">${esc(name)} <tspan fill="#555">${m.count}</tspan></text>`;
-  }).join('');
-
-  const dateStr = new Date().toISOString().split('T')[0];
-
-  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
-  <!-- Background -->
-  <rect width="${W}" height="${H}" fill="#000"/>
-  <rect x="0.5" y="0.5" width="${W - 1}" height="${H - 1}" fill="none" stroke="#222" stroke-width="1"/>
+  const maxHourly = Math.max(...hourly, 1);
 
-  <!-- Terminal title bar -->
-  <rect x="0" y="0" width="${W}" height="32" fill="#111"/>
-  <text x="${W / 2}" y="20" fill="#555" font-size="11" font-family="${F}" text-anchor="middle">agentlytics</text>
+  // ── Build sections ──
+  let curY = kpiY + 64 + 18;
+  const sectionSvgs = [];
+  const colW = (W - pad * 2 - 20) / 2;
 
-  <!-- Prompt line -->
-  <text x="24" y="58" fill="#666" font-size="12" font-family="${F}">$</text>
-  <text x="40" y="58" fill="#ccc" font-size="12" font-family="${F}">npx agentlytics</text>
+  for (let row = 0; row < rowCount; row++) {
+    const lName = leftSections[row];
+    const rName = rightSections[row];
+    const lh = lName ? sectionHeight(lName) : 0;
+    const rh = rName ? sectionHeight(rName) : 0;
+    const rowH = Math.max(lh, rh) + Math.round(extraPerRow);
 
-  <!-- Divider -->
-  <line x1="24" y1="68" x2="${W - 24}" y2="68" stroke="#222" stroke-width="1"/>
+    if (lName) sectionSvgs.push(renderSection(lName, pad, curY, colW, rowH));
+    if (rName) sectionSvgs.push(renderSection(rName, pad + colW + 20, curY, colW, rowH));
+
+    curY += rowH + 10;
+  }
+
+  function renderSection(name, sx, sy, sw, sh) {
+    let out = '';
+    if (name === 'editors') {
+      out += `<text x="${sx}" y="${sy + 14}" fill="${t.text4}" font-size="11" font-family=${F}># editors</text>`;
+      editorBarsArr.forEach((e, i) => {
+        const by = sy + 26 + i * 26;
+        out += `<text x="${sx}" y="${by + 14}" fill="${t.text2}" font-size="12" font-family=${F}>${esc(e.label)}</text>`;
+        out += `<rect x="${sx + 120}" y="${by + 1}" width="${e.barW}" height="16" rx="3" fill="${e.color}" opacity="0.85"/>`;
+        out += `<text x="${sx + 128 + e.barW}" y="${by + 14}" fill="${t.text3}" font-size="11" font-family=${F}>${e.count}</text>`;
+      });
+    } else if (name === 'costs') {
+      out += `<text x="${sx}" y="${sy + 14}" fill="${t.text4}" font-size="11" font-family=${F}># est. costs by editor</text>`;
+      costBarsArr.forEach((c, i) => {
+        const by = sy + 26 + i * 26;
+        out += `<text x="${sx}" y="${by + 14}" fill="${t.text2}" font-size="12" font-family=${F}>${esc(c.label)}</text>`;
+        out += `<rect x="${sx + 120}" y="${by + 1}" width="${c.barW}" height="16" rx="3" fill="${c.color}" opacity="0.85"/>`;
+        out += `<text x="${sx + 128 + c.barW}" y="${by + 14}" fill="${t.text3}" font-size="11" font-family=${F}>${c.value}</text>`;
+      });
+    } else if (name === 'hours') {
+      out += `<text x="${sx}" y="${sy + 14}" fill="${t.text4}" font-size="11" font-family=${F}># peak hours</text>`;
+      const sparkW = sw - 8;
+      const sparkH = 56;
+      const baseY = sy + 28;
+      const barW = sparkW / 24 - 1;
+      hourly.forEach((v, i) => {
+        const bh = Math.max((v / maxHourly) * sparkH, 1);
+        const bx = sx + i * (barW + 1);
+        const by = baseY + sparkH - bh;
+        const intensity = v / maxHourly;
+        const color = intensity > 0.75 ? t.hourHigh : intensity > 0.5 ? t.hourMed : intensity > 0.25 ? t.hourLow : t.hourMin;
+        out += `<rect x="${bx}" y="${by}" width="${barW}" height="${bh}" rx="1" fill="${color}" opacity="0.9"/>`;
+      });
+      out += `<text x="${sx}" y="${baseY + sparkH + 14}" fill="${t.text5}" font-size="9" font-family=${F}>00</text>`;
+      out += `<text x="${sx + sparkW / 4}" y="${baseY + sparkH + 14}" fill="${t.text5}" font-size="9" font-family=${F}>06</text>`;
+      out += `<text x="${sx + sparkW / 2}" y="${baseY + sparkH + 14}" fill="${t.text5}" font-size="9" font-family=${F}>12</text>`;
+      out += `<text x="${sx + sparkW * 3 / 4}" y="${baseY + sparkH + 14}" fill="${t.text5}" font-size="9" font-family=${F}>18</text>`;
+      out += `<text x="${sx + sparkW - 8}" y="${baseY + sparkH + 14}" fill="${t.text5}" font-size="9" font-family=${F}>23</text>`;
+    } else if (name === 'models') {
+      out += `<text x="${sx}" y="${sy + 14}" fill="${t.text4}" font-size="11" font-family=${F}># top models</text>`;
+      topModels.forEach((m, i) => {
+        const my = sy + 32 + i * 22;
+        const mName = m.name.length > 28 ? m.name.substring(0, 28) + '…' : m.name;
+        out += `<text x="${sx}" y="${my}" fill="${t.text2}" font-size="11" font-family=${F}>${esc(mName)}</text>`;
+        out += `<text x="${sx + sw - 4}" y="${my}" fill="${t.text4}" font-size="11" font-family=${F} text-anchor="end">${m.count}</text>`;
+      });
+    }
+    return out;
+  }
 
-  <!-- KPI row -->
-  <rect x="24" y="78" width="175" height="58" fill="#111"/>
-  <text x="36" y="96" fill="#666" font-size="9" font-family="${F}">sessions</text>
-  <text x="36" y="122" fill="#fff" font-size="22" font-weight="bold" font-family="${F}">${fmt(overview.totalChats)}</text>
+  // ── Token footer line ──
+  let tokenLine = '';
+  if (show.tokens) {
+    const ty = curY + 4;
+    const tkPairs = [
+      ['input', fmt(tk.input)],
+      ['output', fmt(tk.output)],
+      ['cache read', fmt(tk.cacheRead)],
+      ['cache write', fmt(tk.cacheWrite)],
+      ['tools', fmt(stats.totalToolCalls || 0)],
+      ['editors', String(editors.length)],
+    ];
+    let tkX = pad;
+    let tkSvg = `<line x1="${pad}" y1="${ty}" x2="${W - pad}" y2="${ty}" stroke="${t.border}" stroke-width="1"/>`;
+    tkPairs.forEach(([label, val]) => {
+      tkSvg += `<text x="${tkX}" y="${ty + 20}" fill="${t.text5}" font-size="10" font-family=${F}>${label}</text>`;
+      tkSvg += `<text x="${tkX}" y="${ty + 34}" fill="${t.text2}" font-size="12" font-weight="600" font-family=${F}>${val}</text>`;
+      tkX += (W - pad * 2) / tkPairs.length;
+    });
+    tokenLine = tkSvg;
+    curY = ty + tokenFooterH;
+  }
 
-  <rect x="210" y="78" width="175" height="58" fill="#111"/>
-  <text x="222" y="96" fill="#666" font-size="9" font-family="${F}">tokens</text>
-  <text x="222" y="122" fill="#fff" font-size="22" font-weight="bold" font-family="${F}">${fmt((tk.input || 0) + (tk.output || 0))}</text>
+  // ── Final footer — pin to bottom of canvas ──
+  const footerY = H_FIXED - 28;
 
-  <rect x="396" y="78" width="175" height="58" fill="#111"/>
-  <text x="408" y="96" fill="#666" font-size="9" font-family="${F}">active_days</text>
-  <text x="408" y="122" fill="#fff" font-size="22" font-weight="bold" font-family="${F}">${streaks.totalDays || 0}</text>
+  const usernameText = username ? `<text x="${W / 2}" y="${footerY + 14}" fill="${t.text5}" font-size="11" font-family=${F} text-anchor="middle">${esc(username)}</text>` : '';
 
-  <rect x="582" y="78" width="194" height="58" fill="#111"/>
-  <text x="594" y="96" fill="#666" font-size="9" font-family="${F}">streak <tspan fill="#555">longest:${streaks.longest || 0}</tspan></text>
-  <text x="594" y="122" fill="#fff" font-size="22" font-weight="bold" font-family="${F}">${streaks.current || 0} <tspan font-size="11" fill="#666">day${(streaks.current || 0) !== 1 ? 's' : ''}</tspan></text>
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="675" viewBox="0 0 ${W} ${H_FIXED}">
+  <defs>
+    <linearGradient id="accentGrad" x1="0" y1="0" x2="1" y2="0">
+      <stop offset="0%" stop-color="#818cf8"/>
+      <stop offset="50%" stop-color="#a78bfa"/>
+      <stop offset="100%" stop-color="#c084fc"/>
+    </linearGradient>
+  </defs>
 
-  <!-- Editors section -->
-  <text x="24" y="160" fill="#666" font-size="10" font-family="${F}"># editors</text>
-  ${editorBars}
+  <!-- Background -->
+  <rect width="${W}" height="${H_FIXED}" rx="12" fill="${t.bg}"/>
+  <rect x="0.5" y="0.5" width="${W - 1}" height="${H_FIXED - 1}" rx="12" fill="none" stroke="${t.border}" stroke-width="1"/>
+
+  <!-- Title bar -->
+  <rect x="1" y="1" width="${W - 2}" height="38" rx="12" fill="${t.bg2}"/>
+  <rect x="1" y="22" width="${W - 2}" height="17" fill="${t.bg2}"/>
+  <circle cx="20" cy="20" r="5" fill="#ef4444" opacity="0.7"/>
+  <circle cx="36" cy="20" r="5" fill="#f59e0b" opacity="0.7"/>
+  <circle cx="52" cy="20" r="5" fill="#22c55e" opacity="0.7"/>
+  <text x="${W / 2}" y="25" fill="${t.text2}" font-size="13" font-weight="600" font-family=${F} text-anchor="middle">agentlytics.io</text>
+
+  <!-- Accent line -->
+  <rect x="${pad}" y="44" width="60" height="2" rx="1" fill="url(#accentGrad)"/>
+
+  <!-- Branding -->
+  <g transform="translate(${pad}, 52) scale(0.8)" stroke="#818cf8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none">
+    <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>
+  </g>
+  <text x="${pad + 26}" y="68" fill="${t.text}" font-size="16" font-weight="bold" font-family=${F}>Agentlytics</text>
+  <text x="${pad + 148}" y="68" fill="${t.text4}" font-size="13" font-family=${F}>Your AI coding stats</text>
+  <text x="${W - pad}" y="68" fill="${t.text5}" font-size="12" font-family=${F} text-anchor="end">${esc(dateStr)}</text>
+
+  <!-- Divider -->
+  <line x1="${pad}" y1="78" x2="${W - pad}" y2="78" stroke="${t.border}" stroke-width="1"/>
 
-  <!-- Right column: Peak Hours -->
-  <text x="590" y="160" fill="#666" font-size="10" font-family="${F}"># peak_hours</text>
-  <polyline points="${sparkPoints}" fill="none" stroke="#888" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
-  <text x="590" y="${180 + sparkH + 14}" fill="#555" font-size="8" font-family="${F}">00:00</text>
-  <text x="${590 + sparkW - 28}" y="${180 + sparkH + 14}" fill="#555" font-size="8" font-family="${F}">23:00</text>
+  <!-- KPI cards -->
+  ${kpiCards.join('')}
 
-  <!-- Top Models -->
-  <text x="590" y="258" fill="#666" font-size="10" font-family="${F}"># models</text>
-  ${modelsList}
+  <!-- Sections -->
+  ${sectionSvgs.join('')}
 
-  <!-- Token breakdown -->
-  <line x1="24" y1="${H - 62}" x2="${W - 24}" y2="${H - 62}" stroke="#222" stroke-width="1"/>
-  <text x="24" y="${H - 44}" fill="#666" font-size="9" font-family="${F}">in:${fmt(tk.input)}  out:${fmt(tk.output)}  cache:${fmt(tk.cacheRead)}  tools:${fmt(stats.totalToolCalls || 0)}  editors:${editors.length}</text>
+  <!-- Token footer -->
+  ${tokenLine}
 
   <!-- Footer -->
-  <line x1="24" y1="${H - 28}" x2="${W - 24}" y2="${H - 28}" stroke="#222" stroke-width="1"/>
-  <text x="24" y="${H - 10}" fill="#555" font-size="9" font-family="${F}">github.com/f/agentlytics</text>
-  <text x="${W - 24}" y="${H - 10}" fill="#555" font-size="9" font-family="${F}" text-anchor="end">${esc(dateStr)}</text>
+  <line x1="${pad}" y1="${footerY}" x2="${W - pad}" y2="${footerY}" stroke="${t.border}" stroke-width="1"/>
+  <text x="${pad}" y="${footerY + 14}" fill="${t.text5}" font-size="11" font-family=${F}>github.com/f/agentlytics</text>
+  ${usernameText}
+  <text x="${W - pad}" y="${footerY + 14}" fill="${t.text5}" font-size="11" font-family=${F} text-anchor="end">npx agentlytics</text>
 </svg>`;
 
   return svg;

package/ui/src/components/ShareModal.jsx

@@ -0,0 +1,273 @@
+import { useState, useEffect, useRef, useCallback } from 'react'
+import { X, Download, Share2, BarChart3, DollarSign, Clock, Cpu, Braces, User, Sun, Moon } from 'lucide-react'
+import { fetchShareImage } from '../lib/api'
+
+const TOGGLE_ITEMS = [
+  { key: 'showEditors', label: 'Editors', icon: BarChart3 },
+  { key: 'showCosts', label: 'Est. Costs', icon: DollarSign },
+  { key: 'showHours', label: 'Peak Hours', icon: Clock },
+  { key: 'showModels', label: 'Top Models', icon: Cpu },
+  { key: 'showTokens', label: 'Token Footer', icon: Braces },
+]
+
+export default function ShareModal({ open, onClose }) {
+  const [opts, setOpts] = useState({
+    showEditors: true,
+    showCosts: true,
+    showHours: true,
+    showModels: true,
+    showTokens: true,
+    username: '',
+    theme: 'dark',
+  })
+  const [svg, setSvg] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [downloading, setDownloading] = useState(false)
+  const debounceRef = useRef(null)
+  const backdropRef = useRef(null)
+
+  const loadPreview = useCallback(async (currentOpts) => {
+    setLoading(true)
+    try {
+      const result = await fetchShareImage(currentOpts)
+      if (result && !result.startsWith('{')) setSvg(result)
+    } catch (e) {
+      console.error('Preview failed:', e)
+    }
+    setLoading(false)
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    loadPreview(opts)
+  }, [open])
+
+  const updateOpt = (key, value) => {
+    const next = { ...opts, [key]: value }
+    setOpts(next)
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    debounceRef.current = setTimeout(() => loadPreview(next), 300)
+  }
+
+  const handleDownloadPng = async () => {
+    if (!svg) return
+    setDownloading(true)
+    try {
+      const canvas = document.createElement('canvas')
+      canvas.width = 1200
+      canvas.height = 675
+      const ctx = canvas.getContext('2d')
+      const img = new Image()
+      const svgB64 = btoa(unescape(encodeURIComponent(svg)))
+      const dataUrl = `data:image/svg+xml;base64,${svgB64}`
+      await new Promise((resolve, reject) => {
+        img.onload = resolve
+        img.onerror = reject
+        img.src = dataUrl
+      })
+      ctx.drawImage(img, 0, 0, 1200, 675)
+      const pngUrl = canvas.toDataURL('image/png')
+      const a = document.createElement('a')
+      a.href = pngUrl
+      a.download = 'agentlytics.png'
+      a.click()
+    } catch {
+      const blob = new Blob([svg], { type: 'image/svg+xml' })
+      const a = document.createElement('a')
+      a.href = URL.createObjectURL(blob)
+      a.download = 'agentlytics.svg'
+      a.click()
+      URL.revokeObjectURL(a.href)
+    }
+    setDownloading(false)
+  }
+
+  const handleDownloadSvg = () => {
+    if (!svg) return
+    const blob = new Blob([svg], { type: 'image/svg+xml' })
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(blob)
+    a.download = 'agentlytics.svg'
+    a.click()
+    URL.revokeObjectURL(a.href)
+  }
+
+  const handleShareTwitter = async () => {
+    await handleDownloadPng()
+    const text = encodeURIComponent("Here's my agentic coding stats using github.com/f/agentlytics")
+    window.open(`https://x.com/intent/post?text=${text}`, '_blank')
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      ref={backdropRef}
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(8px)' }}
+      onClick={(e) => e.target === backdropRef.current && onClose()}
+    >
+      <div
+        className="w-full relative flex flex-col"
+        style={{
+          maxWidth: 960,
+          maxHeight: '90vh',
+          background: 'var(--c-bg)',
+          border: '1px solid var(--c-border)',
+          borderRadius: 12,
+        }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <div className="flex items-center gap-2">
+            <Share2 size={14} style={{ color: 'var(--c-accent)' }} />
+            <span className="text-[13px] font-semibold" style={{ color: 'var(--c-white)' }}>Share Stats</span>
+          </div>
+          <button onClick={onClose} className="p-1 rounded hover:opacity-70 transition" style={{ color: 'var(--c-text2)' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex-1 overflow-auto p-5" style={{ minHeight: 0 }}>
+          <div className="flex gap-5" style={{ flexDirection: 'row' }}>
+
+            {/* Sidebar: toggles */}
+            <div className="flex-shrink-0" style={{ width: 200 }}>
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Customize
+              </div>
+
+              <div className="space-y-1.5">
+                {TOGGLE_ITEMS.map(({ key, label, icon: Icon }) => {
+                  const active = opts[key]
+                  return (
+                    <button
+                      key={key}
+                      onClick={() => updateOpt(key, !active)}
+                      className="flex items-center gap-2 w-full px-2.5 py-2 rounded-md text-[12px] transition"
+                      style={{
+                        background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                        border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                        color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                        opacity: active ? 1 : 0.6,
+                      }}
+                    >
+                      <Icon size={12} />
+                      {label}
+                    </button>
+                  )
+                })}
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Theme
+                </div>
+                <div className="flex gap-1.5">
+                  {[{ key: 'dark', icon: Moon, label: 'Dark' }, { key: 'light', icon: Sun, label: 'Light' }].map(({ key, icon: Icon, label }) => {
+                    const active = opts.theme === key
+                    return (
+                      <button
+                        key={key}
+                        onClick={() => updateOpt('theme', key)}
+                        className="flex items-center gap-1.5 flex-1 justify-center px-2 py-1.5 rounded-md text-[11px] transition"
+                        style={{
+                          background: active ? 'var(--c-accent-bg, rgba(99,102,241,0.1))' : 'transparent',
+                          border: `1px solid ${active ? 'var(--c-accent, #6366f1)' : 'var(--c-border)'}`,
+                          color: active ? 'var(--c-accent, #818cf8)' : 'var(--c-text2)',
+                          opacity: active ? 1 : 0.6,
+                        }}
+                      >
+                        <Icon size={11} />
+                        {label}
+                      </button>
+                    )
+                  })}
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Username
+                </div>
+                <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ border: '1px solid var(--c-border)', background: 'var(--c-bg)' }}>
+                  <User size={11} style={{ color: 'var(--c-text3)' }} />
+                  <input
+                    type="text"
+                    placeholder="optional"
+                    value={opts.username}
+                    onChange={(e) => updateOpt('username', e.target.value)}
+                    className="bg-transparent outline-none text-[12px] w-full"
+                    style={{ color: 'var(--c-text)' }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* Preview */}
+            <div className="flex-1 min-w-0">
+              <div className="text-[11px] font-medium mb-3" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                Preview
+              </div>
+              <div
+                className="rounded-lg overflow-hidden relative"
+                style={{
+                  border: '1px solid var(--c-border)',
+                  background: '#09090f',
+                  minHeight: 200,
+                }}
+              >
+                {loading && (
+                  <div className="absolute inset-0 flex items-center justify-center" style={{ background: 'rgba(0,0,0,0.5)', zIndex: 2 }}>
+                    <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Generating...</span>
+                  </div>
+                )}
+                {svg && (
+                  <div
+                    className="w-full [&>svg]:w-full [&>svg]:h-auto [&>svg]:block"
+                    dangerouslySetInnerHTML={{ __html: svg }}
+                  />
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Footer: actions */}
+        <div className="flex items-center justify-between px-5 py-3" style={{ borderTop: '1px solid var(--c-border)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
+            Tip: Toggle sections to customize your share card
+          </span>
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handleDownloadSvg}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)' }}
+            >
+              <Download size={12} />
+              SVG
+            </button>
+            <button
+              onClick={handleDownloadPng}
+              disabled={downloading}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ border: '1px solid var(--c-border)', color: 'var(--c-text)', opacity: downloading ? 0.5 : 1 }}
+            >
+              <Download size={12} />
+              {downloading ? 'Converting...' : 'PNG'}
+            </button>
+            <button
+              onClick={handleShareTwitter}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-[12px] rounded-md transition hover:opacity-80"
+              style={{ background: '#6366f1', color: '#fff' }}
+            >
+              <Share2 size={12} />
+              Share on X
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/ui/src/lib/api.js

@@ -180,8 +180,17 @@ export async function fetchSchema() {
   return res.json();
 }
 
-export async function fetchShareImage() {
-  const res = await fetch(`${BASE}/api/share-image`);
+export async function fetchShareImage(opts = {}) {
+  const q = new URLSearchParams();
+  if (opts.showEditors !== undefined) q.set('showEditors', opts.showEditors);
+  if (opts.showModels !== undefined) q.set('showModels', opts.showModels);
+  if (opts.showCosts !== undefined) q.set('showCosts', opts.showCosts);
+  if (opts.showTokens !== undefined) q.set('showTokens', opts.showTokens);
+  if (opts.showHours !== undefined) q.set('showHours', opts.showHours);
+  if (opts.username) q.set('username', opts.username);
+  if (opts.theme) q.set('theme', opts.theme);
+  const qs = q.toString();
+  const res = await fetch(`${BASE}/api/share-image${qs ? '?' + qs : ''}`);
   return res.text();
 }
 

package/ui/src/pages/Dashboard.jsx

@@ -8,8 +8,9 @@ import ActivityHeatmap from '../components/ActivityHeatmap'
 import DateRangePicker from '../components/DateRangePicker'
 import { editorColor, editorLabel, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
-import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage, fetchChats, fetchCosts } from '../lib/api'
+import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchChats, fetchCosts } from '../lib/api'
 import ChatSidebar from '../components/ChatSidebar'
+import ShareModal from '../components/ShareModal'
 import { useTheme } from '../lib/theme'
 import SectionTitle from '../components/SectionTitle'
 
@@ -32,7 +33,7 @@ export default function Dashboard({ overview }) {
   const [dateRange, setDateRange] = useState(null)
   const { dark } = useTheme()
   const [costs, setCosts] = useState(null)
-  const [sharing, setSharing] = useState(false)
+  const [shareOpen, setShareOpen] = useState(false)
   const [largeContextChats, setLargeContextChats] = useState(null)
   const [selectedChatId, setSelectedChatId] = useState(null)
   const txtColor = dark ? '#888' : '#555'
@@ -169,54 +170,6 @@ export default function Dashboard({ overview }) {
     return s + v * midpoints[i]
   }, 0) / tk.sessions).toFixed(1) : '—') : '—'
 
-  const handleShare = async () => {
-    setSharing(true)
-    try {
-      const svg = await fetchShareImage()
-      if (!svg || svg.startsWith('{')) throw new Error('Failed to fetch image')
-
-      // Try PNG conversion via canvas, fallback to SVG download
-      let downloaded = false
-      try {
-        const canvas = document.createElement('canvas')
-        canvas.width = 1600
-        canvas.height = 880
-        const ctx = canvas.getContext('2d')
-        const img = new Image()
-        const svgB64 = btoa(unescape(encodeURIComponent(svg)))
-        const dataUrl = `data:image/svg+xml;base64,${svgB64}`
-        await new Promise((resolve, reject) => {
-          img.onload = resolve
-          img.onerror = reject
-          img.src = dataUrl
-        })
-        ctx.drawImage(img, 0, 0, 1600, 880)
-        const pngUrl = canvas.toDataURL('image/png')
-        const a = document.createElement('a')
-        a.href = pngUrl
-        a.download = 'agentlytics.png'
-        a.click()
-        downloaded = true
-      } catch {
-        // Fallback: download SVG directly
-        const blob = new Blob([svg], { type: 'image/svg+xml' })
-        const a = document.createElement('a')
-        a.href = URL.createObjectURL(blob)
-        a.download = 'agentlytics.svg'
-        a.click()
-        URL.revokeObjectURL(a.href)
-        downloaded = true
-      }
-
-      if (downloaded) {
-        const text = encodeURIComponent("Here's my agentic coding stats using github.com/f/agentlytics")
-        window.open(`https://x.com/intent/post?text=${text}`, '_blank')
-      }
-    } catch (e) {
-      console.error('Share failed:', e)
-    }
-    setSharing(false)
-  }
 
   return (
     <div className="fade-in space-y-3">
@@ -224,13 +177,12 @@ export default function Dashboard({ overview }) {
       <div className="flex items-center justify-end gap-3">
         <DateRangePicker value={dateRange} onChange={setDateRange} />
         <button
-          onClick={handleShare}
-          disabled={sharing}
+          onClick={() => setShareOpen(true)}
           className="flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-md transition hover:opacity-80"
-          style={{ background: '#6366f1', color: '#fff', opacity: sharing ? 0.5 : 1 }}
+          style={{ background: '#6366f1', color: '#fff' }}
         >
           <Share2 size={12} />
-          {sharing ? 'Generating...' : 'Share Stats'}
+          Share Stats
         </button>
       </div>
 
@@ -561,6 +513,7 @@ export default function Dashboard({ overview }) {
         )}
       </div>
       <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
+      <ShareModal open={shareOpen} onClose={() => setShareOpen(false)} />
     </div>
   )
 }