agentlytics 0.0.7 → 0.0.10

package/ui/src/pages/Sessions.jsx

@@ -1,12 +1,14 @@
 import { useState, useEffect, useMemo, useRef, useCallback } from 'react'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import { Search, Filter, List, FolderOpen, ChevronDown, ChevronRight, X } from 'lucide-react'
 import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler } from 'chart.js'
 import { Line } from 'react-chartjs-2'
 import { fetchChats } from '../lib/api'
-import { editorColor, editorLabel, formatDate } from '../lib/constants'
+import { editorColor, editorLabel, formatDate, dateRangeToApiParams } from '../lib/constants'
 import { useTheme } from '../lib/theme'
 import EditorDot from '../components/EditorDot'
+import DateRangePicker from '../components/DateRangePicker'
+import ChatSidebar from '../components/ChatSidebar'
 
 ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, Tooltip, Legend, Filler)
 
@@ -107,8 +109,9 @@ export default function Sessions({ overview }) {
   const [loading, setLoading] = useState(true)
   const [groupByProject, setGroupByProject] = useState(false)
   const [collapsedProjects, setCollapsedProjects] = useState(new Set())
-  const [dateRange, setDateRange] = useState(null) // [startWeek, endWeek]
-  const navigate = useNavigate()
+  const [dateRange, setDateRange] = useState(null) // [startWeek, endWeek] — chart drag-select
+  const [apiDateRange, setApiDateRange] = useState(null) // { from, to } — server-side date filter
+  const [selectedChatId, setSelectedChatId] = useState(null)
   const chartRef = useRef(null)
 
   const onRangeSelect = useCallback((start, end) => {
@@ -117,12 +120,12 @@ export default function Sessions({ overview }) {
 
   useEffect(() => {
     setLoading(true)
-    fetchChats({ editor, limit: 1000 }).then(data => {
+    fetchChats({ editor, limit: 1000, ...dateRangeToApiParams(apiDateRange) }).then(data => {
       setChats(data.chats)
       setTotal(data.total)
       setLoading(false)
     })
-  }, [editor])
+  }, [editor, apiDateRange])
 
   const searchFiltered = search
     ? chats.filter(c =>
@@ -212,7 +215,7 @@ export default function Sessions({ overview }) {
       style={{ borderBottom: '1px solid var(--c-border)' }}
       onMouseEnter={e => e.currentTarget.style.background = 'var(--c-bg3)'}
       onMouseLeave={e => e.currentTarget.style.background = 'transparent'}
-      onClick={() => navigate(`/sessions/${c.id}`)}
+      onClick={() => setSelectedChatId(c.id)}
     >
       <td className="py-2.5 px-4">
         <EditorDot source={c.source} showLabel size={7} />
@@ -229,6 +232,9 @@ export default function Sessions({ overview }) {
       <td className="py-2.5 px-4">
         <span className="text-xs" style={{ color: 'var(--c-text2)' }}>{c.mode}</span>
       </td>
+      <td className="py-2.5 px-4 text-xs truncate max-w-[180px] font-mono" style={{ color: 'var(--c-text2)' }} title={c.topModel || ''}>
+        {c.topModel || ''}
+      </td>
       <td className="py-2.5 px-4 text-xs whitespace-nowrap" style={{ color: 'var(--c-text2)' }}>
         {formatDate(c.lastUpdatedAt || c.createdAt)}
       </td>
@@ -283,46 +289,48 @@ 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-2 text-sm outline-none appearance-none cursor-pointer"
-            style={{ background: 'var(--c-bg3)', color: 'var(--c-text)', border: '1px solid var(--c-border)' }}
+          <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-[11px] 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="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)' }} />
+            <input
+              type="text"
+              placeholder="search sessions..."
+              value={search}
+              onChange={e => setSearch(e.target.value)}
+              className="w-full pl-8 pr-3 py-1 text-[11px] 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"
+            style={{
+              border: groupByProject ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
+              color: groupByProject ? 'var(--c-accent)' : 'var(--c-text2)',
+              background: groupByProject ? 'rgba(99,102,241,0.1)' : 'transparent',
+            }}
           >
-            <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="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)' }} />
-          <input
-            type="text"
-            placeholder="search sessions..."
-            value={search}
-            onChange={e => setSearch(e.target.value)}
-            className="w-full pl-8 pr-3 py-2 text-sm 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-2 text-xs transition"
-          style={{
-            border: groupByProject ? '1px solid var(--c-accent)' : '1px solid var(--c-border)',
-            color: groupByProject ? 'var(--c-accent)' : 'var(--c-text2)',
-            background: groupByProject ? 'rgba(99,102,241,0.1)' : 'transparent',
-          }}
-        >
-          {groupByProject ? <FolderOpen size={13} /> : <List size={13} />}
-          {groupByProject ? 'grouped' : 'flat'}
-        </button>
-        <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
-          {loading ? 'loading...' : `${filtered.length} of ${total}`}
-        </span>
+            {groupByProject ? <FolderOpen size={13} /> : <List size={13} />}
+            {groupByProject ? 'grouped' : 'flat'}
+          </button>
+          <span className="text-[10px]" style={{ color: 'var(--c-text3)' }}>
+            {loading ? 'loading...' : `${filtered.length} of ${total}`}
+          </span>
+        {/* Server-side date range filter */}
+        <div className="ml-auto"><DateRangePicker value={apiDateRange} onChange={setApiDateRange} /></div>
       </div>
 
       {/* Session table */}
@@ -335,6 +343,7 @@ export default function Sessions({ overview }) {
                 <th className="text-left py-2.5 px-4 font-medium">name</th>
                 <th className="text-left py-2.5 px-4 font-medium">project</th>
                 <th className="text-left py-2.5 px-4 font-medium">mode</th>
+                <th className="text-left py-2.5 px-4 font-medium">model</th>
                 <th className="text-left py-2.5 px-4 font-medium">updated</th>
               </tr>
             </thead>
@@ -383,6 +392,9 @@ export default function Sessions({ overview }) {
           )}
         </div>
       )}
+
+      {/* Chat sidebar */}
+      <ChatSidebar chatId={selectedChatId} onClose={() => setSelectedChatId(null)} />
     </div>
   )
 }