agentfit 0.1.0

package/components/screenshots-analysis.tsx

@@ -0,0 +1,359 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from '@/components/ui/chart'
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
+import { Badge } from '@/components/ui/badge'
+import { formatCost, formatNumber } from '@/lib/format'
+import {
+  Camera,
+  Zap,
+  Clock,
+  TrendingUp,
+  Image as ImageIcon,
+} from 'lucide-react'
+
+interface ImageAnalysis {
+  overview: {
+    totalImages: number
+    sessionsWithImages: number
+    totalSessions: number
+    percentWithImages: number
+    totalSizeMB: number
+    avgSizeKB: number
+    byMediaType: Record<string, number>
+  }
+  byProject: { name: string; count: number }[]
+  byHour: { hour: number; count: number }[]
+  byDate: { date: string; count: number }[]
+  comparison: {
+    withImages: { sessions: number; avgMessages: number; avgCost: number; avgDuration: number; avgTools: number }
+    withoutImages: { sessions: number; avgMessages: number; avgCost: number; avgDuration: number; avgTools: number }
+  }
+  screenshotFrequency: {
+    totalGaps: number
+    medianMinutes: number
+    meanMinutes: number
+    rapidFireCount: number
+    rapidFirePercent: number
+    under5Count: number
+    under5Percent: number
+  }
+  topSessions: {
+    sessionId: string
+    imageCount: number
+    project: string
+    messages: number
+    cost: number
+    date: string
+  }[]
+  recentImages: {
+    filename: string
+    sessionId: string
+    timestamp: string
+    sizeBytes: number
+    project: string
+  }[]
+}
+
+const projectConfig = {
+  count: { label: 'Images', color: 'var(--chart-3)' },
+} satisfies ChartConfig
+
+const hourConfig = {
+  count: { label: 'Images', color: 'var(--chart-1)' },
+} satisfies ChartConfig
+
+const dateConfig = {
+  count: { label: 'Images', color: 'var(--chart-8)' },
+} satisfies ChartConfig
+
+const comparisonConfig = {
+  withImages: { label: 'With Images', color: 'var(--chart-1)' },
+  withoutImages: { label: 'Text Only', color: 'var(--chart-4)' },
+} satisfies ChartConfig
+
+export function ScreenshotsAnalysis() {
+  const [data, setData] = useState<ImageAnalysis | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    fetch('/api/images-analysis')
+      .then((r) => r.json())
+      .then((d) => { setData(d); setLoading(false) })
+      .catch(() => setLoading(false))
+  }, [])
+
+  if (loading) return <div className="text-muted-foreground">Loading image analysis...</div>
+  if (!data) return <div className="text-muted-foreground">No image data available</div>
+
+  const { overview, comparison, screenshotFrequency } = data
+
+  const costMultiplier = comparison.withoutImages.avgCost > 0
+    ? (comparison.withImages.avgCost / comparison.withoutImages.avgCost).toFixed(1)
+    : '?'
+  const msgMultiplier = comparison.withoutImages.avgMessages > 0
+    ? (comparison.withImages.avgMessages / comparison.withoutImages.avgMessages).toFixed(1)
+    : '?'
+
+  const comparisonData = [
+    {
+      metric: 'Avg Cost',
+      withImages: comparison.withImages.avgCost,
+      withoutImages: comparison.withoutImages.avgCost,
+    },
+    {
+      metric: 'Avg Messages',
+      withImages: comparison.withImages.avgMessages,
+      withoutImages: comparison.withoutImages.avgMessages,
+    },
+    {
+      metric: 'Avg Tools',
+      withImages: comparison.withImages.avgTools,
+      withoutImages: comparison.withoutImages.avgTools,
+    },
+  ]
+
+  return (
+    <div className="space-y-6">
+      {/* Hero insight */}
+      <Card className="border-chart-1/30 bg-chart-1/5">
+        <CardContent className="pt-6">
+          <div className="flex items-start gap-4">
+            <Camera className="h-8 w-8 text-chart-1 mt-1 shrink-0" />
+            <div>
+              <h2 className="text-lg font-semibold mb-1">Sessions with Images Cost {costMultiplier}x More</h2>
+              <p className="text-sm text-muted-foreground">
+                Sessions where you shared images averaged <strong>{formatCost(comparison.withImages.avgCost)}</strong> vs{' '}
+                <strong>{formatCost(comparison.withoutImages.avgCost)}</strong> for text-only sessions.
+                They also had <strong>{msgMultiplier}x</strong> more messages and{' '}
+                <strong>{Math.round(comparison.withImages.avgTools / Math.max(1, comparison.withoutImages.avgTools))}x</strong> more tool calls.
+                Images signal complex visual work — UI debugging, design review, and iterative refinement.
+              </p>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Stat cards */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-5">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Total Images</CardTitle>
+            <ImageIcon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{formatNumber(overview.totalImages)}</div>
+            <p className="text-xs text-muted-foreground">{overview.totalSizeMB} MB on disk</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Sessions with Images</CardTitle>
+            <Camera className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{overview.percentWithImages}%</div>
+            <p className="text-xs text-muted-foreground">{overview.sessionsWithImages} of {overview.totalSessions}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Avg Size</CardTitle>
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{overview.avgSizeKB} KB</div>
+            <p className="text-xs text-muted-foreground">{overview.byMediaType['image/png'] || 0} PNG, {overview.byMediaType['image/jpeg'] || 0} JPEG</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Rapid Fire</CardTitle>
+            <Zap className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{screenshotFrequency.rapidFirePercent}%</div>
+            <p className="text-xs text-muted-foreground">{screenshotFrequency.rapidFireCount} sent &lt;2 min apart</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">Median Gap</CardTitle>
+            <Clock className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{screenshotFrequency.medianMinutes} min</div>
+            <p className="text-xs text-muted-foreground">Between consecutive images</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Comparison chart + By hour */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Image vs Text-Only Sessions</CardTitle>
+            <CardDescription>Average metrics comparison</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={comparisonConfig} className="min-h-[300px] w-full">
+              <BarChart data={comparisonData} accessibilityLayer>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="metric" tickLine={false} axisLine={false} />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Bar dataKey="withImages" fill="var(--color-withImages)" radius={[4, 4, 0, 0]} />
+                <Bar dataKey="withoutImages" fill="var(--color-withoutImages)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Images by Hour</CardTitle>
+            <CardDescription>When do you share images?</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={hourConfig} className="min-h-[300px] w-full">
+              <BarChart data={data.byHour} accessibilityLayer>
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="hour"
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(h) => `${h}:00`}
+                />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip
+                  content={
+                    <ChartTooltipContent
+                      labelFormatter={(h) => `${h}:00 - ${h}:59`}
+                    />
+                  }
+                />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Daily timeline + By project */}
+      <div className="grid gap-4 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Daily Image Activity</CardTitle>
+            <CardDescription>Images shared per day</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={dateConfig} className="min-h-[300px] w-full">
+              <BarChart data={data.byDate} accessibilityLayer>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} />
+                <YAxis tickLine={false} axisLine={false} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[4, 4, 0, 0]} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Images by Project</CardTitle>
+            <CardDescription>Which projects need the most visual feedback?</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={projectConfig} className="min-h-[300px] w-full">
+              <BarChart data={data.byProject} layout="vertical" accessibilityLayer margin={{ left: 8 }}>
+                <XAxis type="number" tickLine={false} axisLine={false} />
+                <YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={80} />
+                <ChartTooltip content={<ChartTooltipContent />} />
+                <Bar dataKey="count" fill="var(--color-count)" radius={[0, 4, 4, 0]} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Most image-heavy sessions */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Most Image-Heavy Sessions</CardTitle>
+          <CardDescription>Your biggest visual collaboration marathons</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-5">
+            {data.topSessions.map((s, i) => (
+              <div key={s.sessionId} className="rounded-lg border p-3 space-y-1">
+                <div className="flex items-center justify-between">
+                  <Badge variant={i < 3 ? 'default' : 'secondary'} className="text-xs">
+                    #{i + 1}
+                  </Badge>
+                  <span className="text-xs text-muted-foreground">{s.date}</span>
+                </div>
+                <div className="text-2xl font-bold">{s.imageCount}</div>
+                <div className="text-xs text-muted-foreground">images</div>
+                <div className="text-xs">
+                  <span className="text-muted-foreground">{s.project}</span>
+                  {' · '}{formatCost(s.cost)}{' · '}{formatNumber(s.messages)} msgs
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Recent images gallery */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Recent Images</CardTitle>
+          <CardDescription>Latest images from your sessions</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="columns-1 gap-4 sm:columns-2 lg:columns-3">
+            {data.recentImages.map((img) => (
+              <div
+                key={img.filename}
+                className="group relative mb-4 break-inside-avoid overflow-hidden rounded-xl border bg-card shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
+              >
+                <div className="relative">
+                  <img
+                    src={`/api/images/${img.filename}`}
+                    alt={`Image from ${img.project}`}
+                    className="w-full object-cover object-top"
+                    loading="lazy"
+                  />
+                  {/* Hover overlay */}
+                  <div className="absolute inset-0 bg-black/0 transition-colors duration-300 group-hover:bg-black/5" />
+                  {/* Project badge — always visible */}
+                  <div className="absolute top-2.5 left-2.5">
+                    <span className="inline-flex items-center rounded-md bg-black/60 px-2 py-0.5 text-[11px] font-medium text-white backdrop-blur-sm">
+                      {img.project}
+                    </span>
+                  </div>
+                </div>
+                {/* Metadata footer */}
+                <div className="flex items-center justify-between px-3 py-2.5 text-[11px] text-muted-foreground">
+                  <span>{new Date(img.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
+                  <span>{Math.round(img.sizeBytes / 1024)} KB</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/sessions-table.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Badge } from '@/components/ui/badge'
+import { PaginationControls } from '@/components/pagination-controls'
+import { usePagination } from '@/hooks/use-pagination'
+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 projects = [...new Set(sessions.map((s) => s.project))].sort()
+  const filtered =
+    projectFilter === 'all' ? sessions : sessions.filter((s) => s.project === projectFilter)
+
+  const pagination = usePagination(filtered, 20)
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <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>
+      </CardHeader>
+      <CardContent>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Date</TableHead>
+              <TableHead>Project</TableHead>
+              <TableHead>Model</TableHead>
+              <TableHead className="text-right">Messages</TableHead>
+              <TableHead className="text-right">Tokens</TableHead>
+              <TableHead className="text-right">Cost</TableHead>
+              <TableHead className="text-right">Duration</TableHead>
+              <TableHead className="text-right">Tools</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pagination.pageItems.map((s) => (
+              <TableRow key={s.sessionId}>
+                <TableCell className="whitespace-nowrap text-sm">
+                  {s.startTime ? new Date(s.startTime).toLocaleDateString() : 'N/A'}
+                </TableCell>
+                <TableCell>
+                  <Badge variant="secondary">{s.project}</Badge>
+                </TableCell>
+                <TableCell className="text-xs text-muted-foreground">{s.model}</TableCell>
+                <TableCell className="text-right">
+                  {formatNumber(s.userMessages)} / {formatNumber(s.assistantMessages)}
+                </TableCell>
+                <TableCell className="text-right">{formatTokens(s.totalTokens)}</TableCell>
+                <TableCell className="text-right">{formatCost(s.costUSD)}</TableCell>
+                <TableCell className="text-right">{formatDuration(s.durationMinutes)}</TableCell>
+                <TableCell className="text-right">{formatNumber(s.toolCallsTotal)}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+        </Table>
+        <PaginationControls pagination={pagination} noun="sessions" />
+      </CardContent>
+    </Card>
+  )
+}

package/components/theme-provider.tsx

@@ -0,0 +1,71 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider, useTheme } from "next-themes"
+
+function ThemeProvider({
+  children,
+  ...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+      {...props}
+    >
+      <ThemeHotkey />
+      {children}
+    </NextThemesProvider>
+  )
+}
+
+function isTypingTarget(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false
+  }
+
+  return (
+    target.isContentEditable ||
+    target.tagName === "INPUT" ||
+    target.tagName === "TEXTAREA" ||
+    target.tagName === "SELECT"
+  )
+}
+
+function ThemeHotkey() {
+  const { resolvedTheme, setTheme } = useTheme()
+
+  React.useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.defaultPrevented || event.repeat) {
+        return
+      }
+
+      if (event.metaKey || event.ctrlKey || event.altKey) {
+        return
+      }
+
+      if (event.key.toLowerCase() !== "d") {
+        return
+      }
+
+      if (isTypingTarget(event.target)) {
+        return
+      }
+
+      setTheme(resolvedTheme === "dark" ? "light" : "dark")
+    }
+
+    window.addEventListener("keydown", onKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown)
+    }
+  }, [resolvedTheme, setTheme])
+
+  return null
+}
+
+export { ThemeProvider }