agentlytics 0.1.5 → 0.1.7

package/ui/src/pages/ProjectDetail.jsx

@@ -3,8 +3,8 @@ import { useSearchParams, useNavigate } from 'react-router-dom'
 import { ArrowLeft, Search, FolderOpen, Calendar, MessageSquare, Wrench, Cpu, Zap, AlertTriangle } from 'lucide-react'
 import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement } from 'chart.js'
 import { Doughnut, Bar } from 'react-chartjs-2'
-import { fetchProjects, fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate } from '../lib/constants'
+import { fetchProjects, fetchChats, fetchCosts } from '../lib/api'
+import { editorColor, editorLabel, formatNumber, formatDate, formatCost } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -31,6 +31,7 @@ export default function ProjectDetail() {
   const [loading, setLoading] = useState(true)
   const [chatSearch, setChatSearch] = useState('')
   const [selectedChatId, setSelectedChatId] = useState(null)
+  const [costs, setCosts] = useState(null)
   const [enabledEditors, setEnabledEditors] = useState(null)
 
   useEffect(() => {
@@ -39,10 +40,12 @@ export default function ProjectDetail() {
     Promise.all([
       fetchProjects(),
       fetchChats({ folder, limit: 1000 }),
-    ]).then(([projects, chatData]) => {
+      fetchCosts({ folder }),
+    ]).then(([projects, chatData, costData]) => {
       const match = projects.find(p => p.folder === folder)
       setProject(match || null)
       setChats(chatData.chats || [])
+      setCosts(costData)
       if (match) setEnabledEditors(new Set(Object.keys(match.editors)))
       setLoading(false)
     })
@@ -144,11 +147,12 @@ export default function ProjectDetail() {
         <KpiCard label="sessions" value={displaySessions} sub={!allEnabled ? 'filtered' : ''} />
         <KpiCard label="messages" value={formatNumber(project.totalMessages)} sub={`${avgMsgs} avg/session`} />
         <KpiCard label="tool calls" value={formatNumber(project.totalToolCalls)} sub={<span className="flex items-center gap-0.5"><Wrench size={8} /> invocations</span>} />
-        <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${outputRatio}× out/in`} />
+        <KpiCard label="tokens" value={formatNumber(totalTok)} sub={`${outputRatio}\u00d7 out/in`} />
         {project.totalCacheRead > 0 && (
           <KpiCard label="cache read" value={formatNumber(project.totalCacheRead)} sub={`write: ${formatNumber(project.totalCacheWrite)}`} />
         )}
         <KpiCard label="you wrote" value={formatNumber(project.totalUserChars)} sub={`AI: ${formatNumber(project.totalAssistantChars)}`} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} sub={costs && costs.byModel.length > 0 ? `${costs.byModel.length} model${costs.byModel.length !== 1 ? 's' : ''}` : undefined} />
       </div>
 
       {/* Charts row */}
@@ -256,6 +260,7 @@ export default function ProjectDetail() {
                 <th className="text-left py-2 px-3 font-medium">mode</th>
                 <th className="text-left py-2 px-3 font-medium">model</th>
                 <th className="text-left py-2 px-3 font-medium">context</th>
+                <th className="text-right py-2 px-3 font-medium">est. cost</th>
                 <th className="text-left py-2 px-3 font-medium">updated</th>
               </tr>
             </thead>
@@ -294,6 +299,9 @@ export default function ProjectDetail() {
                       <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0} msgs</span>
                     )}
                   </td>
+                  <td className="py-2 px-3 font-mono text-right" style={{ color: c.cost > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+                    {c.cost > 0 ? formatCost(c.cost) : ''}
+                  </td>
                   <td className="py-2 px-3 whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{formatDate(c.lastUpdatedAt || c.createdAt)}</td>
                 </tr>
               ))}

package/ui/src/pages/Projects.jsx

@@ -3,8 +3,8 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearSca
 import { Doughnut, Bar } from 'react-chartjs-2'
 import { Search, MessageSquare, Wrench, Cpu, FolderOpen, Calendar, ArrowRight } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
-import { fetchProjects } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
+import { fetchProjects, fetchCosts } from '../lib/api'
+import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -25,11 +25,16 @@ export default function Projects({ overview }) {
   const [search, setSearch] = useState('')
   const [editorFilter, setEditorFilter] = useState('')
   const [dateRange, setDateRange] = useState(null)
+  const [costs, setCosts] = useState(null)
   const navigate = useNavigate()
   const editors = overview?.editors || []
 
   useEffect(() => {
-    fetchProjects(dateRangeToApiParams(dateRange)).then(setProjects)
+    const dateParams = dateRangeToApiParams(dateRange)
+    Promise.all([
+      fetchProjects(dateParams),
+      fetchCosts(dateParams),
+    ]).then(([p, c]) => { setProjects(p); setCosts(c) })
   }, [dateRange])
 
   if (!projects) return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading projects...</div>
@@ -64,6 +69,7 @@ export default function Projects({ overview }) {
         <KpiCard label="sessions" value={formatNumber(totalSessions)} onClick={() => navigate('/sessions')} />
         <KpiCard label="messages" value={formatNumber(totalMessages)} />
         <KpiCard label="tokens" value={formatNumber(totalTokens)} />
+        <KpiCard label="est. cost" value={costs && costs.totalCost > 0 ? formatCost(costs.totalCost) : '\u2014'} />
       </div>
 
       {/* Charts row */}

package/ui/src/pages/Sessions.jsx

@@ -4,7 +4,7 @@ import { Search, Filter, List, FolderOpen, ChevronDown, ChevronRight, X, AlertTr
 import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler } from 'chart.js'
 import { Line, Doughnut, Bar } from 'react-chartjs-2'
 import { fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatNumber, formatDate, dateRangeToApiParams } from '../lib/constants'
+import { editorColor, editorLabel, formatNumber, formatCost, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import KpiCard from '../components/KpiCard'
 import EditorIcon from '../components/EditorIcon'
@@ -285,6 +285,9 @@ export default function Sessions({ overview }) {
           <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0}</span>
         )}
       </td>
+      <td className="py-2 px-3 text-[12px] font-mono text-right" style={{ color: c.cost > 0 ? 'var(--c-text2)' : 'var(--c-text3)' }}>
+        {c.cost > 0 ? formatCost(c.cost) : ''}
+      </td>
       <td className="py-2 px-3 text-[12px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
         {formatDate(c.lastUpdatedAt || c.createdAt)}
       </td>
@@ -475,6 +478,7 @@ export default function Sessions({ overview }) {
                 <th className="text-left py-2 px-3 font-medium">mode</th>
                 <th className="text-left py-2 px-3 font-medium">model</th>
                 <th className="text-left py-2 px-3 font-medium">context</th>
+                <th className="text-right py-2 px-3 font-medium">est. cost</th>
                 <th className="text-left py-2 px-3 font-medium">updated</th>
               </tr>
             </thead>

package/ui/src/pages/Settings.jsx

@@ -0,0 +1,142 @@
+import { useState, useEffect } from 'react'
+import { Settings as SettingsIcon, EyeOff, Eye, FolderOpen, Search } from 'lucide-react'
+import { fetchConfig, updateConfig, fetchAllProjects } from '../lib/api'
+import { editorLabel, formatNumber, formatDate } from '../lib/constants'
+import EditorIcon from '../components/EditorIcon'
+import SectionTitle from '../components/SectionTitle'
+
+export default function Settings() {
+  const [config, setConfig] = useState(null)
+  const [projects, setProjects] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    Promise.all([fetchConfig(), fetchAllProjects()]).then(([cfg, projs]) => {
+      setConfig(cfg)
+      setProjects(projs)
+      setLoading(false)
+    }).catch(() => setLoading(false))
+  }, [])
+
+  if (loading || !config) {
+    return <div className="text-sm py-12 text-center" style={{ color: 'var(--c-text2)' }}>loading settings...</div>
+  }
+
+  const hiddenProjects = config.hiddenProjects || []
+
+  const toggleProject = async (folder) => {
+    setSaving(true)
+    const isHidden = hiddenProjects.includes(folder)
+    const updated = isHidden
+      ? hiddenProjects.filter(f => f !== folder)
+      : [...hiddenProjects, folder]
+    const newConfig = await updateConfig({ hiddenProjects: updated })
+    setConfig(newConfig)
+    setSaving(false)
+  }
+
+  const filtered = projects.filter(p => {
+    if (!search) return true
+    const q = search.toLowerCase()
+    return p.folder.toLowerCase().includes(q) || p.name.toLowerCase().includes(q)
+  })
+
+  const sorted = [...filtered].sort((a, b) => a.name.localeCompare(b.name))
+
+  return (
+    <div className="fade-in space-y-4">
+      <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
+        <SettingsIcon size={14} style={{ color: '#6366f1' }} />
+        Settings
+      </div>
+
+      <div className="card overflow-hidden">
+        <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: '1px solid var(--c-border)' }}>
+          <SectionTitle>
+            <FolderOpen size={11} className="inline mr-1" />
+            projects ({projects.length})
+          </SectionTitle>
+          <div className="flex items-center gap-2">
+            {hiddenProjects.length > 0 && (
+              <span className="text-[10px] px-1.5 py-0.5" style={{ background: 'rgba(239,68,68,0.08)', color: '#ef4444', border: '1px solid rgba(239,68,68,0.15)' }}>
+                {hiddenProjects.length} hidden
+              </span>
+            )}
+            <div className="relative">
+              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+              <input
+                type="text"
+                value={search}
+                onChange={e => setSearch(e.target.value)}
+                placeholder="Filter projects..."
+                className="pl-6 pr-2 py-1 text-[11px] outline-none w-[180px]"
+                style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+              />
+            </div>
+          </div>
+        </div>
+        <div className="text-[11px] px-3 py-1.5" style={{ color: 'var(--c-text3)', borderBottom: '1px solid var(--c-border)', background: 'var(--c-bg3)' }}>
+          Hidden projects are excluded from all dashboard stats, sessions, costs, and analytics.
+        </div>
+
+        {sorted.map(p => (
+          <ProjectRow key={p.folder} project={p} hidden={hiddenProjects.includes(p.folder)} onToggle={toggleProject} saving={saving} />
+        ))}
+
+        {sorted.length === 0 && (
+          <div className="text-center py-6 text-[12px]" style={{ color: 'var(--c-text3)' }}>no projects match filter</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function ProjectRow({ project: p, hidden, onToggle, saving }) {
+  const editors = Object.entries(p.editors || {}).sort((a, b) => b[1] - a[1])
+
+  return (
+    <div
+      className="flex items-center gap-3 px-3 py-2 transition"
+      style={{
+        borderBottom: '1px solid var(--c-border)',
+        opacity: hidden ? 0.5 : 1,
+      }}
+      onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
+      onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
+    >
+      <button
+        onClick={() => onToggle(p.folder)}
+        disabled={saving}
+        className="shrink-0 p-1 rounded transition hover:bg-[var(--c-bg)]"
+        style={{ color: hidden ? '#ef4444' : 'var(--c-text3)', border: '1px solid var(--c-border)' }}
+        title={hidden ? 'Show this project' : 'Hide this project'}
+      >
+        {hidden ? <EyeOff size={12} /> : <Eye size={12} />}
+      </button>
+      <div className="min-w-0 flex-1">
+        <div className="text-[12px] font-medium truncate" style={{ color: hidden ? 'var(--c-text3)' : 'var(--c-white)' }}>
+          {p.name}
+        </div>
+        <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }} title={p.folder}>
+          {p.folder}
+        </div>
+      </div>
+      <div className="flex items-center gap-2 shrink-0">
+        {editors.slice(0, 3).map(([src, count]) => (
+          <span key={src} className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
+            <EditorIcon source={src} size={10} />
+            {count}
+          </span>
+        ))}
+      </div>
+      <div className="text-[11px] font-mono shrink-0" style={{ color: 'var(--c-text2)' }}>
+        {formatNumber(p.totalSessions)}
+      </div>
+      <div className="text-[10px] shrink-0 w-[80px] text-right" style={{ color: 'var(--c-text3)' }}>
+        {formatDate(p.lastSeen)}
+      </div>
+    </div>
+  )
+}