agentlytics 0.1.11 → 0.1.13

package/cache.js

@@ -431,14 +431,17 @@ function getCachedOverview(opts = {}) {
   const hf = hiddenFolderFilter(opts);
   if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('source = ?'); params.push(opts.editor); }
+  if (opts.folder) { conditions.push('folder = ?'); params.push(opts.folder); }
   if (opts.dateFrom) { conditions.push('COALESCE(last_updated_at, created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(last_updated_at, created_at) <= ?'); params.push(opts.dateTo); }
   const where = conditions.length > 0 ? ' WHERE ' + conditions.join(' AND ') : '';
   const whereAnd = conditions.length > 0 ? ' AND ' + conditions.join(' AND ') : '';
 
   const totalChats = db.prepare(`SELECT COUNT(*) as cnt FROM chats${where}`).get(...params).cnt;
-  // Editors list is always unfiltered so the breakdown remains visible
-  const editors = db.prepare('SELECT source, COUNT(*) as count FROM chats GROUP BY source ORDER BY count DESC').all();
+  // When folder-filtered, show only that project's editors; otherwise show all
+  const editors = opts.folder
+    ? db.prepare(`SELECT source, COUNT(*) as count FROM chats${where} GROUP BY source ORDER BY count DESC`).all(...params)
+    : db.prepare('SELECT source, COUNT(*) as count FROM chats GROUP BY source ORDER BY count DESC').all();
 
   // By mode
   const modes = db.prepare(`SELECT mode, COUNT(*) as count FROM chats WHERE mode IS NOT NULL${whereAnd} GROUP BY mode`).all(...params);
@@ -851,6 +854,7 @@ function getCachedDashboardStats(opts = {}) {
   const hf = hiddenFolderFilter(opts);
   if (hf.sql) { conditions.push(hf.sql.replace(' AND ', '')); params.push(...hf.params); }
   if (opts.editor) { conditions.push('source = ?'); params.push(opts.editor); }
+  if (opts.folder) { conditions.push('folder = ?'); params.push(opts.folder); }
   if (opts.dateFrom) { conditions.push('COALESCE(last_updated_at, created_at) >= ?'); params.push(opts.dateFrom); }
   if (opts.dateTo) { conditions.push('COALESCE(last_updated_at, created_at) <= ?'); params.push(opts.dateTo); }
   const where = conditions.length > 0 ? ' WHERE ' + conditions.join(' AND ') : '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentlytics",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "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

@@ -264,9 +264,11 @@ app.get('/api/schema', (req, res) => {
 
 app.get('/api/share-image', (req, res) => {
   try {
-    const overview = cache.getCachedOverview();
-    const stats = cache.getCachedDashboardStats();
-    const costs = cache.getCostAnalytics({ hiddenFolders: getHiddenFolders() });
+    const filterOpts = { hiddenFolders: getHiddenFolders() };
+    if (req.query.folder) filterOpts.folder = req.query.folder;
+    const overview = cache.getCachedOverview(filterOpts);
+    const stats = cache.getCachedDashboardStats(filterOpts);
+    const costs = cache.getCostAnalytics(filterOpts);
     const opts = {};
     if (req.query.showEditors !== undefined) opts.showEditors = req.query.showEditors !== 'false';
     if (req.query.showModels !== undefined) opts.showModels = req.query.showModels !== 'false';
@@ -275,6 +277,7 @@ app.get('/api/share-image', (req, res) => {
     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;
+    if (req.query.folder) opts.folder = req.query.folder;
     const svg = generateShareSvg(overview, stats, costs, opts);
     res.setHeader('Content-Type', 'image/svg+xml');
     res.send(svg);

package/share-image.js

@@ -93,10 +93,12 @@ function generateShareSvg(overview, stats, costs, opts = {}) {
   };
   const username = opts.username || '';
   const t = THEMES[opts.theme] || THEMES.dark;
+  const projectFolder = opts.folder || '';
+  const projectName = projectFolder ? projectFolder.split(/[/\\]/).pop() : '';
 
   const W = 1200;
   const H_FIXED = 675;
-  const F = "'Menlo','Monaco','Cascadia Code','Courier New',monospace";
+  const F = "\"'Menlo','Monaco','Cascadia Code','Courier New',monospace\"";
   const editors = overview.editors || [];
   const tk = stats.tokens || {};
   const streaks = stats.streaks || {};
@@ -183,9 +185,10 @@ function generateShareSvg(overview, stats, costs, opts = {}) {
   });
 
   // ── Editor bar chart ──
+  const colW = (W - pad * 2 - 20) / 2;
+  const maxBarW = colW - 120 - 60;
   const maxEditorCount = Math.max(...editors.map(e => e.count), 1);
   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);
@@ -195,7 +198,6 @@ function generateShareSvg(overview, stats, costs, opts = {}) {
   // ── 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;
@@ -209,7 +211,6 @@ function generateShareSvg(overview, stats, costs, opts = {}) {
   // ── Build sections ──
   let curY = kpiY + 64 + 18;
   const sectionSvgs = [];
-  const colW = (W - pad * 2 - 20) / 2;
 
   for (let row = 0; row < rowCount; row++) {
     const lName = leftSections[row];
@@ -330,7 +331,7 @@ function generateShareSvg(overview, stats, costs, opts = {}) {
     <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="${pad + 148}" y="68" fill="${t.text4}" font-size="13" font-family=${F}>${projectName ? esc(projectName) : '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 -->

package/ui/src/components/ShareModal.jsx

@@ -1,6 +1,6 @@
 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'
+import { X, Download, Share2, BarChart3, DollarSign, Clock, Cpu, Braces, User, Sun, Moon, FolderOpen } from 'lucide-react'
+import { fetchShareImage, fetchProjects } from '../lib/api'
 
 const TOGGLE_ITEMS = [
   { key: 'showEditors', label: 'Editors', icon: BarChart3 },
@@ -23,6 +23,7 @@ export default function ShareModal({ open, onClose }) {
   const [svg, setSvg] = useState('')
   const [loading, setLoading] = useState(false)
   const [downloading, setDownloading] = useState(false)
+  const [projects, setProjects] = useState([])
   const debounceRef = useRef(null)
   const backdropRef = useRef(null)
 
@@ -40,6 +41,7 @@ export default function ShareModal({ open, onClose }) {
   useEffect(() => {
     if (!open) return
     loadPreview(opts)
+    fetchProjects().then(p => setProjects(p || [])).catch(() => {})
   }, [open])
 
   const updateOpt = (key, value) => {
@@ -53,25 +55,33 @@ export default function ShareModal({ open, onClose }) {
     if (!svg) return
     setDownloading(true)
     try {
-      const canvas = document.createElement('canvas')
-      canvas.width = 1200
-      canvas.height = 675
-      const ctx = canvas.getContext('2d')
+      const scale = 2
+      const svgBlob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' })
+      const url = URL.createObjectURL(svgBlob)
       const img = new Image()
-      const svgB64 = btoa(unescape(encodeURIComponent(svg)))
-      const dataUrl = `data:image/svg+xml;base64,${svgB64}`
+      img.width = 1200 * scale
+      img.height = 675 * scale
       await new Promise((resolve, reject) => {
         img.onload = resolve
         img.onerror = reject
-        img.src = dataUrl
+        img.src = url
       })
-      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 canvas = document.createElement('canvas')
+      canvas.width = 1200 * scale
+      canvas.height = 675 * scale
+      const ctx = canvas.getContext('2d')
+      ctx.drawImage(img, 0, 0, 1200 * scale, 675 * scale)
+      URL.revokeObjectURL(url)
+      canvas.toBlob((blob) => {
+        if (!blob) return
+        const a = document.createElement('a')
+        a.href = URL.createObjectURL(blob)
+        a.download = 'agentlytics.png'
+        a.click()
+        setTimeout(() => URL.revokeObjectURL(a.href), 1000)
+      }, 'image/png')
+    } catch (e) {
+      console.error('PNG conversion failed:', e)
       const blob = new Blob([svg], { type: 'image/svg+xml' })
       const a = document.createElement('a')
       a.href = URL.createObjectURL(blob)
@@ -94,7 +104,7 @@ export default function ShareModal({ open, onClose }) {
 
   const handleShareTwitter = async () => {
     await handleDownloadPng()
-    const text = encodeURIComponent("Here's my agentic coding stats using github.com/f/agentlytics")
+    const text = encodeURIComponent("Here's my agentic coding stats using agentlytics.io\n\nrun `npx agentlytics` to get yours ✨\n\ngithub.com/f/agentlytics")
     window.open(`https://x.com/intent/post?text=${text}`, '_blank')
   }
 
@@ -138,6 +148,28 @@ export default function ShareModal({ open, onClose }) {
                 Customize
               </div>
 
+              <div className="mb-4">
+                <div className="text-[11px] font-medium mb-2" style={{ color: 'var(--c-text2)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
+                  Project
+                </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)' }}>
+                  <FolderOpen size={11} style={{ color: 'var(--c-text3)' }} />
+                  <select
+                    value={opts.folder || ''}
+                    onChange={(e) => updateOpt('folder', e.target.value || undefined)}
+                    className="bg-transparent outline-none text-[12px] w-full cursor-pointer"
+                    style={{ color: 'var(--c-text)', appearance: 'none' }}
+                  >
+                    <option value="">All Projects</option>
+                    {projects.map(p => (
+                      <option key={p.folder} value={p.folder}>
+                        {p.name} ({p.totalSessions})
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+
               <div className="space-y-1.5">
                 {TOGGLE_ITEMS.map(({ key, label, icon: Icon }) => {
                   const active = opts[key]

package/ui/src/lib/api.js

@@ -189,6 +189,7 @@ export async function fetchShareImage(opts = {}) {
   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);
+  if (opts.folder) q.set('folder', opts.folder);
   const qs = q.toString();
   const res = await fetch(`${BASE}/api/share-image${qs ? '?' + qs : ''}`);
   return res.text();