agentlytics 0.1.18 → 0.1.20

package/server.js

@@ -333,6 +333,107 @@ app.put('/api/config', (req, res) => {
   }
 });
 
+app.get('/api/check-ai', async (req, res) => {
+  const folder = req.query.folder;
+  if (!folder) return res.status(400).json({ error: 'folder query param required' });
+  try {
+    const { execFile } = require('child_process');
+    const isWindows = process.platform === 'win32';
+    // On Windows, use npx.cmd with shell; on Unix, use npx directly
+    const cmd = isWindows ? 'npx.cmd' : 'npx';
+    const result = await new Promise((resolve, reject) => {
+      execFile(cmd, ['-y', 'check-ai', '--json', folder], {
+        timeout: 60000,
+        maxBuffer: 1024 * 1024,
+        shell: isWindows
+      }, (err, stdout) => {
+        try {
+          const json = JSON.parse(stdout);
+          resolve(json);
+        } catch (e) {
+          reject(new Error(err ? err.message : 'Failed to parse check-ai output'));
+        }
+      });
+    });
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+// ============================================================
+// Artifacts — delegates to editors/index.js getAllArtifacts
+// ============================================================
+
+app.get('/api/artifacts', (req, res) => {
+  try {
+    const { getAllArtifacts } = require('./editors');
+    const projects = cache.getCachedProjects({ hiddenFolders: getHiddenFolders() });
+    const result = [];
+
+    for (const project of projects) {
+      const folder = project.folder;
+      if (!folder) continue;
+
+      const artifacts = getAllArtifacts(folder);
+      if (artifacts.length === 0) continue;
+
+      // Group by editor
+      const byEditor = {};
+      for (const a of artifacts) {
+        if (!byEditor[a.editor]) byEditor[a.editor] = { editor: a.editor, label: a.editorLabel, files: [] };
+        byEditor[a.editor].files.push(a);
+      }
+
+      result.push({
+        folder,
+        name: project.name || path.basename(folder),
+        totalArtifacts: artifacts.length,
+        editors: Object.values(byEditor),
+      });
+    }
+
+    // Sort by total artifacts descending
+    result.sort((a, b) => b.totalArtifacts - a.totalArtifacts);
+    res.json(result);
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
+app.get('/api/artifact-content', (req, res) => {
+  try {
+    const filePath = req.query.path;
+    if (!filePath) return res.status(400).json({ error: 'path query param required' });
+
+    // Security: validate file exists in known artifact results for at least one project
+    const { getAllArtifacts } = require('./editors');
+    const projects = cache.getCachedProjects({ hiddenFolders: getHiddenFolders() });
+    let allowed = false;
+    for (const project of projects) {
+      if (!project.folder) continue;
+      const artifacts = getAllArtifacts(project.folder);
+      if (artifacts.some(a => a.path === filePath)) { allowed = true; break; }
+    }
+    // Also check global/editor-level artifacts not tied to any project (e.g. brain files)
+    if (!allowed) {
+      try {
+        const artifacts = getAllArtifacts(null);
+        if (artifacts.some(a => a.path === filePath)) allowed = true;
+      } catch { /* skip */ }
+    }
+    if (!allowed) return res.status(403).json({ error: 'Not an artifact file' });
+
+    if (!fs.existsSync(filePath)) return res.status(404).json({ error: 'File not found' });
+
+    const content = fs.readFileSync(filePath, 'utf-8');
+    const stat = fs.statSync(filePath);
+    res.json({ path: filePath, name: path.basename(filePath), content, size: stat.size, modifiedAt: stat.mtime.getTime() });
+  } catch (err) {
+    res.status(500).json({ error: err.message });
+  }
+});
+
 app.get('/api/all-projects', (req, res) => {
   try {
     res.json(cache.getCachedProjects({ ...parseDateOpts(req.query), includeHidden: true }));

package/ui/src/App.jsx

@@ -1,9 +1,10 @@
 import { useState, useEffect, useRef, useCallback } from 'react'
-import { Routes, Route, NavLink } from 'react-router-dom'
-import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon } from 'lucide-react'
+import { Routes, Route, NavLink, useLocation } from 'react-router-dom'
+import { Activity, BarChart3, GitCompare, MessageSquare, FolderOpen, DollarSign, CreditCard, Sun, Moon, RefreshCw, AlertTriangle, Github, Terminal, Database, Users, Plug, Copy, Check, Settings as SettingsIcon, Package, ChevronDown } from 'lucide-react'
 import { fetchOverview, refetchAgents, fetchMode, fetchRelayConfig, getAuthToken, setOnAuthFailure } from './lib/api'
 import { useTheme } from './lib/theme'
 import AnimatedLogo from './components/AnimatedLogo'
+import AnimatedLoader from './components/AnimatedLoader'
 import LoginScreen from './components/LoginScreen'
 import Dashboard from './pages/Dashboard'
 import Sessions from './pages/Sessions'
@@ -13,11 +14,58 @@ import Projects from './pages/Projects'
 import ProjectDetail from './pages/ProjectDetail'
 import CostAnalysis from './pages/CostAnalysis'
 import SqlViewer from './pages/SqlViewer'
+import Artifacts from './pages/Artifacts'
 import Settings from './pages/Settings'
 import Subscriptions from './pages/Subscriptions'
 import RelayDashboard from './pages/RelayDashboard'
 import RelayUserDetail from './pages/RelayUserDetail'
 
+function NavDropdown({ icon: Icon, label, items }) {
+  const [open, setOpen] = useState(false)
+  const location = useLocation()
+  const isActive = items.some(i => i.to === location.pathname)
+  const timeout = useRef(null)
+
+  const enter = () => { clearTimeout(timeout.current); setOpen(true) }
+  const leave = () => { timeout.current = setTimeout(() => setOpen(false), 150) }
+
+  return (
+    <div className="relative" onMouseEnter={enter} onMouseLeave={leave}>
+      <button
+        className={`flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
+          isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
+        }`}
+      >
+        <Icon size={12} />
+        {label}
+        <ChevronDown size={10} style={{ opacity: 0.5 }} />
+      </button>
+      {open && (
+        <div
+          className="absolute top-full left-0 mt-1 py-1 rounded shadow-lg min-w-[160px] z-[100]"
+          style={{ background: 'var(--c-bg)', border: '1px solid var(--c-border)' }}
+        >
+          {items.map(({ to, icon: SubIcon, label: subLabel }) => (
+            <NavLink
+              key={to}
+              to={to}
+              onClick={() => setOpen(false)}
+              className={({ isActive: a }) =>
+                `flex items-center gap-2 px-3 py-1.5 text-[12px] transition ${
+                  a ? 'bg-[var(--c-bg3)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)] hover:bg-[var(--c-bg3)]'
+                }`
+              }
+            >
+              <SubIcon size={12} />
+              {subLabel}
+            </NavLink>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function App() {
   const [overview, setOverview] = useState(null)
   const [refetchState, setRefetchState] = useState(null) // null | { scanned, total }
@@ -82,16 +130,24 @@ export default function App() {
   const isRelay = mode === 'relay'
   const showLogin = isRelay && needsAuth && !authed
 
+  const location = useLocation()
+  const isFullWidth = location.pathname === '/artifacts'
+
   const nav = isRelay ? [
     { to: '/', icon: Users, label: 'Team' },
   ] : [
     { to: '/', icon: Activity, label: 'Dashboard' },
-    { to: '/projects', icon: FolderOpen, label: 'Projects' },
     { to: '/sessions', icon: MessageSquare, label: 'Sessions' },
-    { to: '/costs', icon: DollarSign, label: 'Costs' },
-    { to: '/analysis', icon: BarChart3, label: 'Analysis' },
-    { to: '/compare', icon: GitCompare, label: 'Compare' },
-    { to: '/subscriptions', icon: CreditCard, label: 'Subscriptions' },
+    { to: '/projects', icon: FolderOpen, label: 'Projects' },
+    { icon: DollarSign, label: 'Costs', children: [
+      { to: '/costs', icon: DollarSign, label: 'Cost Analysis' },
+      { to: '/subscriptions', icon: CreditCard, label: 'Subscriptions' },
+    ]},
+    { icon: BarChart3, label: 'Insights', children: [
+      { to: '/analysis', icon: BarChart3, label: 'Deep Analysis' },
+      { to: '/compare', icon: GitCompare, label: 'Compare' },
+    ]},
+    { to: '/artifacts', icon: Package, label: 'Artifacts' },
     { to: '/sql', icon: Database, label: 'SQL' },
   ]
 
@@ -107,19 +163,21 @@ export default function App() {
           Agentlytics{isRelay && <span className="ml-1.5 text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>relay</span>}
         </span>
         <nav className="flex gap-0.5 ml-2">
-          {nav.map(({ to, icon: Icon, label }) => (
+          {nav.map((item) => item.children ? (
+            <NavDropdown key={item.label} icon={item.icon} label={item.label} items={item.children} />
+          ) : (
             <NavLink
-              key={to}
-              to={to}
-              end={to === '/'}
+              key={item.to}
+              to={item.to}
+              end={item.to === '/'}
               className={({ isActive }) =>
                 `flex items-center gap-1.5 px-2.5 py-1 text-[12px] rounded transition ${
                   isActive ? 'bg-[var(--c-card)] text-[var(--c-white)]' : 'text-[var(--c-text2)] hover:text-[var(--c-white)]'
                 }`
               }
             >
-              <Icon size={12} />
-              {label}
+              <item.icon size={12} />
+              {item.label}
             </NavLink>
           ))}
         </nav>
@@ -196,9 +254,9 @@ export default function App() {
         </div>
       )}
 
-      <main className={isRelay ? 'px-0' : 'p-4 max-w-[1400px] mx-auto'}>
+      <main className={isRelay ? 'px-0' : isFullWidth ? 'p-0 overflow-hidden' : 'p-4 max-w-[1400px] mx-auto'}>
         {mode === null ? (
-          <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading...</div>
+          <AnimatedLoader label="Loading..." />
         ) : isRelay ? (
           <Routes>
             <Route path="/" element={<RelayDashboard />} />
@@ -216,13 +274,14 @@ export default function App() {
             <Route path="/analysis" element={<DeepAnalysis overview={overview} />} />
             <Route path="/compare" element={<Compare overview={overview} />} />
             <Route path="/subscriptions" element={<Subscriptions />} />
+            <Route path="/artifacts" element={<Artifacts />} />
             <Route path="/sql" element={<SqlViewer />} />
             <Route path="/settings" element={<Settings />} />
           </Routes>
         )}
       </main>
 
-      <footer className="border-t mt-8 px-4 py-3 flex items-center justify-between text-[11px]" style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
+      <footer className={`border-t mt-8 px-4 py-3 flex items-center justify-between text-[11px]${isFullWidth ? ' hidden' : ''}`} style={{ borderColor: 'var(--c-border)', color: 'var(--c-text3)' }}>
         <div className="flex items-center gap-3">
           <a href="https://github.com/f/agentlytics" target="_blank" rel="noopener noreferrer" className="flex items-center gap-1 hover:text-[var(--c-text)] transition">
             <Github size={11} />

package/ui/src/components/AiAuditCard.jsx

@@ -0,0 +1,254 @@
+import { useState, useEffect, useRef } from 'react'
+import { ShieldCheck, Loader2, CheckCircle2, AlertTriangle, RefreshCw, Info, ChevronRight, ChevronDown, Brush, FileText, FlaskConical, Bot, Lock, Puzzle, Plug, Package } from 'lucide-react'
+import { fetchCheckAi } from '../lib/api'
+import SectionTitle from './SectionTitle'
+
+const GRADE_COLORS = {
+  'A+': '#22c55e', A: '#22c55e',
+  'B+': '#4ade80', B: '#4ade80',
+  'C+': '#facc15', C: '#facc15',
+  'D+': '#f97316', D: '#f97316',
+  F: '#ef4444',
+}
+
+const SECTION_ICONS = {
+  'Repo Hygiene': Brush,
+  'Grounding Docs': FileText,
+  'Testing': FlaskConical,
+  'Agent Configs': Bot,
+  'AI Context': Lock,
+  'Prompts & Skills': Puzzle,
+  'MCP': Plug,
+  'AI Dependencies': Package,
+  'AI Deps': Package,
+}
+
+function Tip({ missing }) {
+  const [open, setOpen] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    if (!open) return
+    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false) }
+    document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  const weighted = missing.filter(f => f.weight > 0)
+  const items = weighted.length > 0 ? weighted : missing.slice(0, 5)
+  if (items.length === 0) return null
+
+  return (
+    <span ref={ref} className="relative flex-shrink-0">
+      <button
+        onClick={(e) => { e.stopPropagation(); setOpen(!open) }}
+        className="flex items-center justify-center w-4 h-4 rounded-full transition hover:opacity-80"
+        style={{ color: 'var(--c-text3)', background: 'var(--c-bg3)' }}
+      >
+        <Info size={10} />
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 top-6 z-50 w-64 p-2.5 rounded shadow-lg"
+          style={{ background: 'var(--c-bg)', border: '1px solid var(--c-border)', boxShadow: '0 4px 24px rgba(0,0,0,0.3)' }}
+        >
+          <div className="text-[11px] font-medium mb-1.5" style={{ color: 'var(--c-white)' }}>How to improve</div>
+          <div className="space-y-1">
+            {items.map(f => (
+              <div key={f.id} className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
+                <span style={{ color: 'var(--c-text)' }}>+ {f.label}</span>
+                {f.weight > 0 && <span style={{ color: 'var(--c-text3)' }}> ({f.weight}pt)</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </span>
+  )
+}
+
+export default function AiAuditCard({ folder }) {
+  console.log('AiAuditCard rendering, folder:', folder)
+  const [audit, setAudit] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState(null)
+  const [expanded, setExpanded] = useState(new Set())
+
+  const runAudit = async () => {
+    if (!folder) return
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchCheckAi(folder)
+      if (result.error) throw new Error(result.error)
+      setAudit(result)
+    } catch (e) {
+      setError(e.message)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    console.log('AiAuditCard useEffect triggered, folder:', folder)
+    runAudit()
+  }, [folder])
+
+  if (loading) {
+    return (
+      <div className="card p-4">
+        <div className="flex items-center gap-2">
+          <Loader2 size={14} className="animate-spin" style={{ color: 'var(--c-accent)' }} />
+          <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Running AI readiness audit...</span>
+        </div>
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="card p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <AlertTriangle size={14} style={{ color: '#ef4444' }} />
+            <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>Audit failed: {error}</span>
+          </div>
+          <button
+            onClick={runAudit}
+            className="flex items-center gap-1.5 px-2.5 py-1 text-[11px] rounded transition hover:opacity-80"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <RefreshCw size={10} />
+            Retry
+          </button>
+        </div>
+      </div>
+    )
+  }
+
+  if (!audit) return null
+
+  const gradeColor = GRADE_COLORS[audit.grade] || 'var(--c-text2)'
+  const sections = audit.sections || {}
+  const findings = audit.findings || []
+
+  const findingsBySection = {}
+  for (const f of findings) {
+    const sec = f.section || 'Other'
+    if (!findingsBySection[sec]) findingsBySection[sec] = []
+    findingsBySection[sec].push(f)
+  }
+
+  return (
+    <div className="card p-4 space-y-3">
+      {/* Header row */}
+      <div className="flex items-center gap-3">
+        <ShieldCheck size={16} style={{ color: gradeColor }} />
+        <div>
+          <SectionTitle>ai readiness audit</SectionTitle>
+          <div className="text-[10px] -mt-1.5" style={{ color: 'var(--c-text3)' }}>powered by <code style={{ fontFamily: 'JetBrains Mono, monospace' }}>npx check-ai</code></div>
+        </div>
+        <div className="flex items-center gap-2 ml-auto">
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
+            {audit.checks?.passed || 0}/{audit.checks?.total || 0} checks
+            &middot; {audit.points?.earned || 0}/{audit.points?.max || 0} pts
+          </span>
+          <button
+            onClick={runAudit}
+            className="flex items-center gap-1 px-2 py-1 text-[11px] rounded transition hover:opacity-80"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <RefreshCw size={10} />
+          </button>
+        </div>
+      </div>
+
+      {/* Score row */}
+      <div className="flex items-center gap-3">
+        <div
+          className="w-11 h-11 rounded-lg flex items-center justify-center text-base font-black flex-shrink-0"
+          style={{ background: `${gradeColor}15`, color: gradeColor, border: `1.5px solid ${gradeColor}30` }}
+        >
+          {audit.grade}
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-1.5">
+            <span className="text-base font-bold" style={{ color: 'var(--c-white)' }}>{audit.score}</span>
+            <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>/10</span>
+            <span className="text-[11px] ml-1" style={{ color: 'var(--c-text2)' }}>{audit.label}</span>
+          </div>
+          <div className="w-full h-2 rounded-full overflow-hidden mt-1" style={{ background: 'var(--c-code-bg)' }}>
+            <div className="h-full rounded-full" style={{ width: `${((audit.score || 0) / 10 * 100).toFixed(1)}%`, background: gradeColor }} />
+          </div>
+        </div>
+      </div>
+
+      {/* Section rows */}
+      <div>
+        {Object.entries(sections).map(([name, sec]) => {
+          const Icon = SECTION_ICONS[name] || FileText
+          const sectionFindings = findingsBySection[name] || []
+          const passed = sectionFindings.filter(f => f.found)
+          const missing = sectionFindings.filter(f => !f.found)
+          const pct = sec.pct || 0
+          const barColor = pct >= 70 ? '#22c55e' : pct >= 40 ? '#facc15' : pct > 0 ? '#f97316' : 'var(--c-text3)'
+
+          // Build description from found findings
+          const details = []
+          for (const f of passed) {
+            if (f.detail) details.push(f.detail)
+            else if (f.matchedPath) details.push(f.matchedPath)
+            else if (f.matches && f.matches.length > 0) details.push(f.matches.join(', '))
+            else details.push(f.label)
+          }
+          const desc = details.length > 0
+            ? details.slice(0, 3).join(' · ') + (details.length > 3 ? ' …' : '')
+            : 'none detected'
+
+          const isOpen = expanded.has(name)
+          const toggle = () => setExpanded(prev => {
+            const next = new Set(prev)
+            if (next.has(name)) next.delete(name)
+            else next.add(name)
+            return next
+          })
+
+          return (
+            <div key={name} style={{ borderBottom: '1px solid var(--c-border)' }}>
+              {/* Main row — clickable */}
+              <div className="flex items-center gap-2.5 py-2 cursor-pointer transition hover:bg-[var(--c-bg3)]" onClick={toggle}>
+                {isOpen
+                  ? <ChevronDown size={12} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                  : <ChevronRight size={12} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                }
+                <Icon size={14} style={{ color: 'var(--c-text3)', flexShrink: 0 }} />
+                <span className="text-[12px] font-medium w-32 flex-shrink-0" style={{ color: 'var(--c-white)' }}>{name}</span>
+                <span className="text-[11px] flex-1 truncate" style={{ color: passed.length > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+                  {desc}
+                </span>
+                <span className="text-[11px] flex-shrink-0" style={{ color: 'var(--c-text3)' }}>{passed.length}/{sectionFindings.length}</span>
+                <div className="w-20 h-2 rounded-full overflow-hidden flex-shrink-0" style={{ background: 'var(--c-code-bg)' }}>
+                  <div className="h-full rounded-full" style={{ width: `${pct}%`, background: barColor }} />
+                </div>
+                <span className="text-[11px] w-9 text-right font-bold flex-shrink-0" style={{ color: barColor }}>{pct}%</span>
+                {missing.length > 0 && <Tip missing={missing} />}
+              </div>
+              {/* Expanded: found findings */}
+              {isOpen && passed.length > 0 && (
+                <div className="flex flex-wrap gap-x-4 gap-y-0.5 pb-2 pl-12">
+                  {passed.map(f => (
+                    <span key={f.id} className="inline-flex items-center gap-1.5 text-[11px] py-0.5">
+                      <CheckCircle2 size={10} style={{ color: '#22c55e', flexShrink: 0 }} />
+                      <span style={{ color: 'var(--c-text)' }}>{f.label}</span>
+                      {f.matchedPath && <span style={{ color: 'var(--c-text3)' }}>{f.matchedPath}</span>}
+                      {f.detail && <span style={{ color: 'var(--c-text2)' }}>— {f.detail}</span>}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/ui/src/components/AnimatedLoader.jsx

@@ -0,0 +1,14 @@
+import AnimatedLogo from './AnimatedLogo'
+
+export default function AnimatedLoader({ label = 'Loading...' }) {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 gap-3">
+      <div style={{ opacity: 0.7 }}>
+        <AnimatedLogo size={32} />
+      </div>
+      {label && (
+        <span className="text-[12px]" style={{ color: 'var(--c-text3)' }}>{label}</span>
+      )}
+    </div>
+  )
+}

package/ui/src/lib/api.js

@@ -203,11 +203,30 @@ export async function fetchToolCalls(name, opts = {}) {
   return res.json();
 }
 
+export async function fetchCheckAi(folder) {
+  const q = new URLSearchParams({ folder });
+  const res = await fetch(`${BASE}/api/check-ai?${q}`);
+  return res.json();
+}
+
 export async function fetchUsage() {
   const res = await fetch(`${BASE}/api/usage`);
   return res.json();
 }
 
+// ── Artifacts API ──
+
+export async function fetchArtifacts() {
+  const res = await fetch(`${BASE}/api/artifacts`);
+  return res.json();
+}
+
+export async function fetchArtifactContent(filePath) {
+  const q = new URLSearchParams({ path: filePath });
+  const res = await fetch(`${BASE}/api/artifact-content?${q}`);
+  return res.json();
+}
+
 // ── Relay API ──
 
 export async function fetchMode() {