agentlytics 0.0.3 → 0.0.4

package/package.json

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

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/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>