agentlytics 0.1.3 → 0.1.6

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 */}
@@ -136,7 +142,7 @@ export default function Projects({ overview }) {
         <select
           value={editorFilter}
           onChange={e => setEditorFilter(e.target.value)}
-          className="px-2 py-1.5 text-[11px] outline-none rounded-sm"
+          className="px-2 py-1.5 text-[12px] outline-none rounded-sm"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           <option value="">All Editors</option>
@@ -151,7 +157,7 @@ export default function Projects({ overview }) {
             placeholder="search projects..."
             value={search}
             onChange={e => setSearch(e.target.value)}
-            className="w-full pl-8 pr-3 py-1.5 text-[11px] outline-none rounded-sm"
+            className="w-full pl-8 pr-3 py-1.5 text-[12px] outline-none rounded-sm"
             style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
           />
         </div>
@@ -176,7 +182,7 @@ export default function Projects({ overview }) {
                 <FolderOpen size={14} className="flex-shrink-0 mt-0.5" style={{ color: 'var(--c-accent)' }} />
                 <div className="flex-1 min-w-0">
                   <div className="text-[12px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{p.name}</div>
-                  <div className="text-[9px] truncate" style={{ color: 'var(--c-text3)' }}>{p.folder}</div>
+                  <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{p.folder}</div>
                 </div>
                 <div className="flex items-center gap-1 flex-shrink-0">
                   {editorEntries.slice(0, 4).map(([e]) => (
@@ -191,7 +197,7 @@ export default function Projects({ overview }) {
               </div>
 
               {/* Stats grid */}
-              <div className="grid grid-cols-2 gap-x-3 gap-y-1 text-[10px]">
+              <div className="grid grid-cols-2 gap-x-3 gap-y-1 text-[11px]">
                 <div className="flex items-center gap-1">
                   <MessageSquare size={9} style={{ color: 'var(--c-text3)' }} />
                   <span style={{ color: 'var(--c-text2)' }}>{p.totalSessions} sessions</span>
@@ -213,7 +219,7 @@ export default function Projects({ overview }) {
               </div>
 
               {/* Footer: editors breakdown + date */}
-              <div className="flex items-center gap-2 pt-1 text-[9px]" style={{ borderTop: '1px solid var(--c-border)' }}>
+              <div className="flex items-center gap-2 pt-1 text-[10px]" style={{ borderTop: '1px solid var(--c-border)' }}>
                 <div className="flex items-center gap-1.5 flex-1 min-w-0">
                   {editorEntries.map(([e, c]) => (
                     <span key={e} className="inline-flex items-center gap-0.5 truncate">

package/ui/src/pages/RelayDashboard.jsx

@@ -88,7 +88,7 @@ function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
           {u.username.charAt(0).toUpperCase()}
         </div>
         <div className="flex-1 min-w-0">
-          <div className="text-[10px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
+          <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
           <div className="flex items-center gap-1 text-[8px]" style={{ color: 'var(--c-text3)' }}>
             <span>{u.sessions}s</span>
             <span>·</span>
@@ -110,8 +110,8 @@ function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
         <Users size={12} style={{ color: 'var(--c-accent)' }} />
-        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Team</span>
-        <span className="text-[9px] ml-auto" style={{ color: 'var(--c-text3)' }}>{userList.length}</span>
+        <span className="text-[12px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Team</span>
+        <span className="text-[10px] ml-auto" style={{ color: 'var(--c-text3)' }}>{userList.length}</span>
       </div>
 
       <div className="flex-1 overflow-y-auto scrollbar-thin py-1">
@@ -129,7 +129,7 @@ function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
               >
                 {isCollapsed ? <ChevronRight size={10} style={{ color: 'var(--c-text3)' }} /> : <ChevronDown size={10} style={{ color: 'var(--c-text3)' }} />}
                 <FolderOpen size={10} style={{ color: '#818cf8' }} />
-                <span className="text-[10px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={proj}>{projName}</span>
+                <span className="text-[11px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={proj}>{projName}</span>
                 <span className="text-[8px]" style={{ color: 'var(--c-text3)' }}>{users.length}</span>
               </div>
               {!isCollapsed && (
@@ -145,7 +145,7 @@ function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
         {ungrouped.length > 0 && (
           <div>
             {projectGroups.length > 0 && (
-              <div className="px-2 py-1.5 text-[9px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>
+              <div className="px-2 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>
                 unassigned
               </div>
             )}
@@ -156,7 +156,7 @@ function TeamSidebar({ userList, userColorMap, onUserClick, selectedUser }) {
         )}
 
         {userList.length === 0 && (
-          <div className="text-[10px] py-6 text-center" style={{ color: 'var(--c-text3)' }}>
+          <div className="text-[11px] py-6 text-center" style={{ color: 'var(--c-text3)' }}>
             No team members yet
           </div>
         )}
@@ -180,7 +180,7 @@ function MergeSection({ userList }) {
   return (
     <div className="shrink-0 px-2 py-2" style={{ borderTop: '1px solid var(--c-border)' }}>
       <div
-        className="flex items-center gap-1.5 cursor-pointer text-[9px] uppercase tracking-wider"
+        className="flex items-center gap-1.5 cursor-pointer text-[10px] uppercase tracking-wider"
         style={{ color: 'var(--c-text3)' }}
         onClick={() => setOpen(!open)}
       >
@@ -193,7 +193,7 @@ function MergeSection({ userList }) {
           <select
             value={mergeFrom}
             onChange={e => setMergeFrom(e.target.value)}
-            className="w-full text-[10px] px-1.5 py-1 outline-none rounded-sm"
+            className="w-full text-[11px] px-1.5 py-1 outline-none rounded-sm"
             style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
           >
             <option value="">from...</option>
@@ -204,7 +204,7 @@ function MergeSection({ userList }) {
           <select
             value={mergeTo}
             onChange={e => setMergeTo(e.target.value)}
-            className="w-full text-[10px] px-1.5 py-1 outline-none rounded-sm"
+            className="w-full text-[11px] px-1.5 py-1 outline-none rounded-sm"
             style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
           >
             <option value="">into...</option>
@@ -228,7 +228,7 @@ function MergeSection({ userList }) {
               }
               setMerging(false)
             }}
-            className="w-full text-[10px] px-2 py-1 font-medium transition rounded-sm"
+            className="w-full text-[11px] px-2 py-1 font-medium transition rounded-sm"
             style={{
               background: mergeFrom && mergeTo ? 'rgba(239,68,68,0.15)' : 'var(--c-bg3)',
               color: mergeFrom && mergeTo ? '#ef4444' : 'var(--c-text3)',
@@ -240,7 +240,7 @@ function MergeSection({ userList }) {
             {merging ? 'Merging...' : 'Merge'}
           </button>
           {mergeResult && (
-            <div className="text-[9px]" style={{ color: mergeResult.error ? '#ef4444' : '#22c55e' }}>
+            <div className="text-[10px]" style={{ color: mergeResult.error ? '#ef4444' : '#22c55e' }}>
               {mergeResult.error ? `Error: ${mergeResult.error}` : 'Merged!'}
             </div>
           )}
@@ -334,25 +334,25 @@ export default function RelayDashboard() {
           <div className="card p-3">
             <div className="flex items-center justify-between mb-2">
               <SectionTitle>team token usage</SectionTitle>
-              <span className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTok)} total</span>
+              <span className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTok)} total</span>
             </div>
             <ProportionBar height={10} segments={[
               { label: 'Input', value: stats.totalInputTokens, color: '#6366f1' },
               { label: 'Output', value: stats.totalOutputTokens, color: '#a78bfa' },
             ]} />
-            <div className="flex items-center gap-4 mt-1.5 text-[9px]">
+            <div className="flex items-center gap-4 mt-1.5 text-[10px]">
               <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> input {formatNumber(stats.totalInputTokens)}</span>
               <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> output {formatNumber(stats.totalOutputTokens)}</span>
             </div>
             {userList.length > 1 && (
               <div className="mt-3 pt-2" style={{ borderTop: '1px solid var(--c-border)' }}>
-                <div className="text-[9px] mb-1.5" style={{ color: 'var(--c-text3)' }}>per-user contribution</div>
+                <div className="text-[10px] mb-1.5" style={{ color: 'var(--c-text3)' }}>per-user contribution</div>
                 <ProportionBar height={8} segments={userList.map(u => ({
                   label: u.username,
                   value: u.totalInputTokens + u.totalOutputTokens,
                   color: userColorMap[u.username],
                 }))} />
-                <div className="flex flex-wrap gap-3 mt-1 text-[9px]">
+                <div className="flex flex-wrap gap-3 mt-1 text-[10px]">
                   {userList.map(u => (
                     <span key={u.username} className="flex items-center gap-1" style={{ color: 'var(--c-text3)' }}>
                       <span className="w-2 h-2 rounded-sm" style={{ background: userColorMap[u.username] }} />
@@ -445,14 +445,14 @@ export default function RelayDashboard() {
                 value={search}
                 onChange={e => setSearch(e.target.value)}
                 placeholder="Search messages, files, topics across all users..."
-                className="w-full pl-7 pr-3 py-1.5 text-[11px] outline-none rounded-sm"
+                className="w-full pl-7 pr-3 py-1.5 text-[12px] outline-none rounded-sm"
                 style={{ background: 'var(--c-bg3)', color: 'var(--c-white)', border: '1px solid var(--c-border)' }}
               />
             </div>
             <button
               type="submit"
               disabled={searching}
-              className="px-3 py-1.5 text-[10px] font-medium transition rounded-sm"
+              className="px-3 py-1.5 text-[11px] font-medium transition rounded-sm"
               style={{ background: 'var(--c-card)', border: '1px solid var(--c-border)', color: 'var(--c-white)' }}
             >
               {searching ? 'Searching...' : 'Search'}
@@ -461,9 +461,9 @@ export default function RelayDashboard() {
           {searchResults && (
             <div className="mt-3 max-h-[300px] overflow-y-auto scrollbar-thin">
               {searchResults.length === 0 ? (
-                <div className="text-[11px] py-2" style={{ color: 'var(--c-text3)' }}>No results found</div>
+                <div className="text-[12px] py-2" style={{ color: 'var(--c-text3)' }}>No results found</div>
               ) : (
-                <table className="w-full text-[11px]">
+                <table className="w-full text-[12px]">
                   <tbody>
                     {searchResults.map((r, i) => (
                       <tr
@@ -475,14 +475,14 @@ export default function RelayDashboard() {
                         onClick={() => { setSelectedChat(r.chatId); setSelectedUsername(r.username) }}
                       >
                         <td className="py-2 px-2 w-[80px]">
-                          <span className="text-[9px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>{r.username}</span>
+                          <span className="text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>{r.username}</span>
                         </td>
                         <td className="py-2 px-2 w-[24px]"><EditorIcon source={r.source} size={11} /></td>
                         <td className="py-2 px-2">
-                          <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{r.chatName}</div>
-                          <div className="text-[10px] line-clamp-1 mt-0.5" style={{ color: 'var(--c-text)' }}>{r.content}</div>
+                          <div className="text-[11px] truncate" style={{ color: 'var(--c-text3)' }}>{r.chatName}</div>
+                          <div className="text-[11px] line-clamp-1 mt-0.5" style={{ color: 'var(--c-text)' }}>{r.content}</div>
                         </td>
-                        <td className="py-2 px-2 text-[9px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{r.role}</td>
+                        <td className="py-2 px-2 text-[10px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>{r.role}</td>
                       </tr>
                     ))}
                   </tbody>
@@ -506,12 +506,12 @@ export default function RelayDashboard() {
                 onClick={() => navigate(`/relay/user/${u.username}`)}
               >
                 <div className="flex items-center gap-2 mb-2">
-                  <div className="w-7 h-7 flex items-center justify-center text-[11px] font-bold rounded-sm flex-shrink-0" style={{ background: `${color}20`, color }}>
+                  <div className="w-7 h-7 flex items-center justify-center text-[12px] font-bold rounded-sm flex-shrink-0" style={{ background: `${color}20`, color }}>
                     {u.username.charAt(0).toUpperCase()}
                   </div>
                   <div className="flex-1 min-w-0">
-                    <div className="text-[11px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
-                    <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="text-[12px] font-bold truncate" style={{ color: 'var(--c-white)' }}>{u.username}</div>
+                    <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       {u.lastActive ? formatDate(u.lastActive) : 'No activity'}
                     </div>
                   </div>
@@ -529,7 +529,7 @@ export default function RelayDashboard() {
                     [formatNumber(uTok), 'tokens'],
                   ].map(([v, l]) => (
                     <div key={l} className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                      <div className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{v}</div>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{v}</div>
                       <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>{l}</div>
                     </div>
                   ))}
@@ -554,7 +554,7 @@ export default function RelayDashboard() {
           <div className="card p-8 text-center">
             <Users size={32} className="mx-auto mb-3" style={{ color: 'var(--c-text3)' }} />
             <div className="text-[12px] font-medium mb-1" style={{ color: 'var(--c-white)' }}>No team members yet</div>
-            <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>Share the join command with your team to start collecting data</div>
+            <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>Share the join command with your team to start collecting data</div>
           </div>
         )}
       </div>
@@ -575,7 +575,7 @@ export default function RelayDashboard() {
         username={selectedUsername}
         extraHeader={
           selectedUsername ? (
-            <span className="text-[10px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+            <span className="text-[11px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
               {selectedUsername}
             </span>
           ) : null

package/ui/src/pages/RelaySessionDetail.jsx

@@ -15,7 +15,7 @@ export default function RelaySessionDetail() {
   )
 
   const extraHeader = username ? (
-    <span className="text-[10px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+    <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

package/ui/src/pages/RelayUserDetail.jsx

@@ -73,7 +73,7 @@ function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
     >
       <EditorIcon source={s.source} size={10} />
       <div className="flex-1 min-w-0">
-        <div className="text-[10px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
+        <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
         <div className="flex items-center gap-1 text-[8px]" style={{ color: 'var(--c-text3)' }}>
           {s.totalMessages > 0 && <span>{s.totalMessages}m</span>}
           {s.totalMessages > 0 && s.lastUpdatedAt && <span>·</span>}
@@ -87,8 +87,8 @@ function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
     <div className="flex flex-col h-full">
       <div className="flex items-center gap-2 px-3 py-2.5 shrink-0" style={{ borderBottom: '1px solid var(--c-border)' }}>
         <Hash size={12} style={{ color: 'var(--c-accent)' }} />
-        <span className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Sessions</span>
-        <span className="text-[9px] ml-auto" style={{ color: 'var(--c-text3)' }}>{sessions.length}</span>
+        <span className="text-[12px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>Sessions</span>
+        <span className="text-[10px] ml-auto" style={{ color: 'var(--c-text3)' }}>{sessions.length}</span>
       </div>
 
       <div className="flex-1 overflow-y-auto scrollbar-thin py-1">
@@ -105,7 +105,7 @@ function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
               >
                 {isCollapsed ? <ChevronRight size={10} style={{ color: 'var(--c-text3)' }} /> : <ChevronDown size={10} style={{ color: 'var(--c-text3)' }} />}
                 <FolderOpen size={10} style={{ color: '#818cf8' }} />
-                <span className="text-[10px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={folder}>{folderName}</span>
+                <span className="text-[11px] font-medium truncate flex-1" style={{ color: 'var(--c-text2)' }} title={folder}>{folderName}</span>
                 <span className="text-[8px]" style={{ color: 'var(--c-text3)' }}>{list.length}</span>
               </div>
               {!isCollapsed && (
@@ -120,7 +120,7 @@ function SessionSidebar({ sessions, projects, selectedChat, onSelectChat }) {
         {grouped.noProject.length > 0 && (
           <div>
             {grouped.sorted.length > 0 && (
-              <div className="px-2 py-1.5 text-[9px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>no project</div>
+              <div className="px-2 py-1.5 text-[10px] uppercase tracking-wider" style={{ color: 'var(--c-text3)' }}>no project</div>
             )}
             <div className={grouped.sorted.length > 0 ? 'pl-1' : ''}>
               {grouped.noProject.map(s => <SessionItem key={s.id} s={s} />)}
@@ -270,13 +270,13 @@ export default function RelayUserDetail() {
           <div className="card p-3">
             <div className="flex items-center justify-between mb-2">
               <SectionTitle>token usage</SectionTitle>
-              <span className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTokens)} total</span>
+              <span className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(totalTokens)} total</span>
             </div>
             <ProportionBar height={10} segments={[
               { label: 'Input', value: totalInputTokens, color: '#6366f1' },
               { label: 'Output', value: totalOutputTokens, color: '#a78bfa' },
             ]} />
-            <div className="flex items-center gap-4 mt-1.5 text-[9px]">
+            <div className="flex items-center gap-4 mt-1.5 text-[10px]">
               <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> input {formatNumber(totalInputTokens)}</span>
               <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> output {formatNumber(totalOutputTokens)}</span>
             </div>
@@ -363,20 +363,20 @@ export default function RelayUserDetail() {
                 <div key={folder} className="card px-3 py-2.5">
                   <div className="flex items-center gap-1.5 mb-1.5">
                     <FolderOpen size={11} style={{ color: '#818cf8' }} />
-                    <span className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{folder.split('/').pop()}</span>
+                    <span className="text-[12px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{folder.split('/').pop()}</span>
                   </div>
                   <div className="text-[8px] truncate mb-2" style={{ color: 'var(--c-text3)' }}>{folder}</div>
                   <div className="grid grid-cols-3 gap-1 text-center mb-1.5">
                     <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                      <div className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{info.count}</div>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{info.count}</div>
                       <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>sessions</div>
                     </div>
                     <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                      <div className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.messages)}</div>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.messages)}</div>
                       <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>messages</div>
                     </div>
                     <div className="p-1 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                      <div className="text-[10px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.tokens)}</div>
+                      <div className="text-[11px] font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(info.tokens)}</div>
                       <div className="text-[7px]" style={{ color: 'var(--c-text3)' }}>tokens</div>
                     </div>
                   </div>
@@ -396,7 +396,7 @@ export default function RelayUserDetail() {
             <SectionTitle>top tools</SectionTitle>
             <div className="flex flex-wrap gap-1.5 mt-1">
               {tools.map(([name, count]) => (
-                <span key={name} className="text-[9px] px-2 py-1 rounded-sm" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
+                <span key={name} className="text-[10px] px-2 py-1 rounded-sm" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
                   {name} <span style={{ color: 'var(--c-text3)' }}>×{count}</span>
                 </span>
               ))}
@@ -408,7 +408,7 @@ export default function RelayUserDetail() {
         <div className="card p-3">
           <SectionTitle>recent sessions</SectionTitle>
           <div className="max-h-[400px] overflow-y-auto scrollbar-thin">
-            <table className="w-full text-[11px]">
+            <table className="w-full text-[12px]">
               <tbody>
                 {sessions.slice(0, 50).map(s => (
                   <tr
@@ -421,10 +421,10 @@ export default function RelayUserDetail() {
                   >
                     <td className="py-2 px-2 w-[24px]"><EditorIcon source={s.source} size={11} /></td>
                     <td className="py-2 px-2">
-                      <div className="text-[10px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
-                      <div className="text-[9px] truncate" style={{ color: 'var(--c-text3)' }}>{s.folder ? s.folder.split('/').pop() : ''}</div>
+                      <div className="text-[11px] font-medium truncate" style={{ color: 'var(--c-white)' }}>{s.name || 'Untitled'}</div>
+                      <div className="text-[10px] truncate" style={{ color: 'var(--c-text3)' }}>{s.folder ? s.folder.split('/').pop() : ''}</div>
                     </td>
-                    <td className="py-2 px-2 text-[9px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
+                    <td className="py-2 px-2 text-[10px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
                       {s.totalMessages > 0 && <span>{s.totalMessages}m</span>}
                     </td>
                     <td className="py-2 px-2">
@@ -432,7 +432,7 @@ export default function RelayUserDetail() {
                         <span className="text-[8px] px-1.5 py-0.5 rounded-sm" style={{ background: 'rgba(168,85,247,0.1)', color: '#a855f7' }}>{s.mode}</span>
                       )}
                     </td>
-                    <td className="py-2 px-2 text-[9px] whitespace-nowrap text-right" style={{ color: 'var(--c-text3)' }}>
+                    <td className="py-2 px-2 text-[10px] whitespace-nowrap text-right" style={{ color: 'var(--c-text3)' }}>
                       {formatDate(s.lastUpdatedAt)}
                     </td>
                   </tr>
@@ -458,7 +458,7 @@ export default function RelayUserDetail() {
         fetchFn={fetchFn}
         username={username}
         extraHeader={
-          <span className="text-[10px] font-medium px-1.5 py-0.5 shrink-0" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+          <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>
         }

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'
@@ -250,15 +250,15 @@ export default function Sessions({ overview }) {
       <td className="py-2 px-3">
         <span className="inline-flex items-center gap-1.5">
           <EditorIcon source={c.source} size={12} />
-          <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{editorLabel(c.source)}</span>
+          <span className="text-[12px]" style={{ color: 'var(--c-text2)' }}>{editorLabel(c.source)}</span>
         </span>
       </td>
-      <td className="py-2 px-3 font-medium truncate max-w-[280px] text-[11px]" style={{ color: 'var(--c-white)' }}>
+      <td className="py-2 px-3 font-medium truncate max-w-[280px] text-[12px]" style={{ color: 'var(--c-white)' }}>
         {c.name || <span style={{ color: 'var(--c-text3)' }}>Untitled</span>}
-        {c.encrypted && <span className="ml-1.5 text-[9px] text-yellow-500/60">locked</span>}
+        {c.encrypted && <span className="ml-1.5 text-[10px] text-yellow-500/60">locked</span>}
       </td>
       {!groupByProject && (
-        <td className="py-2 px-3 truncate max-w-[160px] text-[11px]" style={{ color: 'var(--c-text2)' }} title={c.folder}>
+        <td className="py-2 px-3 truncate max-w-[160px] text-[12px]" style={{ color: 'var(--c-text2)' }} title={c.folder}>
           {c.folder ? (
             <span
               className="cursor-pointer hover:underline"
@@ -268,11 +268,11 @@ export default function Sessions({ overview }) {
           ) : ''}
         </td>
       )}
-      <td className="py-2 px-3 text-[11px]" style={{ color: 'var(--c-text2)' }}>{c.mode || ''}</td>
-      <td className="py-2 px-3 text-[11px] font-mono truncate max-w-[150px]" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>
+      <td className="py-2 px-3 text-[12px]" style={{ color: 'var(--c-text2)' }}>{c.mode || ''}</td>
+      <td className="py-2 px-3 text-[12px] font-mono truncate max-w-[150px]" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>
         {c.topModel || ''}
       </td>
-      <td className="py-2 px-3 text-[11px]">
+      <td className="py-2 px-3 text-[12px]">
         {c.bubbleCount >= 500 ? (
           <span className="inline-flex items-center gap-0.5 font-bold" style={{ color: '#ef4444' }}>
             <AlertTriangle size={9} />{c.bubbleCount}
@@ -285,7 +285,10 @@ export default function Sessions({ overview }) {
           <span style={{ color: 'var(--c-text3)' }}>{c.bubbleCount || 0}</span>
         )}
       </td>
-      <td className="py-2 px-3 text-[11px] whitespace-nowrap" style={{ color: 'var(--c-text3)' }}>
+      <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>
     </tr>
@@ -342,7 +345,7 @@ export default function Sessions({ overview }) {
                     },
                   }}
                 />
-              ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+              ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no model data</div>}
             </div>
           </div>
           <div className="card p-3">
@@ -367,7 +370,7 @@ export default function Sessions({ overview }) {
                     plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
                   }}
                 />
-              ) : <div className="text-[10px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no mode data</div>}
+              ) : <div className="text-[11px] py-8 text-center" style={{ color: 'var(--c-text3)' }}>no mode data</div>}
             </div>
           </div>
         </div>
@@ -379,12 +382,12 @@ export default function Sessions({ overview }) {
           <div className="flex items-center justify-between mb-2">
             <SectionTitle>
               session timeline
-              <span className="ml-2 font-normal text-[9px]" style={{ color: 'var(--c-text3)' }}>(drag to select range)</span>
+              <span className="ml-2 font-normal text-[10px]" style={{ color: 'var(--c-text3)' }}>(drag to select range)</span>
             </SectionTitle>
             {dateRange && (
               <button
                 onClick={() => setDateRange(null)}
-                className="flex items-center gap-1 text-[10px] px-2 py-0.5 transition"
+                className="flex items-center gap-1 text-[11px] px-2 py-0.5 transition"
                 style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}
               >
                 <X size={10} />
@@ -424,7 +427,7 @@ export default function Sessions({ overview }) {
             <select
               value={editor}
               onChange={e => setEditor(e.target.value)}
-              className="pl-8 pr-3 py-1 text-[11px] outline-none appearance-none cursor-pointer"
+              className="pl-8 pr-3 py-1 text-[12px] outline-none appearance-none cursor-pointer"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             >
               <option value="">All Editors</option>
@@ -440,13 +443,13 @@ export default function Sessions({ overview }) {
               placeholder="search sessions..."
               value={search}
               onChange={e => setSearch(e.target.value)}
-              className="w-full pl-8 pr-3 py-1 text-[11px] outline-none"
+              className="w-full pl-8 pr-3 py-1 text-[12px] outline-none"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             />
           </div>
           <button
             onClick={() => setGroupByProject(!groupByProject)}
-            className="flex items-center gap-1.5 px-3 py-1 text-[11px] transition"
+            className="flex items-center gap-1.5 px-3 py-1 text-[12px] transition"
             style={{
               border: groupByProject ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
               color: groupByProject ? 'var(--c-accent)' : 'var(--c-text2)',
@@ -456,7 +459,7 @@ export default function Sessions({ overview }) {
             {groupByProject ? <FolderOpen size={13} /> : <List size={13} />}
             {groupByProject ? 'grouped' : 'flat'}
           </button>
-          <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>
             {loading ? 'loading...' : `${filtered.length} of ${total}`}
           </span>
         {/* Server-side date range filter */}
@@ -468,13 +471,14 @@ export default function Sessions({ overview }) {
         <div className="card overflow-hidden">
           <table className="w-full text-sm">
             <thead>
-              <tr className="text-[9px] uppercase tracking-wider" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text3)' }}>
+              <tr className="text-[10px] uppercase tracking-wider" style={{ borderBottom: '1px solid var(--c-border)', color: 'var(--c-text3)' }}>
                 <th className="text-left py-2 px-3 font-medium">editor</th>
                 <th className="text-left py-2 px-3 font-medium">name</th>
                 <th className="text-left py-2 px-3 font-medium">project</th>
                 <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>
@@ -500,12 +504,12 @@ export default function Sessions({ overview }) {
                   {isCollapsed ? <ChevronRight size={13} style={{ color: 'var(--c-text3)' }} /> : <ChevronDown size={13} style={{ color: 'var(--c-text3)' }} />}
                   <FolderOpen size={13} style={{ color: 'var(--c-text3)' }} />
                   <span className="text-xs font-medium" style={{ color: 'var(--c-white)' }}>{g.name}</span>
-                  <span className="text-[10px] truncate max-w-[300px]" style={{ color: 'var(--c-text3)' }}>{g.folder !== g.name && g.folder !== '(no project)' ? g.folder : ''}</span>
+                  <span className="text-[11px] truncate max-w-[300px]" style={{ color: 'var(--c-text3)' }}>{g.folder !== g.name && g.folder !== '(no project)' ? g.folder : ''}</span>
                   <span className="ml-auto flex items-center gap-2">
                     {editorSet.slice(0, 5).map(e => (
                       <span key={e} className="w-2 h-2 rounded-full" style={{ background: editorColor(e) }} title={editorLabel(e)} />
                     ))}
-                    <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>{g.items.length}</span>
+                    <span className="text-[11px]" style={{ color: 'var(--c-text3)' }}>{g.items.length}</span>
                   </span>
                 </div>
                 {!isCollapsed && (