agentlytics 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Comprehensive analytics dashboard for AI coding agents — Cursor, Windsurf, Claude Code, VS Code Copilot, Zed, Antigravity, OpenCode",
   "main": "index.js",
   "bin": {
@@ -10,6 +10,7 @@
     "index.js",
     "cache.js",
     "server.js",
+    "share-image.js",
     "editors/",
     "ui/src/",
     "ui/index.html",

package/server.js

@@ -1,6 +1,7 @@
 const express = require('express');
 const path = require('path');
 const cache = require('./cache');
+const { generateShareSvg } = require('./share-image');
 
 const app = express();
 app.use(express.json());
@@ -148,6 +149,19 @@ app.get('/api/schema', (req, res) => {
   }
 });
 
+app.get('/api/share-image', (req, res) => {
+  try {
+    const overview = cache.getCachedOverview();
+    const stats = cache.getCachedDashboardStats();
+    const svg = generateShareSvg(overview, stats);
+    res.setHeader('Content-Type', 'image/svg+xml');
+    res.send(svg);
+  } catch (err) {
+    console.error('Share image error:', err);
+    res.status(500).json({ error: err.message, stack: err.stack });
+  }
+});
+
 app.get('/api/refetch', async (req, res) => {
   res.writeHead(200, {
     'Content-Type': 'text/event-stream',

package/share-image.js

@@ -0,0 +1,151 @@
+/**
+ * Generates a shareable SVG stats card from cached data.
+ */
+
+function fmt(n) {
+  if (n == null) return '0';
+  if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'M';
+  if (n >= 1_000) return (n / 1_000).toFixed(1) + 'K';
+  return n.toLocaleString();
+}
+
+const EDITOR_COLORS = {
+  'cursor': '#f59e0b',
+  'windsurf': '#06b6d4',
+  'windsurf-next': '#22d3ee',
+  'antigravity': '#a78bfa',
+  'claude-code': '#f97316',
+  'claude': '#f97316',
+  'vscode': '#3b82f6',
+  'vscode-insiders': '#60a5fa',
+  'zed': '#10b981',
+  'opencode': '#ec4899',
+  'gemini-cli': '#4285f4',
+  'copilot-cli': '#8957e5',
+};
+
+const EDITOR_LABELS = {
+  'cursor': 'Cursor',
+  'windsurf': 'Windsurf',
+  'windsurf-next': 'WS Next',
+  'antigravity': 'Antigravity',
+  'claude-code': 'Claude Code',
+  'claude': 'Claude Code',
+  'vscode': 'VS Code',
+  'vscode-insiders': 'VS Code Ins.',
+  'zed': 'Zed',
+  'opencode': 'OpenCode',
+  'gemini-cli': 'Gemini CLI',
+  'copilot-cli': 'Copilot CLI',
+};
+
+function generateShareSvg(overview, stats) {
+  const W = 800, H = 440;
+  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);
+
+  // 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 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="#586e75" font-size="10" font-family="${F}">${esc(label)}</text>
+      <rect x="140" y="${y + 1}" width="${barW}" height="14" rx="2" fill="${color}" opacity="0.8"/>
+      <text x="${146 + barW}" y="${y + 12}" fill="#839496" font-size="9" font-family="${F}">${e.count}</text>
+    `;
+  }).join('');
+
+  // Activity sparkline from hourly data
+  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="#586e75" font-size="9" font-family="${F}">${esc(name)} <tspan fill="#475569">${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}" rx="12" fill="#002b36"/>
+  <rect x="0.5" y="0.5" width="${W - 1}" height="${H - 1}" rx="12" fill="none" stroke="#073642" stroke-width="1"/>
+
+  <!-- Terminal title bar -->
+  <rect x="0" y="0" width="${W}" height="32" rx="12" fill="#073642"/>
+  <rect x="0" y="16" width="${W}" height="16" fill="#073642"/>
+  <circle cx="18" cy="16" r="5" fill="#dc322f" opacity="0.8"/>
+  <circle cx="36" cy="16" r="5" fill="#b58900" opacity="0.8"/>
+  <circle cx="54" cy="16" r="5" fill="#859900" opacity="0.8"/>
+  <text x="${W / 2}" y="20" fill="#586e75" font-size="11" font-family="${F}" text-anchor="middle">agentlytics</text>
+
+  <!-- Prompt line -->
+  <text x="24" y="58" fill="#859900" font-size="12" font-family="${F}">$</text>
+  <text x="40" y="58" fill="#93a1a1" font-size="12" font-family="${F}">npx agentlytics</text>
+
+  <!-- Divider -->
+  <line x1="24" y1="68" x2="${W - 24}" y2="68" stroke="#073642" stroke-width="1"/>
+
+  <!-- KPI row -->
+  <rect x="24" y="78" width="175" height="58" rx="6" fill="#073642"/>
+  <text x="36" y="96" fill="#586e75" font-size="9" font-family="${F}">sessions</text>
+  <text x="36" y="122" fill="#93a1a1" font-size="22" font-weight="bold" font-family="${F}">${fmt(overview.totalChats)}</text>
+
+  <rect x="210" y="78" width="175" height="58" rx="6" fill="#073642"/>
+  <text x="222" y="96" fill="#586e75" font-size="9" font-family="${F}">tokens</text>
+  <text x="222" y="122" fill="#93a1a1" font-size="22" font-weight="bold" font-family="${F}">${fmt((tk.input || 0) + (tk.output || 0))}</text>
+
+  <rect x="396" y="78" width="175" height="58" rx="6" fill="#073642"/>
+  <text x="408" y="96" fill="#586e75" font-size="9" font-family="${F}">active_days</text>
+  <text x="408" y="122" fill="#93a1a1" font-size="22" font-weight="bold" font-family="${F}">${streaks.totalDays || 0}</text>
+
+  <rect x="582" y="78" width="194" height="58" rx="6" fill="#073642"/>
+  <text x="594" y="96" fill="#586e75" font-size="9" font-family="${F}">streak <tspan fill="#475569">longest:${streaks.longest || 0}</tspan></text>
+  <text x="594" y="122" fill="#93a1a1" font-size="22" font-weight="bold" font-family="${F}">${streaks.current || 0} <tspan font-size="11" fill="#586e75">day${(streaks.current || 0) !== 1 ? 's' : ''}</tspan></text>
+
+  <!-- Editors section -->
+  <text x="24" y="160" fill="#859900" font-size="10" font-family="${F}"># editors</text>
+  ${editorBars}
+
+  <!-- Right column: Peak Hours -->
+  <text x="590" y="160" fill="#859900" font-size="10" font-family="${F}"># peak_hours</text>
+  <polyline points="${sparkPoints}" fill="none" stroke="#268bd2" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>
+  <text x="590" y="${180 + sparkH + 14}" fill="#475569" font-size="8" font-family="${F}">00:00</text>
+  <text x="${590 + sparkW - 28}" y="${180 + sparkH + 14}" fill="#475569" font-size="8" font-family="${F}">23:00</text>
+
+  <!-- Top Models -->
+  <text x="590" y="258" fill="#859900" font-size="10" font-family="${F}"># models</text>
+  ${modelsList}
+
+  <!-- Token breakdown -->
+  <line x1="24" y1="${H - 62}" x2="${W - 24}" y2="${H - 62}" stroke="#073642" stroke-width="1"/>
+  <text x="24" y="${H - 44}" fill="#586e75" 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>
+
+  <!-- Footer -->
+  <line x1="24" y1="${H - 28}" x2="${W - 24}" y2="${H - 28}" stroke="#073642" stroke-width="1"/>
+  <text x="24" y="${H - 10}" fill="#475569" font-size="9" font-family="${F}">github.com/f/agentlytics</text>
+  <text x="${W - 24}" y="${H - 10}" fill="#475569" font-size="9" font-family="${F}" text-anchor="end">${esc(dateStr)}</text>
+</svg>`;
+
+  return svg;
+}
+
+function esc(str) {
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+module.exports = { generateShareSvg };

package/ui/src/lib/api.js

@@ -83,6 +83,11 @@ export async function fetchSchema() {
   return res.json();
 }
 
+export async function fetchShareImage() {
+  const res = await fetch(`${BASE}/api/share-image`);
+  return res.text();
+}
+
 export async function fetchToolCalls(name, opts = {}) {
   const q = new URLSearchParams({ name });
   if (opts.limit) q.set('limit', opts.limit);

package/ui/src/pages/Dashboard.jsx

@@ -1,11 +1,11 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { ArrowRight, X, Flame, Zap, MessageSquare, Wrench } from 'lucide-react'
+import { ArrowRight, X, Flame, Zap, MessageSquare, Wrench, Share2 } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler } from 'chart.js'
 import { Doughnut, Bar, Line } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
 import ActivityHeatmap from '../components/ActivityHeatmap'
-import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats } from '../lib/api'
+import { fetchDailyActivity, fetchOverview as fetchOverviewApi, fetchDashboardStats, fetchShareImage } from '../lib/api'
 import { editorColor, editorLabel, formatNumber } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 
@@ -30,6 +30,7 @@ export default function Dashboard({ overview }) {
   const [stats, setStats] = useState(null)
   const [selectedEditor, setSelectedEditor] = useState(null)
   const { dark } = useTheme()
+  const [sharing, setSharing] = useState(false)
   const txtColor = dark ? '#888' : '#555'
   const txtDim = dark ? '#555' : '#999'
   const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
@@ -157,8 +158,70 @@ 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">
+      {/* Share button */}
+      <div className="flex justify-end">
+        <button
+          onClick={handleShare}
+          disabled={sharing}
+          className="flex items-center gap-1.5 px-3 py-1 text-[11px] rounded-md transition hover:opacity-80"
+          style={{ background: '#6366f1', color: '#fff', opacity: sharing ? 0.5 : 1 }}
+        >
+          <Share2 size={12} />
+          {sharing ? 'Generating...' : 'Share Stats'}
+        </button>
+      </div>
+
       {/* Editor breakdown - top */}
       <div className="card p-3">
         <SectionTitle>editors</SectionTitle>