agentlytics 0.1.9 → 0.1.11

package/relay-client.js

@@ -1,9 +1,5 @@
 const chalk = require('chalk');
 const http = require('http');
-const https = require('https');
-const path = require('path');
-const os = require('os');
-const fs = require('fs');
 const readline = require('readline');
 const crypto = require('crypto');
 

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/App.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
 import { Routes, Route, NavLink } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Radio, Plug, Copy, Check, Settings as SettingsIcon } from 'lucide-react'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
 import AnimatedLogo from './components/AnimatedLogo'
@@ -9,7 +9,6 @@ import Dashboard from './pages/Dashboard'
 import Sessions from './pages/Sessions'
 import DeepAnalysis from './pages/DeepAnalysis'
 import Compare from './pages/Compare'
-import ChatDetail from './pages/ChatDetail'
 import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
 import CostAnalysis from './pages/CostAnalysis'

package/ui/src/components/LiveFeed.jsx

@@ -4,15 +4,6 @@ import EditorDot from './EditorDot'
 import { editorLabel, formatNumber } from '../lib/constants'
 import { fetchRelayFeed } from '../lib/api'
 
-function timeAgo(ts) {
-  if (!ts) return ''
-  const diff = Date.now() - ts
-  if (diff < 60000) return 'just now'
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`
-  return `${Math.floor(diff / 86400000)}d ago`
-}
-
 function timeLabel(ts) {
   if (!ts) return ''
   const d = new Date(ts)
@@ -22,7 +13,6 @@ function timeLabel(ts) {
 export default function LiveFeed({ onSessionClick }) {
   const [items, setItems] = useState([])
   const scrollRef = useRef(null)
-  const prevCountRef = useRef(0)
 
   useEffect(() => {
     const load = () => {

package/ui/src/components/MessageRenderer.jsx

@@ -146,22 +146,3 @@ export default function MessageContent({ content, toolCallDetails }) {
   })
 }
 
-/**
- * Renders a single message bubble with role icon, model tag, and content.
- */
-export function MessageBubble({ msg, toolCallDetails }) {
-  const cfg = ROLE_CONFIG[msg.role] || ROLE_CONFIG.system
-  const Icon = cfg.icon
-  return (
-    <div className="rounded-r-lg px-4 py-3" style={{ borderLeft: `2px solid ${cfg.borderColor}`, background: cfg.bg }}>
-      <div className="flex items-center gap-2 text-xs mb-2" style={{ color: 'var(--c-text2)' }}>
-        <Icon size={13} />
-        <span className="font-medium">{cfg.label}</span>
-        {msg.model && <span className="font-mono" style={{ color: 'var(--c-accent)', opacity: 0.6 }}>· {msg.model}</span>}
-      </div>
-      <div className="text-sm" style={{ color: 'var(--c-text)' }}>
-        <MessageContent content={msg.content} toolCallDetails={toolCallDetails} />
-      </div>
-    </div>
-  )
-}