agentfit 0.1.0 → 0.1.1

package/components/report-view.tsx

@@ -0,0 +1,307 @@
+'use client'
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import {
+  Table, TableBody, TableCell, TableHead, TableHeader, TableRow,
+} from '@/components/ui/table'
+import {
+  Trophy, AlertTriangle, Lightbulb, Brain, Flame, Wrench, Clock,
+  MessageSquare, FolderOpen, LayoutList, DollarSign, Terminal,
+  Zap, Search, Ban, Calendar,
+} from 'lucide-react'
+import { formatCost, formatDuration, formatNumber, formatTokens } from '@/lib/format'
+import type { ReportContent } from '@/lib/report'
+import type { CoachInsight, InsightSeverity, InsightCategory } from '@/lib/coach'
+
+// ─── Score Ring ──────────────────────────────────────────────────────
+
+function ScoreRing({ score, size = 140 }: { score: number; size?: number }) {
+  const radius = (size - 14) / 2
+  const circumference = 2 * Math.PI * radius
+  const offset = circumference - (score / 100) * circumference
+  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="9" />
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke={getColor(score)} strokeWidth="9"
+        strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={offset}
+        transform={`rotate(-90 ${size / 2} ${size / 2})`} />
+      <text x={size / 2} y={size / 2 - 4} textAnchor="middle" dominantBaseline="middle" className="fill-foreground 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>
+  )
+}
+
+// ─── Insight Card ────────────────────────────────────────────────────
+
+const SEVERITY_BORDER: Record<InsightSeverity, string> = {
+  achievement: 'border-l-chart-2',
+  warning: 'border-l-chart-5',
+  tip: 'border-l-chart-1',
+}
+
+const SEVERITY_ICON: Record<InsightSeverity, typeof Trophy> = {
+  achievement: Trophy,
+  warning: AlertTriangle,
+  tip: Lightbulb,
+}
+
+function InsightCard({ insight }: { insight: CoachInsight }) {
+  const Icon = SEVERITY_ICON[insight.severity]
+  return (
+    <div className={`rounded-lg border border-l-4 ${SEVERITY_BORDER[insight.severity]} p-4`}>
+      <div className="flex items-start gap-3">
+        <Icon className="h-4 w-4 shrink-0 mt-0.5 text-muted-foreground" />
+        <div className="space-y-1">
+          <div className="text-sm font-semibold">{insight.title}</div>
+          <p className="text-xs text-muted-foreground">{insight.description}</p>
+          {insight.recommendation && (
+            <div className="rounded-md bg-muted/50 p-2 text-xs mt-2">{insight.recommendation}</div>
+          )}
+        </div>
+        {insight.metric && (
+          <span className="shrink-0 rounded-md bg-muted px-2 py-0.5 text-xs font-mono">{insight.metric}</span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ─── Main Report View ────────────────────────────────────────────────
+
+export function ReportView({ content }: { content: ReportContent }) {
+  const g = content.atAGlance
+
+  return (
+    <div className="space-y-6 max-w-4xl">
+      {/* At a Glance */}
+      <Card>
+        <CardHeader>
+          <CardTitle>At a Glance</CardTitle>
+          <CardDescription>{g.dateRange.from} to {g.dateRange.to}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center gap-8">
+            <ScoreRing score={g.fitnessScore} />
+            <div className="flex-1">
+              <div className="text-lg font-semibold mb-1">Fitness: {g.scoreLabel}</div>
+              <div className="flex items-center gap-2 text-sm text-muted-foreground mb-3">
+                <Flame className="h-3.5 w-3.5" />
+                {g.currentStreak > 0 ? `${g.currentStreak}d streak` : 'No active streak'}
+                {g.longestStreak > 0 && <span>(best: {g.longestStreak}d)</span>}
+              </div>
+              <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 text-sm">
+                <div><span className="text-muted-foreground">Sessions</span><div className="font-semibold">{formatNumber(g.totalSessions)}</div></div>
+                <div><span className="text-muted-foreground">Projects</span><div className="font-semibold">{formatNumber(g.totalProjects)}</div></div>
+                <div><span className="text-muted-foreground">Messages</span><div className="font-semibold">{formatNumber(g.totalMessages)}</div></div>
+                <div><span className="text-muted-foreground">Total Time</span><div className="font-semibold">{formatDuration(g.totalDurationMinutes)}</div></div>
+                <div><span className="text-muted-foreground">Tool Calls</span><div className="font-semibold">{formatNumber(g.totalToolCalls)}</div></div>
+                <div><span className="text-muted-foreground">Total Cost</span><div className="font-semibold">{formatCost(g.totalCostUSD)}</div></div>
+                <div><span className="text-muted-foreground">API Errors</span><div className="font-semibold">{formatNumber(g.totalApiErrors)}</div></div>
+                <div><span className="text-muted-foreground">Interruptions</span><div className="font-semibold">{formatNumber(g.totalUserInterruptions)}</div></div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Project Areas */}
+      {content.projectAreas.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <FolderOpen className="h-5 w-5 text-muted-foreground" />
+              <div>
+                <CardTitle>What You Work On</CardTitle>
+                <CardDescription>Top projects by session count</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Project</TableHead>
+                  <TableHead className="text-right">Sessions</TableHead>
+                  <TableHead className="text-right">Messages</TableHead>
+                  <TableHead className="text-right">Duration</TableHead>
+                  <TableHead>Top Tools</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {content.projectAreas.map(p => (
+                  <TableRow key={p.name}>
+                    <TableCell className="font-medium">{p.name}</TableCell>
+                    <TableCell className="text-right">{p.sessions}</TableCell>
+                    <TableCell className="text-right">{formatNumber(p.totalMessages)}</TableCell>
+                    <TableCell className="text-right">{formatDuration(p.totalDurationMinutes)}</TableCell>
+                    <TableCell className="text-xs text-muted-foreground">
+                      {p.topTools.map(([name, count]) => `${name} (${count})`).join(', ')}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Interaction Style */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Brain className="h-5 w-5 text-muted-foreground" />
+            <div>
+              <CardTitle>How You Use Your Agent</CardTitle>
+              <CardDescription>Interaction patterns and coding style</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-start gap-6 mb-4">
+            <div>
+              <div className="text-3xl font-bold tracking-wider text-primary">{content.interactionStyle.mbtiType}</div>
+              <div className="text-xs text-muted-foreground mt-1">{content.interactionStyle.mbtiDescription}</div>
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-4 sm:grid-cols-4 text-sm">
+            <div>
+              <span className="text-muted-foreground">Avg Messages/Session</span>
+              <div className="font-semibold">{Math.round(content.interactionStyle.avgMessagesPerSession)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Avg Duration</span>
+              <div className="font-semibold">{formatDuration(content.interactionStyle.avgDurationMinutes)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Read/Edit Ratio</span>
+              <div className="font-semibold">{content.interactionStyle.readEditRatio.toFixed(1)}x</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Bash Usage</span>
+              <div className="font-semibold">{Math.round(content.interactionStyle.bashRatio * 100)}%</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Subagent Calls</span>
+              <div className="font-semibold">{formatNumber(content.interactionStyle.agentCallsTotal)}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Peak Hour</span>
+              <div className="font-semibold">{content.interactionStyle.peakHour}:00</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Most Active Day</span>
+              <div className="font-semibold">{content.interactionStyle.mostActiveDay}</div>
+            </div>
+            <div>
+              <span className="text-muted-foreground">Avg Cost/Session</span>
+              <div className="font-semibold">{formatCost(content.interactionStyle.avgCostPerSession)}</div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* What Works */}
+      {content.whatWorks.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <Trophy className="h-5 w-5 text-chart-2" />
+              <div>
+                <CardTitle>What's Working</CardTitle>
+                <CardDescription>Patterns and habits that are paying off</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {content.whatWorks.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Friction Analysis */}
+      {content.frictionAnalysis.length > 0 && (
+        <Card>
+          <CardHeader>
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-5 w-5 text-chart-5" />
+              <div>
+                <CardTitle>Where Things Go Wrong</CardTitle>
+                <CardDescription>Friction points that slow you down</CardDescription>
+              </div>
+            </div>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {content.frictionAnalysis.map(i => <InsightCard key={i.id} insight={i} />)}
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Suggestions */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center gap-2">
+            <Lightbulb className="h-5 w-5 text-chart-1" />
+            <div>
+              <CardTitle>Suggestions</CardTitle>
+              <CardDescription>Actionable ways to improve your workflow</CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          {/* CLAUDE.md rules */}
+          {content.suggestions.claudeMdRules.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Terminal className="h-4 w-4" /> Add to CLAUDE.md
+              </h4>
+              <div className="space-y-2">
+                {content.suggestions.claudeMdRules.map((rule, i) => (
+                  <div key={i} className="rounded-md bg-muted p-3 text-xs font-mono whitespace-pre-wrap">{rule}</div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Coach tips */}
+          {content.suggestions.coachTips.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Zap className="h-4 w-4" /> Workflow Tips
+              </h4>
+              <div className="space-y-3">
+                {content.suggestions.coachTips.map(i => <InsightCard key={i.id} insight={i} />)}
+              </div>
+            </div>
+          )}
+
+          {/* Command tips */}
+          {content.suggestions.commandTips.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-2 flex items-center gap-1.5">
+                <Search className="h-4 w-4" /> Commands to Discover
+              </h4>
+              <div className="space-y-2">
+                {content.suggestions.commandTips.map(i => (
+                  <div key={i.id} className="rounded-lg border p-3">
+                    <div className="text-sm font-semibold">{i.title}</div>
+                    <p className="text-xs text-muted-foreground mt-0.5">{i.description}</p>
+                    {i.recommendation && (
+                      <div className="rounded-md bg-muted/50 p-2 text-xs mt-2">{i.recommendation}</div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

package/components/screenshots-analysis.tsx

@@ -12,6 +12,8 @@ import {
 } from '@/components/ui/chart'
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts'
 import { Badge } from '@/components/ui/badge'
+import { PaginationControls } from '@/components/pagination-controls'
+import { usePagination } from '@/hooks/use-pagination'
 import { formatCost, formatNumber } from '@/lib/format'
 import {
   Camera,
@@ -21,6 +23,14 @@ import {
   Image as ImageIcon,
 } from 'lucide-react'
 
+interface ImageInfo {
+  filename: string
+  sessionId: string
+  timestamp: string
+  sizeBytes: number
+  project: string
+}
+
 interface ImageAnalysis {
   overview: {
     totalImages: number
@@ -55,13 +65,7 @@ interface ImageAnalysis {
     cost: number
     date: string
   }[]
-  recentImages: {
-    filename: string
-    sessionId: string
-    timestamp: string
-    sizeBytes: number
-    project: string
-  }[]
+  allImages: ImageInfo[]
 }
 
 const projectConfig = {
@@ -315,45 +319,46 @@ export function ScreenshotsAnalysis() {
         </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>
+      {/* All images grid with pagination */}
+      <ImageGallery images={data.allImages} />
     </div>
   )
 }
+
+function ImageGallery({ images }: { images: ImageInfo[] }) {
+  const pagination = usePagination(images, 16)
+
+  if (images.length === 0) return null
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>All Images</CardTitle>
+        <CardDescription>{images.length} images across all sessions</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
+          {pagination.pageItems.map((img) => (
+            <div
+              key={img.filename}
+              className="group relative overflow-hidden rounded-xl border bg-card shadow-sm transition-all duration-300 hover:shadow-lg hover:-translate-y-0.5"
+            >
+              <img
+                src={`/api/images/${img.filename}`}
+                alt={`Image from ${img.project}`}
+                className="aspect-video w-full object-cover object-top"
+                loading="lazy"
+              />
+              <div className="flex items-center justify-between px-3 py-2 text-[11px] text-muted-foreground">
+                <span className="font-medium text-foreground">{img.project}</span>
+                <span>{new Date(img.timestamp).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}</span>
+                <span>{Math.round(img.sizeBytes / 1024)} KB</span>
+              </div>
+            </div>
+          ))}
+        </div>
+        <PaginationControls pagination={pagination} noun="images" />
+      </CardContent>
+    </Card>
+  )
+}

package/components/session-chatlog.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { User, Brain, Wrench, CheckCircle, XCircle, Settings, ChevronDown, ChevronRight, Image } from 'lucide-react'
+import type { ChatMessage } from '@/lib/session-detail'
+
+const ROLE_CONFIG: Record<string, { color: string; bg: string; icon: typeof User; label: string }> = {
+  user:        { color: '#3b82f6', bg: '#eff6ff', icon: User, label: 'User Input' },
+  assistant:   { color: '#8b5cf6', bg: '#faf5ff', icon: Brain, label: 'Assistant' },
+  tool_result: { color: '#22c55e', bg: '#f0fdf4', icon: CheckCircle, label: 'Tool Result' },
+  system:      { color: '#94a3b8', bg: '#f8fafc', icon: Settings, label: 'System' },
+}
+
+function ChatEntry({ message, index }: { message: ChatMessage; index: number }) {
+  const [expanded, setExpanded] = useState(false)
+  const config = ROLE_CONFIG[message.role] || ROLE_CONFIG.system
+  const Icon = message.toolName ? Wrench : (message.isThinking ? Brain : config.icon)
+  const isLong = message.content.length > 150
+
+  let label = config.label
+  if (message.toolName) label = message.toolName
+  else if (message.isThinking) label = 'Thinking'
+  else if (message.role === 'tool_result' && message.content.includes('error')) {
+    label = 'Error'
+  }
+
+  return (
+    <div
+      className="flex gap-3 py-2"
+      style={{ borderLeft: `3px solid ${config.color}`, paddingLeft: 12 }}
+    >
+      <div className="shrink-0 mt-0.5">
+        <div
+          className="flex h-6 w-6 items-center justify-center rounded-full"
+          style={{ backgroundColor: config.bg }}
+        >
+          <Icon className="h-3.5 w-3.5" style={{ color: config.color }} />
+        </div>
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center gap-2 mb-0.5">
+          <span className="text-xs font-semibold" style={{ color: config.color }}>
+            #{message.stepIndex} {label}
+          </span>
+          {message.isSidechain && (
+            <span className="text-[10px] bg-muted px-1.5 py-0.5 rounded">sub-agent</span>
+          )}
+          {message.images && message.images > 0 && (
+            <span className="flex items-center gap-0.5 text-[10px] text-muted-foreground">
+              <Image className="h-3 w-3" /> {message.images}
+            </span>
+          )}
+          <span className="text-[10px] text-muted-foreground">
+            {message.timestamp ? new Date(message.timestamp).toLocaleTimeString() : ''}
+          </span>
+        </div>
+        <div
+          className={`text-xs leading-relaxed text-foreground/80 ${
+            !expanded && isLong ? 'line-clamp-3' : ''
+          }`}
+          style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}
+        >
+          {message.content}
+        </div>
+        {isLong && (
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-0.5 mt-1 text-[11px] text-primary hover:underline"
+          >
+            {expanded ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+            {expanded ? 'Show less' : 'Show more'}
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function SessionChatLog({ messages }: { messages: ChatMessage[] }) {
+  const [filter, setFilter] = useState<string>('all')
+
+  const filtered = filter === 'all'
+    ? messages
+    : messages.filter(m => m.role === filter || (filter === 'tool' && (m.toolName || m.role === 'tool_result')))
+
+  return (
+    <div className="space-y-2">
+      {/* Filter buttons */}
+      <div className="flex gap-1.5 pb-2 border-b">
+        {[
+          { key: 'all', label: 'All', count: messages.length },
+          { key: 'user', label: 'User', count: messages.filter(m => m.role === 'user').length },
+          { key: 'assistant', label: 'Assistant', count: messages.filter(m => m.role === 'assistant' && !m.toolName).length },
+          { key: 'tool', label: 'Tools', count: messages.filter(m => m.toolName || m.role === 'tool_result').length },
+        ].map(f => (
+          <button
+            key={f.key}
+            onClick={() => setFilter(f.key)}
+            className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${
+              filter === f.key
+                ? 'bg-primary text-primary-foreground'
+                : 'bg-muted text-muted-foreground hover:text-foreground'
+            }`}
+          >
+            {f.label} ({f.count})
+          </button>
+        ))}
+      </div>
+
+      {/* Messages */}
+      <div className="space-y-0.5 max-h-[600px] overflow-y-auto pr-2">
+        {filtered.map((msg, i) => (
+          <ChatEntry key={msg.id} message={msg} index={i} />
+        ))}
+      </div>
+
+      {messages.length > 200 && (
+        <div className="text-xs text-muted-foreground text-center pt-2">
+          Showing {filtered.length} of {messages.length} messages
+        </div>
+      )}
+    </div>
+  )
+}