agentlytics 0.1.3 → 0.1.5

package/ui/src/components/LoginScreen.jsx

@@ -1,6 +1,7 @@
 import { useState } from 'react'
 import { Lock } from 'lucide-react'
 import { login } from '../lib/api'
+import AnimatedLogo from './AnimatedLogo'
 
 export default function LoginScreen({ onSuccess }) {
   const [password, setPassword] = useState('')
@@ -31,13 +32,14 @@ export default function LoginScreen({ onSuccess }) {
             >
               <Lock size={18} style={{ color: '#818cf8' }} />
             </div>
-            <div className="text-sm font-bold" style={{ color: 'var(--c-white)' }}>
-              npx agentlytics
-              <span className="ml-1.5 text-[9px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
+            <div className="flex items-center gap-1.5 text-sm font-bold" style={{ color: 'var(--c-white)' }}>
+              <AnimatedLogo size={16} />
+              Agentlytics
+              <span className="text-[10px] font-medium px-1.5 py-0.5" style={{ background: 'rgba(99,102,241,0.15)', color: '#818cf8' }}>
                 relay
               </span>
             </div>
-            <div className="text-[10px] mt-1" style={{ color: 'var(--c-text3)' }}>
+            <div className="text-[11px] mt-1" style={{ color: 'var(--c-text3)' }}>
               This relay is password-protected
             </div>
           </div>
@@ -57,12 +59,12 @@ export default function LoginScreen({ onSuccess }) {
               }}
             />
             {error && (
-              <div className="text-[10px]" style={{ color: '#f87171' }}>{error}</div>
+              <div className="text-[11px]" style={{ color: '#f87171' }}>{error}</div>
             )}
             <button
               type="submit"
               disabled={loading || !password}
-              className="w-full py-2 text-[11px] font-medium rounded transition"
+              className="w-full py-2 text-[12px] font-medium rounded transition"
               style={{
                 background: '#6366f1',
                 color: '#fff',

package/ui/src/components/MessageRenderer.jsx

@@ -52,7 +52,7 @@ export function ToolArgsDiff({ args }) {
   const oldLines = (old || '').split('\n').slice(0, maxLines)
   const newLines = (nw || '').split('\n').slice(0, maxLines)
   return (
-    <div className="mt-1.5 text-[9px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
+    <div className="mt-1.5 text-[10px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
       {(args.file_path || args.TargetFile) && (
         <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text)' }}>{args.file_path || args.TargetFile}</div>
       )}
@@ -85,7 +85,7 @@ export function ToolArgsDetail({ args }) {
   const query = args.Query || args.query || args.search_term || null
   const url = args.Url || args.url || null
   return (
-    <div className="mt-1.5 text-[9px] font-mono overflow-x-auto" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+    <div className="mt-1.5 text-[10px] font-mono overflow-x-auto" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
       {file && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>file: {file}</div>}
       {cmd && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>cmd: {cmd}</div>}
       {query && <div className="px-2 py-0.5" style={{ color: 'var(--c-text)' }}>query: {query}</div>}
@@ -101,7 +101,7 @@ export function ToolCallBlock({ name, args, detail }) {
   const [open, setOpen] = useState(false)
   const hasDetail = detail && Object.keys(detail).length > 0
   return (
-    <div className="my-1 px-2.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+    <div className="my-1 px-2.5 py-1.5 text-[11px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
       <div className="flex items-center gap-2 cursor-pointer" onClick={() => hasDetail && setOpen(!open)}>
         {hasDetail
           ? (open ? <ChevronDown size={10} style={{ color: '#a78bfa' }} /> : <ChevronRight size={10} style={{ color: '#a78bfa' }} />)
@@ -121,13 +121,13 @@ export function ToolResultBlock({ name, preview }) {
   const isNoisy = preview.length > 120 || preview.startsWith('{') || preview.includes('contentId')
   const short = isNoisy ? `${name} completed` : preview.substring(0, 120)
   return (
-    <div className="my-1 px-2.5 py-1.5 text-[10px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
+    <div className="my-1 px-2.5 py-1.5 text-[11px]" style={{ background: 'var(--c-code-bg)', border: '1px solid var(--c-border)' }}>
       <div className="flex items-center gap-2 cursor-pointer" onClick={() => preview && setOpen(!open)}>
         <CheckCircle size={10} style={{ color: '#34d399' }} />
         <span className="truncate" style={{ color: 'var(--c-text)' }}>{short}</span>
         {isNoisy && preview && <span style={{ color: 'var(--c-text3)' }}>{open ? '[-]' : '[+]'}</span>}
       </div>
-      {open && <pre className="mt-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{preview}</pre>}
+      {open && <pre className="mt-1 text-[10px] overflow-x-auto whitespace-pre-wrap break-all" style={{ color: 'var(--c-text2)' }}>{preview}</pre>}
     </div>
   )
 }

package/ui/src/components/ModelBreakdown.jsx

@@ -9,15 +9,15 @@ export default function ModelBreakdown({ models }) {
         return (
           <div key={name} className="flex items-center gap-2">
             <Cpu size={10} style={{ color: '#818cf8' }} />
-            <span className="text-[10px] truncate w-40" style={{ color: 'var(--c-text)' }}>{name}</span>
+            <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-[10px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
+            <span className="text-[11px] w-10 text-right" style={{ color: 'var(--c-text2)' }}>{count}</span>
           </div>
         )
       })}
-      {models.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>No model data</div>}
+      {models.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>No model data</div>}
     </div>
   )
 }

package/ui/src/components/SectionTitle.jsx

@@ -1,3 +1,3 @@
 export default function SectionTitle({ children }) {
-  return <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>{children}</h3>
+  return <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>{children}</h3>
 }

package/ui/src/index.css

@@ -36,7 +36,7 @@ body {
   background: var(--c-bg);
   color: var(--c-text);
   min-height: 100vh;
-  font-size: 11.5px;
+  font-size: 13px;
   line-height: 1.5;
 }
 

package/ui/src/pages/Compare.jsx

@@ -16,15 +16,15 @@ function MetricRow({ label, a, b, colorA, colorB }) {
   const max = Math.max(numA, numB, 1)
   return (
     <div className="grid grid-cols-[1fr_100px_100px] gap-x-3 items-center py-0.5" style={{ borderBottom: '1px solid var(--c-border)' }}>
-      <div className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
+      <div className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{label}</div>
       <div className="text-right">
-        <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
+        <span className="text-[12px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
           {typeof a === 'number' ? formatNumber(a) : a}
         </span>
         <div className="h-1 rounded-full mt-0.5 ml-auto" style={{ background: colorA, width: `${(numA / max * 100).toFixed(0)}%` }} />
       </div>
       <div className="text-right">
-        <span className="text-[11px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
+        <span className="text-[12px] font-mono font-medium" style={{ color: 'var(--c-white)' }}>
           {typeof b === 'number' ? formatNumber(b) : b}
         </span>
         <div className="h-1 rounded-full mt-0.5 ml-auto" style={{ background: colorB, width: `${(numB / max * 100).toFixed(0)}%` }} />
@@ -37,27 +37,27 @@ function ListCompare({ titleA, titleB, colorA, colorB, itemsA, itemsB, limit = 8
   return (
     <div className="grid grid-cols-2 gap-2">
       <div>
-        <h4 className="text-[10px] font-medium uppercase tracking-wider mb-1" style={{ color: colorA }}>{titleA}</h4>
+        <h4 className="text-[11px] font-medium uppercase tracking-wider mb-1" style={{ color: colorA }}>{titleA}</h4>
         <div className="space-y-0.5">
           {itemsA.slice(0, limit).map(t => (
-            <div key={t.name} className="flex justify-between text-[10px] py-0.5">
+            <div key={t.name} className="flex justify-between text-[11px] py-0.5">
               <span className="truncate" style={{ color: 'var(--c-text)' }}>{t.name}</span>
               <span className="font-mono ml-2" style={{ color: 'var(--c-text3)' }}>{t.count}</span>
             </div>
           ))}
-          {itemsA.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>none</div>}
+          {itemsA.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>none</div>}
         </div>
       </div>
       <div>
-        <h4 className="text-[10px] font-medium uppercase tracking-wider mb-1" style={{ color: colorB }}>{titleB}</h4>
+        <h4 className="text-[11px] font-medium uppercase tracking-wider mb-1" style={{ color: colorB }}>{titleB}</h4>
         <div className="space-y-0.5">
           {itemsB.slice(0, limit).map(t => (
-            <div key={t.name} className="flex justify-between text-[10px] py-0.5">
+            <div key={t.name} className="flex justify-between text-[11px] py-0.5">
               <span className="truncate" style={{ color: 'var(--c-text)' }}>{t.name}</span>
               <span className="font-mono ml-2" style={{ color: 'var(--c-text3)' }}>{t.count}</span>
             </div>
           ))}
-          {itemsB.length === 0 && <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>none</div>}
+          {itemsB.length === 0 && <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>none</div>}
         </div>
       </div>
     </div>
@@ -156,7 +156,7 @@ export default function Compare({ overview }) {
         <select
           value={editorA}
           onChange={e => setEditorA(e.target.value)}
-          className="px-2 py-1 text-[11px] outline-none"
+          className="px-2 py-1 text-[12px] outline-none"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
@@ -165,7 +165,7 @@ export default function Compare({ overview }) {
         <select
           value={editorB}
           onChange={e => setEditorB(e.target.value)}
-          className="px-2 py-1 text-[11px] outline-none"
+          className="px-2 py-1 text-[12px] outline-none"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           {editors.map(e => <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>)}
@@ -179,8 +179,8 @@ export default function Compare({ overview }) {
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
               <div className="flex items-center justify-between mb-1.5">
-                <h3 className="text-[10px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>totals</h3>
-                <div className="flex items-center gap-3 text-[9px]">
+                <h3 className="text-[11px] font-medium uppercase tracking-wider" style={{ color: 'var(--c-text2)' }}>totals</h3>
+                <div className="flex items-center gap-3 text-[10px]">
                   <span style={{ color: colorA }}>● {nameA}</span>
                   <span style={{ color: colorB }}>● {nameB}</span>
                 </div>
@@ -188,7 +188,7 @@ export default function Compare({ overview }) {
               {metrics.map(m => <MetricRow key={m.label} label={m.label} a={m.a} b={m.b} colorA={colorA} colorB={colorB} />)}
             </div>
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-1.5" style={{ color: 'var(--c-text2)' }}>efficiency</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-1.5" style={{ color: 'var(--c-text2)' }}>efficiency</h3>
               {ratios.map(m => <MetricRow key={m.label} label={m.label} a={m.a} b={m.b} colorA={colorA} colorB={colorB} />)}
             </div>
           </div>
@@ -196,14 +196,14 @@ export default function Compare({ overview }) {
           {/* Charts row */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>usage</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>usage</h3>
               <div style={{ height: 160 }}>
                 <Bar data={barChart} options={barOpts} />
               </div>
             </div>
             {tokenChart && (
               <div className="card p-3">
-                <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>tokens</h3>
+                <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>tokens</h3>
                 <div style={{ height: 160 }}>
                   <Bar data={tokenChart} options={barOpts} />
                 </div>
@@ -214,12 +214,12 @@ export default function Compare({ overview }) {
           {/* Tools + Models side-by-side */}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>top tools</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>top tools</h3>
               <ListCompare titleA={nameA} titleB={nameB} colorA={colorA} colorB={colorB}
                 itemsA={result.deepA.topTools} itemsB={result.deepB.topTools} limit={10} />
             </div>
             <div className="card p-3">
-              <h3 className="text-[10px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>models</h3>
+              <h3 className="text-[11px] font-medium uppercase tracking-wider mb-2" style={{ color: 'var(--c-text2)' }}>models</h3>
               <ListCompare titleA={nameA} titleB={nameB} colorA={colorA} colorB={colorB}
                 itemsA={result.deepA.topModels} itemsB={result.deepB.topModels} limit={8} />
             </div>

package/ui/src/pages/Dashboard.jsx

@@ -220,7 +220,7 @@ export default function Dashboard({ overview }) {
         <button
           onClick={handleShare}
           disabled={sharing}
-          className="flex items-center gap-1.5 px-3 py-1 text-[11px] rounded-md transition hover:opacity-80"
+          className="flex items-center gap-1.5 px-3 py-1 text-[12px] rounded-md transition hover:opacity-80"
           style={{ background: '#6366f1', color: '#fff', opacity: sharing ? 0.5 : 1 }}
         >
           <Share2 size={12} />
@@ -236,7 +236,7 @@ export default function Dashboard({ overview }) {
             return (
               <button
                 key={e.id}
-                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[11px] cursor-pointer transition rounded-sm"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-[12px] cursor-pointer transition rounded-sm"
                 style={{
                   border: isSelected ? `1.5px solid ${editorColor(e.id)}` : '1px solid var(--c-border)',
                   background: isSelected ? editorColor(e.id) + '15' : 'transparent',
@@ -254,10 +254,10 @@ export default function Dashboard({ overview }) {
         </div>
         {selectedEditor && sel && (
           <div className="mt-2 flex items-center gap-2">
-            <button onClick={() => navigate(`/sessions?editor=${selectedEditor}`)} className="flex items-center gap-1 text-[11px] px-2.5 py-1 transition" style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}>
+            <button onClick={() => navigate(`/sessions?editor=${selectedEditor}`)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-accent)', border: '1px solid var(--c-border)' }}>
               Show Sessions <ArrowRight size={11} />
             </button>
-            <button onClick={() => setSelectedEditor(null)} className="flex items-center gap-1 text-[11px] px-2.5 py-1 transition" style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}>
+            <button onClick={() => setSelectedEditor(null)} className="flex items-center gap-1 text-[12px] px-2.5 py-1 transition" style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}>
               <X size={9} /> Clear
             </button>
           </div>
@@ -287,7 +287,7 @@ export default function Dashboard({ overview }) {
         <SectionTitle>agentic coding activity</SectionTitle>
         <div className="flex gap-4">
           <div className="min-w-0 flex-shrink-0">
-            {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
+            {dailyData ? <ActivityHeatmap dailyData={dailyData} /> : <div className="text-[11px]" style={{ color: 'var(--c-text3)' }}>loading...</div>}
           </div>
           {stats && dailyData && (() => {
             const activeDays = dailyData.filter(d => d.total > 0)
@@ -295,7 +295,7 @@ export default function Dashboard({ overview }) {
             const totalSessions = activeDays.reduce((s, d) => s + d.total, 0)
             const avgPerDay = activeDays.length > 0 ? (totalSessions / activeDays.length).toFixed(1) : 0
             return (
-              <div className="flex-1 grid grid-cols-3 gap-3 text-[10px] min-w-0" style={{ borderLeft: '1px solid var(--c-border)', paddingLeft: 16 }}>
+              <div className="flex-1 grid grid-cols-3 gap-3 text-[11px] min-w-0" style={{ borderLeft: '1px solid var(--c-border)', paddingLeft: 16 }}>
                 <div className="space-y-2 min-w-0">
                   <div>
                     <div style={{ color: 'var(--c-text3)' }} className="uppercase tracking-wider mb-1">streaks</div>
@@ -452,11 +452,11 @@ export default function Dashboard({ overview }) {
           <div className="space-y-1 max-h-[180px] overflow-y-auto scrollbar-thin">
             {d.topProjects.slice(0, 12).map(p => (
               <div key={p.name} className="flex items-center gap-1.5">
-                <div className="text-[9px] w-6 text-right" style={{ color: 'var(--c-text2)' }}>{p.count}</div>
+                <div className="text-[10px] w-6 text-right" style={{ color: 'var(--c-text2)' }}>{p.count}</div>
                 <div className="flex-1 h-3 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                   <div className="h-full bg-accent/30 rounded-sm" style={{ width: `${(p.count / maxProject * 100).toFixed(1)}%` }} />
                 </div>
-                <div className="text-[9px] truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={p.fullPath}>{p.name}</div>
+                <div className="text-[10px] truncate max-w-[140px]" style={{ color: 'var(--c-text2)' }} title={p.fullPath}>{p.name}</div>
               </div>
             ))}
           </div>
@@ -473,13 +473,13 @@ export default function Dashboard({ overview }) {
                 const maxM = stats.topModels[0].count
                 return (
                   <div key={m.name} className="flex items-center gap-2">
-                    <span className="text-[9px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <span className="text-[10px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
                     <div className="flex-1 h-4 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                       <div className="h-full rounded-sm flex items-center px-1.5" style={{ width: `${(m.count / maxM * 100).toFixed(1)}%`, background: i === 0 ? '#6366f1' : i === 1 ? '#818cf8' : '#a5b4fc40' }}>
                         <span className="text-[8px] truncate" style={{ color: i < 2 ? '#fff' : 'var(--c-text2)' }}>{m.name}</span>
                       </div>
                     </div>
-                    <span className="text-[9px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{m.count}</span>
+                    <span className="text-[10px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{m.count}</span>
                   </div>
                 )
               })}
@@ -495,13 +495,13 @@ export default function Dashboard({ overview }) {
                 const maxT = stats.topTools[0].count
                 return (
                   <div key={t.name} className="flex items-center gap-2">
-                    <span className="text-[9px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
+                    <span className="text-[10px] w-3 text-right" style={{ color: 'var(--c-text3)' }}>{i + 1}</span>
                     <div className="flex-1 h-4 rounded-sm overflow-hidden" style={{ background: 'var(--c-code-bg)' }}>
                       <div className="h-full rounded-sm flex items-center px-1.5" style={{ width: `${(t.count / maxT * 100).toFixed(1)}%`, background: i === 0 ? '#10b981' : i === 1 ? '#34d399' : '#6ee7b740' }}>
                         <span className="text-[8px] truncate font-mono" style={{ color: i < 2 ? '#fff' : 'var(--c-text2)' }}>{t.name}</span>
                       </div>
                     </div>
-                    <span className="text-[9px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{formatNumber(t.count)}</span>
+                    <span className="text-[10px] w-8 text-right" style={{ color: 'var(--c-text3)' }}>{formatNumber(t.count)}</span>
                   </div>
                 )
               })}
@@ -527,9 +527,9 @@ export default function Dashboard({ overview }) {
                   onClick={() => navigate(`/sessions/${c.id}`)}
                 >
                   <EditorIcon source={c.source} size={10} />
-                  <span className="text-[9px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
+                  <span className="text-[10px] truncate flex-1" style={{ color: 'var(--c-text)' }}>{c.name || 'Untitled'}</span>
                   <span
-                    className="text-[9px] font-bold flex-shrink-0"
+                    className="text-[10px] font-bold flex-shrink-0"
                     style={{ color: c.bubbleCount >= 500 ? '#ef4444' : '#f59e0b' }}
                   >
                     {c.bubbleCount}

package/ui/src/pages/DeepAnalysis.jsx

@@ -75,7 +75,7 @@ function DiffBlock({ diff }) {
   const oldLines = (diff.old || '').split('\n').slice(0, maxLines)
   const newLines = (diff.new || '').split('\n').slice(0, maxLines)
   return (
-    <div className="mt-1 text-[9px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
+    <div className="mt-1 text-[10px] font-mono overflow-x-auto" style={{ border: '1px solid var(--c-border)' }}>
       {diff.file && (
         <div className="px-2 py-0.5" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>{diff.file}</div>
       )}
@@ -107,7 +107,7 @@ function ToolCallRow({ call, toolName, index }) {
   const hasDetail = diff || (call.args && Object.keys(call.args).length > 0)
 
   return (
-    <div className="px-2 py-1 text-[10px]" style={{ background: index % 2 === 0 ? 'var(--c-code-bg)' : 'transparent' }}>
+    <div className="px-2 py-1 text-[11px]" style={{ background: index % 2 === 0 ? 'var(--c-code-bg)' : 'transparent' }}>
       <div className="flex items-start gap-2 cursor-pointer" onClick={() => hasDetail && setExpanded(!expanded)}>
         <EditorIcon source={call.source} size={10} />
         <div className="flex-1 min-w-0">
@@ -124,7 +124,7 @@ function ToolCallRow({ call, toolName, index }) {
       </div>
       {expanded && diff && <DiffBlock diff={diff} />}
       {expanded && !diff && call.args && Object.keys(call.args).length > 0 && (
-        <pre className="mt-1 px-2 py-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
+        <pre className="mt-1 px-2 py-1 text-[10px] overflow-x-auto whitespace-pre-wrap break-all" style={{ background: 'var(--c-code-bg)', color: 'var(--c-text2)' }}>
           {JSON.stringify(call.args, null, 2)}
         </pre>
       )}
@@ -148,7 +148,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
         <div className="flex items-center gap-2">
           <Wrench size={12} style={{ color: 'var(--c-accent)' }} />
           <span className="text-xs font-bold" style={{ color: 'var(--c-white)' }}>{toolName}</span>
-          <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>
+          <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>
             {calls ? `${calls.length} calls` : '...'}
             {calls && projectName ? ` in ${projectName}` : ''}
           </span>
@@ -156,7 +156,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
         <button onClick={onClose} className="p-0.5" style={{ color: 'var(--c-text2)' }}><X size={12} /></button>
       </div>
       {loading ? (
-        <div className="text-[10px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>loading...</div>
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>loading...</div>
       ) : calls && calls.length > 0 ? (
         <div className="max-h-[500px] overflow-y-auto scrollbar-thin space-y-0.5">
           {calls.map((c, i) => (
@@ -164,7 +164,7 @@ function ToolDrillDown({ toolName, folder, onClose }) {
           ))}
         </div>
       ) : (
-        <div className="text-[10px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>no calls found</div>
+        <div className="text-[11px] py-4 text-center" style={{ color: 'var(--c-text3)' }}>no calls found</div>
       )}
     </div>
   )
@@ -247,7 +247,7 @@ export default function DeepAnalysis({ overview }) {
         <select
           value={editor}
           onChange={e => setEditor(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>
@@ -258,7 +258,7 @@ export default function DeepAnalysis({ overview }) {
         <select
           value={folder}
           onChange={e => setFolder(e.target.value)}
-          className="px-2 py-1.5 text-[11px] outline-none max-w-[200px] truncate rounded-sm"
+          className="px-2 py-1.5 text-[12px] outline-none max-w-[200px] truncate rounded-sm"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           <option value="">All Projects</option>
@@ -267,7 +267,7 @@ export default function DeepAnalysis({ overview }) {
           ))}
         </select>
         {loading && <Loader2 size={11} className="animate-spin" style={{ color: 'var(--c-text3)' }} />}
-        {data && <span className="text-[10px]" style={{ color: 'var(--c-text2)' }}>{data.analyzedChats} sessions analyzed</span>}
+        {data && <span className="text-[11px]" style={{ color: 'var(--c-text2)' }}>{data.analyzedChats} sessions analyzed</span>}
         <div className="ml-auto"><DateRangePicker value={dateRange} onChange={setDateRange} /></div>
       </div>
 
@@ -290,7 +290,7 @@ export default function DeepAnalysis({ overview }) {
               <div className="space-y-3 mt-2">
                 {/* Input tokens breakdown */}
                 <div>
-                  <div className="flex items-center justify-between text-[10px] mb-1">
+                  <div className="flex items-center justify-between text-[11px] mb-1">
                     <span style={{ color: 'var(--c-text2)' }}>input tokens</span>
                     <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalInputTokens)}</span>
                   </div>
@@ -298,14 +298,14 @@ export default function DeepAnalysis({ overview }) {
                     { label: 'Fresh input', value: data.totalInputTokens - data.totalCacheRead, color: '#6366f1' },
                     { label: 'Cache read', value: data.totalCacheRead, color: '#34d399' },
                   ]} />
-                  <div className="flex items-center gap-3 mt-1 text-[9px]">
+                  <div className="flex items-center gap-3 mt-1 text-[10px]">
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> fresh {formatNumber(data.totalInputTokens - data.totalCacheRead)}</span>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cached {formatNumber(data.totalCacheRead)}</span>
                   </div>
                 </div>
                 {/* Output tokens */}
                 <div>
-                  <div className="flex items-center justify-between text-[10px] mb-1">
+                  <div className="flex items-center justify-between text-[11px] mb-1">
                     <span style={{ color: 'var(--c-text2)' }}>output tokens</span>
                     <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalOutputTokens)}</span>
                   </div>
@@ -316,7 +316,7 @@ export default function DeepAnalysis({ overview }) {
                 {/* Cache write */}
                 {data.totalCacheWrite > 0 && (
                   <div>
-                    <div className="flex items-center justify-between text-[10px] mb-1">
+                    <div className="flex items-center justify-between text-[11px] mb-1">
                       <span style={{ color: 'var(--c-text2)' }}>cache write</span>
                       <span className="font-bold" style={{ color: 'var(--c-white)' }}>{formatNumber(data.totalCacheWrite)}</span>
                     </div>
@@ -327,14 +327,14 @@ export default function DeepAnalysis({ overview }) {
                 )}
                 {/* Overall ratio bar */}
                 <div className="pt-2" style={{ borderTop: '1px solid var(--c-border)' }}>
-                  <div className="text-[9px] mb-1" style={{ color: 'var(--c-text3)' }}>overall token distribution</div>
+                  <div className="text-[10px] mb-1" style={{ color: 'var(--c-text3)' }}>overall token distribution</div>
                   <ProportionBar height={10} segments={[
                     { label: 'Input', value: data.totalInputTokens, color: '#6366f1' },
                     { label: 'Output', value: data.totalOutputTokens, color: '#a78bfa' },
                     { label: 'Cache Read', value: data.totalCacheRead, color: '#34d399' },
                     { label: 'Cache Write', value: data.totalCacheWrite, color: '#fbbf24' },
                   ]} />
-                  <div className="flex items-center gap-3 mt-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                  <div className="flex items-center gap-3 mt-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#6366f1' }} /> in</span>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#a78bfa' }} /> out</span>
                     <span className="flex items-center gap-1"><span className="w-2 h-2 rounded-sm" style={{ background: '#34d399' }} /> cache read</span>
@@ -350,12 +350,12 @@ export default function DeepAnalysis({ overview }) {
               <div className="space-y-3 mt-2">
                 {/* Human vs AI chars */}
                 <div>
-                  <div className="text-[10px] mb-1" style={{ color: 'var(--c-text2)' }}>you vs AI (characters)</div>
+                  <div className="text-[11px] mb-1" style={{ color: 'var(--c-text2)' }}>you vs AI (characters)</div>
                   <ProportionBar height={8} segments={[
                     { label: 'You', value: data.totalUserChars, color: '#6366f1' },
                     { label: 'AI', value: data.totalAssistantChars, color: '#34d399' },
                   ]} />
-                  <div className="flex items-center justify-between mt-1 text-[9px]">
+                  <div className="flex items-center justify-between mt-1 text-[10px]">
                     <span style={{ color: '#6366f1' }}>You: {formatNumber(data.totalUserChars)}</span>
                     <span style={{ color: '#34d399' }}>AI: {formatNumber(data.totalAssistantChars)}</span>
                   </div>
@@ -364,25 +364,25 @@ export default function DeepAnalysis({ overview }) {
                 {/* Metric cards */}
                 <div className="grid grid-cols-2 gap-2">
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <TrendingUp size={9} /> output/input ratio
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.outputRatio}×</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <Zap size={9} /> cache hit rate
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: parseFloat(insights.cacheHitRate) > 50 ? '#34d399' : parseFloat(insights.cacheHitRate) > 20 ? '#fbbf24' : 'var(--c-white)' }}>{insights.cacheHitRate}%</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <MessageSquare size={9} /> tokens per message
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{formatNumber(insights.tokPerMsg)}</div>
                   </div>
                   <div className="p-2 rounded-sm" style={{ background: 'var(--c-code-bg)' }}>
-                    <div className="flex items-center gap-1 text-[9px]" style={{ color: 'var(--c-text3)' }}>
+                    <div className="flex items-center gap-1 text-[10px]" style={{ color: 'var(--c-text3)' }}>
                       <Wrench size={9} /> tools per session
                     </div>
                     <div className="text-sm font-bold mt-0.5" style={{ color: 'var(--c-white)' }}>{insights.toolsPerSession}</div>
@@ -391,9 +391,9 @@ export default function DeepAnalysis({ overview }) {
 
                 {/* AI amplification */}
                 <div className="p-2 rounded-sm text-center" style={{ background: 'var(--c-code-bg)' }}>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>AI amplification factor</div>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI amplification factor</div>
                   <div className="text-lg font-bold" style={{ color: 'var(--c-accent)' }}>{insights.aiVsHuman}×</div>
-                  <div className="text-[9px]" style={{ color: 'var(--c-text3)' }}>AI writes {insights.aiVsHuman}× more than you type</div>
+                  <div className="text-[10px]" style={{ color: 'var(--c-text3)' }}>AI writes {insights.aiVsHuman}× more than you type</div>
                 </div>
               </div>
             </div>
@@ -424,7 +424,7 @@ export default function DeepAnalysis({ overview }) {
                       plugins: { legend: { display: false }, tooltip: { bodyFont: { family: MONO, size: 10 }, titleFont: { family: MONO, size: 10 } } },
                     }}
                   />
-                ) : <div className="text-[10px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no tool calls found</div>}
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no tool calls found</div>}
               </div>
             </div>
 
@@ -446,16 +446,16 @@ export default function DeepAnalysis({ overview }) {
                       },
                     }}
                   />
-                ) : <div className="text-[10px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no model data</div>}
+                ) : <div className="text-[11px] text-center py-8" style={{ color: 'var(--c-text3)' }}>no model data</div>}
               </div>
 
               {/* Tool categories below models */}
               {toolCategories.length > 0 && (
                 <div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--c-border)' }}>
-                  <div className="text-[9px] uppercase tracking-wider mb-2" style={{ color: 'var(--c-text3)' }}>tool categories</div>
+                  <div className="text-[10px] uppercase tracking-wider mb-2" style={{ color: 'var(--c-text3)' }}>tool categories</div>
                   <div className="space-y-1.5">
                     {toolCategories.map(([cat, { tools: catTools, total }]) => (
-                      <div key={cat} className="flex items-center gap-2 text-[10px]">
+                      <div key={cat} className="flex items-center gap-2 text-[11px]">
                         <span className="truncate flex-1" style={{ color: 'var(--c-text2)' }}>{cat}</span>
                         <span className="font-bold" style={{ color: 'var(--c-white)' }}>{total}</span>
                         <span style={{ color: 'var(--c-text3)' }}>({catTools.length})</span>