agentfit 0.1.0

package/lib/sync.ts

@@ -0,0 +1,335 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+import { prisma } from './db'
+import { loadPricing, calculateCost, type ModelPricing } from './pricing'
+
+const PROJECTS_DIR = path.join(os.homedir(), '.claude', 'projects')
+const IMAGES_DIR = path.resolve(process.cwd(), 'data', 'images')
+
+interface LogEntry {
+  type?: string
+  uuid?: string
+  message?: {
+    role?: string
+    content?: unknown[]
+    model?: string
+    usage?: {
+      input_tokens?: number
+      output_tokens?: number
+      cache_creation_input_tokens?: number
+      cache_read_input_tokens?: number
+    }
+  }
+  timestamp?: string
+}
+
+interface ImageInfo {
+  messageId: string
+  filename: string
+  mediaType: string
+  sizeBytes: number
+  timestamp: string
+  role: string
+}
+
+function decodeProjectPath(dirName: string): string {
+  return dirName.replace(/-/g, '/')
+}
+
+function getProjectName(projectPath: string): string {
+  const parts = projectPath.split('/')
+  return parts[parts.length - 1] || parts[parts.length - 2] || projectPath
+}
+
+function parseSessionFile(
+  filePath: string,
+  sessionId: string,
+  allPricing: Record<string, ModelPricing>
+) {
+  const content = fs.readFileSync(filePath, 'utf-8')
+  const lines = content.trim().split('\n')
+
+  let userMessages = 0
+  let assistantMessages = 0
+  let inputTokens = 0
+  let outputTokens = 0
+  let cacheCreationTokens = 0
+  let cacheReadTokens = 0
+  let costUSD = 0
+  let model = ''
+  let startTime = ''
+  let endTime = ''
+  const toolCalls: Record<string, number> = {}
+  const images: ImageInfo[] = []
+
+  for (const line of lines) {
+    if (!line.trim()) continue
+    let entry: LogEntry
+    try {
+      entry = JSON.parse(line)
+    } catch {
+      continue
+    }
+
+    if (entry.timestamp) {
+      if (!startTime) startTime = entry.timestamp
+      endTime = entry.timestamp
+    }
+
+    const entryType = entry.type
+    const msg = entry.message
+
+    if (entryType === 'user') {
+      userMessages++
+    } else if (entryType === 'assistant' && msg) {
+      assistantMessages++
+
+      if (msg.model && msg.model !== '<synthetic>') {
+        model = msg.model
+      }
+
+      if (msg.usage) {
+        const u = msg.usage
+        inputTokens += u.input_tokens || 0
+        outputTokens += u.output_tokens || 0
+        cacheCreationTokens += u.cache_creation_input_tokens || 0
+        cacheReadTokens += u.cache_read_input_tokens || 0
+        if (model) {
+          costUSD += calculateCost(model, u, allPricing)
+        }
+      }
+    }
+
+    // Extract tool calls and images from content blocks (both user and assistant)
+    if (msg && Array.isArray(msg.content)) {
+      let imageIndex = 0
+      for (const block of msg.content) {
+        if (!block || typeof block !== 'object' || !('type' in block)) continue
+        const b = block as Record<string, unknown>
+
+        if (b.type === 'tool_use') {
+          const toolName = b.name as string
+          if (toolName) {
+            toolCalls[toolName] = (toolCalls[toolName] || 0) + 1
+          }
+        }
+
+        if (b.type === 'image') {
+          const source = b.source as Record<string, unknown> | undefined
+          if (source && source.type === 'base64' && source.data) {
+            const data = source.data as string
+            const mediaType = (source.media_type as string) || 'image/png'
+            const ext = mediaType.split('/')[1] || 'png'
+            const messageId = entry.uuid || `unknown-${Date.now()}`
+            const filename = `${sessionId}/${messageId}_${imageIndex}.${ext}`
+
+            // Write image file
+            const imgPath = path.join(IMAGES_DIR, filename)
+            const imgDir = path.dirname(imgPath)
+            if (!fs.existsSync(imgDir)) {
+              fs.mkdirSync(imgDir, { recursive: true })
+            }
+
+            const buffer = Buffer.from(data, 'base64')
+            fs.writeFileSync(imgPath, buffer)
+
+            images.push({
+              messageId,
+              filename,
+              mediaType,
+              sizeBytes: buffer.length,
+              timestamp: entry.timestamp || startTime,
+              role: msg.role || entryType || 'unknown',
+            })
+            imageIndex++
+          }
+        }
+      }
+    }
+  }
+
+  if (userMessages === 0 && assistantMessages === 0) return null
+
+  const durationMinutes =
+    startTime && endTime
+      ? (new Date(endTime).getTime() - new Date(startTime).getTime()) / 60000
+      : 0
+
+  return {
+    startTime,
+    endTime,
+    durationMinutes: Math.max(0, durationMinutes),
+    userMessages,
+    assistantMessages,
+    totalMessages: userMessages + assistantMessages,
+    inputTokens,
+    outputTokens,
+    cacheCreationTokens,
+    cacheReadTokens,
+    totalTokens: inputTokens + outputTokens + cacheCreationTokens + cacheReadTokens,
+    costUSD,
+    model: model || 'unknown',
+    toolCalls,
+    toolCallsTotal: Object.values(toolCalls).reduce((a, b) => a + b, 0),
+    images,
+  }
+}
+
+export interface SyncResult {
+  filesProcessed: number
+  sessionsAdded: number
+  sessionsSkipped: number
+  imagesExtracted: number
+  errors: number
+}
+
+export async function syncLogs(): Promise<SyncResult> {
+  const allPricing = await loadPricing()
+  const result: SyncResult = {
+    filesProcessed: 0,
+    sessionsAdded: 0,
+    sessionsSkipped: 0,
+    imagesExtracted: 0,
+    errors: 0,
+  }
+
+  if (!fs.existsSync(PROJECTS_DIR)) {
+    return result
+  }
+
+  // Ensure images directory exists
+  if (!fs.existsSync(IMAGES_DIR)) {
+    fs.mkdirSync(IMAGES_DIR, { recursive: true })
+  }
+
+  // Get all existing sessionIds to skip
+  const existing = await prisma.session.findMany({ select: { sessionId: true } })
+  const existingIds = new Set(existing.map((s) => s.sessionId))
+
+  const projectDirs = fs.readdirSync(PROJECTS_DIR).filter((d) => {
+    try {
+      return fs.statSync(path.join(PROJECTS_DIR, d)).isDirectory()
+    } catch {
+      return false
+    }
+  })
+
+  for (const dir of projectDirs) {
+    const projectPath = decodeProjectPath(dir)
+    const projectName = getProjectName(projectPath)
+    const dirPath = path.join(PROJECTS_DIR, dir)
+
+    let jsonlFiles: string[]
+    try {
+      jsonlFiles = fs.readdirSync(dirPath).filter((f) => f.endsWith('.jsonl'))
+    } catch {
+      continue
+    }
+
+    for (const file of jsonlFiles) {
+      result.filesProcessed++
+      const sessionId = path.basename(file, '.jsonl')
+
+      if (existingIds.has(sessionId)) {
+        result.sessionsSkipped++
+        continue
+      }
+
+      try {
+        const parsed = parseSessionFile(path.join(dirPath, file), sessionId, allPricing)
+        if (!parsed) {
+          result.sessionsSkipped++
+          continue
+        }
+
+        await prisma.session.create({
+          data: {
+            sessionId,
+            project: projectName,
+            projectPath,
+            startTime: new Date(parsed.startTime),
+            endTime: new Date(parsed.endTime),
+            durationMinutes: parsed.durationMinutes,
+            userMessages: parsed.userMessages,
+            assistantMessages: parsed.assistantMessages,
+            totalMessages: parsed.totalMessages,
+            inputTokens: parsed.inputTokens,
+            outputTokens: parsed.outputTokens,
+            cacheCreationTokens: parsed.cacheCreationTokens,
+            cacheReadTokens: parsed.cacheReadTokens,
+            totalTokens: parsed.totalTokens,
+            costUSD: parsed.costUSD,
+            model: parsed.model,
+            toolCallsTotal: parsed.toolCallsTotal,
+            toolCallsJson: JSON.stringify(parsed.toolCalls),
+          },
+        })
+
+        // Insert image records
+        for (const img of parsed.images) {
+          await prisma.image.create({
+            data: {
+              sessionId,
+              messageId: img.messageId,
+              filename: img.filename,
+              mediaType: img.mediaType,
+              sizeBytes: img.sizeBytes,
+              timestamp: new Date(img.timestamp),
+              role: img.role,
+            },
+          })
+          result.imagesExtracted++
+        }
+
+        result.sessionsAdded++
+      } catch {
+        result.errors++
+      }
+    }
+  }
+
+  // Log the sync
+  await prisma.syncLog.create({
+    data: {
+      filesProcessed: result.filesProcessed,
+      sessionsAdded: result.sessionsAdded,
+      sessionsSkipped: result.sessionsSkipped,
+    },
+  })
+
+  return result
+}
+
+// Lightweight check: count how many JSONL files exist on disk that aren't in the DB
+export async function checkForNewSessions(): Promise<number> {
+  if (!fs.existsSync(PROJECTS_DIR)) return 0
+
+  const existing = await prisma.session.findMany({ select: { sessionId: true } })
+  const existingIds = new Set(existing.map((s) => s.sessionId))
+
+  let newCount = 0
+  const projectDirs = fs.readdirSync(PROJECTS_DIR).filter((d) => {
+    try {
+      return fs.statSync(path.join(PROJECTS_DIR, d)).isDirectory()
+    } catch {
+      return false
+    }
+  })
+
+  for (const dir of projectDirs) {
+    const dirPath = path.join(PROJECTS_DIR, dir)
+    let jsonlFiles: string[]
+    try {
+      jsonlFiles = fs.readdirSync(dirPath).filter((f) => f.endsWith('.jsonl'))
+    } catch {
+      continue
+    }
+    for (const file of jsonlFiles) {
+      const sessionId = path.basename(file, '.jsonl')
+      if (!existingIds.has(sessionId)) newCount++
+    }
+  }
+
+  return newCount
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+export default nextConfig

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "agentfit",
+  "version": "0.1.0",
+  "description": "Fitness tracker dashboard for AI coding agents (Claude Code, Codex). Visualize usage, cost, tokens, and productivity from local conversation logs.",
+  "type": "module",
+  "bin": {
+    "agentfit": "bin/agentfit.mjs"
+  },
+  "keywords": [
+    "claude-code",
+    "codex",
+    "ai-agent",
+    "dashboard",
+    "analytics",
+    "usage-tracker"
+  ],
+  "author": "Harry Wang",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harrywang/agentfit.git"
+  },
+  "scripts": {
+    "postinstall": "prisma generate",
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint",
+    "format": "prettier --write \"**/*.{ts,tsx}\"",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@libsql/client": "^0.17.2",
+    "@prisma/adapter-libsql": "^7.6.0",
+    "@prisma/client": "^7.6.0",
+    "@tabler/icons-react": "^3.41.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^1.7.0",
+    "next": "16.1.7",
+    "next-themes": "^0.4.6",
+    "prisma": "^7.6.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "recharts": "^3.8.0",
+    "shadcn": "^4.1.1",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^25.5.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "eslint": "^9.39.4",
+    "eslint-config-next": "16.1.7",
+    "jsdom": "^29.0.1",
+    "postcss": "^8",
+    "prettier": "^3.8.1",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2"
+  }
+}

package/plugins/cost-heatmap/component.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { screen } from '@testing-library/react'
+import { renderPlugin } from '@/tests/plugin-helpers'
+import { validateManifest } from '@/lib/plugins'
+import CostHeatmap from './component'
+import manifest from './manifest'
+
+describe('cost-heatmap plugin', () => {
+  describe('manifest', () => {
+    it('passes validation', () => {
+      const errors = validateManifest(manifest)
+      expect(errors).toEqual([])
+    })
+
+    it('has required fields', () => {
+      expect(manifest.slug).toBe('cost-heatmap')
+      expect(manifest.name).toBe('Cost Heatmap')
+      expect(manifest.version).toMatch(/^\d+\.\d+\.\d+/)
+    })
+  })
+
+  describe('component', () => {
+    it('renders without crashing', () => {
+      const { container } = renderPlugin(CostHeatmap)
+      expect(container).toBeTruthy()
+    })
+
+    it('displays stats cards', () => {
+      renderPlugin(CostHeatmap)
+      expect(screen.getByText('Total Spend')).toBeInTheDocument()
+      expect(screen.getByText('Active Days')).toBeInTheDocument()
+      expect(screen.getByText('Peak Day')).toBeInTheDocument()
+      expect(screen.getByText('Peak Cost')).toBeInTheDocument()
+    })
+
+    it('displays the heatmap card', () => {
+      renderPlugin(CostHeatmap)
+      expect(screen.getByText('Daily Cost Heatmap')).toBeInTheDocument()
+    })
+
+    it('shows empty state when no data', () => {
+      renderPlugin(CostHeatmap, { daily: [] })
+      expect(screen.getByText('No data available yet.')).toBeInTheDocument()
+    })
+
+    it('renders legend', () => {
+      renderPlugin(CostHeatmap)
+      expect(screen.getByText('Less')).toBeInTheDocument()
+      expect(screen.getByText('More')).toBeInTheDocument()
+    })
+  })
+})

package/plugins/cost-heatmap/component.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import { useMemo } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { formatCost } from '@/lib/format'
+import type { PluginProps } from '@/lib/plugins'
+
+// ─── Helpers ────────────────────────────────────────────────────────
+
+function getWeekday(dateStr: string): number {
+  return new Date(dateStr + 'T00:00:00').getDay()
+}
+
+function getMonthLabel(dateStr: string): string {
+  return new Date(dateStr + 'T00:00:00').toLocaleString('en-US', { month: 'short' })
+}
+
+function intensityClass(ratio: number): string {
+  if (ratio === 0) return 'bg-muted'
+  if (ratio < 0.25) return 'bg-chart-3/30'
+  if (ratio < 0.5) return 'bg-chart-3/50'
+  if (ratio < 0.75) return 'bg-chart-3/70'
+  return 'bg-chart-3'
+}
+
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+
+// ─── Component ──────────────────────────────────────────────────────
+
+export default function CostHeatmap({ data }: PluginProps) {
+  const { grid, maxCost, weeks, monthLabels, stats } = useMemo(() => {
+    const dailyMap = new Map(data.daily.map((d) => [d.date, d.costUSD]))
+    const dates = data.daily.map((d) => d.date).sort()
+
+    if (dates.length === 0) {
+      return { grid: [], maxCost: 0, weeks: 0, monthLabels: [], stats: null }
+    }
+
+    const first = dates[0]
+    const last = dates[dates.length - 1]
+
+    // Build a continuous date range
+    const allDates: string[] = []
+    const cur = new Date(first + 'T00:00:00')
+    const end = new Date(last + 'T00:00:00')
+    while (cur <= end) {
+      allDates.push(cur.toISOString().slice(0, 10))
+      cur.setDate(cur.getDate() + 1)
+    }
+
+    // Pad the start to align to Sunday
+    const startPad = getWeekday(allDates[0])
+    const padded = [
+      ...Array.from({ length: startPad }, () => null),
+      ...allDates,
+    ]
+
+    const maxVal = Math.max(...allDates.map((d) => dailyMap.get(d) || 0), 0.01)
+    const numWeeks = Math.ceil(padded.length / 7)
+
+    // Build grid: grid[weekday][weekIndex]
+    const g: (({ date: string; cost: number; ratio: number } | null))[][] = Array.from(
+      { length: 7 },
+      () => Array.from({ length: numWeeks }, () => null),
+    )
+
+    for (let i = 0; i < padded.length; i++) {
+      const week = Math.floor(i / 7)
+      const day = i % 7
+      const date = padded[i]
+      if (date) {
+        const cost = dailyMap.get(date) || 0
+        g[day][week] = { date, cost, ratio: cost / maxVal }
+      }
+    }
+
+    // Month labels at week boundaries
+    const labels: { label: string; week: number }[] = []
+    let lastMonth = ''
+    for (let i = 0; i < padded.length; i++) {
+      const date = padded[i]
+      if (!date) continue
+      const month = getMonthLabel(date)
+      if (month !== lastMonth) {
+        labels.push({ label: month, week: Math.floor(i / 7) })
+        lastMonth = month
+      }
+    }
+
+    // Stats
+    const costs = allDates.map((d) => dailyMap.get(d) || 0)
+    const total = costs.reduce((a, b) => a + b, 0)
+    const activeDays = costs.filter((c) => c > 0).length
+    const peakDay = allDates[costs.indexOf(Math.max(...costs))]
+
+    return {
+      grid: g,
+      maxCost: maxVal,
+      weeks: numWeeks,
+      monthLabels: labels,
+      stats: { total, activeDays, totalDays: allDates.length, peakDay, peakCost: maxVal },
+    }
+  }, [data.daily])
+
+  if (!stats) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Cost Heatmap</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground">No data available yet.</p>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Stats row */}
+      <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Total Spend</CardDescription>
+            <CardTitle className="text-2xl">{formatCost(stats.total)}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Active Days</CardDescription>
+            <CardTitle className="text-2xl">
+              {stats.activeDays} / {stats.totalDays}
+            </CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Peak Day</CardDescription>
+            <CardTitle className="text-2xl">{stats.peakDay}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardDescription>Peak Cost</CardDescription>
+            <CardTitle className="text-2xl">{formatCost(stats.peakCost)}</CardTitle>
+          </CardHeader>
+        </Card>
+      </div>
+
+      {/* Heatmap */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Daily Cost Heatmap</CardTitle>
+          <CardDescription>
+            Each cell represents one day. Darker cells = higher spending.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="overflow-x-auto">
+            {/* Month labels */}
+            <div className="mb-1 flex" style={{ paddingLeft: '2rem' }}>
+              {monthLabels.map((m, i) => (
+                <span
+                  key={i}
+                  className="text-xs text-muted-foreground"
+                  style={{
+                    position: 'relative',
+                    left: `${m.week * 14}px`,
+                    marginRight: i < monthLabels.length - 1 ? 0 : undefined,
+                  }}
+                >
+                  {m.label}
+                </span>
+              ))}
+            </div>
+            {/* Grid */}
+            <div className="flex gap-0.5">
+              {/* Weekday labels */}
+              <div className="flex flex-col gap-0.5 pr-1">
+                {WEEKDAYS.map((d, i) => (
+                  <span
+                    key={d}
+                    className="flex h-3 w-6 items-center text-[10px] text-muted-foreground"
+                  >
+                    {i % 2 === 1 ? d : ''}
+                  </span>
+                ))}
+              </div>
+              {/* Weeks */}
+              {Array.from({ length: weeks }, (_, weekIdx) => (
+                <div key={weekIdx} className="flex flex-col gap-0.5">
+                  {Array.from({ length: 7 }, (_, dayIdx) => {
+                    const cell = grid[dayIdx]?.[weekIdx]
+                    if (!cell) {
+                      return <div key={dayIdx} className="h-3 w-3 rounded-sm" />
+                    }
+                    return (
+                      <Tooltip key={dayIdx}>
+                        <TooltipTrigger render={<div className={`h-3 w-3 rounded-sm ${intensityClass(cell.ratio)} transition-colors hover:ring-1 hover:ring-foreground`} />}>
+                        </TooltipTrigger>
+                        <TooltipContent>
+                          <p className="text-xs font-medium">{cell.date}</p>
+                          <p className="text-xs text-muted-foreground">{formatCost(cell.cost)}</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    )
+                  })}
+                </div>
+              ))}
+            </div>
+            {/* Legend */}
+            <div className="mt-3 flex items-center gap-1 text-xs text-muted-foreground">
+              <span>Less</span>
+              <div className="h-3 w-3 rounded-sm bg-muted" />
+              <div className="h-3 w-3 rounded-sm bg-chart-3/30" />
+              <div className="h-3 w-3 rounded-sm bg-chart-3/50" />
+              <div className="h-3 w-3 rounded-sm bg-chart-3/70" />
+              <div className="h-3 w-3 rounded-sm bg-chart-3" />
+              <span>More</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}