agentlytics 0.2.4 → 0.2.5

package/ui/src/pages/ProjectDetail.jsx

@@ -102,7 +102,7 @@ export default function ProjectDetail() {
   const avgMsgs = allEnabled && project.totalSessions > 0 ? (project.totalMessages / project.totalSessions).toFixed(1) : 0
 
   return (
-    <div className="fade-in space-y-4">
+    <div className="fade-in space-y-3">
       {/* Header card */}
       <div className="card p-4">
         <div className="flex items-start gap-3">

package/ui/src/pages/Projects.jsx

@@ -11,6 +11,7 @@ import EditorIcon from '../components/EditorIcon'
 import DateRangePicker from '../components/DateRangePicker'
 import SectionTitle from '../components/SectionTitle'
 import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
 
@@ -63,7 +64,9 @@ export default function Projects({ overview }) {
   const top10 = projects.slice(0, 10)
 
   return (
-    <div className="fade-in space-y-4">
+    <div className="fade-in space-y-3">
+      <PageHeader icon={FolderOpen} title="Projects" />
+
       {/* KPIs */}
       <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
         <KpiCard label="projects" value={projects.length} />
@@ -143,7 +146,7 @@ export default function Projects({ overview }) {
         <select
           value={editorFilter}
           onChange={e => setEditorFilter(e.target.value)}
-          className="px-2 py-1.5 text-[12px] outline-none rounded-sm"
+          className="px-2 py-1 text-[12px] outline-none"
           style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
         >
           <option value="">All Editors</option>
@@ -151,14 +154,14 @@ export default function Projects({ overview }) {
             <option key={e.id} value={e.id}>{editorLabel(e.id)}</option>
           ))}
         </select>
-        <div className="relative max-w-sm flex-1">
-          <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+        <div className="relative flex-1 max-w-sm">
+          <Search size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
           <input
             type="text"
-            placeholder="search projects..."
+            placeholder="Search projects..."
             value={search}
             onChange={e => setSearch(e.target.value)}
-            className="w-full pl-8 pr-3 py-1.5 text-[12px] outline-none rounded-sm"
+            className="w-full pl-7 pr-3 py-1 text-[12px] outline-none"
             style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
           />
         </div>

package/ui/src/pages/RelayDashboard.jsx

@@ -11,6 +11,7 @@ import LiveFeed from '../components/LiveFeed'
 import { editorColor, editorLabel, formatNumber, formatDate } from '../lib/constants'
 import { fetchRelayTeamStats, fetchRelaySearch, fetchRelaySession, mergeRelayUsers } from '../lib/api'
 import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
 import { useTheme } from '../lib/theme'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement)
@@ -319,7 +320,9 @@ export default function RelayDashboard() {
       </div>
 
       {/* ── Center: scrollable content ── */}
-      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-4">
+      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-3">
+        <PageHeader icon={Users} title="Team Relay" />
+
         {/* KPIs */}
         <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
           <KpiCard label="team members" value={stats.totalUsers} />

package/ui/src/pages/RelayUserDetail.jsx

@@ -228,7 +228,7 @@ export default function RelayUserDetail() {
       </div>
 
       {/* ── Center: scrollable content ── */}
-      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-4">
+      <div className="flex-1 min-w-0 overflow-y-auto p-4 space-y-3">
         {/* Header */}
         <div className="flex items-center gap-3">
           <button

package/ui/src/pages/Sessions.jsx

@@ -11,6 +11,7 @@ import EditorIcon from '../components/EditorIcon'
 import SectionTitle from '../components/SectionTitle'
 import DateRangePicker from '../components/DateRangePicker'
 import ChatSidebar from '../components/ChatSidebar'
+import PageHeader from '../components/PageHeader'
 
 ChartJS.register(ArcElement, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip, Legend, Filler)
 
@@ -295,7 +296,9 @@ export default function Sessions({ overview }) {
   )
 
   return (
-    <div className="fade-in space-y-4">
+    <div className="fade-in space-y-3">
+      <PageHeader icon={List} title="Sessions" />
+
       {/* KPIs */}
       <div className="grid gap-2" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(90px, 1fr))' }}>
         <KpiCard label="sessions" value={formatNumber(filtered.length)} sub={filtered.length !== total ? `of ${formatNumber(total)}` : ''} />
@@ -421,29 +424,26 @@ export default function Sessions({ overview }) {
       )}
 
       {/* Filters */}
-      <div className="flex items-center gap-3">
-          <div className="relative">
-            <Filter size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
-            <select
-              value={editor}
-              onChange={e => setEditor(e.target.value)}
-              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>
-              {editors.map(e => (
-                <option key={e.id} value={e.id}>{editorLabel(e.id)} ({e.count})</option>
-              ))}
-            </select>
-          </div>
+      <div className="flex items-center gap-2">
+          <select
+            value={editor}
+            onChange={e => setEditor(e.target.value)}
+            className="px-2 py-1 text-[12px] outline-none"
+            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+          >
+            <option value="">All Editors</option>
+            {editors.map(e => (
+              <option key={e.id} value={e.id}>{editorLabel(e.id)} ({e.count})</option>
+            ))}
+          </select>
           <div className="relative flex-1 max-w-sm">
-            <Search size={13} className="absolute left-3 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
+            <Search size={12} className="absolute left-2.5 top-1/2 -translate-y-1/2" style={{ color: 'var(--c-text3)' }} />
             <input
               type="text"
-              placeholder="search sessions..."
+              placeholder="Search sessions..."
               value={search}
               onChange={e => setSearch(e.target.value)}
-              className="w-full pl-8 pr-3 py-1 text-[12px] outline-none"
+              className="w-full pl-7 pr-3 py-1 text-[12px] outline-none"
               style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
             />
           </div>

package/ui/src/pages/Settings.jsx

@@ -5,6 +5,7 @@ import { editorLabel, formatNumber, formatDate } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
 import SectionTitle from '../components/SectionTitle'
 import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
 
 export default function Settings() {
   const [config, setConfig] = useState(null)
@@ -47,11 +48,8 @@ export default function Settings() {
   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="fade-in space-y-3">
+      <PageHeader icon={SettingsIcon} title="Settings" />
 
       <div className="card overflow-hidden">
         <div className="px-3 py-2 flex items-center justify-between" style={{ borderBottom: '1px solid var(--c-border)' }}>

package/ui/src/pages/SqlViewer.jsx

@@ -4,6 +4,7 @@ import { Chart as ChartJS, ArcElement, Tooltip, Legend, CategoryScale, LinearSca
 import { Bar, Line, Doughnut } from 'react-chartjs-2'
 import { executeQuery, fetchSchema } from '../lib/api'
 import { useTheme } from '../lib/theme'
+import PageHeader from '../components/PageHeader'
 
 ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, BarElement, PointElement, LineElement, Filler)
 
@@ -132,24 +133,22 @@ export default function SqlViewer() {
   const cardBg = { background: 'var(--c-card)', border: '1px solid var(--c-border)' }
 
   return (
-    <div className="space-y-3">
+    <div className="fade-in space-y-3">
       {/* Header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <Database size={16} style={txtStyle} />
-          <h1 className="text-sm font-semibold" style={txtStyle}>SQL Viewer</h1>
-          <span className="text-[11px] px-1.5 py-0.5 rounded" style={{ ...txt2Style, background: 'var(--c-bg2)' }}>cache.db</span>
+      <PageHeader icon={Database} title="SQL Viewer">
+        <span className="text-[10px] px-1.5 py-0.5" style={{ color: 'var(--c-text3)', background: 'var(--c-bg3)' }}>cache.db</span>
+        <div className="ml-auto">
+          <button
+            onClick={() => setShowSchema(!showSchema)}
+            className="flex items-center gap-1 text-[11px] px-2 py-1 transition hover:bg-[var(--c-card)]"
+            style={{ color: 'var(--c-text2)', border: '1px solid var(--c-border)' }}
+          >
+            <Table2 size={11} />
+            Schema
+            <ChevronDown size={10} className={`transition ${showSchema ? 'rotate-180' : ''}`} />
+          </button>
         </div>
-        <button
-          onClick={() => setShowSchema(!showSchema)}
-          className="flex items-center gap-1 text-[12px] px-2 py-1 rounded transition hover:bg-[var(--c-card)]"
-          style={txt2Style}
-        >
-          <Table2 size={12} />
-          Schema
-          <ChevronDown size={10} className={`transition ${showSchema ? 'rotate-180' : ''}`} />
-        </button>
-      </div>
+      </PageHeader>
 
       {/* Schema panel */}
       {showSchema && schema && (

package/ui/src/pages/Subscriptions.jsx

@@ -4,6 +4,7 @@ import { fetchUsage } from '../lib/api'
 import { editorLabel, editorColor } from '../lib/constants'
 import EditorIcon from '../components/EditorIcon'
 import AnimatedLoader from '../components/AnimatedLoader'
+import PageHeader from '../components/PageHeader'
 
 function UsageBar({ value, max = 100, color, label }) {
   const pct = max > 0 ? Math.min((value / max) * 100, 100) : 0
@@ -364,12 +365,8 @@ export default function Subscriptions() {
   useEffect(() => { load() }, [])
 
   return (
-    <div className="fade-in space-y-4">
-      <div className="flex items-center gap-3">
-        <div className="flex items-center gap-1.5 text-[13px] font-bold" style={{ color: 'var(--c-white)' }}>
-          <CreditCard size={14} style={{ color: '#6366f1' }} />
-          Subscriptions
-        </div>
+    <div className="fade-in space-y-3">
+      <PageHeader icon={CreditCard} title="Subscriptions">
         <button
           onClick={load}
           disabled={loading}
@@ -384,7 +381,7 @@ export default function Subscriptions() {
             {data.length} subscription{data.length !== 1 ? 's' : ''} detected
           </span>
         )}
-      </div>
+      </PageHeader>
 
       {loading && !data && (
         <AnimatedLoader label="Loading subscriptions..." />