agentfit 0.1.0

package/components/data-provider.tsx

@@ -0,0 +1,213 @@
+'use client'
+
+import { createContext, useContext, useEffect, useState, useCallback, useMemo, type ReactNode } from 'react'
+import type { UsageData, SessionSummary, DailyUsage, ProjectSummary, OverviewStats } from '@/lib/parse-logs'
+
+export type AgentType = 'claude' | 'codex' | 'combined'
+export type TimeRange = '7d' | '30d' | '90d' | 'all'
+
+interface SyncResult {
+  sessionsAdded: number
+  sessionsSkipped: number
+  filesProcessed: number
+  imagesExtracted: number
+  errors: number
+}
+
+interface DataContextValue {
+  data: UsageData | null
+  loading: boolean
+  error: string | null
+  agent: AgentType
+  setAgent: (agent: AgentType) => void
+  timeRange: TimeRange
+  setTimeRange: (range: TimeRange) => void
+  syncing: boolean
+  lastSyncResult: SyncResult | null
+  lastSyncTime: Date | null
+  handleSync: () => Promise<void>
+  newSessionsAvailable: number
+}
+
+const DataContext = createContext<DataContextValue | null>(null)
+
+export function useData() {
+  const ctx = useContext(DataContext)
+  if (!ctx) throw new Error('useData must be used within DataProvider')
+  return ctx
+}
+
+const RANGE_DAYS: Record<TimeRange, number> = {
+  '7d': 7,
+  '30d': 30,
+  '90d': 90,
+  'all': Infinity,
+}
+
+function filterByTimeRange(raw: UsageData | null, range: TimeRange): UsageData | null {
+  if (!raw || range === 'all') return raw
+
+  const days = RANGE_DAYS[range]
+  const cutoff = new Date()
+  cutoff.setDate(cutoff.getDate() - days)
+  const cutoffISO = cutoff.toISOString()
+
+  // Filter sessions
+  const sessions = raw.sessions.filter(s => s.startTime >= cutoffISO)
+
+  // Re-aggregate from filtered sessions
+  const projectMap = new Map<string, ProjectSummary>()
+  const dailyMap = new Map<string, DailyUsage>()
+  const toolUsage: Record<string, number> = {}
+  const models: Record<string, number> = {}
+
+  for (const s of sessions) {
+    // Projects
+    if (!projectMap.has(s.project)) {
+      projectMap.set(s.project, {
+        name: s.project,
+        path: s.projectPath,
+        sessions: 0,
+        totalMessages: 0,
+        totalTokens: 0,
+        totalCost: 0,
+        totalDurationMinutes: 0,
+        toolCalls: {},
+      })
+    }
+    const proj = projectMap.get(s.project)!
+    proj.sessions++
+    proj.totalMessages += s.totalMessages
+    proj.totalTokens += s.totalTokens
+    proj.totalCost += s.costUSD
+    proj.totalDurationMinutes += s.durationMinutes
+    for (const [tool, count] of Object.entries(s.toolCalls)) {
+      proj.toolCalls[tool] = (proj.toolCalls[tool] || 0) + count
+    }
+
+    // Daily
+    const date = s.startTime.slice(0, 10)
+    if (!dailyMap.has(date)) {
+      dailyMap.set(date, {
+        date, sessions: 0, messages: 0,
+        inputTokens: 0, outputTokens: 0,
+        cacheCreationTokens: 0, cacheReadTokens: 0,
+        totalTokens: 0, costUSD: 0, toolCalls: 0,
+      })
+    }
+    const day = dailyMap.get(date)!
+    day.sessions++
+    day.messages += s.totalMessages
+    day.inputTokens += s.inputTokens
+    day.outputTokens += s.outputTokens
+    day.cacheCreationTokens += s.cacheCreationTokens
+    day.cacheReadTokens += s.cacheReadTokens
+    day.totalTokens += s.totalTokens
+    day.costUSD += s.costUSD
+    day.toolCalls += s.toolCallsTotal
+
+    // Tools
+    for (const [tool, count] of Object.entries(s.toolCalls)) {
+      toolUsage[tool] = (toolUsage[tool] || 0) + count
+    }
+
+    // Models
+    models[s.model] = (models[s.model] || 0) + 1
+  }
+
+  const projects = Array.from(projectMap.values()).sort((a, b) => b.totalCost - a.totalCost)
+  const daily = Array.from(dailyMap.values()).sort((a, b) => a.date.localeCompare(b.date))
+
+  const overview: OverviewStats = {
+    totalSessions: sessions.length,
+    totalProjects: projects.length,
+    totalMessages: sessions.reduce((a, s) => a + s.totalMessages, 0),
+    totalUserMessages: sessions.reduce((a, s) => a + s.userMessages, 0),
+    totalAssistantMessages: sessions.reduce((a, s) => a + s.assistantMessages, 0),
+    totalInputTokens: sessions.reduce((a, s) => a + s.inputTokens, 0),
+    totalOutputTokens: sessions.reduce((a, s) => a + s.outputTokens, 0),
+    totalCacheCreationTokens: sessions.reduce((a, s) => a + s.cacheCreationTokens, 0),
+    totalCacheReadTokens: sessions.reduce((a, s) => a + s.cacheReadTokens, 0),
+    totalTokens: sessions.reduce((a, s) => a + s.totalTokens, 0),
+    totalCostUSD: sessions.reduce((a, s) => a + s.costUSD, 0),
+    totalDurationMinutes: sessions.reduce((a, s) => a + s.durationMinutes, 0),
+    totalToolCalls: sessions.reduce((a, s) => a + s.toolCallsTotal, 0),
+    models,
+  }
+
+  return { overview, sessions, projects, daily, toolUsage }
+}
+
+export function DataProvider({ children }: { children: ReactNode }) {
+  const [rawData, setRawData] = useState<UsageData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [agent, setAgentState] = useState<AgentType>('claude')
+  const [timeRange, setTimeRange] = useState<TimeRange>('all')
+  const [syncing, setSyncing] = useState(false)
+  const [lastSyncResult, setLastSyncResult] = useState<SyncResult | null>(null)
+  const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null)
+  const [newSessionsAvailable, setNewSessionsAvailable] = useState(0)
+
+  const data = useMemo(() => filterByTimeRange(rawData, timeRange), [rawData, timeRange])
+
+  const fetchData = useCallback(async (selectedAgent: AgentType) => {
+    try {
+      const res = await fetch(`/api/usage?agent=${selectedAgent}`)
+      const d = await res.json()
+      setRawData(d)
+      setError(null)
+    } catch (e) {
+      setError((e as Error).message)
+    }
+  }, [])
+
+  const handleSync = useCallback(async () => {
+    setSyncing(true)
+    try {
+      if (agent !== 'codex') {
+        const res = await fetch('/api/sync', { method: 'POST' })
+        const result: SyncResult = await res.json()
+        setLastSyncResult(result)
+        setLastSyncTime(new Date())
+      } else {
+        setLastSyncTime(new Date())
+        setLastSyncResult(null)
+      }
+      await fetchData(agent)
+      setNewSessionsAvailable(0)
+    } catch (e) {
+      setError((e as Error).message)
+    } finally {
+      setSyncing(false)
+    }
+  }, [fetchData, agent])
+
+
+
+  const setAgent = useCallback((newAgent: AgentType) => {
+    setAgentState(newAgent)
+    fetchData(newAgent)
+  }, [fetchData])
+
+  useEffect(() => {
+    async function init() {
+      setLoading(true)
+      await handleSync()
+      setLoading(false)
+    }
+    init()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return (
+    <DataContext.Provider value={{
+      data, loading, error, agent, setAgent,
+      timeRange, setTimeRange,
+      syncing, lastSyncResult, lastSyncTime, handleSync,
+      newSessionsAvailable,
+    }}>
+      {children}
+    </DataContext.Provider>
+  )
+}

package/components/fitness-score.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import { useMemo } from 'react'
+import Link from 'next/link'
+import { Card, CardContent } from '@/components/ui/card'
+import type { UsageData } from '@/lib/parse-logs'
+import { generateCoachInsights } from '@/lib/coach'
+import { ArrowRight, Trophy, AlertTriangle, Lightbulb } from 'lucide-react'
+
+function ScoreRing({ score, size = 120 }: { score: number; size?: number }) {
+  const radius = (size - 16) / 2
+  const circumference = 2 * Math.PI * radius
+
+  const getColor = (s: number) => {
+    if (s >= 85) return 'var(--chart-2)'
+    if (s >= 70) return 'var(--chart-1)'
+    if (s >= 55) return 'var(--chart-3)'
+    return 'var(--chart-5)'
+  }
+
+  return (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <circle
+        cx={size / 2} cy={size / 2} r={radius}
+        fill="none"
+        stroke="var(--muted)"
+        strokeWidth="8"
+      />
+      <circle
+        cx={size / 2} cy={size / 2} r={radius}
+        fill="none"
+        stroke={getColor(score)}
+        strokeWidth="8"
+        strokeLinecap="round"
+        strokeDasharray={circumference}
+        strokeDashoffset={circumference - (score / 100) * circumference}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        className="transition-all duration-1000"
+      />
+      <text x={size / 2} y={size / 2 - 4} textAnchor="middle" dominantBaseline="middle" className="fill-foreground text-2xl font-bold" style={{ fontSize: size * 0.22 }}>
+        {score}
+      </text>
+      <text x={size / 2} y={size / 2 + 16} textAnchor="middle" className="fill-muted-foreground" style={{ fontSize: size * 0.09 }}>
+        / 100
+      </text>
+    </svg>
+  )
+}
+
+export function FitnessScore({ data }: { data: UsageData }) {
+  const coach = useMemo(() => generateCoachInsights(data), [data])
+
+  const achievements = coach.insights.filter(i => i.severity === 'achievement').length
+  const warnings = coach.insights.filter(i => i.severity === 'warning').length
+  const tips = coach.insights.filter(i => i.severity === 'tip').length
+
+  return (
+    <Card>
+      <CardContent className="flex items-center gap-6 pt-6">
+        <ScoreRing score={coach.score} />
+        <div className="flex-1 space-y-3">
+          <div>
+            <div className="text-lg font-semibold">Fitness Score: {coach.scoreLabel}</div>
+            <p className="text-sm text-muted-foreground">
+              Based on cost efficiency, tool habits, streaks, and context management
+            </p>
+          </div>
+          <div className="flex items-center gap-4 text-sm">
+            {achievements > 0 && (
+              <span className="flex items-center gap-1 text-chart-2">
+                <Trophy className="h-3.5 w-3.5" /> {achievements} achievement{achievements !== 1 && 's'}
+              </span>
+            )}
+            {warnings > 0 && (
+              <span className="flex items-center gap-1 text-chart-5">
+                <AlertTriangle className="h-3.5 w-3.5" /> {warnings} warning{warnings !== 1 && 's'}
+              </span>
+            )}
+            {tips > 0 && (
+              <span className="flex items-center gap-1 text-chart-1">
+                <Lightbulb className="h-3.5 w-3.5" /> {tips} tip{tips !== 1 && 's'}
+              </span>
+            )}
+          </div>
+          <Link
+            href="/coach"
+            className="inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline"
+          >
+            View coaching insights <ArrowRight className="h-3.5 w-3.5" />
+          </Link>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/overview-cards.tsx

@@ -0,0 +1,198 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import type { OverviewStats, SessionSummary } from '@/lib/parse-logs'
+import { formatCost, formatTokens, formatDuration, formatNumber } from '@/lib/format'
+import {
+  DollarSign,
+  Coins,
+  LayoutList,
+  FolderOpen,
+  MessageSquare,
+  Wrench,
+  Clock,
+  Cpu,
+  Sun,
+  CalendarClock,
+  HelpCircle,
+} from 'lucide-react'
+
+function computePeakHour(sessions: SessionSummary[]): string {
+  if (sessions.length === 0) return 'N/A'
+  const hourCounts = new Array(24).fill(0)
+  for (const s of sessions) {
+    if (s.startTime) hourCounts[new Date(s.startTime).getHours()]++
+  }
+  const peak = hourCounts.indexOf(Math.max(...hourCounts))
+  const end = (peak + 1) % 24
+  const fmt = (h: number) => `${h % 12 || 12}${h < 12 ? 'am' : 'pm'}`
+  return `${fmt(peak)}–${fmt(end)}`
+}
+
+function computeAvgDailyTime(sessions: SessionSummary[]): number {
+  if (sessions.length === 0) return 0
+  // Merge overlapping sessions per day to avoid double-counting
+  const dayIntervals = new Map<string, [number, number][]>()
+  for (const s of sessions) {
+    if (!s.startTime || !s.endTime) continue
+    const date = s.startTime.slice(0, 10)
+    const start = new Date(s.startTime).getTime()
+    const end = new Date(s.endTime).getTime()
+    if (end <= start) continue
+    if (!dayIntervals.has(date)) dayIntervals.set(date, [])
+    dayIntervals.get(date)!.push([start, end])
+  }
+
+  let totalMinutes = 0
+  for (const intervals of dayIntervals.values()) {
+    intervals.sort((a, b) => a[0] - b[0])
+    const merged: [number, number][] = [intervals[0]]
+    for (let i = 1; i < intervals.length; i++) {
+      const last = merged[merged.length - 1]
+      if (intervals[i][0] <= last[1]) {
+        last[1] = Math.max(last[1], intervals[i][1])
+      } else {
+        merged.push(intervals[i])
+      }
+    }
+    for (const [start, end] of merged) {
+      totalMinutes += (end - start) / 60000
+    }
+  }
+
+  return dayIntervals.size > 0 ? totalMinutes / dayIntervals.size : 0
+}
+
+interface MetricDef {
+  title: string
+  value: string
+  icon: React.ComponentType<{ className?: string }>
+  explanation: string
+}
+
+export function OverviewCards({ overview, sessions }: { overview: OverviewStats; sessions: SessionSummary[] }) {
+  const peakHour = useMemo(() => computePeakHour(sessions), [sessions])
+  const avgDailyTime = useMemo(() => computeAvgDailyTime(sessions), [sessions])
+
+  const cards: MetricDef[] = [
+    {
+      title: 'Total Cost',
+      value: formatCost(overview.totalCostUSD),
+      icon: DollarSign,
+      explanation: 'Estimated total USD cost across all sessions. Calculated by multiplying each session\'s token counts (input, output, cache write, cache read) by the model\'s per-token pricing from LiteLLM. Does not include subscription fees — only API token costs.',
+    },
+    {
+      title: 'Total Tokens',
+      value: formatTokens(overview.totalTokens),
+      icon: Coins,
+      explanation: 'Sum of all tokens across every session: input tokens + output tokens + cache creation tokens + cache read tokens. This is the raw volume of data processed by the model.',
+    },
+    {
+      title: 'Sessions',
+      value: formatNumber(overview.totalSessions),
+      icon: LayoutList,
+      explanation: 'Number of distinct conversation sessions (each JSONL file = one session). A session starts when you launch Claude Code and ends when you close it or it times out.',
+    },
+    {
+      title: 'Projects',
+      value: formatNumber(overview.totalProjects),
+      icon: FolderOpen,
+      explanation: 'Number of unique project directories you\'ve used Claude Code in. Derived from the folder name in ~/.claude/projects/.',
+    },
+    {
+      title: 'Messages',
+      value: formatNumber(overview.totalMessages),
+      icon: MessageSquare,
+      explanation: 'Total number of user + assistant messages across all sessions. Each back-and-forth exchange counts as two messages (one user, one assistant).',
+    },
+    {
+      title: 'Tool Calls',
+      value: formatNumber(overview.totalToolCalls),
+      icon: Wrench,
+      explanation: 'Total number of tool invocations by the assistant (Read, Edit, Bash, Grep, Write, Agent, etc.). Each tool_use content block in an assistant message counts as one call.',
+    },
+    {
+      title: 'Avg Daily Time',
+      value: formatDuration(avgDailyTime),
+      icon: CalendarClock,
+      explanation: 'Average active time per day. Calculated by summing session durations for each day (merging overlapping sessions to avoid double-counting), then dividing by the number of active days. Session duration = time from first message to last message.',
+    },
+    {
+      title: 'Peak Hour',
+      value: peakHour,
+      icon: Sun,
+      explanation: 'The hour of day when you start the most sessions. Based on the start timestamp of each session, grouped by hour in your local timezone.',
+    },
+    {
+      title: 'Total Time',
+      value: formatDuration(overview.totalDurationMinutes),
+      icon: Clock,
+      explanation: 'Sum of all session durations (wall-clock time from first to last message in each session). Note: overlapping sessions are counted separately, so this may exceed calendar time.',
+    },
+    {
+      title: 'Top Model',
+      value: Object.entries(overview.models).sort((a, b) => b[1] - a[1])[0]?.[0] || 'N/A',
+      icon: Cpu,
+      explanation: 'The Claude model used in the most sessions. Determined by the model field in assistant responses. If a session uses multiple models, the last one seen is recorded.',
+    },
+  ]
+
+  return (
+    <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+      {cards.map((card) => (
+        <MetricCard key={card.title} metric={card} />
+      ))}
+    </div>
+  )
+}
+
+function MetricCard({ metric }: { metric: MetricDef }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <Card className="group relative">
+      <CardHeader className="flex flex-row items-center justify-between pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">
+          {metric.title}
+        </CardTitle>
+        <div className="flex items-center gap-1">
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger
+              render={<button />}
+              className="opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
+            >
+              <HelpCircle className="h-3.5 w-3.5" />
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle className="flex items-center gap-2">
+                  <metric.icon className="h-5 w-5" />
+                  {metric.title}
+                </DialogTitle>
+                <DialogDescription className="text-sm leading-relaxed pt-2">
+                  {metric.explanation}
+                </DialogDescription>
+              </DialogHeader>
+              <div className="rounded-lg bg-muted p-4 text-center">
+                <div className="text-3xl font-bold">{metric.value}</div>
+              </div>
+            </DialogContent>
+          </Dialog>
+          <metric.icon className="h-4 w-4 text-muted-foreground" />
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold tracking-tight">{metric.value}</div>
+      </CardContent>
+    </Card>
+  )
+}

package/components/pagination-controls.tsx

@@ -0,0 +1,104 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import type { PaginationState } from '@/hooks/use-pagination'
+
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100]
+
+export function PaginationControls<T>({
+  pagination,
+  showPageSize = true,
+  noun = 'items',
+}: {
+  pagination: PaginationState<T>
+  showPageSize?: boolean
+  noun?: string
+}) {
+  const { page, totalPages, totalItems, canPrevious, canNext, previous, next, setPage, setPageSize, pageSize, startIndex, endIndex } = pagination
+
+  if (totalItems === 0) return null
+
+  // Build page numbers to show
+  const pages: (number | 'ellipsis')[] = []
+  if (totalPages <= 7) {
+    for (let i = 1; i <= totalPages; i++) pages.push(i)
+  } else {
+    pages.push(1)
+    if (page > 3) pages.push('ellipsis')
+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
+      pages.push(i)
+    }
+    if (page < totalPages - 2) pages.push('ellipsis')
+    pages.push(totalPages)
+  }
+
+  return (
+    <div className="flex items-center justify-between pt-4">
+      <div className="text-xs text-muted-foreground">
+        {startIndex}–{endIndex} of {totalItems} {noun}
+      </div>
+      <div className="flex items-center gap-1.5">
+        {showPageSize && (
+          <Select
+            value={String(pageSize)}
+            onValueChange={(v) => v && setPageSize(Number(v))}
+          >
+            <SelectTrigger className="h-8 w-[70px] text-xs">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {PAGE_SIZE_OPTIONS.map((size) => (
+                <SelectItem key={size} value={String(size)}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={previous}
+          disabled={!canPrevious}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+        {pages.map((p, i) =>
+          p === 'ellipsis' ? (
+            <span key={`e${i}`} className="px-1 text-xs text-muted-foreground">
+              ...
+            </span>
+          ) : (
+            <Button
+              key={p}
+              variant={p === page ? 'default' : 'outline'}
+              size="icon"
+              className="h-8 w-8 text-xs"
+              onClick={() => setPage(p)}
+            >
+              {p}
+            </Button>
+          )
+        )}
+        <Button
+          variant="outline"
+          size="icon"
+          className="h-8 w-8"
+          onClick={next}
+          disabled={!canNext}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  )
+}