agentlytics 0.1.8 → 0.1.10

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

package/ui/src/lib/api.js

@@ -210,11 +210,6 @@ export async function fetchRelayTeamStats() {
   return res.json();
 }
 
-export async function fetchRelayUsers() {
-  const res = await authFetch(`${BASE}/relay/users`);
-  return res.json();
-}
-
 export async function fetchRelayUserActivity(username, opts = {}) {
   const q = new URLSearchParams();
   if (opts.folder) q.set('folder', opts.folder);

package/ui/src/pages/DeepAnalysis.jsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { Loader2, X, ArrowRight, Zap, MessageSquare, Wrench, Cpu, TrendingUp, BarChart3 } from 'lucide-react'
+import { Loader2, X, Zap, MessageSquare, Wrench, Cpu, TrendingUp } from 'lucide-react'
 import { fetchDeepAnalytics, fetchToolCalls, fetchCosts } from '../lib/api'
-import { editorLabel, editorColor, formatNumber, formatCost, formatDateTime, dateRangeToApiParams } from '../lib/constants'
+import { editorLabel, editorColor, formatNumber, formatCost, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'

package/ui/src/pages/ProjectDetail.jsx

@@ -80,7 +80,6 @@ export default function ProjectDetail() {
   if (!project) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text3)' }}>project not found</div>
 
   const editorEntries = Object.entries(project.editors).sort((a, b) => b[1] - a[1])
-  const maxEditorCount = editorEntries.length > 0 ? editorEntries[0][1] : 1
   const allEnabled = !enabledEditors || enabledEditors.size === editorEntries.length
 
   // Derive stats from editor-filtered chats

package/ui/src/pages/Projects.jsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar, ArrowRight } from 'lucide-react'
+import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 import { fetchProjects, fetchCosts } from '../lib/api'
 import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'

package/ui/src/pages/RelayDashboard.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
-import { Users, Cpu, ArrowRight, Search, Merge, MessageSquare, Zap, FolderOpen, ChevronDown, ChevronRight, User } from 'lucide-react'
+import { Users, Search, Merge, MessageSquare, FolderOpen, ChevronDown, ChevronRight } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
@@ -36,7 +36,7 @@ function ProportionBar({ segments, height = 6 }) {
 }
 
 // Left sidebar: team members grouped by project (folder-tree view)
-function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
+function TeamSidebar({ userList, userColorMap, selectedUser }) {
   const [collapsed, setCollapsed] = useState(new Set())
   const navigate = useNavigate()
 

package/ui/src/pages/RelayUserDetail.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, MessageSquare, FolderOpen, ChevronDown, ChevronRight, Zap, Clock, Hash } from 'lucide-react'
+import { ArrowLeft, MessageSquare, FolderOpen, ChevronDown, ChevronRight, Hash } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
 import KpiCard from '../components/KpiCard'
@@ -37,7 +37,6 @@ function ProportionBar({ segments, height = 6 }) {
 // Left sidebar: sessions grouped by project (folder-tree)
 function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
   const [collapsed, setCollapsed] = useState(new Set())
-  const [filter, setFilter] = useState(null) // null = all, or project path
 
   const toggle = (key) => {
     setCollapsed(prev => {
@@ -142,7 +141,6 @@ export default function RelayUserDetail() {
   const legendColor = dark ? '#888' : '#555'
   const gridColor = dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.06)'
   const txtDim = dark ? '#555' : '#999'
-  const txtColor = dark ? '#888' : '#555'
 
   useEffect(() => {
     if (username) {

package/ui/src/components/EditorBreakdown.jsx

@@ -1,22 +0,0 @@
-import EditorDot from './EditorDot'
-import { editorColor, editorLabel } from '../lib/constants'
-
-export default function EditorBreakdown({ editors, total }) {
-  return (
-    <div className="space-y-1.5">
-      {editors.map(([src, count]) => {
-        const pct = total > 0 ? (count / total * 100) : 0
-        return (
-          <div key={src} className="flex items-center gap-2">
-            <EditorDot source={src} size={8} />
-            <span className="text-[11px] w-24" style={{ color: 'var(--c-text)' }}>{editorLabel(src)}</span>
-            <div className="flex-1 h-2 relative" style={{ background: 'var(--c-card)' }}>
-              <div className="h-full" style={{ width: `${pct}%`, background: editorColor(src), opacity: 0.7 }} />
-            </div>
-            <span className="text-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

package/ui/src/components/ModelBreakdown.jsx

@@ -1,23 +0,0 @@
-import { Cpu } from 'lucide-react'
-
-export default function ModelBreakdown({ models }) {
-  const max = models[0]?.[1] || 1
-  return (
-    <div className="space-y-1.5">
-      {models.map(([name, count]) => {
-        const pct = (count / max * 100)
-        return (
-          <div key={name} className="flex items-center gap-2">
-            <Cpu size={10} style={{ color: '#818cf8' }} />
-            <span className="text-[11px] truncate w-40" style={{ color: 'var(--c-text)' }}>{name}</span>
-            <div className="flex-1 h-2 relative" style={{ background: 'var(--c-card)' }}>
-              <div className="h-full" style={{ width: `${pct}%`, background: '#6366f1', opacity: 0.5 }} />
-            </div>
-            <span className="text-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
-          </div>
-        )
-      })}
-      {models.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>No model data</div>}
-    </div>
-  )
-}

package/ui/src/pages/ChatDetail.jsx

@@ -1,107 +0,0 @@
-import { useState, useEffect } from 'react'
-import { useParams, useNavigate } from 'react-router-dom'
-import { ArrowLeft, Download } from 'lucide-react'
-import { fetchChat, fetchCosts, BASE } from '../lib/api'
-import { editorColor, editorLabel, formatDateTime, formatNumber, formatCost } from '../lib/constants'
-import KpiCard from '../components/KpiCard'
-import { MessageBubble } from '../components/MessageRenderer'
-
-export default function ChatDetail() {
-  const { id } = useParams()
-  const navigate = useNavigate()
-  const [chat, setChat] = useState(null)
-  const [costs, setCosts] = useState(null)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    setLoading(true)
-    fetchChat(id).then(data => {
-      setChat(data)
-      fetchCosts({ chatId: data.id }).then(setCosts)
-      setLoading(false)
-    })
-  }, [id])
-
-  if (loading) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>Loading conversation...</div>
-  if (!chat) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>Chat not found.</div>
-
-  const s = chat.stats
-
-  return (
-    <div className="fade-in max-w-4xl mx-auto">
-      <button
-        onClick={() => navigate(-1)}
-        className="flex items-center gap-2 text-sm mb-4 transition"
-        style={{ color: 'var(--c-text2)' }}
-      >
-        <ArrowLeft size={16} /> Back
-      </button>
-
-      {/* Header */}
-      <div className="card p-5 mb-4">
-        <div className="flex items-start justify-between">
-          <div className="flex-1 min-w-0">
-            <h2 className="text-xl font-semibold mb-1" style={{ color: 'var(--c-white)' }}>{chat.name || '(untitled)'}</h2>
-            <div className="flex items-center gap-3 text-xs" style={{ color: 'var(--c-text2)' }}>
-              <span className="inline-flex items-center gap-1.5">
-                <span className="w-2 h-2 rounded-full" style={{ background: editorColor(chat.source) }} />
-                {editorLabel(chat.source)}
-              </span>
-              {chat.mode && <span>· {chat.mode}</span>}
-              {chat.folder && <span className="font-mono">· {chat.folder}</span>}
-            </div>
-            <div className="text-xs mt-1" style={{ color: 'var(--c-text3)' }}>
-              {formatDateTime(chat.createdAt)}
-              {chat.lastUpdatedAt && chat.lastUpdatedAt !== chat.createdAt && ` — ${formatDateTime(chat.lastUpdatedAt)}`}
-              <span className="ml-3 font-mono" style={{ color: 'var(--c-text3)' }}>{chat.id}</span>
-            </div>
-          </div>
-          <a
-            href={`${BASE}/api/chats/${chat.id}/markdown`}
-            download
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition shrink-0"
-            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
-            onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg2)'}
-            onMouseLeave={e => e.currentTarget.style.background = 'var(--c-bg3)'}
-          >
-            <Download size={13} /> Export .md
-          </a>
-        </div>
-      </div>
-
-      {/* Stats */}
-      {s && (
-        <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-3 mb-4">
-          <KpiCard label="Messages" value={s.totalMessages} />
-          <KpiCard label="User" value={s.userMessages} />
-          <KpiCard label="Assistant" value={s.assistantMessages} />
-          <KpiCard label="Tool Calls" value={s.toolCalls.length} />
-          {s.totalInputTokens > 0 && <KpiCard label="Input Tokens" value={formatNumber(s.totalInputTokens)} />}
-          {s.totalOutputTokens > 0 && <KpiCard label="Output Tokens" value={formatNumber(s.totalOutputTokens)} />}
-          {costs && costs.totalCost > 0 && <KpiCard label="Est. Cost" value={formatCost(costs.totalCost)} />}
-        </div>
-      )}
-
-      {/* Model badges */}
-      {s && s.models.length > 0 && (
-        <div className="flex flex-wrap gap-2 mb-4">
-          {[...new Set(s.models)].map(m => (
-            <span key={m} className="text-xs bg-accent/10 text-accent-light px-2.5 py-1 rounded-full font-mono">{m}</span>
-          ))}
-        </div>
-      )}
-
-      {/* Messages */}
-      <div className="space-y-3">
-        {chat.messages.length === 0 && (
-          <div className="text-center py-12 text-sm" style={{ color: 'var(--c-text2)' }}>
-            {chat.encrypted ? '🔒 This conversation is encrypted.' : 'No messages found.'}
-          </div>
-        )}
-        {chat.messages.map((msg, i) => (
-          <MessageBubble key={i} msg={msg} toolCallDetails={chat.toolCallDetails} />
-        ))}
-      </div>
-    </div>
-  )
-}

package/ui/src/pages/RelaySessionDetail.jsx

@@ -1,32 +0,0 @@
-import { useCallback } from 'react'
-import { useParams, useSearchParams, useNavigate } from 'react-router-dom'
-import { fetchRelaySession } from '../lib/api'
-import ChatSidebar from '../components/ChatSidebar'
-
-export default function RelaySessionDetail() {
-  const { chatId } = useParams()
-  const [searchParams] = useSearchParams()
-  const username = searchParams.get('username')
-  const navigate = useNavigate()
-
-  const fetchFn = useCallback(
-    (id) => fetchRelaySession(id, username),
-    [username]
-  )
-
-  const extraHeader = username ? (
-    <span className="text-[11px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
-      {username}
-    </span>
-  ) : null
-
-  return (
-    <ChatSidebar
-      chatId={chatId}
-      onClose={() => navigate(-1)}
-      fetchFn={fetchFn}
-      username={username}
-      extraHeader={extraHeader}
-    />
-  )
-}