agentfit 0.1.2 → 0.1.5

package/components/sessions-table.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect, useCallback } from 'react'
 import Link from 'next/link'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
 import {
   Table,
   TableBody,
@@ -21,12 +22,124 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { PaginationControls } from '@/components/pagination-controls'
 import { usePagination } from '@/hooks/use-pagination'
-import { Eye } from 'lucide-react'
+import { AnalyzeConfirmDialog } from '@/components/analyze-confirm-dialog'
+import { Eye, Sparkles, Loader2 } from 'lucide-react'
 import type { SessionSummary } from '@/lib/parse-logs'
 import { formatCost, formatTokens, formatDuration, formatNumber } from '@/lib/format'
 
 export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
   const [projectFilter, setProjectFilter] = useState<string>('all')
+  const [analyzedIds, setAnalyzedIds] = useState<Set<string>>(new Set())
+  const [analyzingIds, setAnalyzingIds] = useState<Set<string>>(new Set())
+  const [hasApiKey, setHasApiKey] = useState(false)
+  const [bulkAnalyzing, setBulkAnalyzing] = useState(false)
+  const [confirmOpen, setConfirmOpen] = useState(false)
+  const [bulkEstimate, setBulkEstimate] = useState<{
+    sessionCount: number
+    messageCount: number
+    estimatedCostUSD: number
+  } | null>(null)
+  const [bulkSessionIds, setBulkSessionIds] = useState<string[]>([])
+
+  const loadAnalysisStatus = useCallback(async () => {
+    try {
+      const [analyzeRes, configRes] = await Promise.all([
+        fetch('/api/analyze?status=true'),
+        fetch('/api/config'),
+      ])
+      const analyzeData = await analyzeRes.json()
+      const configData = await configRes.json()
+      if (analyzeData.analyses) {
+        setAnalyzedIds(new Set(analyzeData.analyses.map((a: { sessionId: string }) => a.sessionId)))
+      }
+      setHasApiKey(configData.hasOpenAIKey || false)
+    } catch {
+      // ignore
+    }
+  }, [])
+
+  useEffect(() => {
+    loadAnalysisStatus()
+  }, [loadAnalysisStatus])
+
+  async function handleAnalyzeOne(sessionId: string) {
+    setAnalyzingIds((prev) => new Set(prev).add(sessionId))
+    try {
+      const res = await fetch('/api/analyze', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId }),
+      })
+      if (res.ok) {
+        setAnalyzedIds((prev) => new Set(prev).add(sessionId))
+      }
+    } catch {
+      // ignore
+    } finally {
+      setAnalyzingIds((prev) => {
+        const next = new Set(prev)
+        next.delete(sessionId)
+        return next
+      })
+    }
+  }
+
+  async function handleBulkClick() {
+    const unanalyzed = filtered
+      .filter((s) => !analyzedIds.has(s.sessionId))
+      .map((s) => s.sessionId)
+
+    if (unanalyzed.length === 0) return
+
+    setBulkSessionIds(unanalyzed)
+    setBulkEstimate(null)
+    setConfirmOpen(true)
+
+    try {
+      const res = await fetch('/api/analyze/estimate', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionIds: unanalyzed }),
+      })
+      const data = await res.json()
+      setBulkEstimate({
+        sessionCount: unanalyzed.length,
+        messageCount: data.messageCount,
+        estimatedCostUSD: data.estimatedCostUSD,
+      })
+    } catch {
+      setConfirmOpen(false)
+    }
+  }
+
+  async function handleBulkConfirm() {
+    setConfirmOpen(false)
+    setBulkAnalyzing(true)
+
+    for (const sessionId of bulkSessionIds) {
+      setAnalyzingIds((prev) => new Set(prev).add(sessionId))
+      try {
+        const res = await fetch('/api/analyze', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ sessionId }),
+        })
+        if (res.ok) {
+          setAnalyzedIds((prev) => new Set(prev).add(sessionId))
+        }
+      } catch {
+        // continue with next
+      } finally {
+        setAnalyzingIds((prev) => {
+          const next = new Set(prev)
+          next.delete(sessionId)
+          return next
+        })
+      }
+    }
+
+    setBulkAnalyzing(false)
+  }
 
   const projects = [...new Set(sessions.map((s) => s.project))].sort()
   const filtered =
@@ -42,19 +155,33 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
             <CardTitle>Sessions</CardTitle>
             <CardDescription>{filtered.length} sessions recorded</CardDescription>
           </div>
-          <Select value={projectFilter} onValueChange={(v) => setProjectFilter(v ?? 'all')}>
-            <SelectTrigger className="w-[200px]">
-              <SelectValue placeholder="Filter by project" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">All projects</SelectItem>
-              {projects.map((p) => (
-                <SelectItem key={p} value={p}>
-                  {p}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <div className="flex items-center gap-2">
+            {hasApiKey && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleBulkClick}
+                disabled={bulkAnalyzing || filtered.every((s) => analyzedIds.has(s.sessionId))}
+              >
+                {bulkAnalyzing && <Loader2 className="mr-1 h-3 w-3 animate-spin" />}
+                <Sparkles className="mr-1 h-3 w-3" />
+                Analyze All
+              </Button>
+            )}
+            <Select value={projectFilter} onValueChange={(v) => setProjectFilter(v ?? 'all')}>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="Filter by project" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">All projects</SelectItem>
+                {projects.map((p) => (
+                  <SelectItem key={p} value={p}>
+                    {p}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
         </div>
       </CardHeader>
       <CardContent>
@@ -69,6 +196,7 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
               <TableHead className="text-right">Cost</TableHead>
               <TableHead className="text-right">Duration</TableHead>
               <TableHead className="text-right">Tools</TableHead>
+              <TableHead className="text-center">AI</TableHead>
               <TableHead className="w-[60px]"></TableHead>
             </TableRow>
           </TableHeader>
@@ -89,6 +217,25 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
                 <TableCell className="text-right">{formatCost(s.costUSD)}</TableCell>
                 <TableCell className="text-right">{formatDuration(s.durationMinutes)}</TableCell>
                 <TableCell className="text-right">{formatNumber(s.toolCallsTotal)}</TableCell>
+                <TableCell className="text-center">
+                  {analyzedIds.has(s.sessionId) ? (
+                    <Badge variant="outline" className="text-[10px] text-green-600 border-green-600">
+                      Done
+                    </Badge>
+                  ) : analyzingIds.has(s.sessionId) ? (
+                    <Loader2 className="h-3 w-3 animate-spin mx-auto text-muted-foreground" />
+                  ) : hasApiKey ? (
+                    <button
+                      onClick={() => handleAnalyzeOne(s.sessionId)}
+                      className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors"
+                      title="Analyze with AI"
+                    >
+                      <Sparkles className="h-3 w-3" />
+                    </button>
+                  ) : (
+                    <span className="text-xs text-muted-foreground">—</span>
+                  )}
+                </TableCell>
                 <TableCell>
                   <Link href={`/sessions/${s.sessionId}`} className="inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground transition-colors">
                     <Eye className="h-4 w-4" />
@@ -99,6 +246,13 @@ export function SessionsTable({ sessions }: { sessions: SessionSummary[] }) {
           </TableBody>
         </Table>
         <PaginationControls pagination={pagination} noun="sessions" />
+        <AnalyzeConfirmDialog
+          open={confirmOpen}
+          onOpenChange={setConfirmOpen}
+          onConfirm={handleBulkConfirm}
+          loading={bulkAnalyzing}
+          estimate={bulkEstimate}
+        />
       </CardContent>
     </Card>
   )

package/components/version-lag-chart.tsx

@@ -0,0 +1,284 @@
+'use client'
+
+import { useMemo, useState, useEffect } from 'react'
+import {
+  Bar,
+  Line,
+  ComposedChart,
+  CartesianGrid,
+  XAxis,
+  YAxis,
+} from 'recharts'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  ChartContainer,
+  ChartTooltip,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import type { SessionSummary } from '@/lib/parse-logs'
+
+const chartConfig = {
+  releases: { label: 'New Releases', color: 'var(--chart-2)' },
+  behind: { label: 'Versions Behind', color: 'var(--chart-5)' },
+} satisfies ChartConfig
+
+function semverToNum(v: string): number {
+  const parts = v.split('.').map(Number)
+  return (parts[0] || 0) * 1_000_000 + (parts[1] || 0) * 1_000 + (parts[2] || 0)
+}
+
+// Only match stable semver (no prerelease/beta suffixes)
+function isStableVersion(v: string): boolean {
+  return /^\d+\.\d+\.\d+$/.test(v)
+}
+
+export function VersionLagChart({ sessions }: { sessions: SessionSummary[] }) {
+  const [npmVersions, setNpmVersions] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    fetch('/api/cc-versions')
+      .then((r) => r.json())
+      .then((data) => setNpmVersions(data))
+      .catch(() => {})
+  }, [])
+
+  const { data, currentLag, currentUserVersion, currentLatestVersion, totalReleases } = useMemo(() => {
+    const empty = { data: [], currentLag: 0, currentUserVersion: '', currentLatestVersion: '', totalReleases: 0 }
+    if (!Object.keys(npmVersions).length || !sessions.length) return empty
+
+    // Filter to stable versions only
+    const stableVersions = Object.entries(npmVersions)
+      .filter(([v]) => isStableVersion(v))
+      .map(([version, date]) => ({
+        version,
+        date: date.slice(0, 10),
+        num: semverToNum(version),
+      }))
+      .sort((a, b) => a.num - b.num)
+
+    // Determine session date range first
+    const sessionDates = sessions
+      .filter(s => s.cliVersion && s.cliVersion !== 'unknown')
+      .map(s => s.startTime.slice(0, 10))
+      .sort()
+    const rangeStart = sessionDates[0] || ''
+    const rangeEnd = sessionDates[sessionDates.length - 1] || ''
+
+    // Count releases and build per-day map within the session date range
+    let total = 0
+    const releasesPerDay = new Map<string, number>()
+    for (const v of stableVersions) {
+      if (v.date >= rangeStart && v.date <= rangeEnd) {
+        total++
+        releasesPerDay.set(v.date, (releasesPerDay.get(v.date) || 0) + 1)
+      }
+    }
+
+    // Count how many stable versions are newer than userVersion as of date
+    function countBehind(userVersion: string, date: string): number {
+      const userNum = semverToNum(userVersion)
+      let count = 0
+      for (const v of stableVersions) {
+        if (v.date <= date && v.num > userNum) count++
+      }
+      return count
+    }
+
+    function latestAtDate(date: string): string {
+      let best = ''
+      let bestNum = 0
+      for (const v of stableVersions) {
+        if (v.date <= date && v.num > bestNum) {
+          best = v.version
+          bestNum = v.num
+        }
+      }
+      return best
+    }
+
+    // Group sessions by date
+    const byDate = new Map<string, string[]>()
+    for (const s of sessions) {
+      if (!s.cliVersion || s.cliVersion === 'unknown') continue
+      const date = s.startTime.slice(0, 10)
+      if (!byDate.has(date)) byDate.set(date, [])
+      byDate.get(date)!.push(s.cliVersion)
+    }
+
+    if (byDate.size === 0) return empty
+
+    // Build date range: from first session date to last
+    const sortedDates = Array.from(byDate.keys()).sort()
+    const startDate = new Date(sortedDates[0])
+    const endDate = new Date(sortedDates[sortedDates.length - 1])
+
+    // Fill every day in the range
+    const points: {
+      date: string
+      releases: number
+      behind: number
+      userVersion: string
+      latestVersion: string
+    }[] = []
+
+    let lastUserVersion = ''
+    const d = new Date(startDate)
+    while (d <= endDate) {
+      const dateStr = d.toLocaleDateString('en-CA') // YYYY-MM-DD
+      const dayVersions = byDate.get(dateStr)
+
+      if (dayVersions) {
+        // Pick most common version that day
+        const counts = new Map<string, number>()
+        for (const v of dayVersions) {
+          counts.set(v, (counts.get(v) || 0) + 1)
+        }
+        lastUserVersion = Array.from(counts.entries()).sort((a, b) => b[1] - a[1])[0][0]
+      }
+
+      if (lastUserVersion) {
+        const latest = latestAtDate(dateStr)
+        const behind = countBehind(lastUserVersion, dateStr)
+
+        points.push({
+          date: dateStr.slice(5),
+          releases: releasesPerDay.get(dateStr) || 0,
+          behind,
+          userVersion: lastUserVersion,
+          latestVersion: latest,
+        })
+      }
+
+      d.setDate(d.getDate() + 1)
+    }
+
+    const last = points[points.length - 1]
+    return {
+      data: points,
+      currentLag: last?.behind ?? 0,
+      currentUserVersion: last?.userVersion ?? '',
+      currentLatestVersion: last?.latestVersion ?? '',
+      totalReleases: total,
+    }
+  }, [sessions, npmVersions])
+
+  if (data.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Version Freshness</CardTitle>
+          <CardDescription>Your Claude Code version vs latest release over time</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex min-h-[250px] items-center justify-center text-sm text-muted-foreground">
+            No version data available. Re-sync to capture CLI versions.
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Version Freshness</CardTitle>
+        <CardDescription className="flex flex-wrap items-center gap-x-4 gap-y-1">
+          {currentLag === 0 ? (
+            <span className="text-green-600 dark:text-green-400">
+              Up to date (v{currentUserVersion})
+            </span>
+          ) : (
+            <span>
+              v{currentUserVersion} —{' '}
+              <strong className="text-amber-600 dark:text-amber-400">
+                {currentLag} release{currentLag !== 1 ? 's' : ''} behind
+              </strong>{' '}
+              (latest: v{currentLatestVersion})
+            </span>
+          )}
+          <span className="text-xs text-muted-foreground">
+            {totalReleases} stable releases
+          </span>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={chartConfig} className="min-h-[250px] w-full">
+          <ComposedChart data={data} accessibilityLayer>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis
+              yAxisId="left"
+              tickLine={false}
+              axisLine={false}
+              allowDecimals={false}
+            />
+            <ChartTooltip
+              content={({ active, payload }) => {
+                if (!active || !payload?.length) return null
+                const d = payload[0].payload
+                return (
+                  <div className="rounded-lg border bg-background px-3 py-2 text-sm shadow-md">
+                    <div className="font-semibold">{d.date}</div>
+                    <div className="mt-1 space-y-0.5 text-muted-foreground">
+                      <div className="flex justify-between gap-4">
+                        <span className="flex items-center gap-1.5">
+                          <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: 'var(--chart-2)' }} />
+                          New releases
+                        </span>
+                        <span className="font-mono font-medium text-foreground">{d.releases}</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>Your version</span>
+                        <span className="font-mono font-medium text-foreground">v{d.userVersion}</span>
+                      </div>
+                      <div className="flex justify-between gap-4">
+                        <span>Latest</span>
+                        <span className="font-mono font-medium text-foreground">v{d.latestVersion}</span>
+                      </div>
+                      <div className="flex justify-between gap-4 border-t pt-0.5">
+                        <span className="flex items-center gap-1.5">
+                          <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ backgroundColor: 'var(--chart-5)' }} />
+                          Behind
+                        </span>
+                        <span className={`font-mono font-semibold ${d.behind === 0 ? 'text-green-600' : d.behind <= 3 ? 'text-amber-500' : 'text-red-500'}`}>
+                          {d.behind === 0 ? 'up to date' : `${d.behind} release${d.behind !== 1 ? 's' : ''}`}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            />
+            <Bar
+              yAxisId="left"
+              dataKey="releases"
+              fill="var(--color-releases)"
+              fillOpacity={0.3}
+              radius={[2, 2, 0, 0]}
+            />
+            <Line
+              yAxisId="left"
+              dataKey="behind"
+              type="monotone"
+              stroke="var(--color-behind)"
+              strokeWidth={2}
+              dot={false}
+              activeDot={{ r: 4, fill: 'var(--color-behind)' }}
+            />
+          </ComposedChart>
+        </ChartContainer>
+        {/* Legend */}
+        <div className="mt-2 flex items-center justify-end gap-4 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <span className="inline-block h-2.5 w-2.5 rounded-sm opacity-40" style={{ backgroundColor: 'var(--chart-2)' }} />
+            Daily releases
+          </span>
+          <span className="flex items-center gap-1.5">
+            <span className="inline-block h-0.5 w-4 rounded" style={{ backgroundColor: 'var(--chart-5)' }} />
+            Versions behind
+          </span>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}